LeonardoPereiraRocha/challenge-landing-page-leonardo-pereira-rocha
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cria o segundo card desktop, mobile e telas 4k

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img/second-card-image-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/img/second-card-image-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
assets/img/second-card-image-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/img/second-card-image-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

55
assets/styles/style.css
View File

@ -117,6 +117,37 @@ body{
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) {
.top-infocard-image{
@ -141,6 +172,18 @@ body{
font-size: 20px;
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){
@ -212,5 +255,17 @@ body{
line-height: 72px;
}
.card2-text{
max-width: 1100px;
font-size: 48px;
line-height: 72px;
}
.second-card {
padding: 573px 0;
}
}

38
index.html
View File

@ -72,5 +72,43 @@
<img class="photo-desktop" id="photo3" src="./assets/img/photo3.png" alt="Terceira foto do meio da página" />
</div>
<img class="photo-mobile" src="./assets/img/photo3-mobile.png" alt="Terceira foto do meio da página" />
</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>