Cria o header desktop e mobile

2022-10-08 09:29:01 -03:00 · 2022-10-08 09:29:01 -03:00 · 083bba2e79
commit 083bba2e79
parent 08edfea66b
4 changed files with 42 additions and 0 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+    "editor.autoClosingBrackets": "languageDefined"
+}
--- a/assets/images/m3-logo.png
+++ b/assets/images/m3-logo.png
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@ -0,0 +1,17 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box; /*mantem a largura do elemento determinada no widht e nao adiciona o tamanho do padding no calculo, porem ele vai estar la*/
+}
+
+.page-header {
+    display: flex;
+    justify-content: center;
+    padding: 28px 0;
+    background: #000;
+}
+
+.header-logo {
+    display: block; 
+}
+
--- a/index.html
+++ b/index.html
@ -0,0 +1,22 @@
+<!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" />
+        
+        <title>M3 Landing Page</title>
+
+        <link rel="stylesheet" href="assets/styles/main.css" />
+    </head>
+
+    <body>
+        <header class="page-header">
+            <a href="/">
+                <img class="header-logo" src="assets/images/m3-logo.png" alt="Logo M3" />
+            </a>
+            
+        </header>
+    </body>
+</html>