Adiciona image-row e seus aspectos desktop e mobile
This commit is contained in:
parent
93b64257bc
commit
815aab0bb8
34
index.html
34
index.html
@ -37,23 +37,31 @@
|
||||
</div>
|
||||
</section>
|
||||
<section class="image-row-background">
|
||||
<div class="image-row-desktop">
|
||||
<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 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 class="image-row-wrapper">
|
||||
<div class="image-row-desktop">
|
||||
<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 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 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>
|
||||
<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/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/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/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/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. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div>
|
||||
<p></p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@ -75,10 +75,10 @@
|
||||
}
|
||||
|
||||
.first-card-p {
|
||||
width: 299px;
|
||||
padding: 27px;
|
||||
padding-top: 27px;
|
||||
text-align: center;
|
||||
padding: 27px 25px;
|
||||
}
|
||||
|
||||
.first-card-image {
|
||||
@ -90,11 +90,18 @@
|
||||
|
||||
.first-card-cards {
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.image-row-background {
|
||||
background-color: #E0E0E0;;
|
||||
height: 530px;
|
||||
background-color: #E0E0E0;
|
||||
max-height: 530px;
|
||||
padding: 62px 72px 0px 72px;
|
||||
}
|
||||
|
||||
.image-row-wrapper {
|
||||
position: relative;
|
||||
bottom: -25px;
|
||||
}
|
||||
|
||||
.image-row-desktop {
|
||||
@ -106,22 +113,34 @@
|
||||
}
|
||||
|
||||
.row-image-desktop {
|
||||
margin-top:62px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-row-mobile1 {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.image-row-mobile2 {
|
||||
margin: auto;
|
||||
max-width: 368px;
|
||||
display: flex;
|
||||
justify-content: 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 {
|
||||
@ -130,28 +149,25 @@
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 21px;
|
||||
padding-top: 191px;
|
||||
padding-bottom: 79px;
|
||||
gap: 16px;
|
||||
padding: 191px 72px 79px 72px;
|
||||
}
|
||||
|
||||
.second-card-p {
|
||||
width: 299px;
|
||||
padding: 27px;
|
||||
padding-top: 27px;
|
||||
padding: 15px 32px 65px 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.second-card-image {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 103px;
|
||||
height: 103px;
|
||||
height: 104px;
|
||||
padding: 35px 12px 0px 12px;
|
||||
}
|
||||
|
||||
.second-card-cards {
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@ -187,18 +203,25 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding-top: 112px;
|
||||
padding: 150px 23px 0px 23px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1270px) {
|
||||
.second-card {
|
||||
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 {
|
||||
height: 579px;
|
||||
}
|
||||
@ -208,7 +231,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px){
|
||||
@media screen and (min-width: 1025px){
|
||||
.image-row-mobile1 {
|
||||
display: none;
|
||||
}
|
||||
@ -217,3 +240,13 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 369px) {
|
||||
.image-row-mobile1 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.image-row-mobile2 {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user