diff --git a/assents/imagens/Rectangle 15 (1).png b/assents/imagens/Rectangle 15 (1).png new file mode 100644 index 0000000..50df8d7 Binary files /dev/null and b/assents/imagens/Rectangle 15 (1).png differ diff --git a/assents/imagens/bottom-img01.png b/assents/imagens/bottom-img01.png new file mode 100644 index 0000000..21e1dae Binary files /dev/null and b/assents/imagens/bottom-img01.png differ diff --git a/index.html b/index.html index e70ecb8..30e5f68 100644 --- a/index.html +++ b/index.html @@ -45,73 +45,137 @@
- imagem do primeiro card topo - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+ imagem do primeiro card topo + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non + dui fringilla interdum.

- +
- imagem do primeiro card topo - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+ imagem do primeiro card topo + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non + dui fringilla interdum.

- - + +
- imagem do primeiro card topo - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+ imagem do primeiro card topo + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non + dui fringilla interdum.

- - + +
- -
- - Banner center Principal - - Banner center Principal - -
-
- -
-
- imagem do segundo card topo -

- 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. -

-
- -
- imagem do segundo card topo -

- 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. -

-
- -
- imagem do segundo card topo -

- 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. -

-
- -
- imagem do segundo card topo -

- 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. -

-
-
- -
- +
+ + Banner center Principal + + Banner center Principal + +
+ +
+ +
+
+ imagem do segundo card topo +

+ 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. +

+
+ +
+ imagem do segundo card topo +

+ 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. +

+
+ +
+ imagem do segundo card topo +

+ 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. +

+
+ +
+ imagem do segundo card topo +

+ 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. +

+
+
+ +
+ +
+ + imagem de oculos sobre o computador + + +
+

+ Lorem ipsum dolor sit amet +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. + In eget tincidunt ipsum. + Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis + vitae sagittis venenatis. + Donec finibus turpis vitae lectus interdum rutrum vitae sed augue. +

+
+ + +
+ + diff --git a/main.styles/style.css b/main.styles/style.css index cc728a0..dcf858b 100644 --- a/main.styles/style.css +++ b/main.styles/style.css @@ -4,7 +4,6 @@ box-sizing: border-box; font-family: 'Inter', sans-serif; color: #000000; - } /*///////////// HEADER /////////////////// */ .page-header { @@ -20,22 +19,25 @@ /*///////////// SECTION 01 e 02 com banner /////////////////// */ -.main-banner, +.main-banner, .middle-banner { display: block; width: 100%; - +} + +.main-banner-mobile, +.middle-banner-mobile { + display: none; } /*///////////// SECTION 02 INFO CARD TOP ///////////////////*/ .top-infocard { display: flex; align-items: center; justify-content: center; - padding: 80px 0 96px; + padding: 80px 30px 96px; } - -.top-infocard-text{ +.top-infocard-text { max-width: 766px; margin-right: 124px; } @@ -43,52 +45,46 @@ .top-infocard-subtitle { font-weight: 400; font-size: 32px; - + text-transform: uppercase; } .top-infocard-title { font-weight: 500; font-size: 48px; - + margin-bottom: 24px; text-transform: uppercase; - } .top-infocard-description { - font-size: 16px; line-height: 24px; - } /*///////////////////AREA DO TOP CARDS PEQUENOS///////////////*/ -.top-cards{ - background: #F0F0F0; - +.top-cards { + background: #f0f0f0; + display: grid; - grid-template-columns: repeat(3 , max-content); + grid-template-columns: repeat(3, max-content); gap: 20px; - + justify-content: center; padding: 74px 0; } .top-card { - display: flex; flex-direction: column; align-items: center; padding: 26px 26px 34px; - - background: #FFFFFF; + + background: #ffffff; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); - - } .top-card-image { @@ -97,21 +93,17 @@ } .top-card-description { - max-width: 300px; text-align: center; line-height: 24px; font-size: 16px; - } /*/////////// Bottom Area com imagens e background//////////////*/ .bottom-cards { margin-top: 140px; - background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%); - - + background: linear-gradient(180deg, #00c8ff 0%, #15acd6 100%); } .bottom-card-wrapper { @@ -120,7 +112,7 @@ display: grid; grid-template-columns: repeat(2, max-content); - + justify-content: center; gap: 20px; } @@ -130,8 +122,8 @@ flex-direction: column; align-items: center; padding: 36px 32px 66px; - - background: #FFFFFF; + + background: #ffffff; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); } @@ -140,116 +132,171 @@ margin-bottom: 14px; } -.bottom-card-description { +.bottom-card-description { max-width: 368px; text-align: center; line-height: 24px; font-size: 16px; - } -/*///////////////// ABAIXO DE 414PX /////////////////*/ +/*///////////////// BOTTOM AREA COM IMAGEM + TEXTO /////////////////*/ -@media screen and (max-width: 414px){ - .main-banner-desktop, - .middle-banner-desktop{ - display: none; - } +.bottom-infocard { + display: flex; + align-items: center; } -/*///////////////// ABAIXO DE 415PX /////////////////*/ - -@media screen and (min-width: 415px ) { - .main-banner-mobile, - .middle-banner-mobile{ - display: none; - } - +/*////////////////section bottom 03///////////////////*/ +.bottom-infocard { + padding: 142px 12px 179px 12px; + display: flex; + justify-content: center; + align-items: center; + gap: 40px; + background: #e5e5e5; } -/*///////////////// ACIMA DE 768PX /////////////////*/ - -@media screen and (max-width: 768px) { - .top-cards { - grid-template-columns: 1fr; - padding: 36px 26px; - } - - .bottom-cards{ - padding: 0 16px; - margin-top: 114px; - } - - .bottom-card-wrapper{ - grid-template-columns: 1fr; - gap: 16px; - } - - .bottom-card-description{ - font-size: 14px; - - } +.bottom-infocard-image { + display: block; + max-width: 596px; + width: 100%; } -/*///////////////// ACIMA DE 992PX /////////////////*/ -@media screen and (max-width: 992px){ - .top-infocard{ +.bottom-inforcard-text { + margin-top: 51px; + padding: 0 32px; +} + +.bottom-infocard-title { + font-size: 32px; + line-height: 36px; + margin-bottom: 18px; +} + +.bottom-infocard-description { + max-width: 550px; + line-height: 24px; +} + +/*///////////////// FOOTER /////////////////*/ + +.footer-infocard { + padding: 38px 0; + display: flex; + flex-direction: column; + align-items: center; + background: #000000; +} + +.footer-infocards { + display: flex; + align-items: center; + gap: 28px; + margin-bottom: 20px; +} + +.footer-description { + color: #bdbdbd; + font-size: 10px; + text-align: center; +} + +/*///////////////// ABAIXO DE 992PX /////////////////*/ +@media screen and (max-width: 992px) { + .top-infocard { flex-direction: column; padding: 84px 26px 158px; } - .top-infocard-text{ + .top-infocard-text { margin: 0 0 68px; } - .top-infocard-subtitle{ + .top-infocard-subtitle { font-size: 20px; } - .top-infocard-title{ + .top-infocard-title { font-size: 28px; margin-bottom: 20px; } - .top-infocard-description{ + .top-infocard-description { font-size: 16px; line-height: 24px; } - .top-infocard-image{ + .top-infocard-image { width: 100%; max-width: 240px; } } -/*//////////////////MEDIA DE UM TAMANHO ATE O OUTR////////////////*/ +/*///////////////// ABAIXO DE 768PX /////////////////*/ -@media screen and (min-width: 993px) and (max-width: 1280px) { - .top-infocard-text{ - max-width: 520px; - margin-right: 70px; +@media screen and (max-width: 768px) { + .main-banner, + .middle-banner { + display: none; + } + + .main-banner-mobile, + .middle-banner-mobile { + display: block; + } + + .top-cards { + grid-template-columns: 1fr; + padding: 36px 26px; + } + + .bottom-cards { + padding: 0 16px; + margin-top: 114px; + } + + .bottom-card-wrapper { + grid-template-columns: 1fr; + gap: 16px; + } + + .bottom-card-description { + font-size: 14px; + } + + .bottom-infocard { + flex-direction: column; + padding: 80px 0 135px 0; + } + + .bottom-infocard-title { + font-size: 24px; + line-height: 24px; + } + + .bottom-infocard { + gap: 0; + } + + .footer-description { + max-width: 261px; } } +/*//////////////////MEDIA DE UM TAMANHO ATE O OUTR////////////////*/ + @media screen and (min-width: 769px) and (max-width: 992px) { - - .bottom-card-description{ + .bottom-card-description { max-width: 280px; } } @media screen and (min-width: 769px) and (max-width: 1200px) { .top-cards { - grid-template-columns: repeat(2 , max-content); - + grid-template-columns: repeat(2, max-content); } - .bottom-card-wrapper{ - grid-template-columns: repeat(2 , max-content); + .bottom-card-wrapper { + grid-template-columns: repeat(2, max-content); } - - } - - -