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

Merge pull request 'develop' (#6) from develop into main

Browse Source 
Reviewed-on: #6
This commit is contained in:
Affonso Kopmann 2022-10-13 01:25:13 +00:00
commit 7936015ab1
2 changed files with 60 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
_assets/css/main.css
View File

@ -95,38 +95,46 @@ body {
margin-top: 27px; margin-top: 27px;
} }
.imageblock-wrapper { .fig-container {
border: #00c8ff 1px solid; background-color: #E0E0E0;
background-color: #e0e0e0;
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 39px;
justify-content: center;
} }
.imageblock-image { .fig-wrapper {
border: #00c8ff 1px solid; height: 530px;
display: flex; display: flex;
flex-direction: column; justify-content: center;
justify-content: center; align-items: center;
align-items: center; gap: 39px;
position: relative;
bottom: -62px;
} }
.fig-image {
width: 29%;
}
.cards-wrapper2 { .cards-wrapper2 {
display: grid;
grid-template-columns: repeat(4, max-content);
gap: 16px; gap: 16px;
justify-content: center; justify-content: center;
padding-top: 179px;
padding-bottom: 74px;
text-align: center; text-align: center;
margin: 179px 72px 74px 72px;
display: flex;
} }
.card2 { .card2 {
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;
@ -147,7 +155,6 @@ body {
} }
.article { .article {
border: #00c8ff 1px solid;
margin-top: 108px; margin-top: 108px;
} }
@ -159,16 +166,20 @@ body {
} }
.article-description { .article-description {
justify-content: center; max-width: 550px;
text-align: center; text-align: center;
font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
max-width: 550px; margin: 0 auto 50px auto;
margin-bottom: 50px;
} }
.bottom-banner { .bottom-banner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -181,15 +192,15 @@ body {
} }
.page-footer { .page-footer {
margin-top: 106px; margin-top: 116px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background: #000000; background: #000000;
padding: 38px 0;
} }
.page-footer-icon { .page-footer-icon {
margin-top: 38px;
display: flex; display: flex;
list-style: none; list-style: none;
} }
@ -197,7 +208,11 @@ body {
.footer-text { .footer-text {
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
padding-bottom: 38px; margin: 17px 0 38px;
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
color: #BDBDBD;
} }
@ -210,11 +225,6 @@ body {
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
.top-banner-image-desktop, .top-banner-image-desktop,
.bottom-banner-desktop { .bottom-banner-desktop {

24
index.html
View File

@ -103,20 +103,19 @@
</figure> </figure>
</div> </div>
<!-- Imageblock | Desktop and Mobile -->
<div class="imageblock-wrapper">
<figure class="imageblock-image image1">
<img src="./_assets/images/image1.png" alt="Imagem 1" />
</figure>
<figure class="imageblock-image image2"> <div class="fig-container">
<img src="./_assets/images/image2.png" alt="Imagem 2" /> <figure class="fig-wrapper">
</figure> <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>
</div>
<figure class="imageblock-image image3">
<img src="./_assets/images/image3.png" alt="Imagem 3" />
</figure>
</div>
<!-- Cards2 | Desktop and Mobile --> <!-- Cards2 | Desktop and Mobile -->
<div class="cards-wrapper2"> <div class="cards-wrapper2">
@ -202,6 +201,7 @@
/> />
</figure> </figure>
<!-- Footer | Desktop and Mobile -->
<footer class="page-footer"> <footer class="page-footer">
<ul class="page-footer-icon"> <ul class="page-footer-icon">
<li class="footer-icon"> <li class="footer-icon">