Cria o segundo card desktop, mobile e telas 4k

This commit is contained in:
Leonardo Pereira Rocha 2022-10-13 00:50:30 -03:00
parent e63fe417a6
commit 04e5a3f2cb
6 changed files with 93 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -117,6 +117,37 @@ body{
display: none; display: none;
} }
.second-card {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 191px 0;
justify-content: center;
}
.card-2{
display: flex;
flex-direction: column;
align-items: center;
margin: 0 12px;
padding: 35px 32px 35px 33px;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.card2-text{
max-width: 367px;
font-size: 16px;
line-height: 24px;
text-align: center
}
.card2-image{
width: 20%;
display: block;
margin-bottom: 12px;
}
@media screen and (max-width:992px) { @media screen and (max-width:992px) {
.top-infocard-image{ .top-infocard-image{
@ -141,6 +172,18 @@ body{
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
} }
.second-card{
grid-template-columns: 1fr;
margin: 0 23px;
}
}
@media screen and (min-width: 993px) and (max-width: 1250px){
.second-card {
grid-template-columns: repeat(2, max-content);
margin: 0 23px;
}
} }
@media screen and (max-width:768px){ @media screen and (max-width:768px){
@ -212,5 +255,17 @@ body{
line-height: 72px; line-height: 72px;
} }
.card2-text{
max-width: 1100px;
font-size: 48px;
line-height: 72px;
}
.second-card {
padding: 573px 0;
}
} }

View File

@ -73,4 +73,42 @@
</div> </div>
<img class="photo-mobile" src="./assets/img/photo3-mobile.png" alt="Terceira foto do meio da página" /> <img class="photo-mobile" src="./assets/img/photo3-mobile.png" alt="Terceira foto do meio da página" />
</div> </div>
<section class="second-card">
<div class="card-2">
<img class="card2-image" src = "./assets/img/second-card-image-1.png" alt="Primeira imagem do card inferior" />
<p class="card2-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</p>
</div>
<div class="card-2">
<img class="card2-image" src = "./assets/img/second-card-image-2.png" alt="Primeira imagem do card inferior" />
<p class="card2-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</p>
</div>
<div class="card-2">
<img class="card2-image" src = "./assets/img/second-card-image-3.png" alt="Primeira imagem do card inferior" />
<p class="card2-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</p>
</div>
<div class="card-2">
<img class="card2-image" src = "./assets/img/second-card-image-4.png" alt="Primeira imagem do card inferior" />
<p class="card2-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</p>
</div>
</section>
</html> </html>