Adiciona cards do topo

This commit is contained in:
carloswinter 2022-10-08 23:16:52 -03:00
parent 03145a3f0c
commit 98828ee4ec
5 changed files with 70 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 965 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -60,9 +60,29 @@ body{
} }
.topinfo-img{ .topinfo-img{
margin-top:70px; margin-top:70px;
} }
.topcards{
margin: 0 25%;
}
.topcards-wrapper{
margin-top: 178px;
margin-bottom: 80px;
display: flex;
justify-content: center;
gap:21px;
}
.topcard{
padding: 46px 26px 27px;
text-align: center;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.topcard-text{
min-width: 300px;
margin-top: 38px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
@media screen and (max-width: 1439px){ @media screen and (max-width: 1439px){
.topinfo-texts{ .topinfo-texts{
@ -92,6 +112,20 @@ body{
.topinfo-img{ .topinfo-img{
width: 75%; width: 75%;
} }
.topcards{
margin: 0 10%;
}
.topcards-wrapper{
margin-top: 90px;
margin-bottom: 80px;
flex-direction:column;
gap:24px;
}
.topcard-text{
min-width: 0;
}
} }
@media screen and (min-width: 2500px){ @media screen and (min-width: 2500px){
.topinfo-subtitle{ .topinfo-subtitle{
@ -117,7 +151,13 @@ body{
text-align: center; text-align: center;
} }
.topinfo-img{ .topinfo-img{
width: 20%; width: 13%;
}
.topcard-text{
font-weight: 400;
font-size: 32px;
line-height: 48px;
} }
} }

View File

@ -24,14 +24,38 @@
</section> </section>
<section class="topinfo"> <section class="topinfo">
<div class="topinfo-texts"> <div class="topinfo-texts">
<article>
<h2 class="topinfo-subtitle">Lorem ipsum</h2> <h2 class="topinfo-subtitle">Lorem ipsum</h2>
<h1 class="topinfo-title">dolor sit amet</h1> <h1 class="topinfo-title">dolor sit amet</h1>
<p class="topinfo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p> <p class="topinfo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
</article>
</div> </div>
<figure class="figuretopinfo"> <figure class="figuretopinfo">
<img src="./assets/images/img/topinfopcs.png" class="topinfo-img" alt="Imagem do topo"> <img src="./assets/images/img/topinfopcs.png" class="topinfo-img" alt="Imagem do topo">
</figure> </figure>
</section> </section>
<section class="topcards">
<div class="topcards-wrapper">
<div class="topcard">
<figure>
<img src="./assets/images/img/topcard1.png" alt="Primeira imagem dos cards">
<figcaption class="topcard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
</div>
<div class="topcard">
<figure>
<img src="./assets/images/img/topcard2.png" alt="Segunda imagem dos cards">
<figcaption class="topcard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
</div>
<div class="topcard">
<figure>
<img src="./assets/images/img/topcard3.png" alt="Terceira imagem dos cards">
<figcaption class="topcard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
</div>
</div>
</section>
</body> </body>
</html> </html>