site web moderne

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 September 2024

Modèle de site Web de portefeuille HTML 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 Example</title>
    <style>
        /* CSS Variables */
        :root {
            --primary-color: #2563eb;
            --secondary-color: #7c3aed;
            --dark-color: #1e293b;
            --light-color: #f8fafc;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

body {
            background-color: var(--light-color);
            color: var(--dark-color);
            line-height: 1.6;
        }

/* Navigation */
        .navbar {
            background: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
        }

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

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

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

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

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

/* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 2rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: white;
            margin-top: 60px;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            animation: slideUp 1s ease;
        }

/* Cards */
        .cards-container {
            max-width: 1200px;
            margin: 4rem auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

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

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

/* Form */
        .contact-form {
            max-width: 600px;
            margin: 4rem auto;
            padding: 2rem;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

.form-group {
            margin-bottom: 1.5rem;
        }

input, textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-top: 0.5rem;
        }

button {
            background: var(--primary-color);
            color: white;
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

button:hover {
            background: var(--secondary-color);
        }

/* Animations */
        @keyframes slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

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

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

.cards-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-content">
            <div class="logo">Logo</div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>

<section class="hero" id="home">
        <div>
            <h1>Modern Website</h1>
            <p>Where technology meets design</p>
        </div>
    </section>

<section class="cards-container" id="services">
        <div class="card">
            <h3>Responsive Design</h3>
            <p>Mobile-first approach for all devices</p>
        </div>
        <div class="card">
            <h3>Web Development</h3>
            <p>Modern web development solutions</p>
        </div>
        <div class="card">
            <h3>SEO Optimization</h3>
            <p>Search engine optimized structure</p>
        </div>
    </section>

<section class="contact-form" id="contact">
        <h2>Contact Form</h2>
        <form id="contactForm">
            <div class="form-group">
                <label>Your Name:</label>
                <input type="text" id="name" required>
            </div>
            <div class="form-group">
                <label>Email:</label>
                <input type="email" id="email" required>
            </div>
            <div class="form-group">
                <label>Your Message:</label>
                <textarea id="message" rows="5" required>

site web moderne

Recommandé

SITE WEB BANQUE ACCEUIL

Site d'informations

Modèle de site Web de portefeuille HTML CSS

HTML

CSS

JS

Recommandé

SITE WEB BANQUE ACCEUIL

Site d'informations

Modèle de site Web de portefeuille HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS