act

public/index.html

@@ -13,5 +13,8 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
   </body>
 </html>

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="app">
     <Header />
+    <Nav />
     <router-view></router-view>
     <Footer />
   </div>
@@ -9,12 +10,14 @@
 <script>
 import Header from "./esteticas/header.vue";
 import Footer from "./esteticas/footer.vue";
+import Nav from "./esteticas/nav.vue";
 
 export default {
   name: "App",
   components: {
     Header,
-    Footer
+    Footer,
+    Nav
   }
 };
 </script>

src/esteticas/footer.vue

@@ -44,11 +44,12 @@ export default {};
   width: 14rem;
   font-size: 0.8rem;
 }
-.uno,.dos,  
+.uno,
+.dos,
 .tres {
   margin-right: 1rem;
 }
-.btn{
+.btn {
   margin-bottom: 1rem;
 }
 
@@ -61,31 +62,29 @@ export default {};
   color: white;
 }
 
-
 @media (max-width: 768px) {
-  .uno,.tres {
+  .uno,
+  .tres {
     margin-right: 4rem;
   }
-  .dos{
+  .dos {
     margin-right: 0rem;
   }
   .footer {
     font-size: 0.7rem;
   }
-  
 }
 
 @media (max-width: 970px) {
-  .uno,.dos,  
-.tres {
-  margin-right: .5rem;
-}
+  .uno,
+  .dos,
+  .tres {
+    margin-right: 0.5rem;
+  }
 
   .footer {
     font-size: 0.7rem;
   }
-  
 }
-
-
 </style>
+>>>>>>> pruebas

src/esteticas/header.vue

@@ -38,12 +38,11 @@
 
 <style >
 .divMaster {
-  height: 7em;
-  margin: 0 auto;
-}
 
-.azulUnam {
-  background-color: #1e3c70;
+  height: 7em;
+/* max-width: 1280px; */
+  height: 7em;
+color: #1e3c70;
 }
 .sizeImg {
   height: 5rem;
@@ -62,6 +61,4 @@
   }
   .logo_acatlan_resp a img {
     height: 5rem;
-  }
-}
-</style>
+e>

src/esteticas/nav.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="divMaster doradoUnam row">
+    <div class="col-10 offset-1">
+      <nav class="navbar navbar-expand-sm navbar-light  ">
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-toggle="collapse"
+          data-target="#navbarTogglerDemo02"
+          aria-controls="navbarTogglerDemo02"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon blanco"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
+          <ul class="navbar-nav mr-auto  mt-0 mt-lg-0">
+            <li class="nav-item">
+              <a class="nav-link text-white" href="#">Inicio</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link text-white" href="#">Presentacion</a>
+            </li>
+            <li class="nav-item ">
+              <a
+                class="nav-link dropdown-toggle text-white "
+                id="navbarDropdown"
+                role="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+                href="#"
+                >Libros</a
+              >
+              <div
+                class="dropdown-menu azulUnam"
+                aria-labelledby="navbarDropdown"
+              >
+                <a class="dropdown-item text-white" href="#"
+                  >Ciencias Socioeconomicas</a
+                >
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item text-white" href="#"
+                  >Diseño y Edificacion</a
+                >
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item text-white" href="#"
+                  >Enseñanza de Idiomas</a
+                >
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item text-white" href="#"
+                  >Estudios de Posgrado</a
+                >
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item text-white" href="#">Humanidades</a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item text-white" href="#"
+                  >Matematicas e Ingenieria</a
+                >
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link text-white" href="#">Difusion Editorial</a>
+            </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>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.divMaster {
+  /* max-width: 1280px; */
+  height: auto;
+  margin: 0 auto;
+}
+nav {
+  padding: 0.5rem 0;
+}
+
+.azulUnam {
+  background-color: #1e3c70;
+}
+.doradoUnam {
+  background-color: #bb8800;
+}
+.blanco {
+  color: white !important;
+}
+
+.dropdown-item:hover {
+  background-color: #bb8800;
+}
+.nav-link:focus {
+  background-color: #1e3c70;
+}
+
+.menuText {
+  display: none;
+}
+
+.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;
+}
+
+@media (max-width: 450px) {
+  .menuText {
+    display: block;
+  }
+}
+</style>