Un codice di Maxi-Digital

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

8 May 2025

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebAgency | Solutions Digitales</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* Reset CSS */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

/* Variables CSS */
        :root {
            --primary-color: #2563eb;
            --secondary-color: #1e40af;
            --accent-color: #3b82f6;
            --text-color: #1f2937;
        }

/* Navigation */
        .navbar {
            position: fixed;
            width: 100%;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            transition: all 0.3s ease;
        }

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

.logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
        }

.nav-links {
            display: flex;
            gap: 2rem;
        }

.nav-links a {
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
            transition: color 0.3s ease;
        }

.nav-links a:hover {
            color: var(--primary-color);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 0 2rem;
        }

.hero-content {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeIn 1s forwards;
        }

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

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

.cta-button {
            padding: 1rem 2rem;
            background: white;
            color: var(--primary-color);
            border: none;
            border-radius: 30px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

.cta-button:hover {
            transform: translateY(-3px);
        }

/* Services Section */
        .services {
            padding: 5rem 2rem;
            background: #f8fafc;
        }

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

.service-card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

.service-card:hover {
            transform: translateY(-10px);
        }

.service-card i {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

/* Portfolio Section */
        .portfolio {
            padding: 5rem 2rem;
        }

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

.portfolio-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            aspect-ratio: 4/3;
        }

.portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

.portfolio-item:hover img {
            transform: scale(1.1);
        }

/* Responsive Design */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.services-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-content">
            <div class="logo">WebAgency</div>
            <div class="nav-links">
                <a href="#home">Accueil</a>
                <a href="#services">Services</a>
                <a href="#portfolio">Portfolio</a>
                <a href="#contact">Contact</a>
            </div>
        </div>
    </nav>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Transformez votre présence digitale</h1>
            <p>Des solutions web sur mesure pour propulser votre business</p>
            <button class="cta-button">Démarrer un projet</button>
        </div>
    </section>

<section class="services" id="services">
        <div class="services-grid">
            <div class="service-card">
                <i class="fas fa-code"></i>
                <h3>Développement Web</h3>
                <p>Applications performantes et évolutives</p>
            </div>
            <div class="service-card">
                <i class="fas fa-mobile-alt"></i>
                <h3>Mobile First</h3>
                <p>Design responsive optimisé mobile</p>
            </div>
            <div class="service-card">
                <i class="fas fa-rocket"></i>
                <h3>SEO & Performance</h3>
                <p>Optimisation et référencement naturel</p>
            </div>
        </div>
    </section>

document.querySelectorAll('.service-card, .portfolio-item').forEach((el) => {
            el.style.opacity = 0;
            el.style.transform = 'translateY(20px)';
            observer.observe(el);
        });

// Menu mobile
        const menuToggle = document.createElement('div');
        menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
        menuToggle.classList.add('menu-toggle');
        document.querySelector('.nav-content').appendChild(menuToggle);

menuToggle.addEventListener('click', () => {
            document.querySelector('.nav-links').classList.toggle('active');
        });

// Smooth scroll
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

// Changement de couleur au scroll
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                document.querySelector('.navbar').style.background = 'rgba(255, 255, 255, 0.98)';
            } else {
                document.querySelector('.navbar').style.background = 'rgba(255, 255, 255, 0.95)';
            }
        });
    </script>
</body>
</html>

Un codice di Maxi-Digital

Consigliato

pulsante di scansione

Un codice di Mikeykun

Un codice di Yotva

HTML

CSS

JS

Consigliato

pulsante di scansione

Un codice di Mikeykun

Un codice di Yotva

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS