header con imagenesEjemplo

ejemplo.js

@@ -1 +0,0 @@
-//ejemplo

package-lock.json

@@ -2455,6 +2455,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
+      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bootstrap": "^4.5.0",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.3.4"

src/App.vue

@@ -1,12 +1,18 @@
 <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>
 
@@ -18,5 +24,12 @@ export default {
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
+
+  padding: 0;
+  margin: 0;
+}
+
+.row {
+  margin: 0 !important;
 }
 </style>

src/components/HelloWorld.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/home.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>esta es la pagina home</h1>
+  </div>
+</template>

src/esteticas/header.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="divMaster">
+    <div class="header cl-12 azulUnam">
+      <div class="row">
+        <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="https://www.c3.unam.mx/image/logoUnam.png"
+              alt="logo unam"
+            />
+          </a>
+        </div>
+
+        <div
+          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">
+            <img
+              class="sizeImg"
+              src="https://flisol.acatlan.unam.mx/img/logo-acatlan.png"
+              alt="logo unam"
+            />
+          </a>
+        </div>
+
+        <div
+          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">
+            <img
+              class="sizeImg"
+              src="../assets/FESAcatlan.png"
+              alt="logo unam"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.divMaster {
+  max-width: 1280px;
+  height: auto;
+  margin: 0 auto;
+}
+
+.azulUnam {
+  background-color: #1e3c70;
+}
+
+/* .header{
+  height: 100px;
+} */
+
+.sizeImg {
+  height: 5rem;
+}
+.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: 3rem;
+  }
+}
+</style>

src/main.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import App from "./App.vue";
+import "bootstrap/dist/css/bootstrap.css";
 
 Vue.config.productionTip = false;