Merge pull request 'refactor: ajusta alinhamento parágrafo infocard' (#4) from refactor/alinhamento_paragrafo-infocard into development
Reviewed-on: #4
This commit is contained in:
commit
e4577e7e61
@ -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
16
index.html
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user