Carta dei piani Anes

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

28 November 2024

Esempio HTML CSS della carta UNO

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

Carta dei piani Anes

Consigliato

Effetto carta

Carta 3D

Esempio HTML CSS della carta UNO

HTML

CSS

JS

Consigliato

Effetto carta

Carta 3D

Esempio HTML CSS della carta UNO

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS