लैंडिंगपेज1 द्वारा एक कोड

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

27 May 2025

Mironovbogdan341 द्वारा एक कोड

10 May 2025

<!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>

लैंडिंगपेज1 द्वारा एक कोड

अनुशंसित

Mironovbogdan341 द्वारा एक कोड

मेटे का एक कोड

मेटे का एक कोड

HTML

CSS

JS

अनुशंसित

Mironovbogdan341 द्वारा एक कोड

मेटे का एक कोड

मेटे का एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS