header con imagenesEjemplo

2020-08-04 13:35:59 -05:00
parent d25d33c537
commit f986338672
10 changed files with 110 additions and 116 deletions
@@ -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>