agrega header.php

davidhfabian · Oct 22, 2019 · 14c02a3 · 14c02a3
1 parent f1ee930
commit 14c02a3
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 8 deletions.
diff --git a/Parents/header.php b/Parents/header.php
@@ -7,9 +7,18 @@
                 </a>
             </div>
             <div class="avatar-container">
-                <a href="#">
+                <a href="#" id="btn-login">
                     <img class="avatar" src="../images/default.png" alt="avatar">
                 </a>
             </div>
+            <div class="menu-login">
+                <nav>
+                    <ul>
+                        <li><a href="http://"  rel="noopener noreferrer">Mi perfil</a></li>
+                        <li><a href="http://" ta rel="noopener noreferrer">Cerrar session</a></li>
+                    </ul>
+                </nav>
+            </div>
         </div>
-    </header>
+    </header>
+    <script src="../scripts/header-app.js"></script>
diff --git a/scripts/header-app.js b/scripts/header-app.js
@@ -0,0 +1,12 @@
+var btnLogin = document.getElementById('btn-login');
+var menuLogin = document.querySelector(".menu-login");
+
+btnLogin.addEventListener("mouseover", (e)=>{
+    e.preventDefault();
+    menuLogin.classList.add('active') 
+
+})
+
+menuLogin.addEventListener("mouseleave", ()=>{
+    menuLogin.classList.remove('active') 
+})
diff --git a/styles.css b/styles.css
@@ -3,6 +3,7 @@
     font-family: Arial, Helvetica, sans-serif;
     padding: 0;
     margin: 0;
+    list-style: none;
 }
 .container{
     width: 1220px;

diff --git a/styles/header.css b/styles/header.css
@@ -14,6 +14,8 @@ header div.header-container{
     display: flex;
     justify-content: space-between;
     align-items: center;
+    position: relative;
+
 }
 header div.logo-container{
     color: black;
@@ -37,3 +39,33 @@ header div.avatar-container img.avatar{
     border-radius: 50%;
 }
 
+/*<<<<<<<<<<<<<<<<<'menu login'>>>>>>>>>>>>>>>>>*/
+.active{
+    display: block !important;
+}
+
+div.menu-login{
+    width: 130px;
+    height: 100px;
+    padding: 10px;
+    position: absolute;
+    right: 0;
+    bottom: -105px;
+    background: #fff;
+    display: none;
+
+
+
+}
+div.menu-login ul{
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+}
+
+div.menu-login ul li {
+    padding: 7px 0;
+}
+div.menu-login ul li a{
+    color: #666;
+}
diff --git a/styles/lista.css b/styles/lista.css
@@ -20,6 +20,9 @@ section.tabla {
     width: 80%;
     height: auto;
     color: rgba(0, 0, 0, 0.8);
+    background: #69c9d6;
+    padding: 20px;
+    border-radius: 20px;
     /* box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .4); */
 
 
@@ -60,15 +63,13 @@ table {
 }
 
 th{
-    border: 2px solid #eaeded;
     padding: 7px;
-    background: #fff;
-    color: #69c9d6;
+    height: 50px;
+    color: #fff;
 }
 td {
-    border: 1px solid #eaeded;
+    border-top: 1px solid #eaeded;
     padding: 7px;
-    background: #B2EBF2;
     min-height: 60px;
     max-width: 220px;
     overflow-wrap: break-word;
@@ -79,7 +80,7 @@ td.description{
 table .camp-btn{
     background: none;
     border: none;
-  width: 130px;
+    width: 110px;
 }
 
 .inputo {