Plans Bot (page d'accueil)

2829 robustbug755

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

15 December 2025

Bouton HTML léger avec icône et texte

14 September 2024

Curseur de survol

22 November 2025

Effet de survol du bouton en verre liquide CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Website</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo"></div>
            <ul class="nav-links">

</ul>
            <button id="themeToggle"><i class="fas fa-adjust"></i></button>
        </nav>
    </header>

<section class="hero">
        <div class="hero-content fade-in">
            <h1>Welcome to Our Website</h1>
            <p>Discover our services and offerings.</p>
            <button id="learnMoreButton" class="button-3d">Learn More</button>
        </div>
    </section>

<section class="plans">
        <h2>Our Plans</h2>
        <div class="plan-cards">
            <div class="card fade-in">
                <i class="fas fa-star"></i>
                <h3>Basic Plan</h3>
                <p>Plano Basico Teste.</p>
                <a href="https://www.exemplo.com" target="_blank">
                    <button>Saiba Mais</button>
                </a>

</div>
            <div class="card fade-in">
                <i class="fas fa-rocket"></i>
                <h3>Pro Plan</h3>
                <p>Plano Pro advenced.</p>
                <a href="https://www.exemplo.com" target="_blank">
                <button>Saiba Mais</button>
            </a>
            </div>
            <div class="card fade-in">
                <i class="fas fa-gem"></i>
                <h3>Enterprise Plan</h3>
                <p>Todos os planos juntos etc...</p>
                <a href="https://www.exemplo.com" target="_blank">
                <button>Saiba Mais</button>
            </a>
            </div>
        </div>
    </section>
      
      <hr class="divider">

<div class="features">
        <div class="feature-card">
          <i class="fas fa-rocket"></i>
          <h4>Fast Performance</h4>
          <p>Experience blazing fast speeds with our optimized solutions.</p>
        </div>
        <div class="feature-card">
          <i class="fas fa-shield-alt"></i>
          <h4>Secure</h4>
          <p>Your data is safe with our top-notch security measures.</p>
        </div>
        <div class="feature-card">
          <i class="fas fa-cogs"></i>
          <h4>Customizable</h4>
          <p>Tailor the experience to your needs with our flexible options.</p>
        </div>
        <div class="feature-card">
          <i class="fas fa-users"></i>
          <h4>User Friendly</h4>
          <p>Enjoy an intuitive and easy-to-use interface.</p>
        </div>
        
        <div class="feature-card">
          <i class="fas fa-sync-alt"></i>
          <h4>Seamless Updates</h4>
          <p>Receive updates without any interruptions to your workflow.</p>
        </div>
        <div class="feature-card">
          <i class="fas fa-headset"></i>
          <h4>24/7 Support</h4>
          <p>Get assistance whenever you need it with our round-the-clock support.</p>
        </div>
      </div>

<section class="contact">
        <h2>Contact Us</h2>
        <a href="https://www.exemplo.com" target="_blank">
        <button class="discord-button button-3d">Join Discord</button>
        </a>
    </section>

<footer>
        <p>© 2023 Modern Website. All rights reserved.</p>
    </footer>

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f5f5f5;
    transition: background-color 0.5s ease, color 0.5s ease;

}

body.dark-mode {
    background-color: #2b2b2b;
    color: #ecf0f1;
}

.cursor {
    display: none;
}

header {
    background-color: #2c2c2c;
    padding: 20px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid #00ffcc;
    transition: border-bottom-color 0.5s ease, background-color 0.5s ease;
}

body.dark-mode header {
    border-bottom-color: #ff00ff;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo {
    font-size: 28px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    transition: text-shadow 0.5s ease;
}

body.dark-mode .logo {
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.nav-links {
    list-style: none;
    display: flex;
    justify-content: flex-start; 
    gap: 30px;
    transition: gap 0.3s ease;
}

.nav-links li {
    display: flex;
    align-items: center;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    transition: color 0.3s, transform 0.3s;
}

.nav-links li a:hover {
    color: #00ffcc;
    transform: translateY(-2px);
}

body.dark-mode .nav-links li a:hover {
    color: #ff00ff;
}

#themeToggle {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
}

#themeToggle:hover {
    transform: rotate(20deg);
}

body.dark-mode #themeToggle {
    color: #ecf0f1;
}

.hero {
    background: linear-gradient(to right, #2c2c2c, #1a1a1a);
    color: white;
    text-align: center;
    padding: 150px 20px;
    position: relative;
    overflow: hidden;
    animation: fadeIn 1.5s ease-in-out;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.button-3d {
    background-color: #2c2c2c;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 30px;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.button-3d:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .button-3d {
    background-color: #2b2b2b;
}

body.dark-mode .button-3d:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
}

.plans {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    background-color: #f0f0f0;
    transition: background-color 0.5s ease;
}

body.dark-mode .plans {
    background-color: #2b2b2b;
}

.plan-cards {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    transition: gap 2s ease;
}

.card {
    background-color: #ecf0f1;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transition: transform 1.5s ease-in-out, box-shadow 1.5s ease-in-out, background-color 1.5s ease-in-out;
    width: 300px;
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-8px) scale(1.02) rotateX(3deg) rotateY(3deg);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 0 0 15px #93f3e0, 0 0 25px #93f3e0, 0 0 35px #93f3e0;
    background-color: #e0e0e0;
}

.card button {
    margin-top: 20px;
    background-color: #272727;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) inset;
}

.card button:hover {
    background-color: #272727;
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1) inset;
}

body.dark-mode .card {
    background-color: #2b2b2b;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 0 10px hsl(300, 31%, 50%), 0 0 25px #9c539c, 0 0 35px #9c539c;
    background-color: #242424;
}

body.dark-mode .card button {
    background-color: #444;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) inset;
}

body.dark-mode .card button:hover {
    background-color: #666;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) inset;
}

.contact {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    animation: fadeIn 1.5s ease-in-out;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    transition: background-color 0.5s ease;
}

@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        gap: 15px;
    }

.plan-cards {
        flex-direction: column;
        align-items: center;
    }
}

.divider {
    border: none;
    border-top: 2px solid #ccc;
    margin: 40px 0;
    width: 80%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    transition: border-color 0.5s ease;
}

body.dark-mode .divider {
    border-top-color: #555;
}

.features {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 40px;
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #f5f5f5;
    transition: background-color 0.5s ease;
}

.feature-card {
    background-color: #ecf0f1;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    width: 250px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.feature-card i {
    font-size: 40px;
    color: #00ffcc;
    margin-bottom: 15px;
}

body.dark-mode .features {
    background-color: #2b2b2b;
}

body.dark-mode .feature-card {
    background-color: #2b2b2b;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .feature-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

body.dark-mode .feature-card i {
    color: #ff00ff;
}

JS

document.addEventListener('DOMContentLoaded', function() {
    const fadeInElements = document.querySelectorAll('.fade-in');
    fadeInElements.forEach(element => {
        element.style.opacity = 0;
        element.style.transition = 'opacity 1s ease-in-out';
        setTimeout(() => {
            element.style.opacity = 1;
        }, 100);
    });

// Adiciona efeito 3D aos botões
    const buttons3D = document.querySelectorAll('.button-3d');
    buttons3D.forEach(button => {
        button.addEventListener('mouseenter', () => {
            button.style.transform = 'translateY(-5px)';
            button.style.boxShadow = '0 8px 12px rgba(0, 0, 0, 0.3)';
        });

button.addEventListener('mouseleave', () => {
            button.style.transform = 'translateY(0)';
            button.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.2)';
        });
    });

// Alternar modo escuro
    const themeToggle = document.getElementById('themeToggle');
    themeToggle.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
    });
});

Recommandé

Bouton HTML léger avec icône et texte

Curseur de survol

Effet de survol du bouton en verre liquide CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS