Webleb - Snippet di Codice - Un codice di 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 codice di Landingpage1

Consigliato

Un codice di junca

Un codice di cleanscript406

Frammento HTML di animazione di testo 3D

HTML

CSS

JS

Consigliato

Un codice di junca

Un codice di cleanscript406

Frammento HTML di animazione di testo 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS