Page de vente de chaises

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 March 2024

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Andev Web</title>
</head>

<body>
    <div class="section-fluid-main">
        <div class="section">
            <div class="info-wrap mob-margin">
                <p class="title-up">Modern chair</p>
                <h2>Sella Gastro</h2>
                <h4>$174 <span>$237</span></h4>
                <div class="section-fluid">
                    <input class="desc-btn" type="radio" id="desc-1" name="desc-btn" checked />
                    <label for="desc-1">Description</label>
                    <input class="desc-btn" type="radio" id="desc-2" name="desc-btn" />
                    <label for="desc-2">Details</label>
                    <div class="section-fluid desc-sec accor-1">
                        <p>The chair construction is made of ash tree. Upholstery and wood color at customer's request.
                        </p>
                    </div>
                    <div class="section-fluid desc-sec accor-2">
                        <div class="section-inline">
                            <p><span>76</span>cm<br>Lenght</p>
                        </div>
                        <div class="section-inline">
                            <p><span>68</span>cm<br>Width</p>
                        </div>
                        <div class="section-inline">
                            <p><span>87</span>cm<br>Height</p>
                        </div>
                        <div class="section-inline">
                            <p><span>10</span>kg<br>Weight</p>
                        </div>
                    </div>
                </div>
                <h5>Choose upholstery:</h5>
            </div>
            <div class="clearfix"></div>
            <input class="color-btn for-color-1" type="radio" id="color-1" name="color-btn" checked />
            <label class="first-color" for="color-1"></label>
            <input class="color-btn for-color-2" type="radio" id="color-2" name="color-btn" />
            <label class="color-2" for="color-2"></label>
            <input class="color-btn for-color-3" type="radio" id="color-3" name="color-btn" />
            <label class="color-3" for="color-3"></label>
            <input class="color-btn for-color-4" type="radio" id="color-4" name="color-btn" />
            <label class="color-4" for="color-4"></label>
            <input class="color-btn for-color-5" type="radio" id="color-5" name="color-btn" />
            <label class="color-5" for="color-5"></label>
            <input class="color-btn for-color-6" type="radio" id="color-6" name="color-btn" />
            <label class="color-6" for="color-6"></label>
            <div class="clearfix"></div>
            <div class="info-wrap">
                <a href="#" class="btn"><i class="uil uil-shopping-cart icon"></i> Add To Cart</a>
            </div>
            <div class="img-wrap chair-1"></div>
            <div class="img-wrap chair-2"></div>
            <div class="img-wrap chair-3"></div>
            <div class="img-wrap chair-4"></div>
            <div class="img-wrap chair-5"></div>
            <div class="img-wrap chair-6"></div>
            <div class="back-color"></div>
            <div class="back-color chair-2"></div>
            <div class="back-color chair-3"></div>
            <div class="back-color chair-4"></div>
            <div class="back-color chair-5"></div>
            <div class="back-color chair-6"></div>

</div>
    </div>
</body>

</html>

CSS

@import url("https://unicons.iconscout.com/release/v2.1.9/css/unicons.css");
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900");
*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    color: #fff;
    background-color: #1f2029;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: none;
}
p {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #fff;
    margin: 0;
}
.section-fluid-main {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}
.section {
    position: relative;
    max-width: calc(100% - 40px);
    width: 860px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 100px 0;
}
.section-fluid {
    position: relative;
    width: 100%;
    display: block;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    visibility: hidden;
}
.color-btn:checked + label,
.color-btn:not(:checked) + label {
    position: relative;
    height: 40px;
    transition: all 200ms linear;
    border-radius: 4px;
    width: 40px;
    overflow: hidden;
    border: none;
    cursor: pointer;
    color: #ffeba7;
    margin-right: 10px;
    box-shadow: 0 12px 35px 0 rgba(16, 39, 112, 0.25);
    z-index: 10;
    background-position: center;
    background-size: cover;
    border: 3px solid transparent;
}
.color-btn:checked + label {
    border-color: #434343;
    transform: scale(1.1);
}
label.first-color {
    margin-left: 500px;
    background-image: url("https://assets.codepen.io/1462889/mat1.jpg");
}
label.color-2 {
    background-image: url("https://assets.codepen.io/1462889/mat2.jpg");
}
label.color-3 {
    background-image: url("https://assets.codepen.io/1462889/mat3.jpg");
}
label.color-4 {
    background-image: url("https://assets.codepen.io/1462889/mat4.jpg");
}
label.color-5 {
    background-image: url("https://assets.codepen.io/1462889/mat5.jpg");
}
label.color-6 {
    background-image: url("https://assets.codepen.io/1462889/mat6.jpg");
}

.img-wrap {
    position: absolute;
    top: 100px;
    left: 0;
    width: 500px;
    height: 410px;
    display: inline-block;
    z-index: 9;
    transition: all 550ms linear;
    transition-delay: 100ms;
    background-position: center top;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("https://assets.codepen.io/1462889/ch1.png");
    opacity: 0;
}
.for-color-1:checked ~ .img-wrap.chair-1 {
    opacity: 1;
    animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.img-wrap.chair-2 {
    background-image: url("https://assets.codepen.io/1462889/ch2.png");
}
.for-color-2:checked ~ .img-wrap.chair-2 {
    opacity: 1;
    animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.img-wrap.chair-3 {
    background-image: url("https://assets.codepen.io/1462889/ch3.png");
}
.for-color-3:checked ~ .img-wrap.chair-3 {
    opacity: 1;
    animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.img-wrap.chair-4 {
    background-image: url("https://assets.codepen.io/1462889/ch4.png");
}
.for-color-4:checked ~ .img-wrap.chair-4 {
    opacity: 1;
    animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.img-wrap.chair-5 {
    background-image: url("https://assets.codepen.io/1462889/ch5.png");
}
.for-color-5:checked ~ .img-wrap.chair-5 {
    opacity: 1;
    animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.img-wrap.chair-6 {
    background-image: url("https://assets.codepen.io/1462889/ch6.png");
}
.for-color-6:checked ~ .img-wrap.chair-6 {
    opacity: 1;
    animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0) rotate(-1deg);
    }
    20%,
    80% {
        transform: translate3d(2px, 0, 0) rotate(2deg);
    }
    30%,
    50%,
    70% {
        transform: translate3d(-3px, 0, 0) rotate(-3deg);
    }
    40%,
    60% {
        transform: translate3d(3px, 0, 0) rotate(3deg);
    }
}

.back-color {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    background-image: linear-gradient(196deg, #f1a9a9, #e66767);
    transition: all 250ms linear;
    transition-delay: 300ms;
}
.back-color.chair-2 {
    background-image: linear-gradient(196deg, #4c4c4c, #262626);
    opacity: 0;
}
.for-color-2:checked ~ .back-color.chair-2 {
    opacity: 1;
}
.back-color.chair-3 {
    background-image: linear-gradient(196deg, #8a9fb2, #5f7991);
    opacity: 0;
}
.for-color-3:checked ~ .back-color.chair-3 {
    opacity: 1;
}
.back-color.chair-4 {
    background-image: linear-gradient(196deg, #97afc3, #6789a7);
    opacity: 0;
}
.for-color-4:checked ~ .back-color.chair-4 {
    opacity: 1;
}
.back-color.chair-5 {
    background-image: linear-gradient(196deg, #afa6a0, #8c7f76);
    opacity: 0;
}
.for-color-5:checked ~ .back-color.chair-5 {
    opacity: 1;
}
.back-color.chair-6 {
    background-image: linear-gradient(196deg, #aaadac, #838786);
    opacity: 0;
}
.for-color-6:checked ~ .back-color.chair-6 {
    opacity: 1;
}

.info-wrap {
    position: relative;
    margin-left: 500px;
    z-index: 10;
    display: block;
    text-align: left;
}
.title-up {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    line-height: 1.2;
    color: #fff;
    margin-top: 0;
    margin-bottom: 10px;
}
h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.2;
    color: #fff;
    margin-top: 0;
    margin-bottom: 10px;
}
h4 {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    color: #fff;
    margin-top: 0;
    margin-bottom: 30px;
}
h4 span {
    text-decoration: line-through;
    font-size: 20px;
    opacity: 0.6;
    padding-left: 15px;
}
h5 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
    margin-top: 0;
    margin-bottom: 20px;
}
.desc-btn:checked + label,
.desc-btn:not(:checked) + label {
    position: relative;
    transition: all 200ms linear;
    display: inline-block;
    border: none;
    cursor: pointer;
    color: #ffeba7;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
    margin-right: 25px;
    opacity: 0.5;
}
.desc-btn:checked + label {
    opacity: 1;
}
.desc-btn:not(:checked) + label:hover {
    opacity: 0.8;
}

.desc-sec {
    padding-top: 20px;
    padding-bottom: 30px;
    transition: all 250ms linear;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(20px);
}
.desc-sec.accor-2 {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    z-index: 2;
}
#desc-1:checked ~ .desc-sec.accor-1 {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
#desc-2:checked ~ .desc-sec.accor-2 {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.section-inline {
    position: relative;
    display: inline-block;
    margin-right: 20px;
}
.section-inline p span {
    font-size: 30px;
    line-height: 1.1;
}

.btn {
    position: relative;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 2;
    height: 48px;
    border-radius: 4px;
    width: 210px;
    letter-spacing: 1px;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    overflow: hidden;
    background-color: transparent;
    color: #fff;
    box-shadow: 0 6px 15px 0 rgba(16, 39, 112, 0.15);
    transition: all 250ms linear;
    text-decoration: none;
    margin-top: 50px;
}
.icon {
    padding-right: 7px;
    font-size: 20px;
}
.btn:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    background-color: #944852;
    transition: background-color 250ms 300ms ease;
}
.btn:hover {
    box-shadow: 0 12px 35px 0 rgba(16, 39, 112, 0.25);
    background-color: #000;
}
.for-color-2:checked ~ .info-wrap .btn:before {
    background-color: #1a1a1a;
}
.for-color-3:checked ~ .info-wrap .btn:before {
    background-color: #40566e;
}
.for-color-4:checked ~ .info-wrap .btn:before {
    background-color: #5e89b2;
}
.for-color-5:checked ~ .info-wrap .btn:before {
    background-color: #8c7f76;
}
.for-color-6:checked ~ .info-wrap .btn:before {
    background-color: #5d6160;
}

.clearfix {
    width: 100%;
}
.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

.logo {
    position: fixed;
    top: 25px;
    left: 25px;
    display: block;
    z-index: 1000;
    transition: all 250ms linear;
}
.logo img {
    height: 26px;
    width: auto;
    display: block;
    transition: filter 250ms 700ms linear;
}

@media screen and (max-width: 991px) {
    .section {
        margin: 0 auto;
        text-align: center;
        max-width: calc(100% - 40px);
        width: 370px;
    }
    label.first-color {
        margin-left: 0;
    }
    .info-wrap {
        margin-left: 0;
        width: 370px;
        margin: 0 auto;
        text-align: center;
    }
    .img-wrap {
        width: 375px;
        height: 308px;
        left: 50%;
        margin-left: -190px;
    }
    .mob-margin {
        margin-top: 320px;
    }
    .desc-btn:checked + label,
    .desc-btn:not(:checked) + label {
        margin-right: 15px;
        margin-left: 15px;
    }
    .color-btn:checked + label,
    .color-btn:not(:checked) + label {
        height: 40px;
        width: 40px;
        margin: 5px auto;
        text-align: center;
    }
    .section-inline {
        margin: 0 5px;
    }
}

@media screen and (max-width: 575px) {
    .section {
        width: 280px;
    }
    .info-wrap {
        width: 280px;
    }
    .color-btn:checked + label,
    .color-btn:not(:checked) + label {
        height: 30px;
        width: 30px;
    }
    .section-inline p span {
        font-size: 24px;
        line-height: 1.1;
    }
    .section-inline p {
        font-size: 14px;
    }
}

Page de vente de chaises

Recommandé

Code HTML du menu latéral

Un code de Metehan

Jeu de pile JavaScript

HTML

CSS

JS

Recommandé

Code HTML du menu latéral

Un code de Metehan

Jeu de pile JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS