Webleb - Snippets de Código -

1592 Andev.web

Abrir no Editor Publique Seu Código Precisa de um site?

Recomendado

31 May 2025

Um Código por alejandrokundrah

22 June 2025

Modelo HTML do painel de administração

17 September 2024

Calculadora de datas

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

Um Código por alejandrokundrah

Modelo HTML do painel de administração

Calculadora de datas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS