Página de venta de sillas

2,677 Andev.web

Abrir en el editor Publica tu código

Recomendado

10 August 2024

Campo de entrada simple

21 October 2024

Entradas de un solo dígito con un elemento

18 October 2025

Ejemplo HTML de botón flotante de arcoíris

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