diff --git a/Assets/Images/Banner-bottom-mobile.png b/Assets/Images/Banner-bottom-mobile.png new file mode 100644 index 0000000..50df8d7 Binary files /dev/null and b/Assets/Images/Banner-bottom-mobile.png differ diff --git a/Assets/Images/Banner-midle-first.png b/Assets/Images/Banner-midle-first.png new file mode 100644 index 0000000..23fd072 Binary files /dev/null and b/Assets/Images/Banner-midle-first.png differ diff --git a/Assets/Images/Banner-midle-mobile.png b/Assets/Images/Banner-midle-mobile.png new file mode 100644 index 0000000..e7b1c0b Binary files /dev/null and b/Assets/Images/Banner-midle-mobile.png differ diff --git a/Assets/Images/Banner-midle-second.png b/Assets/Images/Banner-midle-second.png new file mode 100644 index 0000000..4544597 Binary files /dev/null and b/Assets/Images/Banner-midle-second.png differ diff --git a/Assets/Images/Banner-midle-third.png b/Assets/Images/Banner-midle-third.png new file mode 100644 index 0000000..a12898d Binary files /dev/null and b/Assets/Images/Banner-midle-third.png differ diff --git a/Assets/Images/Banner-principal-desktop.png b/Assets/Images/Banner-principal-desktop.png new file mode 100644 index 0000000..67dc789 Binary files /dev/null and b/Assets/Images/Banner-principal-desktop.png differ diff --git a/Assets/Images/Banner-principal-mobile.png b/Assets/Images/Banner-principal-mobile.png new file mode 100644 index 0000000..2da3a66 Binary files /dev/null and b/Assets/Images/Banner-principal-mobile.png differ diff --git a/Assets/Images/Bannner-bottom-desktop.png b/Assets/Images/Bannner-bottom-desktop.png new file mode 100644 index 0000000..74d0711 Binary files /dev/null and b/Assets/Images/Bannner-bottom-desktop.png differ diff --git a/Assets/SVG/Cellphone-icon.svg b/Assets/SVG/Cellphone-icon.svg new file mode 100644 index 0000000..b5c95ab --- /dev/null +++ b/Assets/SVG/Cellphone-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Assets/SVG/Coin-icon.svg b/Assets/SVG/Coin-icon.svg new file mode 100644 index 0000000..ea11a3d --- /dev/null +++ b/Assets/SVG/Coin-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Assets/SVG/Computer-image-desktop.svg b/Assets/SVG/Computer-image-desktop.svg new file mode 100644 index 0000000..aa8344a --- /dev/null +++ b/Assets/SVG/Computer-image-desktop.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/Assets/SVG/Computer-image-mobile.svg b/Assets/SVG/Computer-image-mobile.svg new file mode 100644 index 0000000..f54ff1e --- /dev/null +++ b/Assets/SVG/Computer-image-mobile.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/Assets/SVG/Facebook-logo.svg b/Assets/SVG/Facebook-logo.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/Assets/SVG/Facebook-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/Assets/SVG/Instagram-logo.svg b/Assets/SVG/Instagram-logo.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/Assets/SVG/Instagram-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Assets/SVG/Laptop-icon.svg b/Assets/SVG/Laptop-icon.svg new file mode 100644 index 0000000..7d13645 --- /dev/null +++ b/Assets/SVG/Laptop-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/Assets/SVG/Logo-M3Academy.svg b/Assets/SVG/Logo-M3Academy.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/Assets/SVG/Logo-M3Academy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/Assets/SVG/Money-icon.svg b/Assets/SVG/Money-icon.svg new file mode 100644 index 0000000..1090b7b --- /dev/null +++ b/Assets/SVG/Money-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/Assets/SVG/Store-icon.svg b/Assets/SVG/Store-icon.svg new file mode 100644 index 0000000..e5f7cff --- /dev/null +++ b/Assets/SVG/Store-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Assets/SVG/Youtube-logo.svg b/Assets/SVG/Youtube-logo.svg new file mode 100644 index 0000000..de6f9a7 --- /dev/null +++ b/Assets/SVG/Youtube-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/Assets/SVG/shopping-bag.svg b/Assets/SVG/shopping-bag.svg new file mode 100644 index 0000000..d330029 --- /dev/null +++ b/Assets/SVG/shopping-bag.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/Styles/index.css b/Styles/index.css new file mode 100644 index 0000000..e0b8508 --- /dev/null +++ b/Styles/index.css @@ -0,0 +1,367 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body{ + font-family: 'Inter', sans-serif +} + +.page-header{ + display: flex; + justify-content: center; + padding: 29px 0; + background-color: #000000; +} + +.banner-principal{ + width: 100%; +} + +.banner-principal-mobile, +.infocard-image-mobile, +.banner-bottom-mobile{ + display: none; +} + + +.text-infocard{ + display: flex; + flex-direction: column; + padding: 73px 0; + align-items: center; + text-align: center; +} +.infocard-subtitle{ + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; +} +.infocard-title{ + font-weight: 500; + font-size: 48px; + line-height: 58px; + margin-bottom: 20px; + text-transform: uppercase; +} +.infocard-description{ + font-weight: 400; + font-size: 16px; + line-height: 24px; + width: 38%; +} +.infocard-image{ + display: flex; + flex-direction: column; + align-items: center; +} + + +.top-cards{ + display: flex; + justify-content: center; + padding: 178px 150px 80px; + gap: 26px; +} +.top-card{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + width: 100%; + max-width: 350px; + padding: 30px; + gap: 30px; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + + +.banners-midle{ + display: flex; + padding: 0 72px; + gap: 4.3%; + justify-content: center; + background: #E0E0E0; +} +.banners-midle img{ + position: relative; + top: 35px; + gap: 20px; +} +.banner-midle{ + display: flex; + gap: 3.4%; +} +.banner-midle img{ + max-width: 50%; +} +.banner-midle-third{ + gap: 39px; + width: 32%; +} + + +.bottom-cards{ + display: flex; + justify-content: center; + padding: 178px 30px 108px; + gap: 16px; +} +.bottom-card{ + display: flex; + flex-direction: column; + flex-direction: column; + align-items: center; + text-align: center; + width: 100%; + padding: 30px; + gap: 30px; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} + + +.bottom-infocard{ + display: flex; + flex-direction: column; + align-items: center; +} +.text-bottom-infocard { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + width: 80%; + padding: 0 0 50px; +} +.bottom-infocard-title{ + font-weight: 600; + font-size: 32px; + line-height: 39px; +} +.bottom-infocard img{ + justify-content: center; + width: 70%; + padding: 0 0 116px; +} + + +.page-footer{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 128px; + gap: 16px; + background-color: #000000; +} +.page-footer p{ + font-weight: 400; + font-size: 10px; + line-height: 12px; + width: 65%; + text-align: center; + text-transform: uppercase; + color: #BDBDBD; +} + + +@media screen and (max-width: 414px){ + .banner-principal-desktop, + .infocard-image-desktop{ + display: none; + } + .banner-principal-mobile, + .infocard-image-mobile{ + display: unset; + } + + + .text-bottom-infocard{ + width: 100%; + } + .bottom-infocard-title{ + font-size: 24px; + } + .bottom-infocard img{ + width: 100%; + } + + + .page-footer p{ + width: 100%; + } +} + +@media screen and (max-width: 768px){ + .infocard-subtitle{ + font-size: 20px; + line-height: 24px; + } + .infocard-title{ + font-size: 28px; + line-height: 34px; + } + .infocard-description{ + width: 100%; + padding: 0 40px; + } + + + .top-cards{ + flex-direction: column; + align-items: center; + padding: 90px 32px 80px; + } + + + .banners-midle{ + display: flex; + flex-direction: column; + padding: 0 23px; + gap: 24px; + } + .banners-midle img{ + position: relative; + top: 32px; + } + .banner-midle{ + display: flex; + flex-direction: row-reverse; + gap: 14px; + justify-content: center; + } + .banner-midle img{ + width: 48%; + } + .banner-midle-third{ + gap: 24px; + width: 100%; + } + + + .bottom-cards{ + flex-direction: column; + align-items: center; + padding: 112px 23px 98px; + } + .bottom-card{ + max-width: 350px; + } + + + .bottom-infocard{ + flex-direction: column-reverse; + } + .bottom-infocard img{ + padding: unset; + } + .text-bottom-infocard{ + padding: 50px 0 87px; + } + + + .banner-bottom-desktop{ + display: none; + } + .banner-bottom-mobile{ + display: unset; + } +} + +@media screen and (min-width: 2000px){ + .infocard-subtitle, + .bottom-infocard-title{ + font-size: 40px; + } + .infocard-title{ + font-size: 56px; + } + .infocard-description, + .card-description{ + font-size: 25px; + } + + + .top-infocard{ + display: flex; + flex-direction: column; + align-items: center; + } + .infocard-image{ + width: 100%; + max-width: 400px; + align-items: unset; + } + + + .top-cards{ + padding: 200px 250px 80px; + } + .top-card{ + max-width: 450px; + height: 350px; + padding: 40px; + gap: 40px; + } + + + .bottom-cards{ + padding: 178px 72px 80px; + } + .bottom-card{ + padding: 40px; + gap: 40px; + } + + + .banner-midle{ + gap: 50px; + } + .banners-midle{ + gap: 50px; + } + .banners-midle img{ + max-width: 566px; + } + + + .page-footer p{ + font-size: 15px; + } +} + +@media screen and (min-width: 3000px){ + .infocard-subtitle, + .bottom-infocard-title{ + font-size: 55px; + } + .infocard-title{ + font-size: 67px; + } + .infocard-description, + .card-description{ + font-size: 36px; + } + .infocard-description, + .infocard-subtitle{ + line-height: 50px; + } + + + .top-card{ + max-width: 20%; + height: 500px; + padding: 60px; + gap: 90px; + } + + + .bottom-card{ + max-width: 100%; + height: 580px; + padding: 60px; + gap: 50px; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..6925352 --- /dev/null +++ b/index.html @@ -0,0 +1,177 @@ + + + + + + + + + + + + + + + Desafio M3 Academy + + + + + + +
+ +
+ + +
+ +
+ +
+

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

+
+ +
+ infocard image desktop + infocard image mobile +
+ +
+ +
+ +
+ Store icon + +

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

+
+ +
+ Shopping-bag icon + +

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

+
+ +
+ Coin icon + +

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

+
+ +
+ +
+ + + + +
+ +
+ +
+ Money icon + +

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

+
+ +
+ Coin icon + +

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

+
+ +
+ Laptop icon + +

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

+
+ +
+ Cellphone icon + +

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

+
+ + + + +
+ +
+ + + + + \ No newline at end of file