Un código de Landingpage1

766 Landing-page

Abrir en el editor Publica tu código

Recomendado

25 August 2025

Estructura del contenedor de animación HTML

12 August 2024

Perfil de información

22 August 2025

Sitio web del bufete de abogados: Tailwind CSS, Servicios legales

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>

Recomendado

Estructura del contenedor de animación HTML

Perfil de información

Sitio web del bufete de abogados: Tailwind CSS, Servicios legales

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS