Page de destination du magasin de meubles

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

19 October 2024

Formulaire de connexion HTML animé

6 May 2024

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

Formulaire de connexion HTML animé

Formulaire de connexion

Un code par Lanayassine8

HTML

CSS

JS

Recommandé

Formulaire de connexion HTML animé

Formulaire de connexion

Un code par Lanayassine8

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS