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

Hotfix: Corrige Cards no desktop e Mobile

Browse Source
This commit is contained in:
Affonso Kopmann 2022-10-11 00:12:38 -03:00
parent 343f5036b8
commit 34b0351ab9
2 changed files with 74 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
_assets/css/main.css
View File

@ -27,7 +27,6 @@ body {
} }
.infocard { .infocard {
border: #00c8ff 1px solid;
margin: 73px 25%; margin: 73px 25%;
justify-content: center; justify-content: center;
@ -58,7 +57,6 @@ body {
} }
.pc-icon { .pc-icon {
border: #00c8ff 1px solid;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -68,7 +66,6 @@ body {
} }
.pc-icon-image { .pc-icon-image {
border: #00c8ff 1px solid;
width: 315px; width: 315px;
} }
@ -85,7 +82,7 @@ body {
} }
.card { .card {
width: 350px; max-width: 350px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -147,16 +144,44 @@ body {
} }
.pc-icon-image { .pc-icon-image {
border: #00c8ff 1px solid;
width: 58%; width: 58%;
} }
.cards-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 91px;
padding-bottom: 80px;
}
.card {
padding: 35px 26px 28px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.card-description {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-top: 27px;
}
} }
@media screen and (min-width: 415px) and (max-width: 1024px){
@media screen and (min-width: 415px) and (max-width: 1200px){
.top-banner-image-mobile { .top-banner-image-mobile {
display: none; display: none;
} }
.infocard { .infocard {
@ -179,11 +204,45 @@ body {
text-align: center; text-align: center;
} }
.pc-icon { .pc-icon {
margin-top: 65px; margin-top: 65px 0 91px;
margin-bottom: 91px; }
.pc-icon-image {
width: 58%;
}
.cards-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 91px;
padding-bottom: 80px;
}
.card {
padding: 35px 26px 28px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.card-description {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-top: 27px;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 2500px){ @media screen and (min-width: 1024px) and (max-width: 2500px){
.top-banner-image-mobile { .top-banner-image-mobile {
@ -191,3 +250,6 @@ body {
} }
} }

3
index.html
View File

@ -31,6 +31,7 @@
<img class="top-banner-image-mobile" src="./_assets/images/main-banner-mobile.jpg" alt="Top Banner"> <img class="top-banner-image-mobile" src="./_assets/images/main-banner-mobile.jpg" alt="Top Banner">
</figure> </figure>
<!-- Bloco Infocard | Desktop and Mobile -->
<section class="block-main"> <section class="block-main">
<div class="infocard"> <div class="infocard">
<h2 class="infocard-subtitle">Lorem ipsum</h2> <h2 class="infocard-subtitle">Lorem ipsum</h2>
@ -43,6 +44,7 @@
</figure> </figure>
</section> </section>
<!-- Cards | Desktop and Mobile -->
<div class="cards-wrapper"> <div class="cards-wrapper">
<figure class="card"> <figure class="card">
<img class="card-image" src="./_assets/images/card-image1.svg" alt="Card Image 1"> <img class="card-image" src="./_assets/images/card-image1.svg" alt="Card Image 1">
@ -64,7 +66,6 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption> </figcaption>
</figure> </figure>
</div> </div>
</main> </main>