Merge pull request 'feature-landing-page' (#1) from feature-landing-page into main

Reviewed-on: #1

assets/styles/landing-page.css

@@ -0,0 +1,312 @@
+*{
+    margin:0;
+    padding:0;
+    border:0;
+}
+
+header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #000000;
+    margin: 0;
+    width: 100%;
+    height: 101px;
+} 
+
+.logo{
+    width: 12%;
+}
+
+.logo img{
+    width: 100%;
+}
+
+.banner-top{
+    width: 100%;
+}
+
+.information-network{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.sub-title, .title, .descriptiom{
+    text-align: center;
+}
+
+.sub-title{
+    font-size: clamp(1.75em, 1em + 2vw, 2em);
+    padding-top: 73px;
+    text-transform: uppercase;
+}
+
+.title{
+    font-size: clamp(1.75em, 1em + 3vw, 3em);
+    text-transform: uppercase;
+}
+
+.descriptiom{
+    width: 40%;
+    font-size: clamp(0.75em, 1em + 1vw, 1em);
+    padding-top: 28px;
+    padding-bottom: 73px;
+}
+
+.network{
+    display: flex;
+    justify-content: center;
+    width: 16%;
+}
+
+.network img{
+    width: 100%;
+}
+
+.card-section, .card-section-small{
+    display: flex;
+    justify-content: center;
+}
+
+.card-section{
+    padding: 178px 0px 80px 0px;
+}
+
+.card, .card-small{
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+}
+
+.card{
+    width: 18%;
+    height: 287.68px;
+    margin: 21px;
+    justify-content: center;
+}
+
+.img-card{
+    width: 29%;
+}
+
+.img-card img{
+    width: 100%;
+}
+
+.card p{
+    width: 85%;
+    margin-top: 30px;
+    font-size: clamp(0.5em, 1em + 1vw, 1em);
+}
+
+.computers-area{
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    background: #E0E0E0;
+
+}
+
+.computers-img{
+    position: relative;
+    top: 60px;
+    width: 29%;
+}
+
+.computers-img img{
+    width: 100%;
+}
+
+.card-section-small{
+    width: 100%;
+    padding-top: 190px;
+}
+
+.card-small{
+    width: 22%;
+    height: 332px;
+    margin: 16px;
+    justify-content: center;
+}
+
+.img-card-small{
+    width: 24%;
+}
+
+.img-card-small img{
+    width: 100%;
+}
+
+.card-small p{
+    width: 85%;
+    margin-top: 17px;
+    font-size: clamp(0.5em, 1em + 1vw, 1em);
+}
+
+.information-code{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    padding-top: 108px;
+    padding-bottom: 116px;
+}
+
+.information-code h1{
+    width: 22%;
+    font-size: clamp(1.25em, 1em + 1vw, 2em);
+}
+
+.information-code p{
+    width: 30%;
+    font-size: clamp(1em, 1em + 1vw, 1.5em);
+}
+
+.computer-code{
+    width: 71%;
+    padding-top: 50px;
+}
+
+.computer-code img{
+    width: 100%;
+}
+
+footer{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    height: 130px;
+    background-color: #000000;
+}
+
+.social{
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.social-networks{
+    margin: 20px;
+}
+
+.social-networks img{
+    width: 100%;
+}
+
+footer p{
+    color: #ffffff;
+    width: 63%;
+}
+
+@media (max-width: 1024px) {
+    .logo{
+        width: 55%;
+    }
+
+    .banner-top{
+        visibility: hidden;
+        width: 0px;
+    }
+
+    .banner-top-mob{
+        width: 100%;
+        height: 598px;
+    }
+
+    .network{
+        width: 58%;
+    }
+
+    .card-section, .card-section-small{
+        flex-direction: column;
+        align-items: center;
+    }
+    .card, .card-small{
+        width: 85%;
+        height: 380px;
+    }
+
+    .card-img, .img-card-small{
+        width: 29%;
+    }
+
+    .card p, .card-small p{
+        width: 82%;
+    }
+
+    .computers-area{
+        display: grid;
+        grid-template-columns: repeat(2,1fr);
+        justify-items: center
+    }
+
+    .computers-img{
+        width: 89%;
+        margin: 14px;
+    }
+
+    #item1{
+        grid-area: 1/2/1/2;
+    }
+    #item2{
+       grid-area: 1/1/1/1;
+    }
+    #item3{
+        grid-area: 2/1/2/3;
+    }
+
+    .information-code{
+        display: grid;
+        justify-items: center
+    }
+
+    .computer-code{
+        grid-area: 1/1/1/1;
+        width: 100%;
+    }
+
+    .banner-bottom{
+        visibility: hidden;
+        width: 0px;
+        position: relative;
+    }
+
+    .banner-bottom-mob{
+        width: 100%;
+        height: 414px;
+    }
+
+    .information-code p{
+        width: 85%;
+    }
+    .information-code p{
+        width: 85%;
+    }
+
+}
+
+@media (min-width: 1025px) {
+    .banner-top-mob{
+        visibility: hidden;
+        width: 0px;
+        position: absolute;
+    }
+
+    .banner-bottom-mob{
+        visibility: hidden;
+        width: 0px;
+        position: fixed;
+    }
+}

landing-page.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <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="./assets/styles/landing-page.css"/>
+    <title>Desafio 1</title>
+</head>
+<body>
+    <header>
+        <a class="logo" href="https://lp.digitalm3.com.br/m3-academy-universidade-corporativa">
+            <img src="./assets/images/logo.png" alt="logo da empresa">
+        </a>
+    </header>
+    <main>
+        <figure>
+            <img class="banner-top-mob" src="./assets/images/banner-mob.png" alt="notebook com codigos na tela"/>
+            <img class="banner-top" src="./assets/images/banner.png" alt="notebook com codigos na tela"/>
+        </figure>
+        <section class="information-network">
+            <h2 class="sub-title">Lorem ipsum</h2>
+            <h1 class="title">dolor sit amet</h1>
+            <p class="descriptiom">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>
+            <figure class="network">
+                <img src="./assets/images/networkcomputters.png" alt="figura de varios computadores conectados"/>
+            </figure>
+        </section>
+
+        <section class="card-section">
+            <div class="card">
+                <figure class="img-card">
+                    <img src="./assets/images/shop 1.png" alt="figura de uma loja">
+                </figure>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
+                </p>
+            </div>
+            <div class="card">
+                <figure class="img-card">
+                    <img src="./assets/images/shopping-bag.png" alt="figura de uma sacola">
+                </figure>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
+                </p>
+            </div>
+            <div class="card">
+                <figure class="img-card">
+                    <img src="./assets/images/coin 1.png" alt="figura de dinheiro em moeda">
+                </figure>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
+                </p>
+            </div>
+        </section>
+        <section class="computers-area">
+            <figure class="computers-img" id="item1">
+                <img src="./assets/images/computer 1.png" alt="notebook parcialmente fechado"/>
+            </figure>
+            <figure class="computers-img" id="item2">
+                <img src="./assets/images/computer 2.png" alt="notebook visto de cima"/>
+            </figure>
+            <figure class="computers-img" id="item3">
+                <img src="./assets/images/computer 3.png" alt="notebook de lado"/>
+            </figure>
+        </section>
+        <section class="card-section-small">
+            <div class="card-small">
+                <figure class="img-card-small">
+                    <img src="./assets/images/money.png" alt="figura de dinheiro em papel">
+                </figure>
+                <p>
+                    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. 
+                </p>
+            </div>
+            <div class="card-small">
+                <figure class="img-card-small">
+                    <img src="./assets/images/coin 1.png" alt="figura de dinheiro em moeda">
+                </figure>
+                <p>
+                    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. 
+                </p>
+            </div>
+            <div class="card-small">
+                <figure class="img-card-small">
+                    <img src="./assets/images/laptop.png" alt="figura de um laptop">
+                </figure>
+                <p>
+                    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. 
+                </p>
+            </div>
+            <div class="card-small">
+                <figure class="img-card-small">
+                    <img src="./assets/images/cel.png" alt="figura de um celular">
+                </figure>
+                <p>
+                    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. 
+                </p>
+            </div>
+        </section>
+        <div class="information-code">
+            <h1>Lorem ipsum dolor sit amet</h1>
+            <p>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.</p>
+                <figure class="computer-code">
+                    <img class="banner-bottom-mob" src="./assets/images/banner 2-mob.png" alt="comptador ofuscado e oculos no cenario"/>
+                    <img class="banner-bottom" src="./assets/images/banner 2.png" alt="comptador ofuscado"/>
+                </figure>
+        </div>
+    </main>
+    <footer>
+        <div class="social">        
+        <a class="social-networks" href="https://www.instagram.com/m3.ecommerce/">
+            <img src="./assets/images/instagram.png" alt="icone instagram"/>
+        </a>
+        <a class="social-networks" href="https://www.facebook.com/digitalm3/">
+            <img src="./assets/images/facebook-logo.png" alt="icone facebook"/>
+        </a>
+        <a class="social-networks" href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA">
+            <img src="./assets/images/youtube 2.png" alt="icone youtube"/>
+        </a>
+    </div>
+
+        <p>
+            Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
+        </p>
+    </footer>
+</body>
+</html>