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

Adicionar os banners do meio

Browse Source
This commit is contained in:
Victor Cardoso de Souza 2022-10-10 17:42:04 -03:00
parent 55bf7c2fe4
commit bc09c080f8
9 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assests/bottom-card-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assests/bottom-card-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
assests/bottom-card-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assests/bottom-card-04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
assests/middle-banner-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

BIN
assests/middle-banner-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
assests/middle-banner-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

12
index.html
View File

@ -37,7 +37,7 @@
<div class="middle-cards"> <div class="middle-cards">
<figure class="middle-card"> <figure class="middle-card">
<img class="middle-card-image" src="./assests/middle-card-01.png" alt="Imagem do primeiro card do meio"> <img class="middle-card-image" src="./assests/middle-card-01.png" alt="Imagem do primeiro card do meio">
<p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
</figure> </figure>
<figure class="middle-card"> <figure class="middle-card">
@ -50,10 +50,14 @@
<p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</figure> </figure>
</div> </div>
<figure>
</figure>
</section> </section>
<figure class="middle-banners">
<img class="middle-banners-image" src="./assests/middle-banner-01.png" alt="Imagem do primeiro banner do meio">
<img class="middle-banners-image" src="./assests/middle-banner-02.png" alt="Imagem do segundo banner do meio">
<img class="middle-banners-image" src="./assests/middle-banner-03.png" alt="Imagem do terceiro banner do meio">
</figure>
</main> </main>
</body> </body>

24
main.css
View File

@ -36,7 +36,7 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 74px 0 180px; padding: 74px 0 80px;
} }
/* estilização para caixa do texto ( não coloquei em 40% para quebrar no paragrafo do figma */ /* estilização para caixa do texto ( não coloquei em 40% para quebrar no paragrafo do figma */
@ -68,8 +68,6 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 22px; gap: 22px;
} }
.middle-card { .middle-card {
@ -94,8 +92,28 @@ body {
text-align: center; text-align: center;
} }
.middle-banners {
display:flex;
align-items: center;
justify-content: center;
background: #E0E0E0;
}
.middle-banners-image {
margin-top: 62px;
max-width: 30%;
width: 100%;
display: flex;
}
.middle-banners-image:nth-child(2) {
margin: 62px 40px 0 40px ;
}