Lorem ipsum
Dolor sit amet
- 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.
+
+
+
+
+
diff --git a/style/style.css b/style/style.css
index 299e7a8..6ac0db1 100644
--- a/style/style.css
+++ b/style/style.css
@@ -51,10 +51,6 @@ main {
/* AREA ABAIXO DO BANNER */
-.container-midle {
- width: 100%;
-}
-
.container-midle-flex {
display: flex;
flex-direction: column;
@@ -64,7 +60,7 @@ main {
}
.container-midle-title {
-
+
font-weight: 500;
font-size: 48px;
line-height: 58px;
@@ -80,7 +76,8 @@ main {
}
.container-midle-paragraph {
- width: 766px;
+ width: 100%;
+ max-width: 766px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
@@ -88,59 +85,156 @@ main {
}
-
.container-midle-img {
width: 16.40625%;
height: 16.40625%;
+ max-width: 315px;
display: block;
}
-/* */
+/* GRID INFO CARD TRIPLE */
-@media (max-width:1024px) {
-/* BANNER MOBILE */
-.banner-img-desktop {
-display: none;
-}
-.banner-img-mobile {
- display: block;
+.container-cards {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: 1fr;
+ gap: 0px 22px;
+ grid-auto-flow: row;
+ grid-template-areas:
+ "card-1 card-2 card-3";
+ justify-content: center;
+ width: 100%;
+ padding: 10% 22% 4%;
}
-main{ background-color: var(--grey-footer);}
-
- /* AREA ABAIXO DO BANNER */
-
-.container-midle {
- width: 100%;
+.card-1 {
+ grid-area: card-1;
}
-/* AREA ABAIXO DO BANNER */
-.container-midle-flex {
+
+.card-2 {
+ grid-area: card-2;
+}
+
+.card-3 {
+ grid-area: card-3;
+}
+
+.card-1,
+.card-2,
+.card-3 {
+ background: var(--white);
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
-}
-
-.container-midle-title {
- font-size: 28px;
- line-height: 34px;
-}
-.container-midle-subtitle {
- font-size: 20px;
- line-height: 24px;
-}
-
-.container-midle-paragraph {
width: 100%;
- max-width: 360px;
+ padding: 36px 26px 24px;
+}
+
+.icon-card {
+ width: 6.409rem;
+ height: 6.409rem;
+ display: block;
+ margin: 0 auto;
+ margin-bottom: 28px;
+}
+
+.subtitle-card {
+ width: 100%;
+ min-width: 72%;
+ font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
-}
-.container-midle-img {
- width: 58%;
- height: 58%;
- display: block;
-}
}
+
+
+
+
+
+
+
+/* Medias Queries*/
+@media (min-width:2500px) {
+ .container-cards{
+ padding: 6% 30% 4%;
+ }
+}
+@media (max-width:1024px) {
+
+ /* BANNER MOBILE */
+ .banner-img-desktop {
+ display: none;
+ }
+
+ .banner-img-mobile {
+ display: block;
+ }
+
+ main {
+ background-color: var(--grey-footer);
+ }
+
+ /* AREA ABAIXO DO BANNER */
+
+ .container-midle {
+ width: 100%;
+ }
+
+ /* AREA ABAIXO DO BANNER */
+ .container-midle-flex {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .container-midle-title {
+ font-size: 28px;
+ line-height: 34px;
+ }
+
+ .container-midle-subtitle {
+ font-size: 20px;
+ line-height: 24px;
+ }
+
+ .container-midle-paragraph {
+
+ max-width: 86%;
+ font-size: 16px;
+ line-height: 24px;
+ text-align: center;
+ }
+
+ .container-midle-img {
+ width: 58%;
+ height: 58%;
+ max-width: 240px;
+ display: block;
+ }
+
+ /* Area dos tres cards */
+ .container-cards {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: repeat(3, 1fr);
+ gap: 24px;
+ grid-auto-flow: row;
+ grid-template-areas:
+ "card-1"
+ "card-2"
+ "card-3";
+ justify-content: center;
+ padding:90px 32px 80px;
+ }
+
+.subtitle-card {
+ max-width: 72%;
+ margin: 0 auto;
+ text-align: center;
+
+}
+
+}
\ No newline at end of file
+ 
+ 
-
+ 
+ 
+ 
+