diff --git a/assets/images/img/bottom-bannerdesktop.png b/assets/images/img/bottom-bannerdesktop.png new file mode 100644 index 0000000..c4b49fc Binary files /dev/null and b/assets/images/img/bottom-bannerdesktop.png differ diff --git a/assets/images/img/bottom-bannermobile.png b/assets/images/img/bottom-bannermobile.png new file mode 100644 index 0000000..f4e55c5 Binary files /dev/null and b/assets/images/img/bottom-bannermobile.png differ diff --git a/assets/images/img/fblogo.png b/assets/images/img/fblogo.png new file mode 100644 index 0000000..170d82f Binary files /dev/null and b/assets/images/img/fblogo.png differ diff --git a/assets/images/img/iglogo.png b/assets/images/img/iglogo.png new file mode 100644 index 0000000..922af3c Binary files /dev/null and b/assets/images/img/iglogo.png differ diff --git a/assets/images/img/middlecard.png b/assets/images/img/middlecard.png new file mode 100644 index 0000000..7cd0f0f Binary files /dev/null and b/assets/images/img/middlecard.png differ diff --git a/assets/images/img/middlecard2.png b/assets/images/img/middlecard2.png new file mode 100644 index 0000000..17999e1 Binary files /dev/null and b/assets/images/img/middlecard2.png differ diff --git a/assets/images/img/middlecard3.png b/assets/images/img/middlecard3.png new file mode 100644 index 0000000..6dff7a4 Binary files /dev/null and b/assets/images/img/middlecard3.png differ diff --git a/assets/images/img/middlecard4.png b/assets/images/img/middlecard4.png new file mode 100644 index 0000000..2edf5fb Binary files /dev/null and b/assets/images/img/middlecard4.png differ diff --git a/assets/images/img/middlenote1.png b/assets/images/img/middlenote1.png new file mode 100644 index 0000000..834d573 Binary files /dev/null and b/assets/images/img/middlenote1.png differ diff --git a/assets/images/img/middlenote2.png b/assets/images/img/middlenote2.png new file mode 100644 index 0000000..6561eb0 Binary files /dev/null and b/assets/images/img/middlenote2.png differ diff --git a/assets/images/img/middlenote3.png b/assets/images/img/middlenote3.png new file mode 100644 index 0000000..8eba01f Binary files /dev/null and b/assets/images/img/middlenote3.png differ diff --git a/assets/images/img/topLaptop.png b/assets/images/img/topLaptop.png new file mode 100644 index 0000000..5d94877 Binary files /dev/null and b/assets/images/img/topLaptop.png differ diff --git a/assets/images/img/topLaptopmobile.png b/assets/images/img/topLaptopmobile.png new file mode 100644 index 0000000..098a4dc Binary files /dev/null and b/assets/images/img/topLaptopmobile.png differ diff --git a/assets/images/img/topcard1.png b/assets/images/img/topcard1.png new file mode 100644 index 0000000..4b144a6 Binary files /dev/null and b/assets/images/img/topcard1.png differ diff --git a/assets/images/img/topcard2.png b/assets/images/img/topcard2.png new file mode 100644 index 0000000..55c9060 Binary files /dev/null and b/assets/images/img/topcard2.png differ diff --git a/assets/images/img/topcard3.png b/assets/images/img/topcard3.png new file mode 100644 index 0000000..cfbd0f1 Binary files /dev/null and b/assets/images/img/topcard3.png differ diff --git a/assets/images/img/topinfopcs.png b/assets/images/img/topinfopcs.png new file mode 100644 index 0000000..82530bd Binary files /dev/null and b/assets/images/img/topinfopcs.png differ diff --git a/assets/images/img/ytlogo.png b/assets/images/img/ytlogo.png new file mode 100644 index 0000000..79cbe29 Binary files /dev/null and b/assets/images/img/ytlogo.png differ diff --git a/assets/images/svg/Logo-M3Academy.svg b/assets/images/svg/Logo-M3Academy.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/assets/images/svg/Logo-M3Academy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/styles/main.css b/assets/styles/main.css new file mode 100644 index 0000000..4c808f4 --- /dev/null +++ b/assets/styles/main.css @@ -0,0 +1,387 @@ +*{ + margin:0; + padding:0; + box-sizing: border-box; +} +body{ + font-family: 'Inter', sans-serif; +} +.header{ + text-align: center; + background: #000000; + width: 100%; + height: 100px; + padding:28px; +} +.header img{ + +} +.topbannerdesktop{ + width: 100%; +} +.topbannermobile{ + display: none; +} +.topinfo{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.topinfo-texts{ + text-align: center; + margin-top: 73px; + width: 43%; + +} + +.topinfo-subtitle{ + text-transform: uppercase; + font-weight: 400; + font-size: 32px; + line-height: 39px; + +} + + +.topinfo-title{ + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; + +} +.topinfo-text{ + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-top: 28px; + text-align: left; + +} +.topinfo-img{ + margin-top:70px; +} +.topcards{ + margin: 0 25%; +} +.topcards-wrapper{ + margin-top: 178px; + margin-bottom: 80px; + display: flex; + justify-content: center; + gap:21px; +} +.topcard{ + padding: 46px 26px 27px; + text-align: center; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} +.topcard-text{ + min-width: 300px; + margin-top: 38px; + font-weight: 400; + font-size: 16px; + line-height: 24px; +} +.middle{ + background: #E0E0E0; +} +.middle-wrapper{ + display: flex; + align-items: center; + position: relative; + justify-content: center; + top:62px; + width: 100%; + +} +.gridimg{ + margin:0 72px; + display: grid; + flex-wrap:nowrap; + grid-template-columns: 1fr 1fr 1fr; + gap:39px; + width: 100%; +} +.middle-img1{ + display: block; + width: 100%; +} +.middle-img2{ + display: block; + width: 100%; +} +.middle-img3{ + display: block; + width: 100%; + +} +.middlecards{ + display:flex; + margin: 129px 72px 0 72px; + gap:16px; + background: #FFFFFF; +} +.middlecard{ + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); + text-align: center; + padding:51px 32px 65px 32px; +} +.middlecard-text{ + margin-top: 32px; + font-weight: 400; + font-size: 16px; + line-height: 24px; +} +.bottombanner{ + margin-top:108px; +} +.bottombanner figure{ + display: flex; + flex-direction: column; + align-items: center; + + text-align: center; +} +.bottombanner figure figcaption{ + width: 35%; +} + +.bottombanner-subtitle{ + font-weight: 600; + font-size: 32px; + line-height: 39px; +} +.bottombanner-text{ + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-bottom: 50px; +} +.bottombanner-desktop{ + display: block; + width: 71%; +} +.bottombanner-mobile{ + display:none; +} +.footer{ + width: 100%; + background-color: #000000; + margin-top: 116px; + padding: 38px; + display: flex; + align-items: center; + flex-direction: column; + gap: 17px; + +} +.footer a{ + text-decoration: none; +} +.footer nav figure{ + display: flex; + gap:21px; + +} +.footerimg{ +} +.footer-text{ + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: uppercase; + color: #BDBDBD; +} + + +@media screen and (max-width: 767px){ + .topbannerdesktop{ + display:none; + } + .topbannermobile{ + width: 100%; + display: block; + } +} + + + +@media screen and (max-width: 1439px){ + .topinfo-texts{ + min-width: 86%; + } + .topinfo-subtitle{ + font-weight: 400; + font-size: 20px; + line-height: 24px; + + } + + .topinfo-title{ + font-weight: 500; + font-size: 28px; + line-height: 34px; + + } + .topinfo-text{ + text-align: center; + font-size: 16px; + line-height: 24px; + } + .figuretopinfo{ + text-align: center; + } + .topinfo-img{ + width: 75%; + } + .topcards{ + margin: 0 10%; + } + .topcards-wrapper{ + margin-top: 90px; + margin-bottom: 80px; + flex-direction:column; + gap:24px; + } + + .topcard-text{ + min-width: 0; + + } + .middle-wrapper{ + top:32px; + } + + .gridimg{ + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(1, 1fr); + grid-row-gap: 24px; + grid-column-gap: 14px; + width: 100%; + margin: 0 23px; + } + .middle-img1{ + grid-area: 1 / 3 / 2 / 5; + } + .middle-img2{ + + grid-area: 1 / 1 / 2 / 3; + } + .middle-img3{ + grid-area: 2 / 1 / 3 / 5; + } + .middlecards{ + gap:16px; + margin: 80px 23px; + flex-direction: column; + } + .middlecard{ + } + .middlecard-text{ + font-size: 14px; + + } + + .bottombanner-desktop{ + display: none; + } + .bottombanner-mobile{ + display:block; + } + .bottombanner{ + margin-top: 98px; + } + .bottombanner figure{ + display:flex; + flex-direction: column-reverse; + align-items: center; + text-align: center; + } + .bottombanner figure figcaption{ + width:auto; + margin: 0 7%; + } + .bottombanner-subtitle{ + margin-top: 50px; + margin-bottom: 9px; + font-size: 24px; + line-height: 29px; + } + .bottombanner-text{ + margin:0; + } + .bottombanner-desktop{ + display: none; + } + .bottombanner-mobile{ + display:block; + width: 100%; + } + + .footer{ + margin-top: 87px; + padding: 32px; + } + + .footer-text{ + text-align: center; + font-size: 10px; + line-height: 12px; + } +} + +@media screen and (min-width: 2500px){ + .topinfo-subtitle{ + font-size: 64px; + line-height: 78px; + } + .topinfo-title{ + font-size: 96px; + line-height: 116px; + } + .topinfo-text{ + font-size: 32px; + line-height: 48px; + margin-top: 28px; + + } + .figuretopinfo{ + width: 100%; + text-align: center; + } + .topinfo-img{ + width: 13vw; + } + .topcard-text{ + font-weight: 400; + font-size: 32px; + line-height: 48px; + } + .topcard figure img{ + width: 3vw; + } + .middlecard-text{ + font-size: 32px; + line-height: 48px; + } + .middlecard figure img{ + width: 3vw; + } + .bottombanner-subtitle{ + font-size: 64px; + line-height: 78px; + } + .bottombanner-text{ + font-size: 32px; + line-height: 48px; + } + + .footer-text{ + font-size: 20px; + line-height: 24px; + } +} + diff --git a/index.html b/index.html new file mode 100644 index 0000000..a1f8911 --- /dev/null +++ b/index.html @@ -0,0 +1,138 @@ + + + + + + + + + + + + Desafio 1 - M3 Academy + + +
+
+ + Logo-M3Academy + +
+
+
+
+ Banner do Topo +
+
+ Banner do Topo +
+
+
+
+
+

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 topo +
+
+
+
+
+
+ Primeira imagem dos cards +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
+ Segunda imagem dos cards +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
+ Terceira imagem dos cards +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
+
+
+
+
+ Primeiro notebook meio + Segundo notebook meio + Terceiro notebook meio + +
+
+
+
+
+
+ Primeira imagem dos cards do meio +
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.
+
+
+
+
+ Segunda imagem dos cards do meio +
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.
+
+
+
+
+ Terceira imagem dos cards do meio +
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.
+
+
+
+
+ Quarta imagem dos cards do meio +
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 de baixo desktop + Banner de baixo mobile +
+
+
+ + +