feature/landingPage #1
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%;
|
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*/
|
/*4k*/
|
||||||
@media screen and (min-width: 2500px) {
|
@media screen and (min-width: 2500px) {
|
||||||
.top-infocard-subtitle{
|
.top-infocard-subtitle{
|
||||||
@ -182,6 +218,18 @@ body {
|
|||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.article-title{
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 64px;
|
||||||
|
line-height: 78px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-description{
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*MOBILE* */
|
/*MOBILE* */
|
||||||
|
18
index.html
18
index.html
@ -97,6 +97,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue
Block a user