Se agrega nav bar, sin que se vea para movil y viendose para portatil…

…, falta agregar las acciones a los botones
Laboratoria · LaDuquesaDev · Mar 18, 2022 · Mar 18, 2022 · Mar 18, 2022 · Mar 19, 2022
commit d6cd11c3ce56821e0219bfa956855de4fed55948
diff --git a/src/index.html b/src/index.html
@@ -1,6 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 
+    <nav class="nav">
+		<div class="nav-title"><img class="nav-logo" src="\images\logo-ninja-signup-responsive.svg"></div>
+		<div class="nav-ittems">
+			<button class="nav-btn-border">INICIAR SESIÓN</button>
+			<button class="nav-btn-bg">REGISTRARSE</button>
+			<button class="nav-btn">FEED</button>
+            <button class="nav-btn">PERFIL</button>
+        </div>
+	</nav>
+
 <head>
     <title>Ninja Red Social de Tics</title>
     <link href="style.css" rel="stylesheet" type="text/css">

diff --git a/src/style.css b/src/style.css
@@ -4,6 +4,9 @@
 }
 /*Responsive Mobile*/
 @media screen and (max-width: 740px) {
+    nav{
+        display: none;
+    }
     body{
         margin: 0;
     }
@@ -108,6 +111,51 @@
   and (min-device-width: 1200px) 
   and (max-device-width: 1600px) 
   and (-webkit-min-device-pixel-ratio: 1) { 
+    .nav {
+        position: sticky;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 70px;
+        top: 0;
+        background: #034174;
+    }
+    .nav-title {
+        margin: 0px 30px;
+        }
+    .nav-logo{
+        height: 50px;
+    }
+    .nav-btn {
+        display: inline-block;
+        height: 40px;
+        margin: 0px 4px;
+        padding: 10px;
+    }
+    .nav-btn-border {
+            display: inline-block;
+            height: 40px;
+            margin: 0px 4px;
+            padding: 10px;
+            color: #04033B;
+            border: solid;
+            font-weight: 600;
+            border-width: 2px;
+            border-radius: 6px;
+            border-color: #04033B;
+            background-color: #fff;
+    }
+    .nav-btn-bg {
+            display: inline-block;
+            height: 40px;
+            margin: 0px 4px;
+            padding: 10px;
+            font-weight: 600;
+            color: #fff;
+            background-color: #04033B;
+            border: none;
+            border-radius: 6px;
+    }
     p {
         margin-left: 0;
         font-size: 18px;