Anes Plans Card

Open In Editor Video Publish Your Code

<!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;
}

Anes Plans Card

Recommended

Card effect

CodePen Home Outlined Mobile Cards

CSS Cards Carousel

HTML

CSS

JS

Recommended

Card effect

CodePen Home Outlined Mobile Cards

CSS Cards Carousel

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS