configuracion inicial del Front / Header, footer
This commit is contained in:
KIKIN
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<footer id="footer">
|
||||
<div class="separador"></div>
|
||||
<div class="container p-3">
|
||||
<div class="cont-text-foo text-white text-center">
|
||||
<div class="d-flex justify-content-between flex-wrap">
|
||||
<div class="my-auto">
|
||||
<a href="#">
|
||||
<img src="../img/logo.png" alt="" style="height:50px;">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<h6 class="text-center mb-2"><b>CONTACTANOS</b></h6>
|
||||
<div class="d-flex">
|
||||
<font-awesome-icon icon="map-marker-alt" class="text-white mr-2 footer-icon" />
|
||||
<a href="https://www.google.com.mx/maps/place/Fes+Acatlan/@19.4839532,-99.2486563,17z/data=!3m1!4b1!4m5!3m4!1s0x85d2030fd8a9a8c1:0x1f9446a4f2a37e53!8m2!3d19.4839482!4d-99.2464676" target="_blank" class="text-white"><p>Ubicación</p></a>
|
||||
</div>
|
||||
|
||||
<div class="d-flex my-2">
|
||||
<font-awesome-icon icon="phone-alt" class="text-white mr-2 footer-icon" />
|
||||
<p>Telefono</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<font-awesome-icon icon="envelope" class="text-white mr-2 footer-icon" />
|
||||
<p>Correo</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<h6 class="mb-2"><b>INFORMACIÓN DEL SITIO</b></h6>
|
||||
<div class="d-inline-block">
|
||||
<a href="#" class="text-white"><p><b>Políticas de compra</b></p></a>
|
||||
<a href="#" class="text-white"><p class="my-2"><b>Manual de compra</b></p></a>
|
||||
<a href="#" class="text-white"><p><b>Aviso de privacidad</b></p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="border-color: #fff;" class="my-3">
|
||||
<p>
|
||||
Hecho en México, todos los derechos reservados 2020.
|
||||
<br />
|
||||
Esta página puede ser reproducida con fines no lucrativos,
|
||||
siempre y cuando no se mutile, se cite la fuente
|
||||
<br />
|
||||
completa y su dirección electrónica. De otra forma, requiere
|
||||
permiso previo por escrito de la institución.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
margin: 0px;
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
/* #footer {
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
} */
|
||||
.separador {
|
||||
background-color: #bb8800;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.cont-text-foo {
|
||||
font-size: 10px;
|
||||
}
|
||||
footer {
|
||||
background-color: #1b3d70;
|
||||
}
|
||||
.footer-icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div>
|
||||
<header id="iniLetter" class="header-h">
|
||||
|
||||
<div class="container py-3 py-md-2 d-flex justify-content-between align-items-center">
|
||||
|
||||
<div class="mr-5 mr-md-0">
|
||||
<a href="https://www.unam.mx/">
|
||||
<img
|
||||
src="../img/Logo-UNAM.png"
|
||||
class="img-fluid"
|
||||
alt="Logo UNAM"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="http://www.acatlan.unam.mx/">
|
||||
<img
|
||||
src="../img/logo_fesa.png"
|
||||
class="img-fluid"
|
||||
alt="Logo Fes Acatlán"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div class="header-f" >
|
||||
<div class="container d-flex py-2 align-items-center justify-content-between">
|
||||
<div>
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="cart-icon-custom-properties text-decoration-none text-white">
|
||||
<font-awesome-icon icon="shopping-cart" class="text-white" /><sup> ( )</sup>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.header-h {
|
||||
/* background: #1b3d70; */
|
||||
background: #1b3d70;
|
||||
}
|
||||
|
||||
.header-f {
|
||||
background-color: #bb8800;
|
||||
}
|
||||
.cart-icon-custom-properties {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +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>
|
||||
Reference in New Issue
Block a user