add header

Duz-Dev · May 20, 2024 · 393eebf · 393eebf
1 parent c203bf0
commit 393eebf
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 39 deletions.
diff --git a/index.html b/index.html
@@ -12,17 +12,13 @@
 
 <body>
     <header> <!--Menú del sitio-->
+        <span class="logo"><img src="./src/assets/logo.png" class="logo__img" alt="logo"></span>
         <nav class="nav">
-            <div class="nav__left">
-                <a class="nav__logo" href="index.html">
-                    <img class="nav__logo--img" src="./src/assets/favicon.ico" alt="">
-                </a>
-            </div>
-            <div class="nav__right">
-                <a href="#" class="nav__link">Enlace 1</a>
-                <a href="#" class="nav__link">Enlace 1</a>
-                <a href="#" class="nav__link">Enlace 1</a>
-            </div>
+            <ul class="nav__list">
+                <li class="nav__item"><a href="#" class="nav__item--link">Inicio</a></li>
+                <li class="nav__item"><a href="#" class="nav__item--link">contacto</a></li>
+                <li class="nav__item"><a href="#" class="nav__item--link">nosotros</a></li>
+            </ul>
         </nav>
     </header>
     <section class="content carrusel"> <!--carrusel-->

diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/logo_texto.png b/src/assets/logo_texto.png
diff --git a/src/css/style.css b/src/css/style.css
@@ -1,3 +1,7 @@
+/* Fuentes de google fonts para testiar */
+@import url('https://fonts.googleapis.com/css2?family=Poetsen+One&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+
 *,::after,::before{
     margin: 0;
     padding: 0;
@@ -6,7 +10,8 @@
 
 :root{
 /** CSS DARK THEME MIXED SURFACE COLORS */
-
+    --font-family-1:"Poetsen One", sans-serif;
+    --font-family-2:"Roboto", sans-serif;
     --color-surface-mixed-100:  #1c4071;
     --color-surface-mixed-200:  #395380;
     --color-surface-mixed-300:  #52668f;
@@ -15,49 +20,68 @@
     --color-surface-mixed-600:  #9aa4be;
 }
 
-header{
-    background-color: var(--color-surface-mixed-200);
-    padding: 15px;
-    height: 150px;
+body{
+    width: 100svw;
+    height: 100svh;
 }
 
+
 a{
     text-decoration: none;
     color: black;
 }
 
-.nav{
-    display: flex;
+header{
+    --height-header:80px;
     width: 100%;
-    height: 100%;
-    padding: 0 100px;
-    background-color: red;
+    height: var(--height-header);
+    padding-inline: 50px;
+    background-color: var(--color-surface-mixed-100);
+    display: flex;
     justify-content: space-between;
+    align-items: center;
+    /* align-items: center; */
 }
 
-.nav__left{
-    background:green;
-    width: 40%;
-}
+.logo{
+    width: 30%;
 
-.nav__right{
-    background-color: blue;
-    width: 40%;
+    .logo__img{
+        width: 70%;
+    }
 }
 
-.nav__logo{
-    width:140px;
-}
+.nav{
+    width: 30%;
+
+    .nav__list{
+        display: flex;
+        list-style: none;
+        justify-content: space-evenly;
+        height: 100%;
+    }
 
-.nav__logo--img{
+    .nav__item{
+        width: 30%;
+        height: var(--height-header);
+    }
+
+    .nav__item--link{
+        display: block;
+        line-height: var(--height-header);
+        color: #fff;
+        font-size: 1.5rem;
+        text-align: center;
+        font-family: var(--font-family-2);
+        font-weight: 600;
+        letter-spacing: 0.25rem;
+    }
 }
-/*
-.nav__link{
-    background-color: blueviolet;
-    width: fit-content;
-    height: fit-content;
-    margin: 0 20px;
-    font-size: 1.5rem;
-    padding: 20px 30px; }*/
+
+
+
+
+
+