Página de venta de sillas

1591 Andev.web

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

16 August 2024

Fondo de puntos animados

22 June 2025

Plantilla de blog Tailwind CSS: modo oscuro, adaptable

5 May 2025

Un código por página de destino

HTML

<!DOCTYPE html>
<html lang="en">

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

Recomendado

Fondo de puntos animados

Plantilla de blog Tailwind CSS: modo oscuro, adaptable

Un código por página de destino

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS