diff --git a/README.md b/src/README.md similarity index 100% rename from README.md rename to src/README.md diff --git a/src/assets/Group.png b/src/assets/Group.png new file mode 100644 index 0000000..2edf5fb Binary files /dev/null and b/src/assets/Group.png differ diff --git a/src/assets/Logo-M3Academy 1 (1).png b/src/assets/Logo-M3Academy 1 (1).png new file mode 100644 index 0000000..6adf638 Binary files /dev/null and b/src/assets/Logo-M3Academy 1 (1).png differ diff --git a/src/assets/coin 1.png b/src/assets/coin 1.png new file mode 100644 index 0000000..cfbd0f1 Binary files /dev/null and b/src/assets/coin 1.png differ diff --git a/src/assets/facebook-logo.png b/src/assets/facebook-logo.png new file mode 100644 index 0000000..170d82f Binary files /dev/null and b/src/assets/facebook-logo.png differ diff --git a/src/assets/fxemoji_threenetworkedcomputers.png b/src/assets/fxemoji_threenetworkedcomputers.png new file mode 100644 index 0000000..82530bd Binary files /dev/null and b/src/assets/fxemoji_threenetworkedcomputers.png differ diff --git a/src/assets/img/Rectangle 13.png b/src/assets/img/Rectangle 13.png new file mode 100644 index 0000000..834d573 Binary files /dev/null and b/src/assets/img/Rectangle 13.png differ diff --git a/src/assets/img/Rectangle 15 (1).png b/src/assets/img/Rectangle 15 (1).png new file mode 100644 index 0000000..f4e55c5 Binary files /dev/null and b/src/assets/img/Rectangle 15 (1).png differ diff --git a/src/assets/img/Rectangle 15.png b/src/assets/img/Rectangle 15.png new file mode 100644 index 0000000..c4b49fc Binary files /dev/null and b/src/assets/img/Rectangle 15.png differ diff --git a/src/assets/img/Rectangle 16.png b/src/assets/img/Rectangle 16.png new file mode 100644 index 0000000..6561eb0 Binary files /dev/null and b/src/assets/img/Rectangle 16.png differ diff --git a/src/assets/img/Rectangle 17.png b/src/assets/img/Rectangle 17.png new file mode 100644 index 0000000..8eba01f Binary files /dev/null and b/src/assets/img/Rectangle 17.png differ diff --git a/src/assets/img/Rectangle 9 (1).png b/src/assets/img/Rectangle 9 (1).png new file mode 100644 index 0000000..098a4dc Binary files /dev/null and b/src/assets/img/Rectangle 9 (1).png differ diff --git a/src/assets/img/Rectangle 9.png b/src/assets/img/Rectangle 9.png new file mode 100644 index 0000000..5d94877 Binary files /dev/null and b/src/assets/img/Rectangle 9.png differ diff --git a/src/assets/insta.png b/src/assets/insta.png new file mode 100644 index 0000000..922af3c Binary files /dev/null and b/src/assets/insta.png differ diff --git a/src/assets/laptop 1.png b/src/assets/laptop 1.png new file mode 100644 index 0000000..6dff7a4 Binary files /dev/null and b/src/assets/laptop 1.png differ diff --git a/src/assets/money (1) 2.png b/src/assets/money (1) 2.png new file mode 100644 index 0000000..7cd0f0f Binary files /dev/null and b/src/assets/money (1) 2.png differ diff --git a/src/assets/shop 1.png b/src/assets/shop 1.png new file mode 100644 index 0000000..4b144a6 Binary files /dev/null and b/src/assets/shop 1.png differ diff --git a/src/assets/shopping-bag (1) 1.png b/src/assets/shopping-bag (1) 1.png new file mode 100644 index 0000000..55c9060 Binary files /dev/null and b/src/assets/shopping-bag (1) 1.png differ diff --git a/src/assets/youtube 2.png b/src/assets/youtube 2.png new file mode 100644 index 0000000..79cbe29 Binary files /dev/null and b/src/assets/youtube 2.png differ diff --git a/src/favicon.ico b/src/favicon.ico new file mode 100644 index 0000000..e6dd566 Binary files /dev/null and b/src/favicon.ico differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..dbe9e81 --- /dev/null +++ b/src/index.html @@ -0,0 +1,140 @@ + + + + + + + Desafio Landing Page + + + + +
+
+
+ Logo-M3Academy +
+
+ +
+
+ Imagem de Laptop com codigos na tela. + Imagem de Laptop com codigos na tela. +
+ +
+
+

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

+
+ +
+ ciclo de 3 computadores. +
+ +
+
+ Icone de uma loja. +

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

+
+ +
+ Icone de uma sacola de compras. +

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

+
+ +
+ Icone de dinheiro. +

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

+
+
+
+ +
+
+
+
Imagem de um laptop
+
Imagem de um laptop
+
Imagem de um laptop
+
+ +
+ Imagem de um laptop + Imagem de um laptop +
+
+ Imagem de um laptop +
+
+
+ +
+
+ Icone de dinheiro. +

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

+
+ +
+ Icone de dinheiro. +

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

+
+ +
+ Icone de um laptop. +

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

+
+ +
+ Icone de um celular. +

+ 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 de um Oculos com uma tela de códigos atrás. +
+ +
+

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

+
+ +
+ Imagem de um Oculos com uma tela de códigos atrás. +
+
+
+ + +
+ + \ No newline at end of file diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 0000000..94a6861 --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,373 @@ +@charset "UTF-8"; + +@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500&display=swap'); + +* { + margin: 0px; + padding: 0px; + font-weight: 400; +} + +body { + font-family: 'Bebas Neue', cursive; + font-family: 'Inter', sans-serif; +} + +header { + background-color: black; + text-align: center; + padding: 18px; +} + +.home img { + max-width: 226px; + max-height: 43px; + width: auto; + height: auto; +} + +.main-banner-desktop { + width: 100%; +} + +.main-banner-mobile { + width: 100%; +} + +article { + text-align: center; +} + +.cicle-text { + max-width: 766px; + margin: auto; + padding: 20px; +} + +.cicle-text h1 { + font-size: 3em; + text-transform: uppercase; + font-weight: 500; + padding-bottom: 28px; +} + +.cicle-text h2 { + font-size: 2em; + text-transform: uppercase; + padding-top: 73px; + font-weight: 400; +} + +.cicle-text p { + text-align: center; + line-height: 24px; +} + +.cicle-img { + width: 350px; + height: 350px; + margin: auto; + padding-top: 73px; + padding-bottom: 179px; +} + +.blocks { + display: grid; + grid-template-columns: repeat(3, max-content); + gap: 20px; + justify-content: center; + padding-bottom: 80px; + background-color: white; +} + +.block { + display: flex; + flex-direction: column; + align-items: center; + padding: 26px 26px 34px; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +.block-img { + display: block; + margin-bottom: 26px; +} + +.block-text { + max-width: 300px; + font-size: 1em; + line-height: 24px; +} + +.blocks2 { + margin-bottom: 190px; + padding: 0px 72px 0px 72px; + background: #E0E0E0; +} + +.blocks-wrapper { + position: relative; + top: 62px; +} + +.block-desktop { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 40px; +} + +.block-img2 { + width: 100%; +} + +.blocks3 { + display: grid; + grid-template-columns: repeat(4, max-content); + gap: 16px; + justify-content: center; + padding-bottom: 108px; + background-color: white; +} + +.block-text2 { + max-width: 370px; + font-size: 1em; + line-height: 24px; +} + +.bottom-text { + margin: auto; + width: 550px; +} + +.bottom-text h1 { + font-size: 2em; + line-height: 38px; + font-weight: 600; +} + +.bottom-text p { + line-height: 24px; + padding-bottom: 10%; +} + +.bottom-img2 { + padding-bottom: 116px; +} + +footer { + background-color: black; + height: 128px; +} + +footer p { + color: #BDBDBD; + font-size: 0.625em; +} + +picture img { + padding: 40px 10px 20px 10px; +} + +@media screen and (min-width: 340) and(max-width: 397px) { + .bottom-text p { + padding: 9px 32px 0px 32px; + line-height: 20px; + height: auto; + } +} + +@media screen and (max-width: 414px) { + .main-banner-desktop { + display: none; + } +} + +@media screen and (min-width: 415px) { + .main-banner-mobile { + display: none; + } +} + +@media screen and (max-width: 768px) { + .cicle-text h1 { + padding-bottom: 10px; + } + + .cicle-text p { + width: 357px; + margin: auto; + } + + .cicle-img { + width: 239px; + height: 239px; + padding-top: 65px; + padding-bottom: 90px; + margin: auto; + } + + .blocks { + grid-template-columns: 1fr; + padding: 36px 26px; + } + + .blocks3 { + grid-template-columns: 1fr; + padding: 36px 26px; + } +} + +@media screen and (min-width: 356px) and (max-width: 1024px) { + .bottom-text p { + line-height: 24px; + padding: 9px 32px 20% 32px; + } +} + +@media screen and (max-width: 1024px) { + + .cicle-text p { + text-align: center; + width: auto; + } + + .img-square-mobile { + margin: auto; + display: flex; + justify-content: center; + align-items: center; + gap: 14px; + } + + .img-square-mobile2 { + margin: auto; + display: flex; + justify-content: center; + align-items: center; + padding-top: 23px; + } + + .block-img2 { + width: 100%; + max-width: 177px; + } + + .block-img3 { + width: 100%; + max-width: 368px; + } + + .bottom-banner-desktop { + display: none; + } + + .bottom-banner-mobile { + width: 99%; + } + + .bottom-img { + padding: 100px 0 50px 0; + } + + .bottom-img2 { + padding: 0px; + } + + .bottom-text { + text-align: center; + width: auto; + } + + .bottom-text h2 { + font-weight: 600; + line-height: 30px; + } +} + +@media screen and (max-width: 500px) { + .block-img3 { + width: 160%; + } +} + +@media screen and (max-width: 400px) { + .block-img2 { + width: 75%; + } +} + +@media screen and (min-width: 1025px) { + .img-square-mobile, .img-square-mobile2 { + display: none; + } + + .bottom-banner-mobile { + display: none; + } + + .bottom-text h2 { + + font-weight: 600; + } +} + +@media screen and (max-width: 1024px) { + .img-square { + display: none; + } +} + +@media screen and (min-width: 769px) and (max-width: 1200px) { + .blocks { + grid-template-columns: repeat(2, max-content); + padding: 36px 26px; + } +} + +@media screen and (min-width: 769px) and (max-width: 1400px) { + .bottom-banner-desktop { + width: 963.33px; + height: 195.50px; + } +} + +@media screen and (min-width: 769px) and (max-width: 1800px) { + .blocks3 { + grid-template-columns: repeat(2, max-content); + padding: 36px 26px; + } +} + +@media screen and (min-width: 2000px) { + .cicle-text h1 { + font-size: 3.8em; + } + + .bottom-text h1 { + font-size: 2.5em; + } + + .cicle-text h2 { + font-size: 2.5em; + } + + .bottom-text h2 { + font-size: 2.5em; + } + + p { + font-size: 1.5em; + } + + .block-text, .block-text2 { + font-size: 1.4em; + } + + footer > p { + font-size: 1.3em; + } +} \ No newline at end of file