forked from M3-Academy/vtex-cms-template-atualizado
feat(home): Cria a barra de vantagens da home
This commit is contained in:
parent
6f09b42572
commit
72ff517f74
@ -1,5 +1,7 @@
|
||||
.home {
|
||||
.main-banners {
|
||||
margin-bottom: 38px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
@ -96,4 +98,49 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advantages {
|
||||
margin-bottom: 117px;
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
overflow: auto;
|
||||
|
||||
@include mq(sm, min) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 75px;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
BIN
src/arquivos/sprite/credit-card-icon.png
Normal file
BIN
src/arquivos/sprite/credit-card-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.2 KiB |
BIN
src/arquivos/sprite/store-icon.png
Normal file
BIN
src/arquivos/sprite/store-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
BIN
src/arquivos/sprite/truck-icon.png
Normal file
BIN
src/arquivos/sprite/truck-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 980 B |
@ -31,6 +31,37 @@
|
||||
<vtex:contentPlaceHolder id="banners-principais-mobile" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="advantages">
|
||||
<ul class="advantages__list">
|
||||
<li class="advantages__item">
|
||||
<i class="sprite sprite-credit-card-icon"></i>
|
||||
<p class="advantages__text">
|
||||
PARCELAMENTO EM
|
||||
<br/>
|
||||
ATÉ 6X SEM JUROS
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="advantages__item">
|
||||
<i class="sprite sprite-truck-icon"></i>
|
||||
<p class="advantages__text">
|
||||
PAC GRÁTIS PARA COMPRAS
|
||||
<br/>
|
||||
ACIMA DE <strong>R$ 500,00</strong>
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="advantages__item">
|
||||
<i class="sprite sprite-store-icon"></i>
|
||||
<p class="advantages__text">
|
||||
FÁBRICA
|
||||
<br/>
|
||||
PRÓPRIA
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
Loading…
Reference in New Issue
Block a user