Merge pull request 'feature/landing-page' (#2) from feature/landing-page into development

Reviewed-on: #2

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;
+    }
+}

index.html

@@ -4,22 +4,61 @@
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="/challenge-landing-page-Gustavo_Rallenson/assets/Css/Styles.css">
         <title>Desafio Landing page</title>
     </head>
     <body>
-    <header>
+        <header class="Page-Header">
-
+                <a href="/challenge-landing-page-Gustavo_Rallenson/index.html">
+                    <img class="Header-Logo" src="/challenge-landing-page-Gustavo_Rallenson/assets/Image/Logo-M3Academy 1.svg" alt="Logo M3">
+                </a>
         </header>
         <main>
+            <figure>
+                <img class="main-banner MainBannerDesktop" src="/challenge-landing-page-Gustavo_Rallenson/assets/Image/Top-banner-desktop.png" alt="Banner Principal desktop"/>
+                <img class="main-banner MainBannerMobile""  src="/challenge-landing-page-Gustavo_Rallenson/assets/Image/Top-banner-mobile.png" alt="Banner Principal mobile"/>
+            </figure>
+                <section class="TopInfocard">
+                    <div class="TopInfocardText">
+                        <h2 class="TopInfocardSubtitle">Lorem ipsum</h2>
+                        <h1 class="TopInfocardTitle">dolor sit amet</h1>
+                        <p class="TopInfocardDescription">
+                            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.
+                        </p>
+                    </div>
+                </section>
+                <figure class="PcContainer"> 
+                    <img class="ImageTop"  src="/challenge-landing-page-Gustavo_Rallenson/assets/Image/Computers.png" alt="Computadores">
+                </figure>
+                <div class="Cards">
+                    <figure class="CardBox">
+                        <img class="imageCard" src="/challenge-landing-page-Gustavo_Rallenson/assets/Image/shop 1.png" alt="icone de Loja">
+                        <figcaption class="CardDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                    </figure>
+                    <figure class="CardBox">
+                        <img class="imageCard" src="/challenge-landing-page-Gustavo_Rallenson/assets/Image/shopping-bag (1) 1.png" alt="icone de sacola">
+                        <figcaption class="CardDescription">
+                            Lorem ipsum dolor sit amet,
+                            consectetur adipiscing elit.
+                            Cras euismod enim non dui
+                            fringilla interdum. 
+                        </figcaption>
+                    </figure>
+                    <figure class="CardBox">
+                        <img  class="imageCard"src="/challenge-landing-page-Gustavo_Rallenson/assets/Image/coin 1.png" alt="icone de mão com moeda">
+                        <figcaption class="CardDescription">
+                            Lorem ipsum dolor sit amet, 
+                            consectetur adipiscing elit. 
+                            Cras euismod enim non dui fringilla interdum.
+                         </figcaption>
+                    </figure>
 
-
+                </div>
-
-
-
-
         </main>
-    <footer>
+        <footer></footer>
-        
-    </footer>
     </body>
 </html>