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

feature/top-infocard #3

Merged
ednabarboza merged 3 commits from feature/top-infocard into development 2022-10-11 16:51:43 +00:00
Conversation 0 Commits 3 Files Changed 3 +44 -13
2 changed files with 44 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit af2f9885f4 - Show all commits

42
assets/style/style.css
View File

@ -21,21 +21,25 @@ body{
} }
.main-banner{ .main-banner{
display: block;
width: 100%; width: 100%;
} }
.top-infocard{ .top-infocard{
display:inline-block; display:flex;
align-items: center;
justify-content: center; justify-content: center;
align-items: center;
margin-top: 73px;
} }
.top-infocard-text{ .top-infocard-text{
margin: 73px 577px; max-width: 766px;
} }
.top-infocard-subtitle{ .top-infocard-subtitle{
display: flex;
justify-content: center;
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
@ -44,10 +48,13 @@ body{
} }
.top-infocard-title{ .top-infocard-title{
display: flex;
justify-content: center;
font-weight: 500; font-weight: 500;
font-size: 48px; font-size: 48px;
line-height: 58px; line-height: 58px;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 24px;
} }
.top-infocard-description{ .top-infocard-description{
@ -58,10 +65,11 @@ body{
} }
.top-infocard-image{ .top-infocard-image{
margin: 0 803px 179px 802px; display: flex;
justify-content: center;
margin: 84px 0 178px;
} }
/*MEDIAS*/ /*MEDIAS*/
@media screen and (max-width:414px) { @media screen and (max-width:414px) {
@ -69,11 +77,33 @@ body{
display: none; display: none;
} }
.top-infocard-subtitle{
font-size: 20px;
line-height: 24px;
}
.top-infocard-title{
font-size: 28px;
line-height: 34px;
}
.top-infocard-description{
font-size: 16px;
line-height: 24px;
margin: 28px;
text-align: center;
}
.top-infocard-image{
margin: 74px 0 90px;
}
} }
@media screen and (min-width: 415px){ @media screen and (min-width: 415px){
.main-banner-mobile{ .main-banner-mobile{
display: none; display: none;
} }
} }

11
index.html
View File

@ -36,18 +36,19 @@
<section class="top-infocard"> <section class="top-infocard">
<div class="top-infocard-text"> <div class="top-infocard-text">
<h2 class="top-infocard-subtitle">Lorem ipsum</h2> <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
<h1 class="top-infocard-title">dolor sit amet</h1> <h1 class="top-infocard-title">dolor sit amet</h1>
<p class="top-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla <p class="top-infocard-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 interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna
dui. </p> dui. </p>
</div> </div>
<figure>
<img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Imagem de um esquema de três computadores"/>
</figure>
</section> </section>
<figure class="top-infocard-image">
<img src="./assets/images/top-infocard-image.png" alt="Imagem de um esquema de três computadores"/>
</figure>
</main> </main>
</body> </body>