CODIGO HTML
<!DOCTYPE html>
<html
lang="es">
<head>
<title>Ejemplo
de Encabezado</title>
<meta
charset="utf-8"/>
<meta
name="description" content="Encabezado Cucuta"/>
<link rel="stylesheet"
href="estilos_encabezado.css"/>
</head>
<body>
<header
id="encabezado">
<article
id="titulos">
<h1
id="titulo1">CUCUTA DEPORTIVO F.C</h1>
<h2
id="titulo2">El Rojo y Negro nuevamente en Cúcuta</h2>
</article>
<article
id="escudo">
<figure
id="escudo1">
<img
src="escudo.jpg" alt="Escudo del Cucuta"
width="200" height="150" />
</figure>
</article>
</header>
<figure
id="equipo">
<img
src="equipo.jpg" alt="Equipo de Cucuta"
width="500"
height="450"/>
</figure>
</body>
</html>
CODIGO CSS
* {
margin:0;
padding:0;
}
#encabezado {
width: 960px;
margin: 5px auto;
/*background: pink;*/
text-align: center;
padding: 5px;
border-bottom: 4px solid #441F05;
}
#titulos {
width: 65%;
padding: 22px;
}
#escudo {
width: 30%;
text-align: left;
}
#titulos, #escudo {
display:inline-block;
vertical-align: top;
}
#titulo1 {
font: bold 40px Algerian;
color: #322BEB;
text-shadow: 3px 3px #6A66EC;
}
#titulo2 {
font:
36px Monotype Corsiva;
color:
red;
}
img {
border-radius:
50px;
}
#equipo {
text-align: center;
width: 960px;
border-bottom: 4px solid #441F05;
margin: 5px auto;
padding: 5px;
}
No hay comentarios:
Publicar un comentario