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-12 20:03:26 -03:00
parent cfe67908b3
commit 199235838d
6 changed files with 113 additions and 12 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

81
assets/styles/style.css
View File

@ -76,7 +76,7 @@ body{
display: flex;
flex-direction: column;
align-items: center;
padding: 36px 25px 27px 25px;
padding: 25px 25px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
@ -104,21 +104,56 @@ body{
}
.photo,.photox{
.photo,.photo-desktop{
position: relative;
margin-bottom: -62px;
margin-top: 62px;
max-width: 100%;
width: 100%;
}
.photo-mobile{
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:768px){
.top-card{
grid-template-columns: 1fr;
padding: 35px 33px 65px 33px;
padding: 35px 33px 35px 33px;
}
.middle-photo{
gap: 13px;
grid-template-columns: repeat(2, 1fr);
@ -132,15 +167,25 @@ body{
margin-top: 32px;
}
.photox{
display: flex;
justify-content: center;
.photo-desktop{
display: none;
}
.photo-mobile{
display: block;
justify-content: center;
margin-top: 100px;
}
}
@media screen and (max-width:992px) {
.second-card{
grid-template-columns: 1fr;
margin: 0 23px;
}
.top-infocard-description{
margin: 0 28px 73px;
padding: 26px 36px;
@ -157,13 +202,20 @@ body{
}
}
@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 (min-width: 769px) and (max-width: 1250px){
.top-card {
grid-template-columns: repeat(2, max-content);
padding: 35px 33px 65px 33px;
padding: 35px 33px;
}
}
@media screen and (min-width:2500px){
.top-infocard-text {
@ -200,4 +252,17 @@ body{
line-height: 72px;
}
.card2-text{
max-width: 1100px;
font-size: 48px;
line-height: 72px;
}
.second-card {
padding: 573px 0;
;
}
}

40
index.html
View File

@ -68,10 +68,46 @@
<img class="photo" src="./assets/img/photo2.png" alt="Segunda foto do meio da página" />
<img class="photox" id="photo3" src="./assets/img/photo3.png" alt="Terceira foto do meio da página" />
<img class="photo-desktop" id="photo3" src="./assets/img/photo3.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>
</body>
</html>