Página de inicio de muebles: Diseño adaptable y tienda

66 fastapp122

Abrir en el editor Publica tu código

Página de inicio de muebles: Diseño adaptable y tienda

Recomendado

21 July 2025

Menú de navegación con botones de opción CSS

10 April 2025

Un código de cleanbug411

28 July 2025

Burbuja de mensaje HTML con diseño SVG

HTML

<!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">Acasa</a></li>
            <li><a href="#shop">Produse</a></li>
            <li><a href="#new">Best Sellers</a></li>
            <li><a href="#about">Despre noi</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </header>

<section class="home" id="home">
        <div class="home-text">
            <h1>Design care vorbește prin <span>simplitate</span> <br> Eleganță în <span> fiecare detaliu</span></h1>
            <p>Darius Concept, mobilier premium, unde funcționalul întâlnește eleganța.</p>
            <a href="#shop" class="btn">Cumpara acum</a>
        </div>
    </section>

<section class="shop" id="shop">
        <div class="heading">
            <span>Produse</span>
            <h2></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>Colectie Noua</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>Despre noi</span>
            <h2>La Darius Concept, credem că mobilierul nu este doar funcțional<br>ci o extensie a stilului și al personalității.</h2>
            <p>Îmbinăm designul modern cu atenția la detalii pentru a crea piese premium, durabile și rafinate, menite să transforme orice spațiu într-o poveste de eleganță.</p>
            <a href="#shop" class="btn">Contact</a>
        </div>
    </section>

<section class="newsletter" id="contact">
        <h2>Aboneaza-te la Newsletter</h2>
        <div class="news-box">
            <input type="text" placeholder="Introduce email-ul">
            <a href="#" class="btn">Abonare</a>
        </div>
    </section>

<section class="footer" id="footer">
        <div class="footer-box">
            <h2>Darius <span>Concept</span></h2>
            <p>Design care vorbește prin simplitate.</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>Servici</h3>
            <li><a href="#">Produse</a></li>
            <li><a href="#">Asistenta</a></li>
            <li><a href="#">FAQ</a></li>
        </div>

<div class="footer-box">
            <h3>Produse</h3>
            <li><a href="#">Canapele</a></li>
            <li><a href="#">Scaune</a></li>
            <li><a href="#">Living Room</a></li>
            <li><a href="#">Birou</a></li>
        </div>

<div class="footer-box contact-info">
            <h3>Contact</h3>
            <span>Baia Mare, Maramures</span>
            <span>+lorem ipsum</span>
            <span>janeldone@gmail.com</span>
        </div>
    </section>

<div class="copyright">
        <p>© <span>GruiaYT</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);
    }
}

Recomendado

Menú de navegación con botones de opción CSS

Un código de cleanbug411

Burbuja de mensaje HTML con diseño SVG

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS