Autor
html
Código:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<div id="logo">
<img src="imagen.PNG">
</div>
<nav>
<ul>
<li><a href="#">Inicio </a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto </a></li>
</ul>
</nav>
</header>
<section>
<article>
<hgroup> <h1>Tu Negocio o Tu Proyeto</h1> </hgroup>
<img src="foto.jpg">
</article>
<aside>
<h2>Quienes Somos</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam.
</p>
</aside>
</section>
</body>
</html>
CSS
Código:
*{
padding: 0;
margin: 0;
}
#contenedor {
}
header {
background-color: #222222;
width: 100%;
height:200px;
margin-bottom: 100px;
}
header #logo {
height:200px;
width:200px;
float: left;
background-color:#222222;
margin-left: 100px;
}
header #logo img {
margin: 40px;
}
header nav {
margin: 0 auto;
/*width: 400px;*/
width:50%;
height: 200px;
}
header nav ul {
margin-left: 30%;
}
header nav li{
display: inline-block;
margin-top:40px;
margin-left: 20px;
}
header nav li a {
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding: 20px;
font-family: 'Source Sans Pro', sans-serif;
}
header nav li a:hover {
padding-bottom:20px;
color:#FFCC00;
}
section {
width: 90%;
height: 600px;
/*background-color: red;*/
margin: 0 auto;
}
section article {
width: 50%;
height: 400px;
/*background-color: green;*/
float: left;
clear: left;
}
section article h1{
font-size: 36px;
font-family: 'Source Sans Pro', sans-serif;
text-align: center;
color:#222222;
}
section article img {
display: block;
margin: 0 auto;
margin-top:10px;
}
section aside{
width: 50%;
height: 400px;
margin: 0 auto;
margin-left: 50%;
}
section aside h2{
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
float: left;
color:#222222;
margin-top: 70px;
display: block;
margin-left: 30%;
}
section aside p {
width: 400px;
margin-left: 30%;
margin-top: 20px;
float: left;
font-family: 'Source Sans Pro', sans-serif;
}
foto de la web.
En línea
