feat: Adiciona artigo desktop

This commit is contained in:
Cainã Milech 2022-10-12 10:55:57 -03:00
parent f4e01b22f2
commit e18337d1cc
4 changed files with 66 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 247 KiB

View File

@ -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* */

View File

@ -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>