diff --git a/assets/Css/Styles.css b/assets/Css/Styles.css new file mode 100644 index 0000000..6f57662 --- /dev/null +++ b/assets/Css/Styles.css @@ -0,0 +1,169 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +.Page-Header{ +display: flex; +justify-content: center; +padding: 30px 0; +background: #000000; +} +.main-banner{ + display: block; + width: 100%; +} +.Header-Logo{ + display: block; +} +.TopInfocard{ + display: flex; + align-items: center; + justify-content: center; + padding: 74px 0 74px; +} +.TopInfocardText{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 182px; + max-width: 766px; +} +.TopInfocardSubtitle{ + width: 100%; + font-weight: 400; + font-size: 32px; + line-height: 40px; + max-width: 220px; + max-height: 40px; +} +.TopInfocardTitle{ + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; +} +.TopInfocardDescription{ + font-weight: 400; + text-align: center; + padding: 0 52px; + font-size: 16px; + line-height: 24px; +} +.PcContainer{ + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.ImageTop{ + max-width: 316px; + max-height: 352px; + display: flex; + justify-content: center; + align-items: center; +} +.Cards{ + display: grid; + grid-template-columns: repeat(3,max-content); + gap: 20px; + justify-content: center; + padding: 142px 0 180px; +} +.CardBox{ + display: flex; + justify-content: center; + flex-direction: column; + align-items:center; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + max-width: 300px; + font-size: 16px; + height: 288px; + line-height: 24px; + font-weight: 400; +} +.CardDescription{ + text-align: center; + font-weight: 400; + font-size: 16px; + line-height: 24px; +} +@media screen and (max-width: 1023px) { + .MainBannerDesktop{ + display: none; + } + .TopInfocard{ + padding: 144px 0 66px; + } + .ImageTop{ + max-width: 240px; + max-height: 240px; + } + .TopInfocardSubtitle{ + font-size: 20px; + max-width: 138px; + max-height: 24px; + line-height: 24px; + } + .TopInfocardTitle{ + font-size: 28px; + line-height: 34px; + } + .TopInfocardDescription{ + font-size: 16px; + line-height: 24px; + padding: 0 28px; + max-width: 358px; + max-height: 116px; + } + .Cards{ + grid-template-columns: 1fr; + padding: 90px 32px ; + gap:24px; + justify-items: center; + } + +} +@media screen and (min-width: 1024px) { + .MainBannerMobile{ + display: none; + } +} +/* Concertar medidas futuramente */ +@media screen and (min-width: 2500px) { + .TopInfocardText{ + max-width: 1532px; + height: 364px; + } + .TopInfocardSubtitle{ + font-size: 40px; + } + .TopInfocardTitle{ + font-size: 60px; + } + .TopInfocardDescription{ + line-height: 30px; + font-size: 38px; + } + .ImageTop{ + max-width: 630px; + max-height: 704px; + height: 704px; + } + .CardBox{ + max-width: 600px; + font-size: 64px; + height: 578px; + line-height: 24px; + } + .imageCard{ + width: 204px; + height: 206px; + } + .CardDescription{ + font-size: 38px; + line-height: 28px; + } +} diff --git a/assets/Image/Computers.png b/assets/Image/Computers.png new file mode 100644 index 0000000..2af63bd Binary files /dev/null and b/assets/Image/Computers.png differ diff --git a/assets/Image/Logo-M3Academy 1.svg b/assets/Image/Logo-M3Academy 1.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/assets/Image/Logo-M3Academy 1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/Image/Top-banner-desktop.png b/assets/Image/Top-banner-desktop.png new file mode 100644 index 0000000..08b5be8 Binary files /dev/null and b/assets/Image/Top-banner-desktop.png differ diff --git a/assets/Image/Top-banner-mobile.png b/assets/Image/Top-banner-mobile.png new file mode 100644 index 0000000..5118021 Binary files /dev/null and b/assets/Image/Top-banner-mobile.png differ diff --git a/assets/Image/coin 1.png b/assets/Image/coin 1.png new file mode 100644 index 0000000..a5e458f Binary files /dev/null and b/assets/Image/coin 1.png differ diff --git a/assets/Image/shop 1.png b/assets/Image/shop 1.png new file mode 100644 index 0000000..31a541b Binary files /dev/null and b/assets/Image/shop 1.png differ diff --git a/assets/Image/shopping-bag (1) 1.png b/assets/Image/shopping-bag (1) 1.png new file mode 100644 index 0000000..97f8ad4 Binary files /dev/null and b/assets/Image/shopping-bag (1) 1.png differ diff --git a/index.html b/index.html index d992498..7fbb7f3 100644 --- a/index.html +++ b/index.html @@ -1,25 +1,64 @@ - - - - - Desafio Landing page - - -
+ + + + + + Desafio Landing page + + +
+ + + +
+
+
+ Banner Principal desktop + 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. +

+
+
+
+ Computadores +
+
+
+ icone de Loja +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+ icone de sacola +
+ Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Cras euismod enim non dui + fringilla interdum. +
+
+
+ icone de mão com moeda +
+ Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Cras euismod enim non dui fringilla interdum. +
+
-
-
- - - - - - -
- - + + + + \ No newline at end of file