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

correçaõ do middle-banner, exclusão de linhas de img exessivas do middle banner

Browse Source
This commit is contained in:
Ueber James Santos 2022-10-10 15:09:22 -03:00
parent b1fd714abd
commit 5029317829
2 changed files with 40 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@ -83,29 +83,20 @@
<!-- Container Middle banner -->
<div class="mini-banner">
<div class="card-wrpper">
<figure class="middle-card">
<figure class="middle-card1 ">
<img class="middle-img" src="/src/img/mini-banner1.png" alt="" />
<img
class="middle-mini-img"
src="/src/img/min-banner1.png"
alt=""
/>
</figure>
<figure class="middle-card">
<figure class="middle-card2">
<img class="middle-img" src="/src/img/mini-banner2.png" alt="" />
<img
class="middle-mini-img"
src="/src/img/min-banner2.png"
alt=""
/>
</figure>
<figure class="middle-card">
<figure class="middle-card3">
<img class="middle-img" src="/src/img/mini-banner3.png" alt="" />
<img
class="middle-mini-img"
src="/src/img/min-banner3.png"
alt=""
/>
</figure>
</div>
</div>

42
src/style/style.css
View File

@ -105,7 +105,6 @@ body {
}
.middle-img,
.middle-mini-img,
.banner-final-descktop,
.banner-final-mobile {
display: block;
@ -114,7 +113,7 @@ body {
.card-wrpper {
display: grid;
grid-template-columns: repeat(3, max-content);
grid-template-columns: auto auto auto ;
justify-content: center;
gap: 39px;
position: relative;
@ -130,12 +129,13 @@ body {
.descricao-container-second {
padding: 78px 0 90px;
gap: 75px;
width: 100%;
}
.second-cards {
margin: 0%;
display: grid;
grid-template-columns: repeat(4, max-content);
grid-template-columns: auto auto auto auto;
gap: 16px;
background: #f0f0f0;
}
@ -203,7 +203,6 @@ body {
@media screen and (max-width: 1024px) {
.descktop-banner,
.middle-img,
.banner-final-descktop {
display: none;
}
@ -219,7 +218,7 @@ body {
}
.second-cards {
grid-template-columns: 1fr;
grid-template-columns: auto;
margin: 0 23px;
}
@ -252,12 +251,32 @@ body {
}
.card-wrpper {
flex-direction: column;
align-items: center;
gap: 16px;
display: flex;
align-items: center;
display: grid;
grid-template-columns: (2, 1fr);
column-gap: 24px;
row-gap: 23px;
grid-template-areas: "img2 img1"
"img3 img3";
padding: 0 64px 32px;
}
.middle-card{
grid-area: img1;
}
.middle-card2{
grid-area: img2;
}
.middle-card3{
grid-area: img3;
}
.footer-page {
@ -278,7 +297,7 @@ body {
@media screen and (min-width: 1025px) {
.mobile-banner,
.middle-mini-img,
.banner-final-mobile {
display: none;
}
@ -307,3 +326,4 @@ body {
width: 30px;
}
}