Style Guide Marketing Dev
- Titulos
- Padrões
- Owl Carrosel
- Simples
- Com produtos estaticos e background
- Ancora
- Com animação
Carrosel Owl
Carrosel Simple
Titulo
Texto a ser inserido
Titulo
Texto a ser inserido
Titulo
Texto a ser inserido
jQuery(document).ready(function () {
jQuery(".owl-custom-carrosel").owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
items: 3,
responsive:{
0:{
items:1,
nav:true
},
480:{
items:2,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:3,
nav:true,
loop:false
}
}
});
});
/* SETUP OWL CARROSEL */
.owl-theme .owl-pagination .owl-page {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius:0;
display: inline-block;
margin: 5px;
height: 8px;
width: 30px;
border: none;
border: 2px solid var(--vermelho-medium-s) !important;
background-color:var(--vermelho-medium-s) !important;
}
.owl-theme .owl-pagination .owl-page.active {
border: 2px solid var(--vemelho-dark-s) !important;
background:var(--vemelho-dark-s) !important;
}
.owl-carousel .owl-item {
float: left;
min-height: auto !important;
}
.owl-pagination {
text-align: center !important;
margin-top: 15px !important;
}
.owl-theme .owl-controls .owl-pagination {
position: inherit !important;
}
.owl-custom-carrosel.owl-carousel.owl-theme {
max-width: 200px;
margin: 0 auto;
overflow: initial;
}
.owl-custom-carrosel.owl-carousel.owl-theme .owl-controls .owl-pagination {
margin-bottom: -30px;
}
.owl-custom-carrosel.owl-carousel.owl-theme .owl-controls {
overflow: initial;
}
.owl-custom-carrosel.owl-carousel.owl-theme img {
width: initial;
}
.owl-custom-carrosel.owl-theme .owl-pagination .owl-page {
border: 2px solid #006272 !important;
background-color: #006272 !important;
}
.owl-custom-carrosel.owl-theme .owl-pagination .owl-page.active {
border: 2px solid #c1dd34 !important;
background: #c1dd34 !important;
}
Carrosel com Produtos Estáticos e Background Full
Titulo da box
Texto descritivo do box
FRALDA PAMPERS PANTS AJUSTE TOTAL TAMANHO M 42 TIRAS
DROGA RAIA
3762 stix
TALCO JOHNSON'S BABY PURA PROTEÇÃO COM 200G
DROGA RAIA
1150 stix
ESMALTE DAILUS TRANSPARENTE SUSPIRO RENDA COM 8ML
DROGA RAIA
480 stix
MÁSCARA FACIAL PRETA NEEDS BEAUTY COM 10G
DROGA RAIA
186 stix
CREME FACIAL DIA ANTISSINAIS NIVEA Q10 PLUS PELE MISTA A OLEOSA FPS 30 COM 50G
DROGA RAIA
4000 stix
SABONETE LÍQUIDO FACIAL NEUTROGENA DEEP CLEAN GRAPEFRUIT COM 150G
DROGA RAIA
2650 stix
GATORADE TANGERINA
DROGA RAIA
599 stix
ÁLCOOL LÍQUIDO 70% NEEDS COM 50ML
DROGA RAIA
138 stix
Vale-compras para utilizar nas lojas físicas
DROGA RAIA
2.000 stix
Titulo da box
Texto descritivo do box
FRALDA PAMPERS PANTS AJUSTE TOTAL TAMANHO M 42 TIRAS
DROGA RAIA
3762 stix
TALCO JOHNSON'S BABY PURA PROTEÇÃO COM 200G
DROGA RAIA
1150 stix
ESMALTE DAILUS TRANSPARENTE SUSPIRO RENDA COM 8ML
DROGA RAIA
480 stix
MÁSCARA FACIAL PRETA NEEDS BEAUTY COM 10G
DROGA RAIA
186 stix
CREME FACIAL DIA ANTISSINAIS NIVEA Q10 PLUS PELE MISTA A OLEOSA FPS 30 COM 50G
DROGA RAIA
4000 stix
SABONETE LÍQUIDO FACIAL NEUTROGENA DEEP CLEAN GRAPEFRUIT COM 150G
DROGA RAIA
2650 stix
GATORADE TANGERINA
DROGA RAIA
599 stix
ÁLCOOL LÍQUIDO 70% NEEDS COM 50ML
DROGA RAIA
138 stix
Vale-compras para utilizar nas lojas físicas
DROGA RAIA
2.000 stix
jQuery(document).ready(function () {
jQuery(".owl-with-static-products").owlCarousel({
loop:true,
margin:10,
navigation:true,
items:5,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
});
section.section-for-bg-full {
text-align: center;
padding: 40px 60px;
background: rgb(12,133,142);
background: linear-gradient(0deg, rgba(12,133,142,1) 0%, rgba(28,88,98,1) 100%);
font-family: "din-regular",Arial,Helvetica,sans-serif;
margin: 0 -20px;
}
.section-for-bg-full img {
display: inline-block;
margin: 20px 20px;
}
.section-for-bg-full h2 {
color: #c2de17;
font-weight: 800;
font-size: 37px;
margin-bottom: 20px;
font-family: "din-bold",Arial,Helvetica,sans-serif;
}
.section-for-bg-full p.first-p {
color: #fff;
font-size: 21px;
margin-bottom: 20px;
}
.section-for-bg-full .for-box-item {
background-color: #fff;
color: #006272;
padding: 0 0 20px 0;
margin: 0px 30px;
border-radius: 0 0 15px 15px;
margin-bottom: 10px;
min-height: 343px !important;
text-align: center;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
.section-for-bg-full .owl-carousel {
overflow: visible;
}
.section-for-bg-full .owl-carousel .owl-wrapper-outer {
min-height: 300px;
padding-top: 10px;
overflow: hidden !important;
z-index: 4;
}
.section-for-bg-full .owl-carousel .owl-item {
min-height: 270px;
}
.section-for-bg-full .owl-carousel .owl-item p {
color: #006272;
font-family: "din-regular",Arial,Helvetica,sans-serif;
text-align: left;
font-size: 16px;
padding: 0 15px;
}
.section-for-bg-full .owl-carousel .owl-item p:first-of-type {
min-height: 50px;
}
.section-for-bg-full .owl-carousel .owl-item p.stix-pontos {
font-size: 21px;
margin-top: 15px;
margin-bottom: 10px;
font-weight: 800;
color: #006272;
}
.section-for-bg-full .owl-carousel .owl-item p.stix-de {
margin-top: 0;
margin-bottom: 0;
text-decoration: line-through;
}
.section-for-bg-full .owl-carousel .owl-item p.stix-de span {
text-decoration: line-through;
}
.section-for-bg-full .owl-carousel .owl-item p.stix-por {
margin-top: 0;
margin-bottom: 10px;
font-weight: 800;
color: #006272;
}
.section-for-bg-full .owl-theme .owl-pagination .owl-page {
-webkit-border-radius: 50% 50% 50% 50%;
-moz-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
display: inline-block;
margin: 5px;
height: 13px;
width: 13px;
border: none;
border: 2px solid #006272 !important;
background-color:#fff !important;
padding: 5px !important;
}
.section-for-bg-full .owl-theme .owl-pagination .owl-page.active {
border: 2px solid #006272 !important;
background: #006272 !important;
}
.section-for-bg-full .owl-theme .owl-controls {
-ms-transform: skewX(0);
-webkit-transform: skewX(0);
-moz-transform: skewX(0);
-o-transform: skewX(0);
transform: skewX(0);
width: 100%;
right: 0;
height: 100%;
overflow: visible;
}
.section-for-bg-full .owl-theme .owl-controls .owl-pagination {
margin: 0 auto 0;
width: 150px;
bottom: -18px;
left: 50%;
display: none;
}
.section-for-bg-full .owl-controls .owl-buttons div.owl-prev {
background: url(https://img.drogasil.com.br/wysiwyg/stix-lp/set-left.png) no-repeat;
width: 32px;
height: 54px;
text-indent: -9999px;
left: -20px;
top: 40%;
position: absolute;
}
.section-for-bg-full .owl-controls .owl-buttons div.owl-next {
background: url(https://img.drogasil.com.br/wysiwyg/stix-lp/set-right.png) no-repeat;
width: 32px;
height: 54px;
text-indent: -9999px;
right: -20px;
top: 40%;
position: absolute;
}
.section-for-bg-full .for-box-item a {
display: block;
}
.section-for-bg-full .for-box-item img {
margin: 0 auto 20px;
}
.section-for-bg-full .for-box-item h4 {
font-size: 17px;
font-family: "din-bold",Arial,Helvetica,sans-serif
}
.section-for-bg-full .for-box-item p {
font-size: 15px;
line-height: 25px;
font-family: "din-regular",Arial,Helvetica,sans-serif;
}
.section-for-bg-full .owl-carousel .owl-item img {
width: 100%;
}
Âncora animada
Link para âncora
Sessão da âncora
jQuery(document).ready(function () {
jQuery('a[href^="#"]').on('click',function(e) {
e.preventDefault();
var target = this.hash;
var targetElement = jQuery(target);
jQuery('html, body').animate({
'scrollTop': (targetElement.offset().top + 60)
}, 800, 'swing', function() {
});
});
});
HR - Linhas separadoras
Exemplo 1
hr.hr-style-one {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
Exemplo 2
hr.hr-style-two {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
Exemplo 3
hr.hr-style-three {
border: 0;
border-bottom: 1px dashed #ccc;
background: #999;
}
Exemplo 4
hr.hr-style-four {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
Contador regressivo
Exemplo
jQuery('#countdown-box').countdown('2022/05/05', function(event) {
jQuery(this).html(event.strftime(''
+ '%d dias'
+ '%H horas'
+ '%M minutos'
+ '%S segundos'
));
});