diff --git a/assets/botton-infocard-banner-desktop.png b/assets/botton-infocard-banner-desktop.png new file mode 100644 index 0000000..74d0711 Binary files /dev/null and b/assets/botton-infocard-banner-desktop.png differ diff --git a/assets/botton-infocard-banner-mobile.png b/assets/botton-infocard-banner-mobile.png new file mode 100644 index 0000000..50df8d7 Binary files /dev/null and b/assets/botton-infocard-banner-mobile.png differ diff --git a/assets/botton-infocard-img-01.png b/assets/botton-infocard-img-01.png new file mode 100644 index 0000000..b6d81cf Binary files /dev/null and b/assets/botton-infocard-img-01.png differ diff --git a/assets/botton-infocard-img-02.png b/assets/botton-infocard-img-02.png new file mode 100644 index 0000000..a239b00 Binary files /dev/null and b/assets/botton-infocard-img-02.png differ diff --git a/assets/botton-infocard-img-03.png b/assets/botton-infocard-img-03.png new file mode 100644 index 0000000..e5d0f23 Binary files /dev/null and b/assets/botton-infocard-img-03.png differ diff --git a/assets/botton-infocard-img-04.png b/assets/botton-infocard-img-04.png new file mode 100644 index 0000000..ad9f3c1 Binary files /dev/null and b/assets/botton-infocard-img-04.png differ diff --git a/assets/footer-social-media-instagram.svg b/assets/footer-social-media-instagram.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/footer-social-media-instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/footer-social-medial-facebook.png b/assets/footer-social-medial-facebook.png new file mode 100644 index 0000000..34769d9 Binary files /dev/null and b/assets/footer-social-medial-facebook.png differ diff --git a/assets/footer-social-medial-facebook.svg b/assets/footer-social-medial-facebook.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/assets/footer-social-medial-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/footer-social-medial-youtube.svg b/assets/footer-social-medial-youtube.svg new file mode 100644 index 0000000..c2ef882 --- /dev/null +++ b/assets/footer-social-medial-youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/logo-m3academy-1.svg b/assets/logo-m3academy-1.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/assets/logo-m3academy-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/main-banner-desktop.png b/assets/main-banner-desktop.png new file mode 100644 index 0000000..67dc789 Binary files /dev/null and b/assets/main-banner-desktop.png differ diff --git a/assets/main-banner-mobile.png b/assets/main-banner-mobile.png new file mode 100644 index 0000000..8993f79 Binary files /dev/null and b/assets/main-banner-mobile.png differ diff --git a/assets/mid-infocard-img-01.png b/assets/mid-infocard-img-01.png new file mode 100644 index 0000000..823fccc Binary files /dev/null and b/assets/mid-infocard-img-01.png differ diff --git a/assets/mid-infocard-img-02.png b/assets/mid-infocard-img-02.png new file mode 100644 index 0000000..4544597 Binary files /dev/null and b/assets/mid-infocard-img-02.png differ diff --git a/assets/mid-infocard-img-03.png b/assets/mid-infocard-img-03.png new file mode 100644 index 0000000..a12898d Binary files /dev/null and b/assets/mid-infocard-img-03.png differ diff --git a/assets/top-card-img-01.png b/assets/top-card-img-01.png new file mode 100644 index 0000000..8cf9fb5 Binary files /dev/null and b/assets/top-card-img-01.png differ diff --git a/assets/top-card-img-02.png b/assets/top-card-img-02.png new file mode 100644 index 0000000..0d27090 Binary files /dev/null and b/assets/top-card-img-02.png differ diff --git a/assets/top-card-img-03.png b/assets/top-card-img-03.png new file mode 100644 index 0000000..11b00d4 Binary files /dev/null and b/assets/top-card-img-03.png differ diff --git a/assets/top-infocard-img.png b/assets/top-infocard-img.png new file mode 100644 index 0000000..ad45609 Binary files /dev/null and b/assets/top-infocard-img.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..c7fb991 --- /dev/null +++ b/index.html @@ -0,0 +1,112 @@ + + + + + + + Landing Page M3 Academy + + + + + +
+ + +
+ +
+
+ Imagem do banner principal desktop + Imagem do banner principal mobile +
+ +
+
+

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 01 do card to topo +

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

+
+ +
+ Imagem 01 do card do topo +

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

+
+ +
+ Imagem 01 do card to topo +

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

+
+
+ +
+
+
+ Imagem notebook 01 + Imagem notebook 02 +
+
+ Imagem notebook 03 +
+
+ +
+ +
+
+
+ Imagem do infocard do meio 01 +

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 infocard do meio 02 +

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 infocard do meio 03 +

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 infocard do meio 04 +

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

+ + Banner to rodapé + Banner do rodapé +
+
+ + +
+ + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..52f6a78 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,393 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', sans-serif; + color: #000000; +} + +.page-header { + background-color: #000000; + display: flex; + justify-content: center; + align-items: center; + padding: 28px 0; +} + +.header-logo { + display: block; + width: 100%; +} + +.main-banner { + display: block; + width: 100%; +} + +.top-infocard { + display: flex; + flex-direction: column; + align-items: center; +} + +.top-infocard-text { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + max-width: 766px; + margin: 72px 0 178px; +} + +.top-infocard-subtitle { + text-transform: uppercase; + font-size: 32px; + line-height: 39px; +} + +.top-inforcard-title { + text-transform: uppercase; + font-family: 'Inter'; + font-weight: 500; + font-size: 48px; + line-height: 58px; + margin-bottom: 24px; +} + +.top-infocard-description { + font-size: 16px; + line-height: 24px; + margin-bottom: 72px; +} + +.top-infocard-img { + display: block; + width: 55%; +} + +.top-cards { + padding: 80px; + display: grid; + grid-template-columns: repeat(3, max-content); + gap: 20px; + background-color: #fff; + justify-content: center; +} + +.top-card { + padding: 26px; + display: flex; + flex-direction: column; + align-items: center; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +.top-card-img { + display: block; + margin-bottom: 26px; +} + +.top-card-description { + max-width: 300px; + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.mid-banners { + padding-top: 62px; + height: 530px; + width: 100%; + display: flex; + justify-content: center; + background: #E0E0E0; +} + +.mid-banner-images { + margin: 0px 72px; + display: flex; + align-items: center; + justify-content: center; +} + +.mid-banner-img { + padding: 0px 20px; +} + + +.mid-infocards { + width: 100%; + margin-top: 191px; + display: grid; + grid-template-columns: repeat(4, max-content); + gap: 16px; + justify-content: center; + background-color: #FFFFFF; +} + +.mid-infocard { + display: flex; + flex-direction: column; + align-items: center; + padding: 32px; + background: #FFFFFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} + +.mid-infocard-img { + margin-top: 59px; + display: flex; +} + +.mid-infocard-description { + width: 366px; + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.botton-infocard { + margin: 108px; + display: flex; + flex-direction: column; + align-items: center; +} + +.botton-infocard-title { + font-weight: 600; + font-size: 32px; + line-height: 39px; + text-align: center; +} + +.botton-infocard-subtitle { + width: 550px; + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.botton-infocard-banner-desktop { + max-width: 100%; + margin: 50px 280px 0; +} + +footer { + height: 128px; + display: flex; + justify-content: center; + align-items: center; + background-color: black; + color: gray; +} + +footer > p { + font-size: 10px; + line-height: 12px; + text-transform: uppercase; +} + +.footer-social-media { + text-align: center; + margin: 38px; +} + +.social-media-links { + margin-bottom: 16px; +} + +@media screen and (max-width: 765px) { + .main-banner-desktop { + display: none; + } + + .botton-infocard-banner-desktop{ + display: none; + } + + .top-infocard-text { + margin: 72px 7.5% 65px; + } + + .top-cards { + grid-template-columns: 1fr; + padding: 90px 32px 80px; + } + + .top-infocard-img { + max-width: 238px; + width: 100%; + } + + .top-infocard-subtitle { + font-size: 20px; + line-height: 24px; + display: flex; + align-items: center; + text-align: center; + } + + .top-inforcard-title { + margin-bottom: 12px; + font-weight: 500; + font-size: 28px; + line-height: 34px; + text-align: center; + } + + .top-infocard-description{ + text-align: center; + max-width: 357px; + margin-bottom: 64px; + } + + .mid-cards-1 { + display: flex; + } + + + .mid-banner-images{ + width: 100%; + flex-direction: column; + } + + .mid-banner-img { + width: 45%; + padding: 0; + } + + .mid-infocards { + grid-template-columns: 1fr; + padding: 80px 23px 98px 23px; + margin-top: 112px ; + } + + .mid-infocard { + width: 100%; + } + + .mid-infocard-description { + width: 100%; + max-width: 300px; + } + + .botton-infocard { + margin: 0 0 86px; + } + + .botton-infocard-title { + margin-bottom: 10px; + + } + + .botton-infocard-subtitle { + width: 330px; + } + + .botton-infocard-banner-mobile { + width: 100%; + margin-bottom: 50px; + } + + .botton-infocard-banner-desktop { + display: none; + } + + .card-1{ + order: 2; + } + + .card-2 { + order: 3; + } +} + + +@media screen and (min-width: 766px) and (max-width: 1024px) { + .page-header { + width: 100%; + } + .main-banner-desktop { + display: none; + } + .top-cards { + grid-template-columns: 1fr; + padding: 90px 32px 80px; + } + + .mid-cards-1 { + flex-direction: row; + } + + .mid-cards-2 { + text-align: center; + } + + .mid-banner-images{ + width: 100%; + flex-direction: column; + } + + .mid-banner-img { + padding: 7px; + width: 49%; + } + + .mid-infocards { + grid-template-columns: 1fr; + padding: 80px 23px 98px 23px; + margin-top: 112px ; + } + + .mid-infocard { + width: 100%; + } + + .mid-infocard-description { + width: 100%; + max-width: 300px; + } + + .botton-infocard { + margin: 0 0 86px; + } + + .botton-infocard-title { + margin-bottom: 10px; + + } + + .botton-infocard-banner-mobile { + width: 100%; + margin-bottom: 50px; + } + + .botton-infocard-banner-desktop { + display: none; + } + + .card-1{ + order: 2; + } + + .card-2 { + order: 3; + } +} + +@media screen and (min-width: 1025px){ + .main-banner-mobile { + display: none; + } + + .botton-infocard-banner-mobile { + display: none; + } + +}