contruido para produccion

src/components/HelloWorld.vue

@@ -1,4 +1,5 @@
 <template>
+<div>
   <div class="hello">
     <h1>{{ msg }}</h1>
     <p>
@@ -28,6 +29,50 @@
       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
     </ul>
   </div>
+  <footer class="container-fluid Azul-puma footer py-3 ">
+    <!-- <div class="container">
+      <div row>
+        <router-link to="/comite">
+          <button type="button" class="col-md-6 col-sm-12 btn boton-footer uno">
+            Comité Editorial
+          </button>
+        </router-link>
+        <router-link to="/lineamientos">
+          <button type="button" class="col-md-6 col-sm-12 btn boton-footer dos">
+            Política Editorial y Lineamentos
+          </button></router-link
+        >
+        <router-link to="/proceso">
+          <button
+            type="button"
+            class="col-md-6 col-sm-12 btn boton-footer tres"
+          >
+            Proceso Editorial y Organismos
+          </button>
+        </router-link>
+        <router-link to="/puntos">
+          <button
+            type="button"
+            class="col-md-6 col-sm-12 btn boton-footer cuatro"
+          >
+            Puntos de Venta
+          </button>
+        </router-link>
+      </div>
+    </div> -->
+    <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>
+  </div>
 </template>
 
 <script>
@@ -39,20 +84,53 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h3 {
-  margin: 40px 0 0;
+.boton-footer {
+  background-color: rgb(187, 136, 0);
+  color: white;
+  width: 14rem;
+  font-size: 0.8rem;
 }
-ul {
-  list-style-type: none;
-  padding: 0;
+.uno,
+.dos,
+.tres {
+  margin-right: 1rem;
 }
-li {
-  display: inline-block;
-  margin: 0 10px;
+.btn {
+  margin-bottom: 1rem;
 }
-a {
-  color: #42b983;
+
+.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>