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

refactor: ajusta alinhamento parágrafo infocard

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2022-10-10 07:23:37 -03:00
parent 4d741105fd
commit e7e1892b21
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/styles/styles.css
View File

@ -36,30 +36,36 @@ header {
width: 100%; width: 100%;
} }
.infocard div { .infocard-title {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
margin: 74px 0; margin: 74px 0;
width: 80%; width: 80%;
} }
.infocard h2 { .infocard h2 {
text-align: center;
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
text-transform: uppercase; text-transform: uppercase;
} }
.infocard h1 { .infocard h1 {
text-align: 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;
} }
.infocard-paragraph {
display: flex;
justify-content: center;
width: 100%;
}
.infocard p { .infocard p {
text-align: center; display: flex;
justify-content: center;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
margin-top: 28px; margin-top: 28px;

16
index.html
View File

@ -44,15 +44,17 @@
</figure> </figure>
</div> </div>
<section class="infocard"> <section class="infocard">
<div> <div class="infocard-title">
<h2>Lorem ipsum</h2> <h2>Lorem ipsum</h2>
<h1>dolor sit amet</h1> <h1>dolor sit amet</h1>
<p> <div class="infocard-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras <p>
euismod enim non dui fringilla interdum. <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. euismod enim non dui fringilla interdum. <br />
Nulla suscipit magna dui. Curabitur ut tortor sed lacus egestas vulputate vel sit amet
</p> velit. Nulla suscipit magna dui.
</p>
</div>
</div> </div>
<figure> <figure>
<img <img