adiciona banner do meio desktop e mobile

adiciona os cards do topo desktop e mobile
adiciona o top infocard desktop e mobile
2022-10-07 19:24:44 -03:00 · 2022-10-07 19:01:56 -03:00 · 2022-10-07 17:56:58 -03:00 · 2022-10-07 16:26:55 -03:00 · 2022-10-07 15:48:51 -03:00
11 changed files with 236 additions and 0 deletions
--- a/assets/imagens/Logo
+++ b/assets/imagens/Logo
--- a/assets/imagens/main-banner-desktop.png
+++ b/assets/imagens/main-banner-desktop.png
--- a/assets/imagens/main-banner-mobile.png
+++ b/assets/imagens/main-banner-mobile.png
--- a/assets/imagens/middle-banner-desktop.png
+++ b/assets/imagens/middle-banner-desktop.png
--- a/assets/imagens/middle-banner-mobile.png
+++ b/assets/imagens/middle-banner-mobile.png
--- a/assets/imagens/styles/main.css
+++ b/assets/imagens/styles/main.css
@ -0,0 +1,159 @@
+*{
+    margin: 0%;
+    padding: 0%;
+    box-sizing: border-box;
+}
+
+body{
+    font-family: 'inter', sans-serif;
+    color: black;
+}
+
+.page-header{
+    display: flex;
+    justify-content: center;
+    padding: 28px;
+    background: black;
+}
+
+.header-logo{
+    display: block;
+}
+
+.main-banner,
+.middle-banner{
+    display: block;
+    width: 100%;
+}
+
+.top-infocard{
+    display: flex;
+    align-items: center ;
+    justify-content: center;
+    padding: 80px 0 96px;
+
+}
+
+.top-infocard-text {
+    margin-right: 124px;
+    max-width: 766px
+
+}
+
+.top-infocard-subtitle{
+text-transform: uppercase;
+font-weight: 400;
+font-size: 32px;
+
+}
+
+.top-infocard-title {
+text-transform: uppercase;
+margin-bottom: 24px;
+font-weight: 500;
+font-size: 48px;
+}
+
+.top-infocard-descricao {
+font-size: 16px;
+line-height: 24px;
+}
+
+  .top-cards{
+    display: grid;
+    grid-template-columns:repeat(3, max-content) ;
+    background: #FFFFFF;
+    justify-content: center;
+    padding: 74px 0;
+    gap: 20px
+    ;
+  }
+
+  .top-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #FFFFFF;
+    padding: 26px 26px 34px;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+  }
+
+  .top-card-img {
+    display: block;
+    margin-bottom: 26px;
+  }
+
+  .top-card-descricao{
+    max-width: 300px;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+
+  }
+
+@media screen and (max-width:414px){
+       .main-banner-desktop,
+       .middle-banner-desktop{
+        display: none;
+       }
+}
+
+@media screen and (max-width:768px) {
+    .top-cards{
+        grid-template-columns: 1fr;
+        padding:36px 26px ;
+    }
+}
+
+@media screen and (max-width:992px) {
+        .top-infocard{
+            flex-direction: column;
+            padding: 84px 26px 158px;
+        }
+
+        .top-infocard-text{
+            margin:  0 0 68px;
+
+        }
+
+        .top-infocard-subtitle{
+            font-size: 20px;
+        }
+
+        .top-infocard-title{
+            font-size: 28px;
+            margin: bottom 20px; ;
+        }
+
+        .top-infocard-img{
+            width: 100%;
+            max-width: 240px;
+        }
+    
+}
+
+@media screen and (min-width:993px) and(max-width:1280px){
+
+    .top-infocard-text{
+        max-width: 520px;
+        margin-right: 70px;
+    }
+}
+
+@media screen and (min-width:769px) and (max-width:1200px) {
+    .top-cards{
+        grid-template-columns: repeat(2, max-content);
+        
+    }
+        
+    }
+        
+
+@media screen and (min-width:415px){
+    .main-banner-mobile,
+    .middle-banner-mobile{
+        display: none;
+    }
+
+}
+
--- a/assets/imagens/top-card-img-01.png
+++ b/assets/imagens/top-card-img-01.png
--- a/assets/imagens/top-card-img-02.png
+++ b/assets/imagens/top-card-img-02.png
--- a/assets/imagens/top-card-img-03.png
+++ b/assets/imagens/top-card-img-03.png
--- a/assets/imagens/top-infocard-img.png
+++ b/assets/imagens/top-infocard-img.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+    <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>M3 Landing Page</title>
+       
+        
+        <link href="https: //fonts.googleapis.com/css2? família= Inter:wght@400;500 & display=swap" rel="stylesheet">
+
+        <link rel="stylesheet" href="./assets/imagens/styles/main.css" />
+
+    
+    </head>
+    
+    <body>
+        <header class="page-header">
+            <a href="/">
+                <img class="header-logo" src="./assets/imagens/Logo M3 [branco] (4) 1.png" alt="logo M3" />
+            </a>
+            
+            
+        </header>
+
+        <main>
+            <section>
+                <img class="main-banner main-banner-desktop" src="./assets/imagens/main-banner-desktop.png" alt="banner principal desktop" />
+                <img class="main-banner main-banner-mobile" src="./assets/imagens/main-banner-mobile.png" alt="banner principal mobile" />
+            </section>
+
+            <section class="top-infocard">
+                <div class="top-infocard-text">
+                     <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
+                <h1 class="top-infocard-title">dolor sit amet</h1>
+                <p>
+                    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 class="top-infocard-descricao">
+                </div>
+               
+
+            <img class="top-infocard-img" src="./assets/imagens/top-infocard-img.png" alt="Banner do infocard do top" />
+            </section>
+
+            <section class="top-cards">
+               
+                <div class="top-card">
+                    <img class="top-card-img" src="./assets/imagens/top-card-img-01.png" alt="imagem do primeiro card do topo" />
+                    <p class="top-card-descricao">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+
+                <div class="top-card">
+                    <img class="top-card-img" src="./assets/imagens/top-card-img-02.png" alt="imagem do segundo card do topo" />
+                    <p class="top-card-descricao">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+        
+                <div class="top-card">
+                    <img class="top-card-img" src="./assets/imagens/top-card-img-03.png" alt="imagem do terceiro card do topo" />
+                    <p class="top-card-descricao">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+
+
+            </section>
+
+            <section>
+                <img class="middle-banner middle-banner-desktop" src="./assets/imagens/middle-banner-desktop.png" alt="banner do meio desktop" />
+                <img class="middle-banner middle-banner-mobile" src="./assets/imagens/middle-banner-mobile.png" alt="banner do meio mobile" />
+            </section>
+
+
+        </main>
+        
+    </body>
+</html>
Author	SHA1	Message	Date
Emilly	bef691d61d	adiciona banner do meio desktop e mobile	2022-10-07 19:24:44 -03:00
Emilly	a5de746bd5	adiciona os cards do topo desktop e mobile	2022-10-07 19:01:56 -03:00
Emilly	2b392c9272	adiciona o top infocard desktop e mobile	2022-10-07 17:56:58 -03:00
Emilly	4a06d8afc7	adiciona os banner principais desktop e mobile	2022-10-07 16:26:55 -03:00
Emilly	310a0c79eb	criar o header desktop e mobile	2022-10-07 15:48:51 -03:00