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

82
_assets/css/main.css
View File

@ -27,7 +27,6 @@ body {
}
.infocard {
border: #00c8ff 1px solid;
margin: 73px 25%;
justify-content: center;
@ -58,7 +57,6 @@ body {
}
.pc-icon {
border: #00c8ff 1px solid;
display: flex;
flex-direction: column;
align-items: center;
@ -68,7 +66,6 @@ body {
}
.pc-icon-image {
border: #00c8ff 1px solid;
width: 315px;
}
@ -85,7 +82,7 @@ body {
}
.card {
width: 350px;
max-width: 350px;
display: flex;
flex-direction: column;
align-items: center;
@ -138,7 +135,7 @@ body {
.infocard-description {
padding-top: 19px;
font-size: 16px;
line-height: 24px;
line-height: 24px;
text-align: center;
}
@ -147,16 +144,44 @@ body {
}
.pc-icon-image {
border: #00c8ff 1px solid;
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 {
display: none;
}
.infocard {
@ -179,15 +204,52 @@ body {
text-align: center;
}
.pc-icon {
margin-top: 65px;
margin-bottom: 91px;
margin-top: 65px 0 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){
.top-banner-image-mobile {
display: none;
}
}
}

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">
</figure>
<!-- Bloco Infocard | Desktop and Mobile -->
<section class="block-main">
<div class="infocard">
<h2 class="infocard-subtitle">Lorem ipsum</h2>
@ -43,6 +44,7 @@
</figure>
</section>
<!-- Cards | Desktop and Mobile -->
<div class="cards-wrapper">
<figure class="card">
<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.
</figcaption>
</figure>
</div>
</main>