Page de destination pour meubles : conception réactive et boutique

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 May 2024

Curseur d'images pour Blogspot CSS3

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);
    }
}

Page de destination pour meubles : conception réactive et boutique

Recommandé

Chatbot pour site Web

Boutique de fiches produits

Curseur d'images pour Blogspot CSS3

HTML

CSS

JS

Recommandé

Chatbot pour site Web

Boutique de fiches produits

Curseur d'images pour Blogspot CSS3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS