HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Anatol MAIA | Entreprise Innovante</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollreveal/4.0.0/scrollreveal.min.js"></script>
</head>
<body>
    <header>
        <nav>
            <div class="logo">Anatol MAIA</div>
            <ul class="menu">
                <li><a href="#home">Accueil</a></li>
                <li><a href="#about">À propos</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
        <div class="hero-section">
            <h1>Bienvenue chez Anatol MAIA</h1>
            <p>Nous apportons des solutions innovantes pour votre avenir</p>
            <a href="#about" class="btn-primary">En savoir plus</a>
        </div>
    </header>

<section id="about">
        <div class="container">
            <h2>À propos de nous</h2>
            <p>Chez Anatol MAIA, nous nous spécialisons dans l'innovation et la transformation numérique. Avec des années d'expérience dans l'industrie, notre mission est de vous offrir des solutions modernes et sur mesure pour répondre aux besoins de votre entreprise.</p>
            <img src="https://scontent-mrs2-2.cdninstagram.com/v/t51.2885-19/317572666_3415886288682978_6362326839224482933_n.jpg" alt="Entreprise" class="about-image">

</div>
    </section>

<section id="services">
        <div class="container">
            <h2>Nos Services</h2>
            <div class="services-grid">
                <div class="service-item">
                    <h3>Consultation Stratégique</h3>
                    <p>Des conseils d'experts pour élaborer des stratégies adaptées à vos défis uniques.</p>
                </div>
                <div class="service-item">
                    <h3>Développement de Solutions</h3>
                    <p>Des solutions personnalisées, de la conception à la mise en œuvre.</p>
                </div>
                <div class="service-item">
                    <h3>Formation & Support</h3>
                    <p>Formation continue et assistance technique pour garantir votre succès.</p>
                </div>
            </div>
        </div>
    </section>

<section id="contact">
        <div class="container">
            <h2>Contactez-nous</h2>
            <form>
                <input type="text" placeholder="Votre Nom" required>
                <input type="email" placeholder="Votre Email" required>
                <textarea placeholder="Votre Message" required></textarea>
                <button type="submit" class="btn-primary">Envoyer</button>
            </form>
        </div>
    </section>

<footer>
        <p>&copy; 2024 Anatol MAIA. Tous droits réservés.</p>
    </footer>

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    background-color: #f4f4f9;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

h1, h2, h3 {
    font-weight: 700;
}

/* Header */
header {
    background-image: url('https://via.placeholder.com/1600x800');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 20px;
    text-align: center;
    position: relative;
}

header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 20px;
    width: 100%;
    padding: 0 20px;
}

nav .logo {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

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

nav ul li a {
    color: white;
    font-weight: 500;
    font-size: 18px;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #3498db;
}

.hero-section {
    position: relative;
    z-index: 1;
}

.hero-section h1 {
    font-size: 48px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.hero-section p {
    font-size: 18px;
    margin-bottom: 20px;
}

.btn-primary {
    background-color: #3498db;
    padding: 12px 24px;
    color: white;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #2980b9;
}

/* About Section */
#about {
    background-color: white;
    padding: 60px 20px;
    text-align: center;
}

#about p {
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.about-image {
    margin-top: 30px;
    width: 100%;
    max-width: 800px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Services Section */
#services {
    background-color: #ecf0f1;
    padding: 80px 20px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-item {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
}

.service-item h3 {
    color: #3498db;
    margin-bottom: 15px;
}

/* Contact Section */
#contact {
    padding: 60px 20px;
    text-align: center;
    background-color: white;
}

form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

form input, form textarea {
    padding: 12px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 5px;
    transition: border-color 0.3s;
}

form input:focus, form textarea:focus {
    border-color: #3498db;
}

form button {
    padding: 12px;
    font-size: 16px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

form button:hover {
    background-color: #2980b9;
}

/* Footer */
footer {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
}

footer p {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);