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

develop #7

Merged
affonso_kopmann merged 4 commits from develop into main 2022-10-14 00:52:27 +00:00
Conversation 1 Commits 4 Files Changed 2 +69 -155
2 changed files with 69 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 85c9e2a8a0 - Show all commits

199
_assets/css/main.css
View File

@ -1,3 +1,4 @@
/* Reset */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -20,15 +21,19 @@ body {
display: block; display: block;
} }
.top-banner-image-desktop, .top-banner-image-desktop {
width: 100%;
}
.top-banner-image-mobile { .top-banner-image-mobile {
width: 100%; width: 100%;
display: none;
} }
.infocard { .infocard {
margin: 73px 25%; margin: 73px 25%;
justify-content: center; justify-content: center;
} }
.infocard-title { .infocard-title {
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
@ -65,18 +70,15 @@ body {
} }
.cards-wrapper { .cards-wrapper {
display: grid; gap: 16px;
grid-template-columns: repeat(3, max-content);
gap: 21px;
justify-content: center; justify-content: center;
padding-top: 179px;
padding-bottom: 74px;
text-align: center; text-align: center;
margin: 129px 72px 74px 72px;
display: flex;
} }
.card { .card {
max-width: 350px; max-width: 350px;
display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0 26px 28px; padding: 0 26px 28px;
@ -88,6 +90,7 @@ body {
margin-top: 35px; margin-top: 35px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.card-description { .card-description {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -96,36 +99,57 @@ body {
} }
.fig-container { .fig-container {
display: flex;
background-color: #E0E0E0; background-color: #E0E0E0;
max-height: 530px;
} }
.fig-wrapper { .figure-wrapper {
max-height: 530px; margin-left: 72px;
display: flex; margin-right: 72px;
justify-content: center;
align-items: center;
gap: 39px;
padding: 0;
} }
.fig-image { .fig-image {
width: 100%;
max-width: 566px; max-width: 566px;
width: 29%;
} }
.cards-wrapper2 { .flex-img {
max-width: 100%;
display: block;
}
.flex {
/* background-color: #E0E0E0; */
display: flex;
flex-wrap: nowrap;
max-width: 80%;
margin: 0 auto;
}
.flex > div {
flex: 1 1 566px;
margin: 0 20px;
}
/* bloco 4 cards */
.cards-wrapper2 {
gap: 16px; gap: 16px;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
margin: 179px 72px 74px 72px; margin: 129px 72px 74px 72px;
display: flex; display: flex;
} }
.card2 { .card2 {
max-width: 350px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0 26px 28px; padding: 0 26px 28px;
@ -145,6 +169,8 @@ body {
margin-top: 27px; margin-top: 27px;
} }
/* bloco Article */
.article { .article {
margin-top: 108px; margin-top: 108px;
} }
@ -162,9 +188,10 @@ body {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
margin: 0 auto 50px auto; margin: 0 auto 50px auto;
} }
/* bloco bottom banner */
.bottom-banner { .bottom-banner {
display: flex; display: flex;
align-items: center; align-items: center;
@ -176,6 +203,13 @@ body {
width: 71%; width: 71%;
} }
.bottom-banner-mobile {
width: 100%;
display: none;
}
/* bloco footer */
.page-footer { .page-footer {
margin-top: 116px; margin-top: 116px;
display: flex; display: flex;
@ -191,7 +225,6 @@ body {
} }
.footer-text { .footer-text {
color: #ffffff;
text-align: center; text-align: center;
margin: 17px 0 38px; margin: 17px 0 38px;
font-size: 10px; font-size: 10px;
@ -202,125 +235,3 @@ body {
/* Tablet e Mobile - 280px to 1024px */
@media only screen
and (min-device-width: 280px)
and (max-device-width: 1024px) {
.top-banner-image-desktop {
display: none;
}
.infocard {
margin: 73px 6%;
}
.infocard-subtitle {
font-size: 20px;
line-height: 24px;
}
.infocard-title {
font-size: 28px;
line-height: 34px;
}
.infocard-description {
padding-top: 19px;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.pc-icon {
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;
}
.imageblock-wrapper {
background-color: #e0e0e0;
display: flex;
flex-direction: column;
align-items: center;
}
.imageblock-image {
align-items: center;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.image2 .image1 {
grid-row: span 2;
width: 43%;
}
};
/* Desktop - 1025px to 2500px */
@media only screen
and (min-device-width: 1025px)
and (max-device-width: 2500px) {
.top-banner-image-mobile,
.bottom-banner-mobile {
display: none;
}
};
/* Desktop 4k - 2501px above */
@media only screen
and (min-device-width: 2501px) {
.top-banner-image-mobile,
.bottom-banner-mobile {
display: none;
}
};

19
index.html
View File

@ -104,15 +104,18 @@
</div> </div>
<div class="fig-container">
<figure class="fig-wrapper">
<img class="fig-image" src="./_assets/images/image1.png" alt="Imagem 1">
<img class="fig-image" src="./_assets/images/image2.png" alt="Imagem 2">
<img class="fig-image" src="./_assets/images/image3.png" alt="Imagem 3">
</figure>
<section class="flex">
<div>
<img class="flex-img" src="./_assets/images/image1.png" alt="">
</div> </div>
<div>
<img class="flex-img" src="./_assets/images/image2.png" alt="">
</div>
<div>
<img class="flex-img" src="./_assets/images/image3.png" alt="">
</div>
</section>
@ -165,7 +168,7 @@
<figure class="card2"> <figure class="card2">
<img <img
class="card-image2" class="card-image2"
src="./_assets/images/card2-image3.svg" src="./_assets/images/card2-image4.svg"
alt="Card Image 4" alt="Card Image 4"
/> />
<figcaption class="card-description2"> <figcaption class="card-description2">