DanielRamirezGe
82 lines
1.6 KiB
Vue
82 lines
1.6 KiB
Vue
<template>
|
|
<section class="menu">
|
|
<nav class="container">
|
|
<ul >
|
|
<div>
|
|
<router-link to="/" tag="li"><a> Inicio</a></router-link>
|
|
<router-link to="/convocatoria" tag="li"><a>Convocatoria</a></router-link>
|
|
<router-link to="/costos" tag="li"><a>Costos de Inscripción</a></router-link>
|
|
<router-link to="/fechas" tag="li"><a>Fechas</a></router-link>
|
|
<router-link to="/mesas" tag="li"><a>Mesas Temáticas</a></router-link>
|
|
</div>
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.menu {
|
|
background-color: #BB8800;
|
|
}
|
|
|
|
.menu nav ul {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
.menu nav ul div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.menu nav ul li {
|
|
list-style: none;
|
|
}
|
|
|
|
.menu nav ul li a {
|
|
display: block;
|
|
}
|
|
|
|
.menu nav ul li a, .menu nav ul li button, .menu nav ul li p {
|
|
padding: 1rem;
|
|
font-size: 1rem;
|
|
color: white;
|
|
transition: .5s;
|
|
}
|
|
|
|
.menu nav ul li a:hover, .menu nav ul li button:hover {
|
|
background-color: #936900;
|
|
}
|
|
|
|
.active {
|
|
background-color: #936900;
|
|
}
|
|
|
|
@media screen and (min-width: 480px) {
|
|
.menu nav ul {
|
|
margin: 0 1.5rem;
|
|
}
|
|
|
|
.menu nav ul li a, .menu nav ul li button, .menu nav ul li p {
|
|
padding: 1.25rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
.menu nav ul {
|
|
margin: 0 2rem;
|
|
}
|
|
|
|
.menu nav ul li a, .menu nav ul li button, .menu nav ul li p {
|
|
padding: 1rem;
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
</style> |