feat(home): adicionando cars desktop e mobile

This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2022-10-11 17:02:20 -03:00
parent 8cc5374bae
commit 3d011fa04d
9 changed files with 90 additions and 15 deletions

BIN
assets/images/card1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 959 B

BIN
assets/images/card2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
assets/images/card3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
assets/images/product1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

BIN
assets/images/product2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 KiB

BIN
assets/images/product3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 318 KiB

View File

@ -68,22 +68,56 @@
margin-bottom: 180px;
}
@media screen and (min-width: 415px) {
.banner__img__mobile {
display: none;
.cards {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 20px;
justify-content: center;
}
.cards__card{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
padding: 36px 26px 26px;
}
.card__img {
display: block;
margin-bottom: 26px;
}
.card__description {
padding: 0 25px 27px;
text-align: center;
max-width: 300px;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
.home-destaque__img {
width: 58%;
max-width: 240px;
}
.cards {
grid-template-columns: repeat(2, max-content);
}
.card__description {
max-width: 230px;
}
}
@media screen and (max-width: 414px) {
@media screen and (max-width: 768px) {
.header__logo {
width: 54%;
}
.banner__img__desktop {
display: none;
}
.home-destaque__text {
padding: 0 28px;
}
@ -101,20 +135,37 @@
.home-destaque__text__description {
text-align: center;
}
.home-destaque__img {
width: 58%;
max-width: 240px;
}
.cards {
grid-template-columns: 1fr;
padding: 0 28px;
}
}
@media screen and (min-width: 415px) {
.banner__img__mobile {
display: none;
}
}
@media screen and (max-width: 414px) {
.banner__img__desktop {
display: none;
}
}
@media screen and (max-width: 300px) {
.home-destaque__text__title{
font-size: 26px;
}
}
@media screen and (min-width:414px) and (max-width:768px ) {
.home-destaque__img {
width: 58%;
.cards__card{
max-width: 235px;
}
}
}

View File

@ -26,6 +26,7 @@ body {
line-height: 1;
font-family: 'Inter', sans-serif;
color: #000;
background: #e5e5e5;
}
ol, ul {
list-style: none;

View File

@ -35,6 +35,29 @@
</section>
<section class="cards">
<div class="cards__card">
<img src="/assets/images/card1.png" alt="Imagem do Card 1" class="card__img">
<p class='card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="cards__card">
<img src="/assets/images/card2.png" alt="Imagem do Card 2" class="card__img">
<p class='card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="cards__card">
<img src="/assets/images/card3.png" alt="Imagem do Card 3" class="card__img">
<p class='card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
</section>
<section class="carousel">
<div class="carousel__products">
<img src="/assets/images/product1.png" alt="Imagem do Produto 1" class="carousel__products_img">
<img src="/assets/images/product2.png" alt="Imagem do Produto 2" class="carousel__products_img">
<img src="/assets/images/product3.png" alt="Imagem do Produto 3" class="carousel__products_img">
</div>
</section>
</main>
</body>