diff --git a/assets/images/bottom-card-image-01.png b/assets/images/bottom-card-image-01.png new file mode 100644 index 0000000..656f073 Binary files /dev/null and b/assets/images/bottom-card-image-01.png differ diff --git a/assets/images/bottom-card-image-02.png b/assets/images/bottom-card-image-02.png new file mode 100644 index 0000000..8240edb Binary files /dev/null and b/assets/images/bottom-card-image-02.png differ diff --git a/assets/images/bottom-card-image-03.png b/assets/images/bottom-card-image-03.png new file mode 100644 index 0000000..66be1e8 Binary files /dev/null and b/assets/images/bottom-card-image-03.png differ diff --git a/assets/images/bottom-card-image-04-2.png b/assets/images/bottom-card-image-04-2.png new file mode 100644 index 0000000..6afad68 Binary files /dev/null and b/assets/images/bottom-card-image-04-2.png differ diff --git a/assets/images/bottom-card-image-04.png b/assets/images/bottom-card-image-04.png new file mode 100644 index 0000000..2013cf8 Binary files /dev/null and b/assets/images/bottom-card-image-04.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..42190a3 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..7a674f6 Binary files /dev/null and b/assets/images/bottom-infocard-image-mobile.png differ diff --git a/assets/images/facebook-icon.svg b/assets/images/facebook-icon.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/assets/images/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/gallery-area-image-01.png b/assets/images/gallery-area-image-01.png new file mode 100644 index 0000000..5041a6a Binary files /dev/null and b/assets/images/gallery-area-image-01.png differ diff --git a/assets/images/gallery-area-image-02.png b/assets/images/gallery-area-image-02.png new file mode 100644 index 0000000..f7ed233 Binary files /dev/null and b/assets/images/gallery-area-image-02.png differ diff --git a/assets/images/gallery-area-image-03.png b/assets/images/gallery-area-image-03.png new file mode 100644 index 0000000..0bbb48c Binary files /dev/null and b/assets/images/gallery-area-image-03.png differ diff --git a/assets/images/instagram-icon.svg b/assets/images/instagram-icon.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/images/instagram-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/m3-academy-logo.svg b/assets/images/m3-academy-logo.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/assets/images/m3-academy-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/main-banner-desktop.png b/assets/images/main-banner-desktop.png new file mode 100644 index 0000000..cab0a60 Binary files /dev/null and b/assets/images/main-banner-desktop.png differ diff --git a/assets/images/main-banner-mobile.png b/assets/images/main-banner-mobile.png new file mode 100644 index 0000000..5118021 Binary files /dev/null and b/assets/images/main-banner-mobile.png differ diff --git a/assets/images/top-card-image-01.png b/assets/images/top-card-image-01.png new file mode 100644 index 0000000..31a541b Binary files /dev/null and b/assets/images/top-card-image-01.png differ diff --git a/assets/images/top-card-image-02.png b/assets/images/top-card-image-02.png new file mode 100644 index 0000000..97f8ad4 Binary files /dev/null and b/assets/images/top-card-image-02.png differ diff --git a/assets/images/top-card-image-03.png b/assets/images/top-card-image-03.png new file mode 100644 index 0000000..be01082 Binary files /dev/null and b/assets/images/top-card-image-03.png differ diff --git a/assets/images/top-infocard-image.png b/assets/images/top-infocard-image.png new file mode 100644 index 0000000..2af63bd Binary files /dev/null and b/assets/images/top-infocard-image.png differ diff --git a/assets/images/youtube-icon.svg b/assets/images/youtube-icon.svg new file mode 100644 index 0000000..de6f9a7 --- /dev/null +++ b/assets/images/youtube-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/styles/main.css b/assets/styles/main.css new file mode 100644 index 0000000..3b8717f --- /dev/null +++ b/assets/styles/main.css @@ -0,0 +1,518 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Inter' , sans-serif; +} + +body { + font-family: 'Inter', sans-serif; + color: #000000; +} + +/*Header*/ + +.page-header { + display: flex; + justify-content: center; + align-items: center; + padding: 28px; + background: #000000; +} + +.header-logo { + display: block; +} + +/*Banner principal*/ + +.main-banner { + width: 100%; +} + +.main-banner-mobile { + display: none; +} + +/*Infocard do topo */ + +.top-infocard { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 73px 0 178px; + gap: 73px; +} + +.top-infocard-text { + width: 40%; + text-align: center; + align-items: center; +} + +.top-infocard-subtitle { + text-transform: uppercase; + font-weight: 400; + font-size: 32px; +} + +.top-infocard-title { + text-transform: uppercase; + font-weight: 500; + font-size: 48px; + line-height: 58px; + margin-bottom: 28px; +} + +.top-infocard-description { + font-size: 16px; + line-height: 24px; + text-align: left; +} + +.top-infocard-image { + width: 17%; +} + +/*Cards do Topo*/ + +.top-cards { + display: flex; + background: #FFFFFF; + gap: 21px; + justify-content: center; + align-items: center; + margin-bottom: 80px; + width: 100%; +} + +.top-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 35px 26px 27px 26px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23); + min-height: 287px; + width: 18%; + gap: 27px; + height: auto; +} + +.top-card-image { + display: block; + width: 34%; +} + +.top-card-description { +/* max-width: 300px;*/ + width: 77%; + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.gallery-area { + background: #E0E0E0; + width: 100%; +} + +.gallery-wrapper { + position: relative; + transform: translateY(4rem); + display: flex; + gap: 39px; + justify-content: center; + width: 88%; + margin: 0 auto; + margin-bottom: 173px; +} + +.gallery-area-images { + display: block; +} + +.gallery-area-image { + width: 100% +} + +/* Cards de Baixo */ + +.bottom-cards { + display: flex; + background: #FFFFFF; + gap: 16px; + justify-content: center; + align-items: center; + margin: auto auto 108px; + width: 88%; +} + +.bottom-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 48px 32px 65px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23); + min-height: 287px; + gap: 25px; + height: auto; +} + +.bottom-card-image { + display: block; + +} + +.bottom-card-description { + max-width: 367px; + font-size: 16px; + line-height: 24px; + text-align: center; +} + +/*Infocard de baixo*/ + +.bottom-infocard { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 0 116px; + width: 100%; + padding: 0 72px; +} + +.bottom-infocard-text { + text-align: center; + margin-bottom: 50px; + width: 29%; +} + +.bottom-infocard-title { + font-size: 32px; + font-weight: 600; + line-height: 39px; +} + +.bottom-infocard-description { + font-size: 16px; + line-height: 24px; +} + +.bottom-infocard-image { + display: block; + width: 100%; +} + +.bottom-infocard-image-desktop { + display: block; + margin: auto; + width: 71%; +} + +.bottom-infocard-image-mobile { + display: none; +} + +/*Footer*/ + +.page-footer { + display: flex; + flex-direction: column; + background: #000000; + align-items: center; + padding: 38px 0; + gap: 17px; +} + +.footer-icons { + display: flex; + list-style: none; +} + +.footer-icon { + margin: 0 8px; +} + +.footer-text { + text-align: center; + text-transform: uppercase; + font-size: 10px; + line-height: 12px; + color: #BDBDBD; +} + +@media screen and (min-width: 2500px) { + + /* Infocard do topo */ + + .top-infocard-text { + width: 52%; + margin: 95px 0 95px; + } + + .top-infocard-subtitle { + font-size: 64px; + line-height: 76px; + } + + .top-infocard-title { + font-size: 96px; + line-height: 116px; + margin: 0 0 28px; + padding: 0; + } + + .top-infocard-description { + font-size: 32px; + line-height: 48px; + padding: 0 0 36px; + } + + .top-infocard-image { + width: 20%; + } + + /* Cards do topo */ + + .top-card-description { + width: 88%; + font-size: 32px; + line-height: 48px; + } + + .bottom-card-description { + font-size: 32px; + line-height: 48px; + } + + /* Infocard de baixo */ + + .bottom-infocard-text { + width: 35%; + } + + .bottom-infocard-title { + font-size: 64px; + line-height: 78px; + } + + .bottom-infocard-description { + font-size: 32px; + line-height: 48px; + } + + /* Footer */ + + .footer-text { + font-size: 20px; + line-height: 24px; + } +} + +@media screen and (max-width: 1024px) { + + /*Banner principal*/ + + .main-banner-desktop { + display: none; + } + + .main-banner-mobile { + display: flex; + width: 100%; + } + + /*Infocard do topo*/ + + .top-infocard { + margin: 73px 28px 91px; + gap: 65px; + } + + .top-infocard-text { + width: 86%; + padding: 0 0; + } + + .top-infocard-subtitle { + font-size: 20px; + line-height: 24px; + } + + .top-infocard-title { + font-size: 28px; + line-height: 32px; + margin-bottom: 18px; + } + + .top-infocard-description { + text-align: center; + } + + .top-infocard-image { + width: 58%; + } + + /*Cards do topo*/ + + .top-cards { + flex-direction: column; + } + + .top-card { + width: 84%; + } + + .top-card-image { + max-width: 102px; + } + + /*Galeria de Imagens*/ + + .gallery-area { + padding: 0; + } + + .gallery-wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + width: 89%; + gap: 23px 14px; + transform: translateY(32px); + margin-bottom: 98px; + } + + .gallery-area-images-01 { + order: 2; + } + + .gallery-area-images-02 { + order: 1; + } + + .gallery-area-images-03 { + grid-column: 1/2 span; + order: 2; + } + + /*Cards de baixo*/ + + .bottom-cards { + flex-direction: column; + margin-bottom: 98px; + width: auto; + } + + .bottom-card { + width: 88%; + gap: 15px; + } + + .bottom-card-image { + max-width: 102px; + } + + .bottom-card-description { + font-size: 14px; + } + + /*Infocard de baixo*/ + + .bottom-infocard { + margin: 0; + padding: 0; + flex-direction: column-reverse; + } + + .bottom-infocard-text { + margin-bottom: 87px; + gap: 10px; + width: 84%; + align-items: center; + } + + .bottom-infocard-title { + margin-bottom: 9px; + font-size: 24px; + line-height: 29px; + } + + .bottom-infocard-description { + font-size: 16px; + line-height: 24px; + } + + .bottom-infocard-image-desktop { + display: none; + } + + .bottom-infocard-image-mobile { + display: flex; + width: 100%; + margin-bottom: 50px; + } + + /*Footer*/ + + .page-footer { + gap: 16px; + } + + .footer-text { + max-width: 63%; + } +} + +@media screen and (max-width: 320px) { + .header-logo { + width: 180px + } + + /*Infocard do topo */ + + .top-infocard { + margin: 57px 28px 57px; + gap: 45px; + } + + /*Cards do topo */ + + .top-cards { + margin-bottom: 50px; + } + .top-card { + padding: 26px 23px 23px 25px; + gap: 16px; + } + + /*Galeria de imagens*/ + + .gallery-wrapper{ + gap: 14px 11px; + transform: translateY(23px); + margin-bottom: 76px; + } + + /*Cards de baixo */ + + .bottom-cards { + margin-bottom: 67px; + } + .bottom-card { + padding: 38px 29px 38px; + gap: 11px; + } + + /*Infocard de baixo*/ + .bottom-infocard-image-mobile { + margin-bottom: 34px; + } + + .bottom-infocard-text { + margin-bottom: 62px; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..ec40626 --- /dev/null +++ b/index.html @@ -0,0 +1,180 @@ + + + + + + + + + + + Challenge Landing Page + + + + + + + + + + +
+ + + +
+ +
+ + + +
+
+ Banner principal + Banner principal +
+
+ + + +
+
+

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.

+
+ + Imagem do infocard do topo: 3 computadores +
+ + + +
+
+ Imagem do card do topo: Loja + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+
+ +
+ Imagem do card do topo: Bolsa de compras + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+
+ +
+ Imagem do card do topo: Moeda + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+
+
+ + + +
+
+
+ Imagem da galeria: Computador 1 +
+ +
+ Imagem da galeria: Computador 2 +
+ +
+ Imagem da galeria: Computador 3 +
+
+
+ + + +
+
+ Imagem do card de baixo: Nota dinheiro + +
+ 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 card de baixo: Moeda + +
+ 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 card de baixo: Computador + +
+ 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 card de baixo: Celular + +
+ 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 infocard de baixo + Imagem do infocard de baixo +
+
+
+ + + + + \ No newline at end of file