Page de destination du magasin de meubles

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

3 March 2023

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Furniture Landing Page</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <header>
        <a href="#" class="logo">Brand <span>X.</span></a>
        <i class='bx bx-menu' id="menu-icon"></i>

<ul class="navbar">
            <li><a href="#home">Home</a></li>
            <li><a href="#shop">Shop</a></li>
            <li><a href="#new">New Arrivals</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#brands">Our Partners</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </header>

<section class="home" id="home">
        <div class="home-text">
            <h1>Your <span>Comfort</span> <br> Is Our <span>Happiness</span></h1>
            <p>We create an environment where you can truly relax and be yourself</p>
            <a href="#shop" class="btn">Shop Now</a>
        </div>
    </section>

<section class="shop" id="shop">
        <div class="heading">
            <span>New Arrival</span>
            <h2>Shop Now</h2>
        </div>

<div class="shop-container">
            <div class="box">
                <div class="box-img">
                    <img src="https://i.postimg.cc/ZntRdfd1/p1.jpg" alt="Gray Chair">
                </div>
                <div class="title-price">
                    <h3>Gray Chair</h3>
                    <div class="stars">
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star-half'></i>
                    </div>
                </div>
                <span>$45</span>
                <i class='bx bx-cart'></i>
            </div>

<div class="box">
                <div class="box-img">
                    <img src="https://i.postimg.cc/c1zGvCVw/p2.jpg" alt="Blue Chair">
                </div>
                <div class="title-price">
                    <h3>Blue Chair</h3>
                    <div class="stars">
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star-half'></i>
                    </div>
                </div>
                <span>$50</span>
                <i class='bx bx-cart'></i>
            </div>

<div class="box">
                <div class="box-img">
                    <img src="https://i.postimg.cc/T3M8cS2P/p3.jpg" alt="Pink Chair">
                </div>
                <div class="title-price">
                    <h3>Pink Chair</h3>
                    <div class="stars">
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star-half'></i>
                    </div>
                </div>
                <span>$60</span>
                <i class='bx bx-cart'></i>
            </div>

<div class="box">
                <div class="box-img">
                    <img src="https://i.postimg.cc/JnhSnCxp/p4.jpg" alt="Tripod Gray Chair">
                </div>
                <div class="title-price">
                    <h3>Tripod Gray Chair</h3>
                    <div class="stars">
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star-half'></i>
                    </div>
                </div>
                <span>$40</span>
                <i class='bx bx-cart'></i>
            </div>

<div class="box">
                <div class="box-img">
                    <img src="https://i.postimg.cc/0N59p3Zw/p5.jpg" alt="Tripod Black Chair">
                </div>
                <div class="title-price">
                    <h3>Tripod Black Chair</h3>
                    <div class="stars">
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star-half'></i>
                    </div>
                </div>
                <span>$45</span>
                <i class='bx bx-cart'></i>
            </div>

<div class="box">
                <div class="box-img">
                    <img src="https://i.postimg.cc/gJQdb0pV/p6.jpg" alt="Black Chair">
                </div>
                <div class="title-price">
                    <h3>Black Chair</h3>
                    <div class="stars">
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star-half'></i>
                    </div>
                </div>
                <span>$50</span>
                <i class='bx bx-cart'></i>
            </div>
        </div>
    </section>

<section class="new" id="new">
        <div class="heading">
            <span>New Collection</span>
            <h2>Best Selling</h2>
        </div>

<div class="new-container">
            <div class="box">
                <div class="box-img">
                    <img src="https://i.postimg.cc/1tMFt9L8/new1.jpg" alt="Rustic Chair">
                </div>
                <div class="title-price">
                    <h3>Rustic Chair</h3>
                    <div class="stars">
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star-half'></i>
                    </div>
                </div>
                <span>$30</span>
                <i class='bx bx-cart'></i>
            </div>

<div class="box">
                <div class="box-img">
                    <img src="https://i.postimg.cc/7Yj2btQn/new2.jpg" alt="Bright Yellow Chair">
                </div>
                <div class="title-price">
                    <h3>Bright Yellow Chair</h3>
                    <div class="stars">
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star-half'></i>
                    </div>
                </div>
                <span>$40</span>
                <i class='bx bx-cart'></i>
            </div>

<div class="box">
                <div class="box-img">
                    <img src="https://i.postimg.cc/wvWtzwmJ/new3.jpg" alt="White Chair">
                </div>
                <div class="title-price">
                    <h3>White Chair</h3>
                    <div class="stars">
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star'></i>
                        <i class='bx bxs-star-half'></i>
                    </div>
                </div>
                <span>$35</span>
                <i class='bx bx-cart'></i>
            </div>
        </div>
    </section>

<div class="about-text">
            <span>About us</span>
            <h2>Furniture is a important part <br>for your comfort</h2>
            <p>We spend a significant portion of our lives within the walls of our homes. It's where we recharge, relax, and create memories</p>
            <p>Investing in quality furniture is an investment in your comfort and happiness. It's about creating a space that reflects your personality and nourishes your soul</p>
            <a href="#shop" class="btn">Learn More</a>
        </div>
    </section>

<section class="brands" id="brands">
        <div class="heading">
            <span>Brands</span>
            <h2>Our Brand Partners</h2>
        </div>

<section class="newsletter" id="contact">
        <h2>Subscribe to Newsletter</h2>
        <div class="news-box">
            <input type="text" placeholder="Enter your email">
            <a href="#" class="btn">Subscribe</a>
        </div>
    </section>

<section class="footer" id="footer">
        <div class="footer-box">
            <h2>Brand <span>X</span></h2>
            <p>Invest in your comfort and happiness.</p>
            <div class="social">
                <a href="https://www.linkedin.com/in/dawid-wr%C3%B3bel-106a95281/"><i class='bx bxl-linkedin'></i></a>
                <a href="https://x.com/DawidWrbel16"><i class='bx bxl-twitter'></i></a>
                <a href="https://www.instagram.com/zegarkidawida/"><i class='bx bxl-instagram'></i></a>
            </div>
        </div>

<div class="footer-box">
            <h3>Services</h3>
            <li><a href="#">Product</a></li>
            <li><a href="#">Help & Support</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">FAQ</a></li>
        </div>

<div class="footer-box">
            <h3>Product</h3>
            <li><a href="#">Sofa's</a></li>
            <li><a href="#">Chair's</a></li>
            <li><a href="#">Living Room</a></li>
            <li><a href="#">Office</a></li>
        </div>

<div class="footer-box contact-info">
            <h3>Contact</h3>
            <span>Warsaw, Poland 00-001</span>
            <span>+48 22 123 4567</span>
            <span>dawidwrobel40@gmail.com</span>
        </div>
    </section>

<div class="copyright">
        <p>© <span>Dawid Wróbel</span>. All rights reserved</p>
    </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
    list-style: none;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
}

:root {
    --text-color: #1a1a1a;
    --main-color: #6aa84f;
    --accent-color: #8FC53D;
    --bg-color: #f8f9fa;
    --card-bg: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
}

section {
    padding: 60px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 5%;
    background: var(--card-bg);
    box-shadow: 0 2px 4px var(--shadow-color);
    transition: var(--transition);
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    font-family: 'Playfair Display', serif;
}
.logo span {
    color: var(--main-color);
}

.navbar {
    display: flex;
    align-items: center;
}
.navbar a {
    font-size: 1rem;
    padding: 12px 20px;
    font-weight: 500;
    color: var(--text-color);
    transition: var(--transition);
}
.navbar a:hover,
.navbar a.active {
    color: var(--main-color);
    background: rgba(106, 168, 79, 0.1);
    border-radius: 8px;
}

#menu-icon {
    font-size: 2rem;
    cursor: pointer;
    display: none;
    color: var(--text-color);
}

/* HOME */
.home {
    min-height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://i.postimg.cc/KckB3Vds/background.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.home-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    font-family: 'Playfair Display', serif;
}
.home-text p {
    font-size: 1.1rem;
    color: #f1f1f1;
    margin: 1rem 0 2rem;
    max-width: 600px;
}
.home-text span {
    color: var(--main-color);
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: var(--main-color);
    color: #fff;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    transition: var(--transition);
}
.btn:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color);
}

/* HEADINGS */
.heading {
    text-align: center;
    margin-bottom: 3rem;
}
.heading span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--main-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.heading h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    font-family: 'Playfair Display', serif;
}

/* SHOP & NEW */
.shop-container,
.new-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.box {
    position: relative;
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 4px 20px var(--shadow-color);
}
.box:hover {
    transform: translateY(-5px);
}
.box .box-img {
    width: 100%;
    height: 350px;
    overflow: hidden;
}
.box .box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}
.box .box-img img:hover {
    transform: scale(1.05);
}

.box span {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--main-color);
    padding: 0 16px;
}

.box .bx-cart {
    position: absolute;
    bottom: 16px;
    right: 16px;
    padding: 10px;
    font-size: 1.5rem;
    color: #fff;
    background: var(--main-color);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}
.box .bx-cart:hover {
    background: var(--accent-color);
    transform: scale(1.1);
}

.title-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
}
.title-price h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.stars .bx {
    color: var(--main-color);
    font-size: 1rem;
}

/* ABOUT */
.about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: center;
}
.about-img img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
}
.about-text span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--main-color);
    text-transform: uppercase;
}
.about-text h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.5rem 0;
    font-family: 'Playfair Display', serif;
}
.about-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

/* BRANDS */
.brands-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    justify-items: center;
    margin-top: 2rem;
}
.brands-container img {
    width: 100px;
    filter: grayscale(0.7);
    transition: var(--transition);
}
.brands-container img:hover {
    filter: grayscale(0);
    transform: scale(1.1);
}

/* NEWSLETTER */
.newsletter {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://i.postimg.cc/Hk7P7KWY/bg.jpg');
    background-size: cover;
    background-position: center;
    padding: 60px 5%;
    text-align: center;
}
.newsletter h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}
.news-box {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.news-box input {
    width: 300px;
    padding: 12px;
    border: none;
    border-radius: 8px 0 0 8px;
    outline: none;
    font-size: 1rem;
}
.news-box .btn {
    border-radius: 0 8px 8px 0;
    padding: 12px 20px;
}

/* FOOTER */
.footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    padding: 60px 5%;
    background: var(--text-color);
    color: #fff;
}
.footer-box h2 {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}
.footer-box span {
    color: var(--main-color);
}
.footer-box p,
.footer-box li a,
.contact-info span {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #ddd;
}
.footer-box li a:hover {
    color: var(--main-color);
}
.social a {
    font-size: 1.5rem;
    margin-right: 12px;
    color: #ddd;
    transition: var(--transition);
}
.social a:hover {
    color: var(--main-color);
}

.copyright {
    padding: 20px;
    text-align: center;
    background: var(--text-color);
    color: #ddd;
}
.copyright span {
    font-family: 'Playfair Display', serif;
    color: var(--main-color);
}

/* MEDIA QUERIES */
@media (max-width: 1200px) {
    section {
        padding: 50px 4%;
    }
    .home-text h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    header {
        padding: 15px 4%;
    }
    #menu-icon {
        display: block;
    }
    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--card-bg);
        box-shadow: 0 4px 8px var(--shadow-color);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }
    .navbar.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .navbar a {
        padding: 15px;
        display: block;
        text-align: center;
    }
    .about {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-img {
        order: 2;
    }
    .about-text {
        order: 1;
    }
    .news-box input {
        width: 200px;
    }
}

@media (max-width: 480px) {
    .home-text h1 {
        font-size: 2rem;
    }
    .home-text p {
        font-size: 0.9rem;
    }
    .shop-container,
    .new-container {
        grid-template-columns: 1fr;
    }
    .box .box-img {
        height: 250px;
    }
    .brands-container img:hover {
        transform: scale(1);
    }
}

Page de destination du magasin de meubles

Recommandé

Animation de texte laser

Effet de la carte

Un code par ytr3d3

HTML

CSS

JS

Recommandé

Animation de texte laser

Effet de la carte

Un code par ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS