Webleb - Extraits de Code - Un code de Landingpage1

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Commerce Landing Page</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            color: #333;
        }

header {
            background: linear-gradient(135deg, #ff7e5f, #feb47b);
            color: white;
            padding: 20px 0;
            text-align: center;
        }

header h1 {
            margin: 0;
            font-size: 2.5rem;
        }

nav {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 10px;
        }

nav a {
            color: white;
            text-decoration: none;
            font-size: 1rem;
            transition: color 0.3s;
        }

nav a:hover {
            color: #ffedd8;
        }

.hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 50px;
            background-color: #f8f8f8;
        }

.hero .content {
            max-width: 50%;
        }

.hero h2 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

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

.hero button {
            padding: 10px 20px;
            font-size: 1rem;
            background: #ff7e5f;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }

.hero button:hover {
            background: #feb47b;
        }

.hero img {
            max-width: 45%;
            border-radius: 10px;
        }

.products {
            padding: 50px;
            text-align: center;
        }

.products h3 {
            margin-bottom: 30px;
        }

.product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

.product {
            background: white;
            border: 1px solid #ddd;
            border-radius: 10px;
            overflow: hidden;
            text-align: center;
            transition: transform 0.3s;
        }

.product img {
            max-width: 100%;
        }

.product:hover {
            transform: scale(1.05);
        }

.product h4 {
            margin: 10px 0;
        }

.product p {
            color: #777;
            margin: 0 0 10px;
        }

footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }

footer p {
            margin: 0;
        }
    </style>
</head>
<body>

<header>
    <h1>ShopEase</h1>
    <nav>
        <a href="#">Home</a>
        <a href="#products">Products</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

<section class="hero">
    <div class="content">
        <h2>Find Your Style Today</h2>
        <p>Discover the best products curated just for you. Shop now and redefine your lifestyle.</p>
        <button>Shop Now</button>
    </div>
    <img src="https://via.placeholder.com/400" alt="Featured Product">
</section>

<section id="products" class="products">
    <h3>Our Best Sellers</h3>
    <div class="product-grid">
        <div class="product">
            <img src="https://via.placeholder.com/200" alt="Product 1">
            <h4>Product 1</h4>
            <p>$49.99</p>
        </div>
        <div class="product">
            <img src="https://via.placeholder.com/200" alt="Product 2">
            <h4>Product 2</h4>
            <p>$69.99</p>
        </div>
        <div class="product">
            <img src="https://via.placeholder.com/200" alt="Product 3">
            <h4>Product 3</h4>
            <p>$89.99</p>
        </div>
        <div class="product">
            <img src="https://via.placeholder.com/200" alt="Product 4">
            <h4>Product 4</h4>
            <p>$99.99</p>
        </div>
    </div>
</section>

</body>
</html>

Un code de Landingpage1

Recommandé

Effet d'animation de survol de texte

Un code de Metehan

Un code par slowcode552

HTML

CSS

JS

Recommandé

Effet d'animation de survol de texte

Un code de Metehan

Un code par slowcode552

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS