एनेस प्लान्स कार्ड

अनुशंसित

1 April 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anes - Available Plans</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css"> 
</head>
<body>

<section class="plans">
        <h1>Plans</h1>
        <div class="plan-container">
            <div class="plan gold">
                <h2>Gold Plan</h2>
                <ul>
                    <li>CPU Core 5 <i class="fas fa-microchip"></i></li>
                    <li>12GB RAM <i class="fas fa-memory"></i></li>
                    <li>120GB SSD Storage <i class="fas fa-hdd"></i></li>
                    <li>Arbor Custom DDoS Protection <i class="fas fa-shield-alt"></i></li>
                    <li>1x IP Address (Protected) <i class="fas fa-shield-virus"></i></li>
                    <li>Windows/Linux <i class="fas fa-server"></i></li>
                </ul>
                <p class="price">$21.33 / Monthly</p>
            </div>

<div class="plan silver">
                <h2>Silver Plan</h2>
                <ul>
                    <li>CPU Core 4 <i class="fas fa-microchip"></i></li>
                    <li>8GB RAM <i class="fas fa-memory"></i></li>
                    <li>80GB SSD Storage <i class="fas fa-hdd"></i></li>
                    <li>Arbor Custom DDoS Protection <i class="fas fa-shield-alt"></i></li>
                    <li>1x IP Address (Protected) <i class="fas fa-shield-virus"></i></li>
                    <li>Windows/Linux <i class="fas fa-server"></i></li>
                </ul>
                <p class="price">$17.99 / Monthly</p>
            </div>

<div class="plan bronze">
                <h2>Bronze Plan</h2>
                <ul>
                    <li>CPU Core 4 <i class="fas fa-microchip"></i></li>
                    <li>4GB RAM <i class="fas fa-memory"></i></li>
                    <li>40GB SSD Storage <i class="fas fa-hdd"></i></li>
                    <li>Arbor Custom DDoS Protection <i class="fas fa-shield-alt"></i></li>
                    <li>1x IP Address (Protected) <i class="fas fa-shield-virus"></i></li>
                    <li>Windows/Linux <i class="fas fa-server"></i></li>
                </ul>
                <p class="price">$8.95 / Monthly</p>
            </div>
        </div>
    </section>
</body>
</html>

CSS

body {
    font-family: 'Arial', sans-serif;
    background-color: #0A1128;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

nav {
    background: linear-gradient(135deg, #000, #0A1128);
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1000;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
}

nav ul li a {
    color: #e0e0e0;
    text-decoration: none;
    padding: 10px 20px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border-radius: 5px;
    font-weight: bold;
}

nav ul li a:hover {
    background-color: #005b5b;
    transform: scale(1.1);
}

.plans {
    padding: 50px 0;
    text-align: center;
}

.plans h1 {
    font-size: 2.8rem; 
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: 2px;
}

.plan-container {
    display: flex;
    justify-content: center;
    gap: 30px; 
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.plan {
    background-color: #2b2e42;
    border: 2px solid #3b3f58;
    border-radius: 10px;
    width: 300px; 
    height: 480px; 
    padding: 30px; 
    text-align: left;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.plan:before {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    border: 1px solid #3b3f58;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.plan:hover:before {
    opacity: 1;
}

.plan:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 30px rgba(30, 80, 229, 0.8);
}

.plan h2 {
    color: #4ea3e4;
    font-size: 2rem; 
    margin-bottom: 20px; 
    border-bottom: 2px solid #4ea3e4;
    padding-bottom: 10px;
    letter-spacing: 1px;
    text-shadow: 1px 1px 5px rgba(0, 115, 230, 0.3);
}

.plan ul {
    list-style: none;
    padding: 0;
}

.plan ul li {
    margin: 15px 0; 
    font-size: 1.1rem; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plan ul li i {
    font-size: 1.5rem; 
    color: #4ea3e4;
}

.plan .price {
    font-size: 1.8rem; 
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    background: linear-gradient(90deg, #4ea3e4, #2b2e42);
    border-radius: 5px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, background 0.3s ease;
}

.plan .price:hover {
    transform: scale(1.05);
    background: linear-gradient(90deg, #2b2e42, #4ea3e4);
}

footer {
    background-color: #0A1128;
    padding: 20px 0;
    text-align: center;
}

.social-icons {
    margin-bottom: 10px;
}

.social-icons a {
    color: #4ea3e4;
    font-size: 1.5rem;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #3b8bb5;
}

footer p {
    margin: 0;
    font-size: 0.9rem;
}

एनेस प्लान्स कार्ड

अनुशंसित

कार्ड डिजाइन और पूर्णता

ग्लासमोर्फिज्म उत्पाद कार्ड

सोशल मीडिया का एनिमेटेड कार्ड

HTML

CSS

JS

अनुशंसित

कार्ड डिजाइन और पूर्णता

ग्लासमोर्फिज्म उत्पाद कार्ड

सोशल मीडिया का एनिमेटेड कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS