<head>
<title>Miaw Miaw Café</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
#barra-superior {
background: #EAEAEA; /*Color de la barra*/
width:100%;
height:40px; /*Alto de la barra*/
margin:0px 0px 0px 0px;
position:fixed; /*Para que la barra se quede fija*/
z-index:102; /*Para que la barra se quede fija*/
}
#menu{
margin:0px 0px 0px 10px;
width:1120px; /*Ancho del menú dentro de la barra, con este valor sobra*/
height:30px;
}
#menu ul{
float:left; /*Donde queréis que quede alineado el menú, right (a la derecha)*/
background:none;
margin:0px;
padding:0;
list-style-type:none;
height:25px;
}
#menu ul li{
display:block;
float:left;
height:30px;
}
#menu ul li a{
display:block;
float:left;
color:#000000; /* Color del texto */
font: 14px 'Arial'; /* Tamaño del texto y tipografía que queráis usar*/
text-decoration:none;
padding:12px 0px 0px 20px;
}
#menu ul li a:hover{
background: #EAEAEA; /* Color del fondo al pasar el ratón por encima de cada pestaña, yo no quiero que sea diferente, por eso lo tengo del mismo color que la barra*/
color:#000000; /* Color del texto al pasar el ratón por encima*/
height:20px;
}
.mySlides {display:none;}
</style>
</head>
<body>
<div id='barra-superior'>
<div id='menu'>
<ul>
<li><a href='RELLENAR'><img src="http://miawmiawcafe.weebly.com/uploads/3/1/4/2/31425101/8166761.png?250" width="50px" /></a></li>
<li><a href='RELLENAR'>Platillos</a></li>
<li><a href='RELLENAR'>Eventos</a></li>
</ul>
</div>
</div>
<br><br><br>
<table style="width:1000px">
<tr><td width="80%">
<div class="w3-content w3-section" style="max-width:500px" "align:left">
<img class="mySlides" src="https://animetijuana.files.wordpress.com/2013/12/miaw-miaw-cafe-11.jpg" width="510">
<img class="mySlides" src="https://animetijuana.files.wordpress.com/2013/12/miaw-miaw-cafe-8.jpg" width="510">
<img class="mySlides" src="https://animetijuana.files.wordpress.com/2013/12/miaw-miaw-cafe-7.jpg" width="510">
<img class="mySlides" src="https://animetijuana.files.wordpress.com/2013/12/miaw-miaw-cafe-6.jpg" width="510">
<a class="w3-btn-floating" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" onclick="plusDivs(+1)">❯</a>
</div></td>
<td width="20%">
</td>
</table>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
No hay comentarios:
Publicar un comentario