Webleb - fragmentos de código - Un código 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 código de Landingpage1

Recomendado

Un código por página de destino

Estructura HTML de la animación del cubo CSS

Digital deja vu

HTML

CSS

JS

Recomendado

Un código por página de destino

Estructura HTML de la animación del cubo CSS

Digital deja vu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS