diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..3c7f09b --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,303 @@ +* { + margin:0; + padding:0; + box-sizing:border-box; + +} + +body{ + font-family: 'Inter', sans-serif; + color:black; +} + +.page-header{ + background:black; + display:flex; + justify-content:center; + padding: 28px 0; + +} + +.header-logo { + display:block; +} + +.banner { + width: 100%; + display:block; +} + +.top-infocard { + align-items: center; + justify-content:center; + display:grid; + column-gap:65px; +} + +.top-infocard-text { + max-width: 766px; + text-align: center; + justify-content:center; + padding: 66px 0 0; +} + +.top-infocard-subtitle { + font-weight:400; + font-size: 32px; + text-transform:uppercase; +} + +.top-infocard-title { + font-weight:500; + font-size: 48px; + text-transform:uppercase; + margin-bottom:24px; +} + +.top-infocard-description { + line-height: 24px; + font-size:16px; +} + +.top-infocard-image { + max-width:315px; + width:100%; + margin-top: 65px; + margin-bottom:220px; +} + +.top-cards { + display:grid; + grid-template-columns: repeat(3, max-content); + gap:20px; + margin-bottom:80px; + +} + +.top-card { + display:flex; + flex-direction:column; + align-items:center; + max-width:250px; + box-shadow: 0px 4px 20px 0px #0000003B; + padding: 36px 0px 26px; +} + +.top-card-image { + display:block; + margin-bottom: 26px; +} + +.top-card-description { + max-width:300px; + font-size:16px; + align-items:center; + line-height:24px; + text-align:center; +} + +.middle-banners { + background:#f0f0f0; + display:grid; + grid-template-columns: repeat(3, max-content); + justify-content:center; + gap:32px; +} + +.middle-banner { + max-width:350px; + display:flex; + flex-direction:column; + align-items:center; + position: relative; + bottom: -64px; +} + +.middle-banner-wrapper { + max-width: 370px; + position: relative; + display:flex; + bottom: -130px; + justify-content:center; + align-items:center; +} + +.middle-banner-first-row { + padding: -98px 14px 24px; + /*130 - 32 = 98 de diferença*/ +} + +.bottom-cards { + margin: 202px 0 136px; + /*a minha sacada foi somar 64 do bottom negativo + 138 que e de fato a margem entre o middle-banners e bottom-cards*/ + display:grid; + grid-template-columns: repeat(4, max-content); + justify-content:center; + gap:16px; + background:#fff; +} + +.bottom-card { + display:flex; + flex-direction:column; + align-items:center; + max-width:300px; + padding: 36px 0px 14px; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); + +} + +.bottom-card-description { + padding: 14px 32px 66px; + max-width:368px; + font-size: 16px; + line-height:24px; + text-align:center; +} + +.bottom-card-image { + display:block; + margin-bottom: 14px; + +} + +.bottom-infocard { + align-items: center; + justify-content:center; + display:grid; + gap:32px; +} + +.bottom-infocard-image-desktop { + margin-bottom: 104px; + max-width:1360px; + +} + +.bottom-infocard-text { + text-align:center; + align-items:center; + justify-content:center; + max-width:550px; +} + +.bottom-infocard-title { + font-weight:600; + font-size:32px; + line-height: 20px; + margin-bottom: 18px; +} + +.bottom-infocard-description { + font-size:16px; + line-height:24px; + margin-bottom:32px; + +} + +.page-footer { + background:black; + display:flex; + flex-direction:column; + align-items:center; + padding: 38px 0; +} + +.footer-icons { + display:flex; + list-style:none; + margin-bottom: 16px; +} + +.footer-icon { + margin:0 8px; +} + +.footer-text { + color: #bdbdbd; + font-size:10px; + line-height:12px; + text-transform:uppercase; +} + +@media screen and (max-width: 414px) { + .banner-desktop, .middle-banner-desktop, .bottom-infocard-image-desktop { + display:none; + } + .top-infocard { + gap:80px; + } + + .top-infocard-text { + max-width: 250px; + } + + .top-infocard-subtitle { + font-size: 20px; +} + + .top-infocard-title { + font-size: 28px; + margin-bottom:18px; + } + + .top-infocard-description { + max-width: 330px; + + } + + .top-infocard-image { + max-width:240px; + width:100%; + margin-top: 66px; + + } + + .top-cards { + grid-template-columns: 1fr; + + } + + .bottom-cards { + grid-template-columns: 300px; + margin-right:0; + + } + + .bottom-infocard { + gap:80px; + } + + .bottom-infocard { + gap:104px; + } + + .bottom-infocard-text { + max-width:250px; + + } + + .bottom-infocard-title { + font-size:24px; + } + + .bottom-infocard-description { + max-width: 250px; + } + + .page-footer { + padding: 42px 0 26px; + } + + .footer-text { + max-width:280px; + text-align:center; + } + +} + +@media screen and (min-width:415px) { + .banner-mobile, .middle-banner-mobile, .bottom-infocard-image-mobile { + display:none; + } +} diff --git a/assets/images/banner-desktop.png b/assets/images/banner-desktop.png new file mode 100644 index 0000000..a2c9f47 Binary files /dev/null and b/assets/images/banner-desktop.png differ diff --git a/assets/images/banner-mobile.png b/assets/images/banner-mobile.png new file mode 100644 index 0000000..a0f7541 Binary files /dev/null and b/assets/images/banner-mobile.png differ diff --git a/assets/images/bottom-card-image-1.png b/assets/images/bottom-card-image-1.png new file mode 100644 index 0000000..90890b4 Binary files /dev/null and b/assets/images/bottom-card-image-1.png differ diff --git a/assets/images/bottom-card-image-2.png b/assets/images/bottom-card-image-2.png new file mode 100644 index 0000000..cf1aacc Binary files /dev/null and b/assets/images/bottom-card-image-2.png differ diff --git a/assets/images/bottom-card-image-3.png b/assets/images/bottom-card-image-3.png new file mode 100644 index 0000000..d4eba1b Binary files /dev/null and b/assets/images/bottom-card-image-3.png differ diff --git a/assets/images/bottom-card-image-4.png b/assets/images/bottom-card-image-4.png new file mode 100644 index 0000000..32584ce Binary files /dev/null and b/assets/images/bottom-card-image-4.png differ diff --git a/assets/images/bottom-infocard-image-desktop.png b/assets/images/bottom-infocard-image-desktop.png new file mode 100644 index 0000000..87b48a2 Binary files /dev/null and b/assets/images/bottom-infocard-image-desktop.png differ diff --git a/assets/images/bottom-infocard-image-mobile.png b/assets/images/bottom-infocard-image-mobile.png new file mode 100644 index 0000000..f5315bc Binary files /dev/null and b/assets/images/bottom-infocard-image-mobile.png differ diff --git a/assets/images/facebook-icon.png b/assets/images/facebook-icon.png new file mode 100644 index 0000000..a573c77 Binary files /dev/null and b/assets/images/facebook-icon.png differ diff --git a/assets/images/infocard-image.png b/assets/images/infocard-image.png new file mode 100644 index 0000000..41cf659 Binary files /dev/null and b/assets/images/infocard-image.png differ diff --git a/assets/images/instagram-icon.png b/assets/images/instagram-icon.png new file mode 100644 index 0000000..6e88dfe Binary files /dev/null and b/assets/images/instagram-icon.png differ diff --git a/assets/images/logom3.png b/assets/images/logom3.png new file mode 100644 index 0000000..facd0ed Binary files /dev/null and b/assets/images/logom3.png differ diff --git a/assets/images/middle-banner-desktop-1.png b/assets/images/middle-banner-desktop-1.png new file mode 100644 index 0000000..211bc8f Binary files /dev/null and b/assets/images/middle-banner-desktop-1.png differ diff --git a/assets/images/middle-banner-desktop-2.png b/assets/images/middle-banner-desktop-2.png new file mode 100644 index 0000000..0aaa136 Binary files /dev/null and b/assets/images/middle-banner-desktop-2.png differ diff --git a/assets/images/middle-banner-desktop-3.png b/assets/images/middle-banner-desktop-3.png new file mode 100644 index 0000000..750e2bc Binary files /dev/null and b/assets/images/middle-banner-desktop-3.png differ diff --git a/assets/images/middle-banner-mobile-1.png b/assets/images/middle-banner-mobile-1.png new file mode 100644 index 0000000..bfab1c4 Binary files /dev/null and b/assets/images/middle-banner-mobile-1.png differ diff --git a/assets/images/middle-banner-mobile-2.png b/assets/images/middle-banner-mobile-2.png new file mode 100644 index 0000000..1fbed1c Binary files /dev/null and b/assets/images/middle-banner-mobile-2.png differ diff --git a/assets/images/middle-banner-mobile-3.png b/assets/images/middle-banner-mobile-3.png new file mode 100644 index 0000000..c83114e Binary files /dev/null and b/assets/images/middle-banner-mobile-3.png differ diff --git a/assets/images/top-card-image-1.png b/assets/images/top-card-image-1.png new file mode 100644 index 0000000..e003cd7 Binary files /dev/null and b/assets/images/top-card-image-1.png differ diff --git a/assets/images/top-card-image-2.png b/assets/images/top-card-image-2.png new file mode 100644 index 0000000..2236a68 Binary files /dev/null and b/assets/images/top-card-image-2.png differ diff --git a/assets/images/top-card-image-3.png b/assets/images/top-card-image-3.png new file mode 100644 index 0000000..2f1118a Binary files /dev/null and b/assets/images/top-card-image-3.png differ diff --git a/assets/images/youtube-icon.png b/assets/images/youtube-icon.png new file mode 100644 index 0000000..390f7a5 Binary files /dev/null and b/assets/images/youtube-icon.png differ diff --git a/index.html b/index.html index 83c7c62..57ff44a 100644 --- a/index.html +++ b/index.html @@ -28,5 +28,19 @@ /> + +
+
+ + +