Al entrar a cada menú se
verá la imagen y leyenda de cada automóvil:
CODIGO HTML
Index.html
<!DOCTYPE html>
<html
lang="es">
<head>
<title>Ejercicio 3</title>
<meta
charset="utf-8"/>
<link
rel="stylesheet" href="estilos_menus.css" />
</head>
<body>
<header
id="cabecera">
<figure id="logo1">
<img id="imagen1"
src="logo1.jpg" width="220" height="130"
alt="Logo 1" />
</figure>
<article
id="titulos">
<h1
id="titulo1">AUTOMOVILES</h1>
<h2
id="titulo2">"RAPIDO Y FURIOSO"</h2>
</article>
<figure id="logo2">
<img
id="imagen2" src="logo2.jpg" width="130"
height="130" alt="Logo 2" />
</figure>
</header>
<hr
id="linea"/>
<nav
id="menu">
<ul>
<li><a
href="index.html">Inicio</a></li>
<li><a
href="ferrari.html">Ferrari</a></li>
<li><a
href="mercedes.html">Mercedes Benz</a></li>
<li><a
href="maserati.html">Maserati</a></li>
<li><a
href="audi.html">Audi</a></li>
</ul>
</nav>
<p id="texto_inicio">Automoviles
"Rapido y Furioso" <br />
la mejor empresa de venta de vehículos de
America</p>
</body>
</html>
Codigo de ferrari.html
Todo igual que el index.html, despues de </nav> se
agrega esto en la pagina de cada Menu:
<section id="autos">
<figure id="carro">
<img id="carritos" src="Imagenes/ferrari.jpg" width="400" height="230" alt="ferrari" />
</figure>
<article id="texto1">
<p><br /><br /><br />Fue fundada en 1929 por un piloto de autos de competición, Enzo Ferrari, con el nombre de Scuderia Ferrari, construyendo automóviles de competición y, más tarde, en 1947, fabricando autos deportivos. En 2013 Ferrari redujo expresamente su producción de automóviles a 6922 unidades en su fábrica de Maranello.</p>
</article>
</section>
<figure id="carro">
<img id="carritos" src="Imagenes/ferrari.jpg" width="400" height="230" alt="ferrari" />
</figure>
<article id="texto1">
<p><br /><br /><br />Fue fundada en 1929 por un piloto de autos de competición, Enzo Ferrari, con el nombre de Scuderia Ferrari, construyendo automóviles de competición y, más tarde, en 1947, fabricando autos deportivos. En 2013 Ferrari redujo expresamente su producción de automóviles a 6922 unidades en su fábrica de Maranello.</p>
</article>
</section>
CODIGO CSS3
estilos_menus.css
* {
margin: 0;
padding: 0;
}
body {
background-image:
url("fondo.jpg")
}
#cabecera {
width: 960px;
margin: 5px
auto;
padding: 5px;
text-align:
center;
border: 5px solid #441F05;
}
#logo1 {
/*background: pink;*/
width: 20%;
margin:5px auto;
}
#titulos {
/*background: blue;*/
width: 55%;
padding: 20px 0px;
}
#logo2 {
/*background: green;*/
width: 20%;
margin:5px auto;
text-align: left;
}
#imagen2 {
border-radius:
75px;
}
#logo1, #titulos, #logo2 {
display: inline-block;
vertical-align: top;
}
#titulo1 {
font: 60px Monotype Corsiva;
color: red;
}
#titulo2 {
font: 30px Ravie;
color: Blue;
}
#linea {
width: 960px;
margin: 5px auto;
border: 3px dashed
red;
}
#texto_inicio {
width: 960px;
margin: 5px auto;
font: 40px Segoe Print;
text-align: center;
}
#menu {
width: 960px;
margin: 10px auto;
padding: 5px;
text-align: center;
}
#menu li {
margin: 10px;
display:inline-block;
padding: 10px;
font-size: 26px;
}
#principal {
width: 960px;
margin: 5px auto;
text-align: center;
}
#autos {
width: 960px;
margin: 5px auto;
border: 3px solid black;
}
#carritos {
border: 10px solid blue;
}
#carro {
width: 45%;
margin: 15px;
}
#texto1 {
width: 45%;
}
#carro, #texto1 {
display: inline-block;
vertical-align: top;
}
p {
text-align: justify;
}
No hay comentarios:
Publicar un comentario