responsive images

src/components/header.vue

@@ -1,63 +1,91 @@
 <template>
-  <div class="row divMaster header cl-12 azulUnam">
+  <div class="row  azulUnam">
-   <div class="wrapper">
+    <div class= "pad">
-         <div class="wrapperleft"> 
+    <div
-          <a href="https://www.acatlan.unam.mx/" target="_blank">
+      class="logo_unam  col-3 d-inline-flex my-3 align-items-left"
-            <img src="../assets/logo_acatlan.png" class= "img-fluid" alt="logo acatlan" />
+    >
-          </a> 
+   
-          </div>
+      <a href="https://www.unam.mx/" target="_blank">
-          <div class="wrapperright2">
+        <img class="sizeImg" src="../assets/logo_unam.png" alt="logo unam" />
-          <a href="https://www.unam.mx/" target="_blank">
+      </a>
-            <img src="../assets/logo_unam.png" class= "img-fluid" alt="logo unam" />
+      </div>
-          </a> 
+    
-          </div>
+</div>
+
+
+
+    <div class="logo_acatlan  col-1   offset-3   my-4  ">
+      <a href="https://www.acatlan.unam.mx/" target="_blank">
+        <div id="imagenbanner">
+        <img
+          class="sizeImga"
+          src="../assets/logo_fesa.png"
+          alt="logo unam"
+        />
+        </div>
+      </a>
+    </div>
+
+
+    <div
+      class="logo_acatlan_resp col-4  offset-2 d-flex justify-content-center my-2 align-items-center"
+    >
+      <a href="https://www.acatlan.unam.mx/" target="_blank">
+        <img
+          class="sizeImg"
+          src="../assets/logo_acatlan.png"
+          alt="logo unam"
+        />
+      </a>
     </div>
   </div>
-  
 </template>
-<script scoped>
+
-export default {};
-</script>
 <style>
-.wrapperright2 {
+
-    min-width: 50px;
+#imagenbanner{
-    float: left;
+	position: absolute;
-    height: 10px;
+	top: 8px;
-    width: 48%;
+	left: 160px;
-    background-size: 280px, 84px;
+	width: 100px;
-    background-repeat: no-repeat;
+	line-height: 17px;
-    padding: 13px
 }
 
-.wrapperleft {
+.pad{
-    min-width: 20px;
+     
-    float: right;
+     padding: 0px;
-    height: 10px;
-    width: 50%;
-    background-size: 100px, 69px;
-    background-repeat: no-repeat;
-    background-position-x: 50%;
-    padding: 4px
 }
 
-.wrapper {
-    min-width: 50px;
-    width: 100%;
-    margin: 0px auto;
-    position: relative;
-}
-
-
-
-
 .divMaster {
-  height: 7em;
+  height: 6em;
   margin: 0 auto;
 }
 
 .azulUnam {
   background-color: #1e3c70;
 }
+.sizeImg {
+  height: 4.5rem;
+}
 
+.sizeImga {
+  height: 3.3rem;
  
+}
+.logo_acatlan_resp {
+  display: none !important;
+}
+
+@media (max-width: 450px) {
+  .logo_acatlan,
+  .logo_unam {
+    display: none !important;
+  }
+  .logo_acatlan_resp {
+    display: block !important;
+  }
+  .logo_acatlan_resp a img {
+    height: 5rem;
+  }
+}
 </style>

src/components/nav.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="divMaster doradoUnam row d-flex justify-content-center">
+ <div class="divMaster doradoUnam row d-flex justify-content-center">
     <div class="col-10 offset-1">
       <nav class="navbar navbar-expand-sm navbar-dark  ">
+       
+        
         <button
           @click="method()"
           class="navbar-toggler col-5"
@@ -14,8 +16,12 @@
         >
           <span class="navbar-toggler-icon blanco d-flex"></span>
           <!-- <span class="mx-2">Menu</span> -->
+        
+        
         </button>
 
+      
+
         <div class="collapse navbar-collapse " id="navbarTogglerDemo02">
           <ul class="navbar-nav mr-auto w-100 d-flex align-items-center justify-content-between mt-0 mt-lg-0">
             <li class="nav-item">
@@ -42,8 +48,8 @@
      
       </nav>
     </div>
-  </div>
  
+ </div>
 
 </template>
 
@@ -90,18 +96,20 @@
 </script>
 
 <style scoped>
+
+
 * {
   margin: 0;
   padding: 0;
 }
 
 .divMaster {
-  /* max-width: 1280px; */
+
   height: auto;
   margin: 0 auto;
 }
 nav {
-  padding: 0.5rem 0;
+  padding: 1.2rem 0;
 }
 
 .azulUnam {
@@ -129,12 +137,12 @@ nav {
 .nav-link:hover {
   background-color: #1e3c70;
   color: white;
-  border-radius: 0.2rem;
+  border-radius: 3rem;
 }
 
 .nav-link {
-  transition: 0.3s;
+  transition: 0.4s;
-  font-size: 20px;
+  font-size: 22px;
 }
 
 .dropdown-item {
@@ -176,9 +184,7 @@ nav {
   left: -10rem;
   display: block;
 }
-.rescont {
+
-  z-index: ;
-}
 
 .list-group-item {
   padding: 2px 2px;
@@ -192,13 +198,17 @@ nav {
 }
 
 @media (max-width: 450px) {
-  .menuText,
+  .menuText
-  .buscador {
+   {
     display: block !important;
   }
 
   .dropdown-menu {
     width: 80vw !important;
   }
+  .nav-link {
+    font-size: 10px;
+    margin-top: 1rem;
+  }
 }
 </style>

src/views/announcement.vue

@@ -4,9 +4,6 @@
   <Nav></Nav>
 <div  class ="box"> 
     
-<nav  class="breadcrumb">
- 
-</nav>        
     
 <div class= "container"> 
 

src/views/criteria.vue

@@ -2,13 +2,10 @@
 <div>
   <Header></Header>
   <Nav></Nav>
+
+ 
 <div  class ="box"> 
 
-<nav  class="breadcrumb">
- 
-</nav>        
-    
-
 <div class= "container"> 
 
 
@@ -56,7 +53,7 @@
       <li>3. </li>
 <div class="space">
       <ul class="circle">
-           <li>  </li>
+           <li></li>
             <li> </li>
             <li> </li>
         </ul>
@@ -394,9 +391,8 @@
                         </tbody></table>
 
 </div>
-
-
 </div>
+
  <Footer></Footer>
   
 </div>
@@ -458,11 +454,11 @@ table, th, td {
 }
 
 .space {
-    margin-left: 40px;width: 20px;
+    margin-left: 0px;width: 0px;
     
 }
 .list {
-    margin-left: 50px;width: 700px;
+    margin-left: 0px;width: 0px;
     
 }
 
@@ -513,6 +509,7 @@ h1, h2, h3, h4, h5, h6 {
     text-align: justify;
     
     
+   
 }
 
 .container {
@@ -530,4 +527,6 @@ text-align: justify;
     
 }
 
+
+
 </style>

src/views/formats.vue

@@ -3,7 +3,7 @@
     <Header></Header>
     <Nav></Nav>
     <div class="box">
-      <nav class="breadcrumb"></nav>
+     
 
       <div class="container">
         <h6><b> </b></h6>

src/views/glossary.vue

@@ -6,9 +6,7 @@
   <meta name="viewport" content="initial-scale=1">
 <div  class ="box"> 
 
-<nav  class="breadcrumb">
    
-</nav>        
           
     
 <div class= "container"> 

src/views/home.vue

@@ -53,7 +53,7 @@ export default {
 }
 
 .box {
-    background: #f1f1f1;
+    background: #ffffff;
     padding: 1.25rem;
     text-align: justify;