Un codice di Maxi-Digital

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

18 December 2024

Modello di pagina di accesso HTML

HTML

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

Un codice di slowcode552

Un codice di staticcloud996

Modello di pagina di accesso HTML

HTML

CSS

JS

Consigliato

Un codice di slowcode552

Un codice di staticcloud996

Modello di pagina di accesso HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS