Adiciona mais responsividade ao site

This commit is contained in:
SamuelCondack 2022-10-12 22:54:30 -03:00
parent 34ef3c5663
commit 3a833a95d8
2 changed files with 130 additions and 6 deletions

View File

@ -95,8 +95,8 @@
<section class="end-footer"> <section class="end-footer">
<div class="footer-images"> <div class="footer-images">
<div><img src="assets/images/instagram-logo.svg" alt="instagram logo" class="footer-img"></div> <div><img src="assets/images/instagram-logo.svg" alt="instagram logo" class="footer-img"></div>
<div><img src="assets/images/facebook-logo.svg" alt="facebook logo"></div class="footer-img"> <div><img src="assets/images/facebook-logo.svg" alt="facebook logo"class="footer-img"></div >
<div><img src="assets/images/youtube 2.svg" alt="youtube logo"></div class="footer-img"> <div><img src="assets/images/youtube 2.svg" alt="youtube logo" class="footer-img"></div >
</div> </div>
<p class="footer-p">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00 <p class="footer-p">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p> </p>

View File

@ -150,7 +150,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
padding: 191px 72px 79px 72px; padding: 191px 72px 0px 72px;
} }
.second-card-p { .second-card-p {
@ -230,7 +230,9 @@
} }
.bottom-banner-img { .bottom-banner-img {
max-width: 1360px;
width: 100%; width: 100%;
padding: 0px 30px 0px 30px;
} }
.end-footer { .end-footer {
@ -253,6 +255,97 @@
padding-bottom: 38px; padding-bottom: 38px;
} }
@media screen and (min-width: 3500px){
.header-logo {
width: 500px;
}
.first-content-p {
font-size: xx-large;
}
.first-content-h2 {
font-size: 70px;
}
.first-content-p {
font-size: 30px;
}
.block {
min-width: 500px;
min-height: 700px;
}
.row-image-desktop {
width: 2000px;
}
.bottom-banner-img {
min-width: 2000px;
}
}
@media screen and (min-width: 2500px) {
.header-logo {
min-height: 130px;
}
.first-content-h2 {
font-size: 50px;
}
.first-content-h1 {
padding-top: 10px;
font-size: 60px;
}
.first-content-p {
font-size: 26px;
}
.first-card-image {
width: 200px;
}
.first-card-p {
font-size: 30px;
}
.image-row-background {
min-height: 650px;
}
.row-image-desktop {
width: 700px;
}
.second-card-image {
width: 500px;
height: 200px;
}
.second-card-p {
font-size: 30px;
}
.second-content-h2 {
font-size: 44px;
}
.second-content-p {
font-size: 26px;
}
.footer-img {
min-height: 35px;
}
.footer-p {
font-size: 18px;
}
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.first-content-text { .first-content-text {
max-width: 367px; max-width: 367px;
@ -313,17 +406,23 @@
.bottom-banner-desktop { .bottom-banner-desktop {
display: none; display: none;
} }
.bottom-banner-img { .bottom-banner-img {
width: 60%; width: 60%;
} }
.second-content { .second-content {
padding: 50px 32px; padding: 50px 32px 0px;
} }
.bottom-banner { .bottom-banner {
display: none; display: none;
} }
.bottom-banner-img {
padding: 0px;
}
.second-content2 { .second-content2 {
display: none; display: none;
} }
@ -352,8 +451,12 @@
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
.block {
width: 200px;
}
.row-image-mobile { .row-image-mobile {
width: 70%; width: 75%;
} }
.image-row-background { .image-row-background {
@ -365,10 +468,31 @@
} }
.row-image-mobile2 { .row-image-mobile2 {
width: 150%; width: 160%;
} }
.bottom-banner-img { .bottom-banner-img {
width: 100%; width: 100%;
} }
} }
@media screen and (max-width: 330px) {
.row-image-mobile {
width: 80%;
}
.row-image-mobile2 {
width: 170%;
}
}
@media screen and (max-width: 300px) {
.row-image-mobile {
width: 90%;
}
.row-image-mobile2 {
width: 185%;
}
}