index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>El negocio de Omar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1 class="titulo-principal">Negocio de Omar</h1>
</header>
<img id="banner" src="banner/banner.jpg">
<div class="principal">
<h2 class="titulo-centralizado">Sobre el negocio de Omar</h2>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipisicing elit</strong>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p id="mision"><em>Duis aute irure dolor in <strong>reprehenderit in voluptate</strong> velit esse cillum dolore eu fugiat nulla pariatur.</em></p>
<p>Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="diferenciales">
<h3 class="titulo-centralizado">Diferenciales</h3>
<ul>
<li class="items">Atención personalizada a los clientes.</li>
<li class="items">Espacio diferenciado.</li>
<li class="items">Localización.</li>
<li class="items">Profesionales calificados.</li>
</ul>
<img src="diferenciales/diferenciales.jpg" class="imagenDiferenciales">
</div>
</body>
</html>style.css
.titulo-principal {
padding-left: 30px;
}
#banner {
width: 100%;
}
.principal {
background: #CCCCCC;
padding: 20px;
}
.titulo-centralizado {
text-align: center;
}
p {
text-align: center;
}
em strong {
color: red;
}
#mision {
font-size: 20px;
}
.diferenciales {
background: #FFFFFF;
padding: 30px;
}
h2 {
text-align: center;
}
.items {
font-style: italic;
}
ul {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%;
}
.imagenDiferenciales {
width: 50%;
}
