diff --git a/assets/styles/main.css b/assets/styles/main.css
index 0e82510..fd28bb9 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -5,6 +5,7 @@
padding: 0;
box-sizing: border-box;
border: none;
+
}
body{
@@ -21,7 +22,11 @@ body{
padding: 28px 0;
}
-.header-page, .main-banner, .footer-banner {
+.header-logo {
+ width: 12%;
+}
+
+.header-page, .main-banner, .footer-banner, .header-logo {
width: 100%;
display: block;
}
@@ -34,9 +39,10 @@ body{
align-items: center;
flex-direction: column;
- padding: 72px 0 180px;
+ padding: 4% 0 9%;
}
+
.top-infocard-text {
width: 40%;
text-align: center;
@@ -66,13 +72,21 @@ body{
padding-bottom: 72px;
}
+.wrapper-top-infocard {
+ width: 16%;
+}
+
+.top-infocard-image {
+ width: 100%;
+}
+
.top-cards {
display: grid;
- grid-template-columns: repeat(3, max-content);
+ grid-template-columns: repeat(3, 18%);
gap: 20px;
justify-content: center;
- padding-bottom: 80px;
+ padding-bottom: 4%;
}
.top-card {
@@ -82,12 +96,17 @@ body{
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
- padding: 26px 26px 34px;
+ padding: 7% 7% 10%;
+}
+
+.wrapper-top-card-image {
+ display: block;
+ margin-bottom: 7%;
+ width: 30%;
}
.top-card-image {
- display: block;
- margin-bottom: 26px;
+ width: 100%;
}
.card-description {
@@ -97,7 +116,7 @@ body{
}
.top-card-description {
- max-width: 300px;
+ max-width: 86%;
}
@@ -111,27 +130,32 @@ body{
justify-content: center;
gap: 40px;
-
max-height: 530px;
- padding: 0 72px;
+ padding: 0 14%;
+}
+
+.banner-grid-1, .banner-grid-2, .banner-grid-3 {
+ display: block;
+ margin-top: 12%;
+ width: 100%;
}
.middle-banner-image {
- width: 100%;
- margin-top: 62px;
+ display: block;
+ width: max-content;
}
/* CARDS DO RODAPÉ */
.footer-cards {
display: grid;
- grid-template-columns: repeat(4, max-content);
+ grid-template-columns: repeat(4, 22%);
gap: 16px;
justify-content: center;
- padding-bottom: 108px;
- padding-top: 192px;
+ padding-bottom: 6%;
+ padding-top: 10%;
}
.footer-card {
@@ -141,16 +165,21 @@ body{
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
- padding: 36px 32px 64px;
+ padding: 8% 8% 15%;
+}
+
+.wrapper-footer-card-image {
+ width: 24%;
}
.footer-card-image {
display: block;
+ width: 100%;
margin-bottom: 16px;
}
.footer-card-description {
- max-width: 367px;
+ max-width: 85%;
}
/* SESSÃO DO RODAPÉ */
@@ -161,12 +190,14 @@ body{
align-items: center;
flex-direction: column;
- padding-bottom: 116px;
+ padding-bottom: 6%;
}
.section-footer-text{
width: 28%;
text-align: center;
+
+ padding-bottom: 3%;
}
.section-footer-title {
@@ -179,8 +210,6 @@ body{
font-weight: 400;
font-size: 16px;
line-height: 24px;
-
- padding-bottom: 50px;
}
.section-footer-image-desktop {
@@ -221,34 +250,99 @@ body{
/* RESPONSIVIDADE */
-@media screen and (max-width: 1919px) {
+@media screen and (min-width: 2501px) {
+ .top-infocard-subtitle, .section-footer-title {
+ font-size: 64px;
+ line-height: 78px;
+ }
+
+ .top-infocard-title {
+ font-size: 96px;
+ line-height: 116px;
+ }
+
+ .top-infocard-description, .section-footer-description, .card-description{
+ font-size: 32px;
+ line-height: 48px;
+ }
+
+ .footer-text {
+ font-size: 20px;
+ line-height: 24px;
+ }
+}
+
+@media screen and (min-width: 1025px) and (max-width: 2500px) {
+
.middle-banner {
- max-height: 398px;
- }
-
- .middle-banner-image {
- width: 420px;
- margin-top: 46px;
- }
-
- .footer-cards {
+ background: #E0E0E0;
+
display: grid;
- grid-template-columns: repeat(2, max-content);
+ grid-template-columns: repeat(3, 30%);
+ justify-content: center;
+ gap: 40px;
+
+ max-height: 530px;
+
+ padding: 0 4%;
}
-}
-
-@media screen and (max-width: 1530px) {
- .middle-banner {
- max-height: 318px;
+
+ .banner-grid-1, .banner-grid-2, .banner-grid-3 {
+ display: block;
+ position: relative;
+ margin-top: 12%;
+ max-width: 100%;
}
-
+
.middle-banner-image {
- width: 332px;
- margin-top: 36px;
+ display: block;
+ max-width: 100%;
}
}
-@media screen and (max-width: 1200px) {
+@media screen and (min-width: 1025px) {
+ .main-banner-mobile, .middle-banner-mobile, .section-footer-image-mobile {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 1024px) {
+ .main-banner-desktop, .section-footer-image-desktop {
+ display: none;
+ }
+
+ .top-infocard {
+ padding: 18% 7% 22%;
+ }
+
+ .top-infocard-text {
+ width: 100%;
+ }
+
+ .top-infocard-subtitle {
+ font-size: 20px;
+ line-height: 24px;
+ }
+
+ .top-infocard-title {
+ font-size: 28px;
+ line-height: 34px;
+ padding-bottom: 16px;
+ }
+
+ .wrapper-top-infocard {
+ width: 58%;
+ }
+
+ .top-infocard-image {
+ width: 100%;
+ }
+
+ .top-cards {
+ grid-template-columns: 1fr;
+ padding: 36px 32px 80px;
+ }
+
.middle-banner {
grid-template-columns: 45% 45%;
grid-template-areas: "banner-grid-1 banner-grid-2"
@@ -279,35 +373,16 @@ body{
width: 100%;
margin-top: 0;
}
-}
-@media screen and (min-width: 769px) and (max-width: 1200px) {
- .top-cards {
- grid-template-columns: repeat(2, max-content);
- padding: 36px 26px 80px;
- }
-}
-
-@media screen and (max-width: 1024px) {
- .top-infocard-text {
- width: 100%;
- padding: 0 28px;
+ .footer-cards {
+ grid-template-columns: 1fr;
+ padding: 80px 24px 98px;
+ justify-content: center;
}
- .top-infocard-subtitle {
- font-size: 20px;
- line-height: 24px;
- }
-
- .top-infocard-title {
- font-size: 28px;
- line-height: 34px;
- padding-bottom: 16px;
- }
-
- .top-infocard-image {
- width: 100%;
- max-width: 240px;
+ .footer-card-description {
+ max-width: 73%;
+ font-size: 14px;
}
.section-footer {
@@ -336,45 +411,9 @@ body{
.section-footer-description {
padding-bottom: 0;
}
-}
-
-@media screen and (max-width: 968px){
- .footer-cards {
- grid-template-columns: 1fr;
- padding: 80px 24px 98px;
- justify-content: center;
- }
-
- .footer-card-description {
- max-width: 302px;
- font-size: 14px;
- }
-}
-
-@media screen and (max-width: 768px){
- .top-infocard {
- padding-bottom: 90px;
- }
-
- .top-cards {
- grid-template-columns: 1fr;
- padding: 36px 32px 80px;
- }
-}
-
-@media screen and (max-width: 414px) {
- .main-banner-desktop, .section-footer-image-desktop {
- display: none;
- }
.footer-text {
text-align: center;
- width: 261px;
- }
-}
-
-@media screen and (min-width: 415px) {
- .main-banner-mobile, .middle-banner-mobile, .section-footer-image-mobile {
- display: none;
+ width: 85%;
}
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 688e56f..0f12e39 100644
--- a/index.html
+++ b/index.html
@@ -34,26 +34,26 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.
-
-
+
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.
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@@ -61,35 +61,35 @@
