feat: Adiciona artigo desktop
This commit is contained in:
parent
f4e01b22f2
commit
e18337d1cc
BIN
assets/images/banner-article-desktop.png
Normal file
BIN
assets/images/banner-article-desktop.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 362 KiB |
BIN
assets/images/banner-article-mobile.png
Normal file
BIN
assets/images/banner-article-mobile.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 247 KiB |
@ -156,6 +156,42 @@ body {
|
||||
width: 24%;
|
||||
}
|
||||
|
||||
|
||||
.article{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 108px;
|
||||
}
|
||||
|
||||
.article-text{
|
||||
width: 28.64%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.article-title{
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
.article-description{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.article-figure{
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
width: 70.83%;
|
||||
}
|
||||
|
||||
.article-banner-desktop{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*4k*/
|
||||
@media screen and (min-width: 2500px) {
|
||||
.top-infocard-subtitle{
|
||||
@ -182,6 +218,18 @@ body {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.article-title{
|
||||
font-weight: 600;
|
||||
font-size: 64px;
|
||||
line-height: 78px;
|
||||
}
|
||||
|
||||
.article-description{
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*MOBILE* */
|
||||
|
18
index.html
18
index.html
@ -97,6 +97,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="article">
|
||||
<div class="article-text">
|
||||
<h3 class="article-title">
|
||||
Lorem ipsum dolor sit amet
|
||||
</h3>
|
||||
|
||||
<p class="article-description">
|
||||
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>
|
||||
|
||||
<figure class="article-figure">
|
||||
<img class="article-banner-desktop" src="/assets/images/banner-article-desktop.png" alt="Banner de computadores">
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user