diff --git a/assests/bottom-banner-desktop.png b/assests/bottom-banner-desktop.png new file mode 100644 index 0000000..42190a3 Binary files /dev/null and b/assests/bottom-banner-desktop.png differ diff --git a/assests/bottom-banner-mobile.png b/assests/bottom-banner-mobile.png new file mode 100644 index 0000000..7a674f6 Binary files /dev/null and b/assests/bottom-banner-mobile.png differ diff --git a/assests/facebook-icon.png b/assests/facebook-icon.png new file mode 100644 index 0000000..87adee7 Binary files /dev/null and b/assests/facebook-icon.png differ diff --git a/assests/instagram-icon.png b/assests/instagram-icon.png new file mode 100644 index 0000000..0abd451 Binary files /dev/null and b/assests/instagram-icon.png differ diff --git a/assests/youtube-icon.png b/assests/youtube-icon.png new file mode 100644 index 0000000..397ea3e Binary files /dev/null and b/assests/youtube-icon.png differ diff --git a/index.html b/index.html index 8f30f9b..ea135a4 100644 --- a/index.html +++ b/index.html @@ -11,17 +11,18 @@
- Banner do topo Desktop - Banner do topo Mobile + Banner do topo Desktop + Banner do topo Mobile
+

Lorem ipsum

@@ -30,35 +31,91 @@ 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.

+
- Imagem da main Desktop - Imagem da main Mobile + Imagem da main Desktop + Imagem da main Mobile
+
- Imagem do primeiro card do meio + Imagem do primeiro card do meio

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

- Imagem do segundo card do meio -

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

-
- -
- Imagem do terceiro card do meio + Imagem do segundo card do meio

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

-
-
-
- Imagem do primeiro banner do meio - Imagem do segundo banner do meio - Imagem do terceiro banner do meio - -
- +
+ Imagem do terceiro card do meio +

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

+
+ + + +
+ Imagem do primeiro banner do meio + Imagem do segundo banner do meio + Imagem do terceiro banner do meio +
+ +
+
+ Imagem do primeiro card de baixo +

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 de baixo +

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 terceiro card de baixo +

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 quarto card de baixo +

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

+

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

+
+ + Imagem do banner de baixo + Imagem do banner de baixo +
+ +
\ No newline at end of file diff --git a/main.css b/main.css index a96efd1..4dd304f 100644 --- a/main.css +++ b/main.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); * { margin: 0; @@ -9,14 +9,15 @@ body { font-family: 'inter', sans-serif; } -/* estilização do fundo */ + .head-logo { display: flex; flex-direction: column; align-items: center; background-color: black; } -/* posicionamento da imagem */ + + .head-image { width: 100%; padding: 28px 0 ; @@ -39,7 +40,6 @@ body { padding: 74px 0 80px; } -/* estilização para caixa do texto ( não coloquei em 40% para quebrar no paragrafo do figma */ .middle-text { display:flex; flex-direction: column; @@ -48,9 +48,8 @@ body { margin-bottom: 74px; } - .middle-information-subtitle { - font-weight: 400; + font-weight: 400; font-size: 32px; line-height: 39px; text-transform: uppercase; @@ -64,25 +63,29 @@ body { margin-bottom: 28px; } +.middle-information-description { + font-size: 16px; + line-height: 24px; +} + .middle-cards { display: flex; justify-content: center; gap: 22px; + width: 100%; } .middle-card { display: flex; flex-direction: column; align-items: center; - max-width: 18%; + width: 18%; background-color:#FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); padding: 36px 26px 28px; - } .middle-card-image { - display: block; margin-bottom: 26px; } @@ -92,60 +95,298 @@ body { text-align: center; } - .middle-banners { - display:flex; - align-items: center; - justify-content: center; - background: #E0E0E0; +.grid { + display: grid; +} - } +.grid-template-banners { + grid-template-areas: "one two three"; + + grid-column-gap: 40px; +} + +.middle-banners { + width: 100%; + height: 530px; + position: relative; + background-color: #BDBDBD; + padding: 0 72px; + margin-bottom: 40px; +} + +.middle-banners-image { + width: 100%; + margin-top: 62px; +} + +.image-banner-one { + grid-area: one; +} + +.image-banner-two { + grid-area: two;} + +.image-banner-three { + grid-area: three; +} + +.bottom-cards { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 130px 0 108px 0; +} + +.bottom-card { + display:flex; + flex-direction: column; + align-items: center; + width: 24%; + padding: 34px 32px 64px; + background: #FFFFFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); + margin: 16px; +} - .middle-banners-image { - margin-top: 62px; - max-width: 30%; - width: 100%; +.bottom-card-image { + margin-bottom: 14px; +} + +.bottom-card-description { + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.bottom-box { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 116px; +} + +.bottom-informations { + width: 30%; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 50px; +} + +.bottom-information-subtitle { + font-size: 32px; + line-height: 39px; + font-weight: 600; + text-align: center; +} + +.bottom-information-description { + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.page-footer { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding: 38px 0; + background-color: #000000; +} + +.footer-icons { + list-style: none; + display: flex; +} + +.footer-icon { + margin: 0 8px; + margin-bottom: 16px; +} + +.footer-icon:nth-child(3) { + margin-top: 4px; +} + +.footer-text { + font-size: 10px; + line-height: 12px; + text-transform: uppercase; + color: #BDBDBD; +} + +.main-image-desktop { + display: flex; +} + +.main-image-mobile { + display: none; +} + +.main-banner-desktop { + display: flex; +} + +.main-banner-mobile { + display: none; +} + +.bottom-image-desktop { + width: 70%; + display: flex; +} + +.bottom-image-mobile { + width: 100%; + display: none; +} + +@media (min-width:4000px) { + .middle-banners { + height: 1200px; + } + + .head-image { + width: 300%; + } + + .middle-text { + width: 150%; +} +.middle-information-subtitle { + font-size: 80px; + line-height: 85px; +} + +.middle-information-title { + font-size: 80px; + line-height: 85px; +} + +.middle-information-description { + font-size: 35px; + line-height: 38px; +} +.main-image-desktop { + width: 200%; +} + +.middle-card { + width: 100%; +} + +.middle-card-description { + font-size: 40px; + line-height: 42px; + text-align: center; +} + +.bottom-card-description { + font-size: 40px; + line-height: 42px; + text-align: center; +} + +.bottom-information-subtitle { + font-size: 40px; + line-height: 42px; +} +.bottom-information-description { + font-size: 40px; + line-height: 42px; + text-align: center; +} + +.footer-text { + font-size: 32px; + line-height: 35px; + text-transform: uppercase; + color: #BDBDBD; +} + +} + + +@media (max-width: 1024px) { + .main-image-desktop { + display: none; + } + + .main-image-mobile { display: flex; } - .middle-banners-image:nth-child(2) { - margin: 62px 40px 0 40px ; + .main-banner-desktop { + display: none; } + .main-banner-mobile { + display: flex; + } - - - - - - - - - - - - - -@media screen and (min-width: 1025px) { - - .main-banner-mobile, .main-image-mobile { + .bottom-image-desktop { display: none; -} + } + + .bottom-image-mobile { + display: flex; + margin-bottom: 50px; + } -} + .bottom-box { + flex-direction: column-reverse; + margin-bottom: 88px; + } - /* @media screen and (max-width:1024px) { - .main-banner-desktop, .main-image-desktop { - display: none; - } + .bottom-cards { + flex-direction: column; + margin: 80px 0 98px 0; + } - .middle-text { - width: 100%; - max-width: 112%; + .bottom-card { + width: 89%; + } + + .bottom-card-description { + font-size: 14px; + line-height: 24px; text-align: center; } + .bottom-information-subtitle { + font-weight: 600; + font-size: 24px; + line-height: 29px; + text-align: center; + } + + .bottom-information-description { + font-size: 16px; + line-height: 24px; + text-align: center; + } + + .footer-text { + width: 63%; + text-align: center; + } + + .middle-cards { + flex-direction: column; + align-items: center; + margin: 90px 0 80px 0; + } + + .middle-card { + width: 84%; + } + .middle-information { - padding: 74px 28px 90px; + padding-bottom: 0px; } .middle-information-subtitle { @@ -154,9 +395,59 @@ body { } .middle-information-title { + font-weight: 500; font-size: 28px; line-height: 34px; } +} + +@media (max-width: 768px) { + .middle-banners { + height: 1030px; + padding: 0 23px; + } + + .grid-template-banners { + grid-template-areas: + "one two" + "three three"; + + grid-column-gap: 7px; + grid-row-gap: 23px; + } + + .middle-banners-image { + margin-top: 32px; + } + + .middle-banners-image:nth-child(3) { + margin-top: 0; + } +} + +@media (max-width: 520px) { + .middle-banners { + height: 574px; + } +} + +@media (max-width: 480px) { + .bottom-informations { + width: 85%; + } + + .middle-banners { + height: 550px; + } + +.middle-text { + width: 86%; } - */ +} + +@media (max-width:320px) { + .middle-banners { + height: 400px; + } +} \ No newline at end of file