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

Adicionando cards e textos no parte principal do projeto

Browse Source
This commit is contained in:
Victor Cardoso de Souza 2022-10-10 12:23:45 -03:00
parent d70193e6fc
commit c6a69e9a66
5 changed files with 59 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 939 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

28
index.html
View File

@ -22,15 +22,31 @@
<img class="main-banner main-banner-mobile" src="./assests/main-banner-mobile.png" alt="Banner do topo Mobile"> <img class="main-banner main-banner-mobile" src="./assests/main-banner-mobile.png" alt="Banner do topo Mobile">
</figure> </figure>
</div> </div>
<section class="top-information"> <section class="middle-information">
<div class="top-text"> <div class="middle-text">
<h2 class="top-information-subtitle">Lorem ipsum</h2> <h2 class="middle-information-subtitle">Lorem ipsum</h2>
<h1 class="top-information-title">dolor sit amet</h1> <h1 class="middle-information-title">dolor sit amet</h1>
<p class="top-information-description"> <p class="middle-information-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.
</p> </p>
</div> </div>
<figure>
<img class="main-image-desktop" src="./assests/main-image-desktop.png" alt="Imagem da main Desktop">
<img class="main-image-mobile"src="./assests/main-image-mobile.png" alt="Imagem da main Mobile">
</figure>
<div class="middle-cards">
<figure>
<img src="./assests/middle-card-01.png" alt="Imagem do primeiro card do meio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</figure>
</div>
</section> </section>
<div>
</div>
</main> </main>

48
main.css
View File

@ -9,7 +9,7 @@
body { body {
font-family: 'inter', sans-serif; font-family: 'inter', sans-serif;
} }
/* estilazação do fundo */ /* estilização do fundo */
.head-logo { .head-logo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -27,31 +27,32 @@ body {
display: block; display: block;
} }
.top-information { .middle-information {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 74px 0 180px;
} }
/* 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 */
.top-text { .middle-text {
display:flex; display:flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 766px; width: 40%;
padding: 74px 0 580px; margin-bottom: 74px;
} }
.top-information-subtitle { .middle-information-subtitle {
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
text-transform: uppercase; text-transform: uppercase;
} }
.top-information-title { .middle-information-title {
font-weight: 500; font-weight: 500;
font-size: 48px; font-size: 48px;
line-height: 58px; line-height: 58px;
@ -60,13 +61,38 @@ body {
} }
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
.main-banner-desktop { .main-banner-desktop, .main-image-desktop {
display: none; display: none;
} }
} }
@media screen and (min-width:415px ) { @media screen and (min-width:415px ) {
.main-banner-mobile { .main-banner-mobile, .main-image-mobile {
display: none; display: none;
} }
} }
@media screen and (max-width:1024px) {
.middle-text {
width: 100%;
max-width: 112%;
text-align: center;
}
.middle-information {
padding: 74px 28px 90px;
}
.middle-information-subtitle {
font-size: 20px;
line-height: 24px;
}
.middle-information-title {
font-size: 28px;
line-height: 34px;
}
}