Autor
HTML
Código:
<!DOCTYPE html>
<html>
<head>
<title> Inicio </title>
<link rel="stylesheet" type="text/css" href="archivo.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="cabeza">
<img class="peque" src="imagen.PNG"/>
<div class="menu">
<ul>
<li> <a href="#"> Inicio </a> </li>
<li> <a href="#"> Servicios </a> </li>
<li> <a href="#"> Contacto </a> </li>
</ul>
</div>
</div>
<div id="cuerpo">
<div class="titulo"> <p> <strong> Tu Negocio o Tu Proyecto </strong></p> </div>
<img class="grande" src="i.jpg"/>
<div class="texto">
<h2> Quienes Somos </h2>
<br>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing <br>elitr, sed diam nonumy eirmod tempor invidunt ut <br> labore et dolore magna aliquyam erat, sed diam.</p>
</div>
<div class="redes">
<ul>
<li> <a href="https://www.faceook.com"> <img class="face" src="face.png"> </a> </li>
<li> <a href="https://www.twitter.com"> <img class="tw" src="twitter.jpg"> </a> </li>
<li> <a href="https://www.gmail.com"> <img class="gmail" src="gmail.jpg"> </a> </li>
<li> <a href="https://www.instagram.com"> <img class="insta" src="insta.jpg"> </a> </li>
</ul>
</div>
<div class="texto2">
<p> <strong>Gran via 375, 12345 Cordoba </strong></p> <P>Tel: (123) 456-7890</P>
</div>
</div>
<div id="pie">
<H1> Que Hacemos </H1>
<p>
Lorem ipsum dolor sit amet, ullum nullam es <br> possim sed et. Virtute ancillae mel ne, quo ean <br> adhuc del principes persequeris, ius alii pro priae<br> maxima accommodare ea. Zril aliquam fabulas mei <br>in. Epicurei adipisci pro ex, vidisse minimum <br>volupta ius eu vero eos et accusam et justo duo dolores.
</p>
</div>
<div id="final">
x
</div>
</body>
</html>
CSS
Código:
/* CABEZA */
#cabeza {
background-color:#222222;
float:left;
clear:none;
position:relative;
height:205px;
width:102%;
bottom:17px;
right:10px;
}
img.peque {
width:100px;
height:100px;
float:left;
clear:none;
position:relative;
left:10%;
top:40px;
}
#cabeza .menu li{
display:inline;
}
#cabeza .menu li a{
padding:10px 20px;
color:#FFFFFF;
text-decoration:none;
font-family: 'Source Sans Pro', sans-serif;
float: left;
position:relative;
left:40%;
top:10%;
}
#cabeza .menu li a:hover {
padding-bottom:10px;
color:#FFCC00;
}
/* FIN CABEZA */
/* CUERPO */
#cuerpo .titulo {
float:left;
clear:none;
font-size: 45px;
position:relative;
top:60px;
left:140px;
color:#222222;
font-family: 'Source Sans Pro', sans-serif;
}
img.grande {
float:left;
clear:none;
position:relative;
top:170px;
right:28%;
}
#cuerpo .texto h2 {
font-family: verdana;
color:#3e3e3e;
}
#cuerpo .texto {
float:left;
clear:none;
position:relative;
right:30%;
bottom:220px;
left:60%;
}
#cuerpo .texto p {
color:#3e3e3e;
font-size: 20px;
position:relative;
bottom:25px;
font-family: 'Source Sans Pro', sans-serif;
}
img.face, img.tw, img.gmail, img.insta{
width:30px;
height:30px;
}
#cuerpo .redes li {
display:inline;
text-decoration: none;
position: relative;
top:280px;
right:290px;
}
#cuerpo .redes li a{
padding:10px 5px;
}
#cuerpo .texto2{
position:relative;
top:300px;
right:300px;
}
#cuerpo .texto2 p {
color:#3e3e3e;
}
/* FIN CUERPO */
/* PIE */
#pie {
float:left;
clear:none;
position:relative;
right:280px;
top: 170px;
}
#pie h1{
color:#3e3e3e;
font-family: 'Source Sans Pro', sans-serif;
position:relative;
right:30px;
}
#pie p {
color:#3e3e3e;
font-size: 20px;
font-family: 'Source Sans Pro', sans-serif;
position:relative;
right:30px;
}
/* FIN PIE */
#final {
float:left;
clear:none;
padding:10%;
position:relative;
background-color:#222222;
top:20em;
width:82%;
right:10px;
}
MOD: Imagen adaptada a lo usado en el foro.
En línea
