anacarolinaduartecavalcante/challenge-landing-page-Ana-Carolina-Duarte-Cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adicionando 1° seção com imagem e texto

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-10-09 07:17:42 -03:00
parent d080199822
commit 5a8369d527
2 changed files with 76 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -26,7 +26,14 @@
<img src="./assets/imgs/header-background.jpeg" alt="background com uma imagem de notebook mostrando código de programação"> <img src="./assets/imgs/header-background.jpeg" alt="background com uma imagem de notebook mostrando código de programação">
</figure> </figure>
</div> </div>
<section class="first-section">
<h2>Lorem ipsum</h2>
<h1>dolor sit amet</h1>
<figure>
<figcaption>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.</figcaption>
<img src="./assets/svg/computers.svg" alt="imagem ilustrativa de computadores">
</figure>
</section>
</main> </main>
</body> </body>

67
styles/main.css
View File

@ -9,13 +9,80 @@
} }
/* primeira seção com imagem e texto */
.first-section {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 73px;
position: relative;
}
.first-section h2 {
font-weight: 400;
font-size: 32px;
line-height: 39px;
text-transform: uppercase;
color: #000000;
}
.first-section h1 {
font-weight: 500;
font-size: 48px;
line-height: 58px;
text-transform: uppercase;
color: #000000;
margin-bottom: 28px;
}
.first-section figure {
display: flex;
align-items: center;
flex-direction: column;
}
.first-section figcaption {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #000000;
max-width: 766px;
margin-bottom: 73px;
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.background-main figure img { .background-main figure img {
height: 100%; height: 100%;
min-height: 598px; min-height: 598px;
} }
.first-section {
padding: 0 28px;
}
.first-section h2 {
font-size: 20px;
line-height: 24px;
}
.first-section h1 {
font-size: 28px;
line-height: 34px;
text-align: center;
}
.first-section figure img {
width: 100%;
max-width: 239px;
}
.first-section figcaption {
text-align: center;
}
} }