Samuel/challenge-landing-page-samuelcondack
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adiciona image-row e seus aspectos desktop e mobile

Browse Source
This commit is contained in:
SamuelCondack 2022-10-12 18:27:34 -03:00
parent 93b64257bc
commit 815aab0bb8
2 changed files with 73 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
index.html
View File

@ -37,23 +37,31 @@
</div> </div>
</section> </section>
<section class="image-row-background"> <section class="image-row-background">
<div class="image-row-desktop"> <div class="image-row-wrapper">
<div class="row-image"><img src="assets/images/Rectangle 13.png" alt="laptop image" class="row-image-desktop"></div> <div class="image-row-desktop">
<div class="row-image"><img src="assets/images/Rectangle 16.png" alt="laptop image" class="row-image-desktop"></div> <div class="row-image"><img src="assets/images/Rectangle 13.png" alt="laptop image" class="row-image-desktop"></div>
<div class="row-image"><img src="assets/images/Rectangle 17.png" alt="laptop image" class="row-image-desktop"></div> <div class="row-image"><img src="assets/images/Rectangle 16.png" alt="laptop image" class="row-image-desktop"></div>
<div class="row-image"><img src="assets/images/Rectangle 17.png" alt="laptop image" class="row-image-desktop"></div>
</div>
<div class="image-row-mobile1">
<img src="assets/mobile-images/middle-card-image01.png" alt="laptop image" class="row-image-mobile">
<img src="assets/mobile-images/middle-card-image02.png" alt="laptop image" class="row-image-mobile">
</div>
<div class="image-row-mobile2"><img src="assets/mobile-images/middle-card-image03.png" alt="laptop image" class="row-image-mobile2"></div>
</div> </div>
<div class="image-row-mobile1">
<img src="assets/mobile-images/middle-card-image01.png" alt="laptop image" class="row-image-mobile">
<img src="assets/mobile-images/middle-card-image02.png" alt="laptop image" class="row-image-mobile">
</div>
<div class="image-row-mobile2"><img src="assets/mobile-images/middle-card-image03.png" alt="laptop image" class="row-image-mobile"></div>
</section> </section>
<section> <section>
<div class="second-card"> <div class="second-card">
<div class="second-card-cards"><img src="assets/images/money (1) 2.svg" alt="shop image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div> <div class="second-card-cards"><img src="assets/images/money (1) 2.svg" alt="shop image" class="second-card-image"><p class="second-card-p">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="second-card-cards"><img src="assets/images/coin 2.svg" alt="bag shop image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div> <div class="second-card-cards"><img src="assets/images/coin 2.svg" alt="bag shop image" class="second-card-image"><p class="second-card-p">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="second-card-cards"><img src="assets/images/laptop 1.svg" alt="coin image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div> <div class="second-card-cards"><img src="assets/images/laptop 1.svg" alt="coin image" class="second-card-image"><p class="second-card-p">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="second-card-cards"><img src="assets/images/Group.svg" alt="coin image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div> <div class="second-card-cards"><img src="assets/images/Group.svg" alt="coin image" class="second-card-image"><p class="second-card-p">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>
</section>
<section>
<div>
<p></p>
</div> </div>
</section> </section>
</main> </main>

71
styles/style.css
View File

@ -75,10 +75,10 @@
} }
.first-card-p { .first-card-p {
width: 299px;
padding: 27px; padding: 27px;
padding-top: 27px; padding-top: 27px;
text-align: center; text-align: center;
padding: 27px 25px;
} }
.first-card-image { .first-card-image {
@ -90,11 +90,18 @@
.first-card-cards { .first-card-cards {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
max-width: 350px;
} }
.image-row-background { .image-row-background {
background-color: #E0E0E0;; background-color: #E0E0E0;
height: 530px; max-height: 530px;
padding: 62px 72px 0px 72px;
}
.image-row-wrapper {
position: relative;
bottom: -25px;
} }
.image-row-desktop { .image-row-desktop {
@ -106,22 +113,34 @@
} }
.row-image-desktop { .row-image-desktop {
margin-top:62px; width: 100%;
} }
.image-row-mobile1 { .image-row-mobile1 {
margin: auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 14px; gap: 14px;
padding-top: 32px;
} }
.image-row-mobile2 { .image-row-mobile2 {
margin: auto;
max-width: 368px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 24px 23px; padding-top: 24px;
}
.row-image-mobile {
width: 100%;
max-width: 177px;
}
.row-image-mobile2 {
width: 100%;
max-width: 368px;
} }
.second-card { .second-card {
@ -130,28 +149,25 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 21px; gap: 16px;
padding-top: 191px; padding: 191px 72px 79px 72px;
padding-bottom: 79px;
} }
.second-card-p { .second-card-p {
width: 299px; padding: 15px 32px 65px 32px;
padding: 27px;
padding-top: 27px;
text-align: center; text-align: center;
} }
.second-card-image { .second-card-image {
display: block; display: block;
margin: auto; margin: auto;
width: 103px; height: 104px;
height: 103px;
padding: 35px 12px 0px 12px; padding: 35px 12px 0px 12px;
} }
.second-card-cards { .second-card-cards {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
width: auto;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@ -187,18 +203,25 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
padding-top: 112px; padding: 150px 23px 0px 23px;
} }
}
@media screen and (max-width: 1270px) {
.second-card { .second-card {
flex-direction: column; flex-direction: column;
} }
.second-card-p {
font-size: 14px;
max-width: 302px;
}
} }
@media screen and (max-width: 1919px) { @media screen and (max-width: 1270px) {
}
@media screen and (max-width: 1024px) {
.image-row-background { .image-row-background {
height: 579px; height: 579px;
} }
@ -208,7 +231,7 @@
} }
} }
@media screen and (min-width: 1920px){ @media screen and (min-width: 1025px){
.image-row-mobile1 { .image-row-mobile1 {
display: none; display: none;
} }
@ -217,3 +240,13 @@
display: none; display: none;
} }
} }
@media screen and (max-width: 369px) {
.image-row-mobile1 {
width: 50%;
}
.image-row-mobile2 {
width: 100px;
}
}