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

Adiciona second-content e seus aspectos desktop e mobile

Browse Source
This commit is contained in:
SamuelCondack 2022-10-12 18:57:41 -03:00
parent 815aab0bb8
commit 6eaeda5e08
2 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -59,9 +59,12 @@
<div class="second-card-cards"><img src="assets/images/Group.svg" alt="coin image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
</div>
</section>
<section>
<div>
<p></p>
<section class="second-content">
<div class="second-content-text">
<h2 class="second-content-h2">Lorem ipsum dolor sit amet</h2>
<p class="second-content-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
</div>
</section>
</main>

24
styles/style.css
View File

@ -170,6 +170,30 @@
width: auto;
}
.second-content {
padding-top: 108px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.second-content-text {
max-width: 550px;
}
.second-content-h1 {
font-weight: 600;
font-size: 32px;
line-height: 39px;
text-transform: uppercase;
text-align: center;
}
.second-content-p {
text-align: center;
}
@media screen and (max-width: 1024px) {
.first-content-text {
max-width: 367px;