forked from M3-Academy/vtex-cms-template-atualizado
feat: cria header desktop
This commit is contained in:
parent
ea476c4a96
commit
7bd90c1444
19015
package-lock.json
generated
19015
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -12,8 +12,7 @@
|
||||
"dev": "cross-env NODE_ENV=development gulp watch",
|
||||
"dev:fast": "cross-env NODE_ENV=devfast gulp watch",
|
||||
"prod": "cross-env NODE_ENV=production gulp build",
|
||||
"format": "prettier --write \"src/arquivos/**/*.{js,jsx,scss}\"",
|
||||
"preinstall": "npx npm-force-resolutions"
|
||||
"format": "prettier --write \"src/arquivos/**/*.{js,jsx,scss}\""
|
||||
},
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
|
||||
BIN
src/arquivos/img/Logo-m3.png
Normal file
BIN
src/arquivos/img/Logo-m3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@ -1,411 +1,116 @@
|
||||
/***************************************************************/
|
||||
/**-- Header ------------------------------********************/
|
||||
/*-------------------------------------------------------------*/
|
||||
#ajaxBusy {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
z-index: 15;
|
||||
padding: 0px 16px;
|
||||
line-height: 0.1;
|
||||
opacity: 0.75;
|
||||
.page-header {
|
||||
padding: 28px 0;
|
||||
background: $black-500;
|
||||
|
||||
&::after {
|
||||
@include pseudo(inline-block);
|
||||
border: solid 1px;
|
||||
padding: 4px;
|
||||
line-height: 0;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 35%;
|
||||
border-color: $color-pink3 $color-gray4 $color-gray4 $color-gray4;
|
||||
animation: spin 0.5s linear infinite;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
header {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
top: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&.fixed {
|
||||
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
|
||||
position: fixed;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
@include mq(md, max) {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.pink-bar {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-hide:not(.menu-mobile-open):not(.mini-cart-open):not(:hover) {
|
||||
top: -130px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pink-bar {
|
||||
background-color: $color-pink;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
ul {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
padding-right: 8px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
border-right: 1px solid $color-white;
|
||||
content: "";
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 23%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
|
||||
i {
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
&__wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.principal {
|
||||
border-bottom: 1px solid $color-gray;
|
||||
padding: 20px 0;
|
||||
position: relative;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
> .container {
|
||||
@include mq(md, max) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@include mq_range(md, xl) {
|
||||
max-width: 98%;
|
||||
}
|
||||
}
|
||||
&__logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.menu-mobile-abrir {
|
||||
@include mq(lg, min) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
@include mq(md, max) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.busca-desktop {
|
||||
@include mq(md, max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.busca-mobile {
|
||||
margin-top: 20px;
|
||||
padding: 0;
|
||||
|
||||
@include mq(md, min) {
|
||||
display: none;
|
||||
}
|
||||
.user-items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.busca {
|
||||
border-top: 1px solid $color-gray4;
|
||||
border-bottom-color: $color-gray4;
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
flex: 1;
|
||||
max-width: 212px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid $white-500;
|
||||
|
||||
.busca {
|
||||
border-bottom: 1px solid $color-black2;
|
||||
color: $color-black2;
|
||||
font-size: 14px;
|
||||
max-width: 330px;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
legend,
|
||||
label,
|
||||
select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 8px 8px 8px 0;
|
||||
|
||||
&.fulltext-search-box {
|
||||
background-color: transparent;
|
||||
max-width: 300px;
|
||||
margin-right: -5px;
|
||||
width: 85%;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@include mq_range(md, lg) {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-buscar {
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 0;
|
||||
padding: 8px;
|
||||
|
||||
@extend .sprite;
|
||||
@extend .sprite-lupa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.util-links {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.links-usuario {
|
||||
display: inline-block;
|
||||
margin: 0 24px;
|
||||
padding: 0 24px;
|
||||
position: relative;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin: 0 14px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
@include mq_range(md, lg) {
|
||||
margin: 0 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-right: 1px solid $color-black;
|
||||
content: "";
|
||||
height: 19px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
legend,
|
||||
label,
|
||||
select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.carrinho {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
li:not(.amount-items),
|
||||
strong,
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.AmountItemsInCart {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.portal-totalizers-ref {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
.cartInfoWrapper {
|
||||
@extend .sprite;
|
||||
@extend .sprite-sacola;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.amount-items {
|
||||
background-color: $color-black2;
|
||||
border-radius: 50%;
|
||||
bottom: 2px;
|
||||
color: $color-white;
|
||||
.fulltext-search-box {
|
||||
flex: 1;
|
||||
height: 23px;
|
||||
background: transparent;
|
||||
outline: 0;
|
||||
color: $white-500;
|
||||
font-size: 10px;
|
||||
line-height: 1.3;
|
||||
min-width: 19px;
|
||||
text-align: center;
|
||||
padding: 3px 4px;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
line-height: 12px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
right: -3px;
|
||||
.btn-buscar {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 0;
|
||||
outline: 0;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
@extend .sprite;
|
||||
@extend .sprite-search-icon;
|
||||
}
|
||||
}
|
||||
|
||||
&__account-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
height: 19px;
|
||||
width: 1px;
|
||||
margin: 0 24px;
|
||||
background: $white-500;
|
||||
}
|
||||
}
|
||||
|
||||
&__minicart-button {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
.portal-totalizers-ref {
|
||||
.title,
|
||||
.amount-products,
|
||||
.amount-items strong,
|
||||
.amount-kits,
|
||||
.total-cart {
|
||||
display: none;
|
||||
}
|
||||
|
||||
em {
|
||||
.cart-info {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.amount-items-em {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: -4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
line-height: 11px;
|
||||
font-size: 9px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
color: $white-500;
|
||||
background-color: $blue-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-simples {
|
||||
border-bottom: 1px solid $color-gray;
|
||||
padding: 18px 0;
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
.compra-segura {
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.header,
|
||||
.compra-segura {
|
||||
@include mq("sm", max) {
|
||||
text-align: center;
|
||||
padding: 4px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-autocomplete {
|
||||
&.autocompleteopen {
|
||||
display: table !important;
|
||||
}
|
||||
|
||||
background: white;
|
||||
padding: 0;
|
||||
z-index: 999 !important;
|
||||
width: auto !important;
|
||||
border: solid 1px #ccc;
|
||||
box-shadow: 0px 1px 5px -4.5px rgba(0, 0, 0, 0.95);
|
||||
|
||||
li {
|
||||
padding: 12px 32px 12px 16px;
|
||||
overflow: hidden;
|
||||
font-size: 0.9em !important;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: $color-gray4;
|
||||
}
|
||||
a {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
margin-right: 10px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-autocomplete {
|
||||
background: white;
|
||||
border: solid 1px #ccc;
|
||||
box-shadow: 0px 1px 5px -4.5px rgba(0, 0, 0, 0.95);
|
||||
max-width: 260px;
|
||||
padding: 0;
|
||||
width: auto !important;
|
||||
z-index: 999 !important;
|
||||
|
||||
&.autocompleteopen {
|
||||
display: table !important;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 12px 32px 12px 16px;
|
||||
overflow: hidden;
|
||||
font-size: 0.9em !important;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: $color-gray4;
|
||||
}
|
||||
a {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
margin-right: 10px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,18 @@
|
||||
// fonts
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
|
||||
$font-family: "Roboto", sans-serif;
|
||||
$font-family: "Inter", sans-serif;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-regular: 400;
|
||||
$font-weight-heavy: 700;
|
||||
$font-height: 1.5;
|
||||
|
||||
// colors
|
||||
|
||||
$black-500: #000;
|
||||
$white-500: #fff;
|
||||
$blue-500: #00c8ff;
|
||||
|
||||
$color-black: #000;
|
||||
$color-black2: #142032;
|
||||
$color-black3: #19273d;
|
||||
|
||||
BIN
src/arquivos/sprite/bag-icon.png
Normal file
BIN
src/arquivos/sprite/bag-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 815 B |
BIN
src/arquivos/sprite/search-icon.png
Normal file
BIN
src/arquivos/sprite/search-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 602 B |
BIN
src/arquivos/sprite/user-icon.png
Normal file
BIN
src/arquivos/sprite/user-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 772 B |
@ -1,159 +1,24 @@
|
||||
<header class="header">
|
||||
<div class="pink-bar">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="sprite sprite-map-pointer-white"></i>
|
||||
Guide Shop
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/account">
|
||||
Meus pedidos
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="principal">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-4 menu-mobile-abrir">
|
||||
<button aria-label="Abrir Menu" id="open-menu-button">
|
||||
<i class="sprite sprite-menu"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 menu-principal">
|
||||
<div class="header-menu-mobile">
|
||||
<p>
|
||||
<i class="sprite sprite-cadeado"></i>
|
||||
<span>Compra 100% segura</span>
|
||||
</p>
|
||||
<button aria-label="Fechar Menu" id="close-menu-button">
|
||||
<span></span>
|
||||
</button>
|
||||
<div class="fullTextSearchBox">
|
||||
<vtex.cmc:fullTextSearchBox />
|
||||
</div>
|
||||
</div>
|
||||
<nav role="navigation">
|
||||
<ul class="itens nav navbar-nav" itemscope="itemscope"
|
||||
itemtype="http://www.schema.org/SiteNavigationElement">
|
||||
<li class="novidades" itemprop="name">
|
||||
<a itemprop="url" class="titulo-departamento highlight"
|
||||
href="/busca/?fq=H:143&O=OrderByReleaseDateDESC" title="novidades">
|
||||
novidades
|
||||
</a>
|
||||
</li>
|
||||
<li class="calcados m3-dropdown" itemprop="name">
|
||||
<a itemprop="url" class="titulo-departamento" href="/calcados" title="calçados">
|
||||
calçados
|
||||
</a>
|
||||
<button class="ver-departamento">Abir departamento</button>
|
||||
<div class="m3-dropdown-menu">
|
||||
<div class="btn-voltar">
|
||||
<button>
|
||||
<i class="sprite sprite-arrow-left"></i>
|
||||
<span>
|
||||
Voltar
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="links-menu">
|
||||
<ul>
|
||||
<li itemprop="name" class="link-departamento">
|
||||
<a itemprop="url" href="/calcados" title="Calçados">
|
||||
Calçados
|
||||
</a>
|
||||
</li>
|
||||
<li itemprop="name">
|
||||
<a itemprop="url" href="/calcados/sapatilha" title="Sapatilha">
|
||||
Sapatilha
|
||||
</a>
|
||||
</li>
|
||||
<li itemprop="name">
|
||||
<a itemprop="url" href="/calcados/tenis" title="Tênis">
|
||||
Tênis
|
||||
</a>
|
||||
</li>
|
||||
<li itemprop="name">
|
||||
<a itemprop="url" href="/calcados/scarpin" title="Scarpin">
|
||||
Scarpin
|
||||
</a>
|
||||
</li>
|
||||
<li itemprop="name">
|
||||
<a itemprop="url" href="/calcados/bota" title="Bota">
|
||||
Bota
|
||||
</a>
|
||||
</li>
|
||||
<li itemprop="name" class="ver-todos">
|
||||
<a itemprop="url" href="/calcados" title="ver todos">
|
||||
ver todos
|
||||
<i class="sprite sprite-arrow-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="sapatilha" itemprop="name">
|
||||
<a itemprop="url" class="titulo-departamento" href="/calcados/sapatilha" title="sapatilha">
|
||||
sapatilha
|
||||
</a>
|
||||
</li>
|
||||
<li class="tênis" itemprop="name">
|
||||
<a itemprop="url" class="titulo-departamento" href="/calcados/tenis" title="tênis">
|
||||
tênis
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-menu-mobile">
|
||||
<a href="">
|
||||
<i class="sprite sprite-user-white"></i>
|
||||
<span>Entrar/Meus pedidos</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 col-md-2 logo">
|
||||
<a href="/" title="VTEX"><img src="/arquivos/template-logo.png" alt="VTEX" /></a>
|
||||
</div>
|
||||
<div class="col-4 col-md-5 util-links">
|
||||
<div class="busca-desktop">
|
||||
<div class="fullTextSearchBox">
|
||||
<vtex.cmc:fullTextSearchBox />
|
||||
</div>
|
||||
</div>
|
||||
<div class="links-usuario">
|
||||
<a href="/account" title="minha-conta">
|
||||
<i class="sprite sprite-user"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="carrinho">
|
||||
<a href="/checkout/#cart">
|
||||
<div class="AmountItemsInCart">
|
||||
<i class="sprite sprite-shopping-bag"></i>
|
||||
<vtex.cmc:AmountItemsInCart />
|
||||
</div>
|
||||
</a>
|
||||
<div class="mini-cart">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 busca-mobile">
|
||||
<div class="fullTextSearchBox">
|
||||
<vtex.cmc:fullTextSearchBox />
|
||||
</div>
|
||||
</div>
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<div class="page-header__wrapper">
|
||||
<nav></nav>
|
||||
|
||||
<a href="/">
|
||||
<img class="page-header__logo" src="/arquivos/logo-m3.png" alt="" />
|
||||
</a>
|
||||
|
||||
<div class="user-items">
|
||||
<vtex.cmc:fullTextSearchBox />
|
||||
|
||||
<a class="user-items__account-link" href="/account">
|
||||
<i class="sprite sprite-user-icon"></i>
|
||||
</a>
|
||||
|
||||
<button class="user-items__minicart-button">
|
||||
<i class="sprite sprite-bag-icon"></i>
|
||||
|
||||
<vtex.cmc:AmountItemsInCart />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,127 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
|
||||
xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
|
||||
<html
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
|
||||
xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce"
|
||||
lang="pt-br"
|
||||
>
|
||||
<head>
|
||||
<meta name="page" content="home" page-id="homepage" />
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<vtex:metaTags />
|
||||
<vtex:contentPlaceHolder id="htmlSeo" />
|
||||
<title>Nicolly</title>
|
||||
|
||||
<head>
|
||||
<meta name="page" content="home" page-id="homepage" />
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<vtex:metaTags />
|
||||
<vtex:contentPlaceHolder id="htmlSeo" />
|
||||
<title>Template</title>
|
||||
<vtex:template id="template-loads-header" />
|
||||
</head>
|
||||
|
||||
<vtex:template id="template-loads-header" />
|
||||
<body>
|
||||
<vtex:template id="template-header" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<vtex:template id="template-header" />
|
||||
|
||||
<main class="home">
|
||||
|
||||
<section class="main-gallery">
|
||||
<div class="desktop">
|
||||
<vtex:contentPlaceHolder id="slide-principal" />
|
||||
</div>
|
||||
<div class="mobile">
|
||||
<vtex:contentPlaceHolder id="slide-principal-mobile" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container tipbar">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<ul>
|
||||
<li>
|
||||
<i class="sprite sprite-credit-card"></i>
|
||||
<p>
|
||||
parcelamento
|
||||
<span>
|
||||
até <strong>10x sem juros</strong>
|
||||
</span>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="sprite sprite-truck"></i>
|
||||
<p>
|
||||
frete grátis
|
||||
<span>
|
||||
acima de <strong>R$399,00</strong>
|
||||
</span>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="sprite sprite-discount-tag"></i>
|
||||
<p>
|
||||
desconto de
|
||||
<span>
|
||||
<strong>10%off</strong> no boleto
|
||||
</span>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container mosaico-home">
|
||||
<div class="row">
|
||||
<div class="banners-left banner col-12 col-md-4">
|
||||
<vtex:contentPlaceHolder id="banner-01" />
|
||||
</div>
|
||||
<div class="banners-right col-12 col-md-8 row">
|
||||
<div class="banner col-12 col-md-6">
|
||||
<vtex:contentPlaceHolder id="banner-02" />
|
||||
</div>
|
||||
<div class="banner col-12 col-md-6">
|
||||
<vtex:contentPlaceHolder id="banner-03" />
|
||||
</div>
|
||||
<div class="banner col-12">
|
||||
<vtex:contentPlaceHolder id="banner-04" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="instagramGallery">
|
||||
<div class="container">
|
||||
<div class="instagramGallery__row">
|
||||
<div class="instagramGallery__photos"></div>
|
||||
|
||||
<div class="instagramGallery__link">
|
||||
<i class="sprite sprite-instagram-black"></i>
|
||||
|
||||
<p>
|
||||
<i>#</i>osqueridinhos
|
||||
|
||||
<a href="#" target="_blank">
|
||||
ver todos <i class="sprite sprite-arrow-right"></i>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container mosaico-home-footer">
|
||||
<div class="banner desktop">
|
||||
<vtex:contentPlaceHolder id="banner-05" />
|
||||
</div>
|
||||
<div class="banner mobile">
|
||||
<vtex:contentPlaceHolder id="mobile-banner-05" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<vtex:template id="template-footer-newsletter" />
|
||||
<vtex:template id="template-footer-links" />
|
||||
<vtex:template id="template-footer" />
|
||||
</footer>
|
||||
<vtex:template id="template-loads-footer" />
|
||||
</body>
|
||||
<main class="home"></main>
|
||||
|
||||
<footer>
|
||||
<vtex:template id="template-footer-newsletter" />
|
||||
<vtex:template id="template-footer-links" />
|
||||
<vtex:template id="template-footer" />
|
||||
</footer>
|
||||
<vtex:template id="template-loads-footer" />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user