nav corregido

Actualizacion de logos en el header

src/App.vue

@@ -1,18 +1,13 @@
 <template>
   <div id="app">
-    <Header />
     <router-view></router-view>
   </div>
 </template>
 
 <script>
-import Header from "./esteticas/header.vue";
 
 export default {
-  name: "App",
+  name: "App"
-  components: {
-    Header
-  }
 };
 </script>
 

src/components/home.vue

@@ -1,5 +1,24 @@
 <template>
   <div>
-    <h1>esta es la pagina home</h1>
+    <Header />
+    <Nav />
+    <router-view></router-view>
+    <Footer />
   </div>
 </template>
+
+<script>
+import Header from "./../esteticas/header.vue";
+import Nav from "./../esteticas/navPrincipal.vue";
+import Footer from "./../esteticas/footer.vue";
+
+export default {
+  name: "App",
+  components: {
+    Header,
+    Nav,
+    
+    Footer
+  }
+};
+</script>

src/esteticas/footer.vue

@@ -0,0 +1,89 @@
+<template>
+  <footer class="container-fluid Azul-puma footer py-3 ">
+    <container>
+      <div row>
+        <button type="button" class="col-md-6 col-sm-12 btn boton-footer uno">
+          Comité Editorial
+        </button>
+        <button type="button" class="col-md-6 col-sm-12 btn boton-footer dos">
+          Política Editorial y Lineamentos
+        </button>
+        <button type="button" class="col-md-6 col-sm-12 btn boton-footer tres">
+          Proceso Editorial y Organismos
+        </button>
+        <button
+          type="button"
+          class="col-md-6 col-sm-12 btn boton-footer cuatro"
+        >
+          Puntos de Venta
+        </button>
+      </div>
+    </container>
+    <div row>
+      <p class="mb-0 ">Hecho en México, todos los derechos reservados 2020.</p>
+      <p class="my-0 ">
+        Esta página puede ser reproducida con fines no lucrativos, siempre y
+        cuando no se mutile, se cite la fuente
+      </p>
+      <p>
+        completa y su dirección electrónica. De otra forma, requiere permiso
+        previo por escrito de la institución.
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.boton-footer {
+  background-color: rgb(187, 136, 0);
+  color: white;
+  width: 14rem;
+  font-size: 0.8rem;
+}
+.uno,
+.dos,
+.tres {
+  margin-right: 1rem;
+}
+.btn {
+  margin-bottom: 1rem;
+}
+
+.Azul-puma {
+  background-color: #1e3c70;
+}
+
+.footer {
+  text-align: center;
+  color: white;
+}
+
+@media (max-width: 768px) {
+  .uno,
+  .tres {
+    margin-right: 4rem;
+  }
+  .dos {
+    margin-right: 0rem;
+  }
+  .footer {
+    font-size: 0.7rem;
+  }
+}
+
+@media (max-width: 970px) {
+  .uno,
+  .dos,
+  .tres {
+    margin-right: 0.5rem;
+  }
+
+  .footer {
+    font-size: 0.7rem;
+  }
+}
+</style>

src/esteticas/header.vue

@@ -1,40 +1,42 @@
 <template>
-  <div class="row divMaster header cl-12 azulUnam">
+  <container>
-    <div
+    <div class="row divMaster header cl-12 azulUnam">
-      class="logo_unam  col-4 offset-1 d-inline-flex my-2 align-items-center"
+      <div
-    >
+        class="logo_unam  col-4 offset-1 d-inline-flex my-2 align-items-center"
-      <a href="https://www.unam.mx/" target="_blank">
+      >
-        <img class="sizeImg" src="../assets/Logo-UNAM.png" alt="logo unam" />
+        <a href="https://www.unam.mx/" target="_blank">
-      </a>
+          <img class="sizeImg" src="../assets/Logo-UNAM.png" alt="logo unam" />
-    </div>
+        </a>
+      </div>
 
-    <div
+      <div
-      class="logo_acatlan  col-4  offset-2 d-inline-flex justify-content-end my-2 align-items-center"
+        class="logo_acatlan  col-4  offset-2 d-inline-flex justify-content-end my-2 align-items-center"
-    >
+      >
-      <a href="https://www.acatlan.unam.mx/" target="_blank">
+        <a href="https://www.acatlan.unam.mx/" target="_blank">
-        <img
+          <img
-          class="sizeImg"
+            class="sizeImg"
-          src="../assets/FES-editoriales.png"
+            src="../assets/FES-editoriales.png"
-          alt="logo unam"
+            alt="logo unam"
-        />
+          />
-      </a>
+        </a>
-    </div>
+      </div>
 
-    <div
+      <div
-      class="logo_acatlan_resp col-8  offset-2 d-flex justify-content-center my-2 align-items-center"
+        class="logo_acatlan_resp col-8  offset-2 d-flex justify-content-center my-2 align-items-center"
-    >
+      >
-      <a href="https://www.acatlan.unam.mx/" target="_blank">
+        <a href="https://www.acatlan.unam.mx/" target="_blank">
-        <img
+          <img
-          class="sizeImg"
+            class="sizeImg"
-          src="../assets/FES-editoriales.png"
+            src="../assets/FES-editoriales.png"
-          alt="logo unam"
+            alt="logo unam"
-        />
+          />
-      </a>
+        </a>
+      </div>
     </div>
-  </div>
+  </container>
 </template>
 
-<style scoped>
+<style>
 .divMaster {
   height: 7em;
   margin: 0 auto;

src/esteticas/navPrincipal.vue

@@ -0,0 +1,174 @@
+<template>
+  <nav
+    class="navbar navbar-expand-md navbar-light "
+    style="background-color:#BB8800;"
+  >
+    <div class="container">
+      <nav class=" ">
+        <button
+          class=" navbar-toggler van text-whitee btn-sm"
+          type="button"
+          id="toggle-menu"
+          data-toggle="collapse"
+          data-target="#navbarNav"
+          aria-controls="navbarNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+          v-on:click="toggle()"
+        >
+          <span
+            class=" navbar-toggler-icon x m-1"
+            style="color:white !important;"
+          ></span>
+          Menú
+        </button>
+      </nav>
+
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav mr-auto  mt-0 mt-lg-0">
+          <li class="nav-item dropdown">
+            <router-link to="#" class="nav-item nav-link "
+              ><a> Inicio</a></router-link
+            >
+          </li>
+          <li class="nav-item dropdown">
+            <router-link to="#" class="nav-item nav-link"
+              ><a>Presentacion</a></router-link
+            >
+          </li>
+          <li class="nav-item dropdown">
+            <router-link to="#" class="nav-item nav-link"
+              ><a>Libros</a></router-link
+            >
+          </li>
+          <li class="nav-item dropdown">
+            <router-link to="#" class="nav-item nav-link"
+              ><a>Difusión Editorial</a></router-link
+            >
+          </li>
+        </ul>
+        <form class="form-inline  my-0 my-lg-0">
+          <div class="input-group input-group-sm mb-0">
+            <input
+              type="text"
+              class="form-control reIzq "
+              placeholder="Buscar"
+              aria-label="Recipient's username"
+              aria-describedby="basic-addon2"
+            />
+            <div class="input-group-append reDer bg-white">
+              <button class="btn  my-0" type="submit">
+                <svg
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  class="bi bi-search"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  methods: {
+    toggle: function() {
+      let element = document.getElementById("navbarNav");
+      element.classList.toggle("block");
+      element.classList.add("mystyle");
+    }
+  }
+};
+</script>
+
+<style scoped>
+.reDer {
+  border-top-right-radius: 20px 20px !important;
+  border-bottom-right-radius: 20px 20px !important;
+}
+.reIzq {
+  border-top-left-radius: 20px 20px !important;
+  border-bottom-left-radius: 20px 20px !important;
+}
+body {
+  overflow-x: hidden;
+}
+.mystyle {
+  text-align: left;
+}
+
+.block {
+  display: block;
+}
+a {
+  max-height: 100%;
+}
+.menu {
+  background-color: #bb8800;
+}
+
+.menu nav ul {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0rem;
+}
+
+.menu nav ul div {
+  display: flex;
+  justify-content: space-between;
+}
+
+.menu nav ul li {
+  list-style: none;
+}
+
+.menu nav ul li a {
+  display: block;
+}
+
+a {
+  color: white;
+  transition: 0.5s;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+}
+
+a:hover {
+  background-color: #1e3c70;
+  color: white;
+}
+
+.active {
+  background-color: #936900;
+}
+
+.van {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.x {
+  color: white;
+}
+
+@media (min-width: 768px) {
+  .van {
+    display: none;
+  }
+}
+</style>