diff --git a/assets/img/Group(2).svg b/assets/img/Group(2).svg new file mode 100644 index 0000000..c2ef882 --- /dev/null +++ b/assets/img/Group(2).svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/Group.png b/assets/img/Group.png new file mode 100644 index 0000000..2013cf8 Binary files /dev/null and b/assets/img/Group.png differ diff --git a/assets/img/Group.svg b/assets/img/Group.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/img/Group.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/Logo-M3Academy 1.svg b/assets/img/Logo-M3Academy 1.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/assets/img/Logo-M3Academy 1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/facebook-logo.svg b/assets/img/facebook-logo.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/assets/img/facebook-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/fxemoji_threenetworkedcomputers.svg b/assets/img/fxemoji_threenetworkedcomputers.svg new file mode 100644 index 0000000..aa8344a --- /dev/null +++ b/assets/img/fxemoji_threenetworkedcomputers.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/img/image_principal.png b/assets/img/image_principal.png new file mode 100644 index 0000000..cab0a60 Binary files /dev/null and b/assets/img/image_principal.png differ diff --git a/assets/img/img_container_1.png b/assets/img/img_container_1.png new file mode 100644 index 0000000..31a541b Binary files /dev/null and b/assets/img/img_container_1.png differ diff --git a/assets/img/img_container_2.png b/assets/img/img_container_2.png new file mode 100644 index 0000000..97f8ad4 Binary files /dev/null and b/assets/img/img_container_2.png differ diff --git a/assets/img/img_container_3.png b/assets/img/img_container_3.png new file mode 100644 index 0000000..a5e458f Binary files /dev/null and b/assets/img/img_container_3.png differ diff --git a/assets/img/img_subdescription.png b/assets/img/img_subdescription.png new file mode 100644 index 0000000..42190a3 Binary files /dev/null and b/assets/img/img_subdescription.png differ diff --git a/assets/img/img_submobile.png b/assets/img/img_submobile.png new file mode 100644 index 0000000..7a674f6 Binary files /dev/null and b/assets/img/img_submobile.png differ diff --git a/assets/img/laptop 1.png b/assets/img/laptop 1.png new file mode 100644 index 0000000..66be1e8 Binary files /dev/null and b/assets/img/laptop 1.png differ diff --git a/assets/img/mobile_image_primary.png b/assets/img/mobile_image_primary.png new file mode 100644 index 0000000..5118021 Binary files /dev/null and b/assets/img/mobile_image_primary.png differ diff --git a/assets/img/money (1) 2.png b/assets/img/money (1) 2.png new file mode 100644 index 0000000..656f073 Binary files /dev/null and b/assets/img/money (1) 2.png differ diff --git a/assets/img/preview_1.png b/assets/img/preview_1.png new file mode 100644 index 0000000..d7ff618 Binary files /dev/null and b/assets/img/preview_1.png differ diff --git a/assets/img/preview_2.png b/assets/img/preview_2.png new file mode 100644 index 0000000..f7ed233 Binary files /dev/null and b/assets/img/preview_2.png differ diff --git a/assets/img/preview_3.png b/assets/img/preview_3.png new file mode 100644 index 0000000..0bbb48c Binary files /dev/null and b/assets/img/preview_3.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6859cd0 --- /dev/null +++ b/index.html @@ -0,0 +1,178 @@ + + + + + + + + + Landing Page M3 + + + +
+ + + LogoM3Academy + + +
+ +
+ + banner primário + + + + +
+ +
+
+

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

+ + inf image + +
+
+
+
+ + card_decoration 1 +

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

+ +
+
+ + card decoration 2 +

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

+ +
+
+ + card decoration 3 +

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

+ +
+
+ +
+ + + preview 1 + + + preview 2 + + + + preview 3 + + +
+ + + +
+
+ + card_decoration 1 +

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

+ +
+
+ + card_decoration 1 +

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

+ +
+
+ + card decoration 2 +

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

+ +
+
+ + card decoration 3 +

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

+
+ + img subdescription + + + img mobile + +
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3c471fc --- /dev/null +++ b/style.css @@ -0,0 +1,267 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', sans-serif; + +} + +.header_landing { + background-color: #000; + display: flex; + justify-content: center; +} + +.logo_m3 { + margin: 28px 0; +} + +.primary_banner { + width: 100%; + +} + +.info_texts { + text-align: center; + width: 50%; + margin: 0 auto; + +} + +.info_subtitle { + margin-top: 76px; + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; +} + +.info_title { + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; +} + +.info_description { + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-top: 76px; + margin-bottom: 76px; +} + +.container { + display: flex; + margin-top: 178px; + gap: 22px; + justify-content: center; +} + +.card { + + background-color: #fff; + display: flex; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + justify-content: center; + align-items: center; + text-align: center; + width: 20%; + padding: 2rem; + margin-bottom: 80px; +} + +.card_paragraph { + margin-top: 30px; +} + +.img_card { + width: 100px; +} + +.second_container { + padding: 3rem; + height: 400px; + background-color: #E0E0E0; + display: flex; + gap: 24px; + width: 100%; + justify-content: center; +} + +.preview_img { + + width: 410px; + +} + +.section_down { + display: flex; + flex-direction: column; + align-items: center; +} + +.img_subdescription { + margin-top: 50px; +} + +.info_footer { + padding: 2.5rem; + background-color: #000; + color: #fff; + margin-top: 116px; +} + +.itens_footer { + display: flex; + justify-content: center; + align-items: center; + gap: 22px; + list-style: none; + margin-bottom: 16px; + +} + +.text_footer { + color: white; + +} + + +/*----------------------------------------------------------------------------*/ + +@media screen and (max-width: 413px) { + .primary_banner { + display: none; + } + + .banner_mobile { + width: 100%; + max-width: 414px; + } + + .info_image, + .info_texts { + display: flex; + flex-direction: column; + align-items: center; + } + +} + + +/*----------------------------------------------------------------------------*/ +@media screen and (min-width:414px) { + .banner_mobile { + display: none; + } + + .info_image, + .info_texts { + display: flex; + flex-direction: column; + align-items: center; + } + +} + +/*----------------------------------------------------------------------------*/ +@media screen and (max-width:1120px) { + .container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + } + + .card { + width: 350px; + margin: 0 32px 24px; + } + + .second_container { + display: block; + width: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + margin-top: 80px; + } + + .preview_img { + width: 178px; + text-align: center; + } + + .preview_solo { + width: 360px; + display: flex; + margin: 0 auto; + flex-direction: column; + } + + .img_subdescription { + display: none; + } + + .img_mobile { + width: 100%; + margin: 50px 0 50px; + align-items: center; + } + + .section_down { + flex-direction: column-reverse; + } +} + +/*----------------------------------------------------------------------------*/ +@media screen and (min-width:2199px) { + .second_container { + display: flex; + justify-content: center; + height: 680px; + } + + .preview_img { + width: 100%; + width: 720px; + } + + .info_subtitle { + margin-top: 76px; + font-weight: 400; + font-size: 56px; + line-height: 39px; + text-transform: uppercase; + } + + .info_title { + font-weight: 500; + font-size: 64px; + line-height: 58px; + text-transform: uppercase; + margin-top: 40px; + } + + .info_description { + font-weight: 400; + font-size: 44px; + line-height: 56px; + margin-top: 76px; + margin-bottom: 76px; + } +} + +@media screen and (min-width:1121px) { + .img_mobile { + display: none; + } +} \ No newline at end of file