Tarjeta de Planes de Anes

2,906 Anes_unk

Abrir en el editor Publica tu código

Recomendado

16 May 2026

Código fuente del juego HTML5 Idle Miner Tycoon

11 December 2024

Un código de staticcloud996

23 May 2025

Un código de creativearray554

HTML

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