BernardoWaldhelm/challenge-landing-page-BernardoWaldhelm
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): adicionando carousel de imgs desktop e mobile

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2022-10-12 10:19:14 -03:00
parent 3d011fa04d
commit f5db388416
3 changed files with 41 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
assets/styles/css/main.css
View File

@ -97,6 +97,26 @@
max-width: 300px; max-width: 300px;
} }
.carousel{
margin-top: 80px;
background: #E0E0E0;
}
.carousel__products {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 40px;
justify-content: center;
top: 62px;
position: relative;
}
.carousel__products_img {
width: 30vw;
max-width: 566px;
display: block;
}
@media screen and (min-width: 769px) and (max-width: 1200px) { @media screen and (min-width: 769px) and (max-width: 1200px) {
.home-destaque__img { .home-destaque__img {
width: 58%; width: 58%;
@ -145,6 +165,24 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 0 28px; padding: 0 28px;
} }
.carousel__products {
grid-template-columns: repeat(2, max-content);
justify-content: center;
column-gap: 14px;
row-gap: 24px;
padding: 0 26px;
}
.carousel__products_img {
width: 42vw;
}
.product3 {
grid-column: 1/3;
width: 88vw;
max-width: none;
}
} }
@media screen and (min-width: 415px) { @media screen and (min-width: 415px) {

1
assets/styles/css/reset.css
View File

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

6
index.html
View File

@ -52,9 +52,9 @@
<section class="carousel"> <section class="carousel">
<div class="carousel__products"> <div class="carousel__products">
<img src="/assets/images/product1.png" alt="Imagem do Produto 1" class="carousel__products_img"> <img class="carousel__products_img" src="/assets/images/product1.png" alt="Imagem do Produto 1" >
<img src="/assets/images/product2.png" alt="Imagem do Produto 2" class="carousel__products_img"> <img class="carousel__products_img " src="/assets/images/product2.png" alt="Imagem do Produto 2" >
<img src="/assets/images/product3.png" alt="Imagem do Produto 3" class="carousel__products_img"> <img class="carousel__products_img product3" src="/assets/images/product3.png" alt="Imagem do Produto 3" ">
</div> </div>
</section> </section>