Bienvenidos a todos , el dia de hoy les traemos como crear un sitio web bastante sencillo a decir verdad.
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Cachorrosdelaweb</title> | |
| <link rel="stylesheet" href="css/estilos.css"></head> | |
| <body> | |
| <header> | |
| <h1>Cachorrosdelaweb</h1> | |
| </header> <nav> | |
| <ul> | |
| <a href="index.php"><li>Inicio</li></a> | |
| <a href="proyectos.php"><li>Proyectos</li></a> | |
| <a href="contacto.php"><li>Contacto</li></a> | |
| <a href="contacto.php"><li>Libro de Visitas</li></a> | |
| </ul> | |
| </nav> <section id="slider"> | |
| <figure> | |
| <img src="imagenes/slider.png" /> | |
| </figure> | |
| </section> | |
| <section class="contenido"> | |
| <h3>Servicios</h3> | |
| <article class="serv1"> | |
| <h4>Diseño Responsive</h4> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, voluptate. Placeat consequatur sapiente pariatur, ducimus amet dolore laborum quae itaque sunt culpa at ipsam aperiam illo, modi doloremque, vitae facere. | |
| </p> | |
| <figure> | |
| <img src="imagenes/responsive.png" alt=""> | |
| </figure> | |
| </article> | |
| <article class="serv1"> | |
| <h4>Sitios Corporativos</h4> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, voluptate. Placeat consequatur sapiente pariatur, ducimus amet dolore laborum quae itaque sunt culpa at ipsam aperiam illo, modi doloremque, vitae facere. | |
| </p> | |
| <figure> | |
| <img src="imagenes/php.jpg" alt=""> | |
| </figure> | |
| </article> | |
| <article class="serv1"> | |
| <h4>Pagos en Línea</h4> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, voluptate. Placeat consequatur sapiente pariatur, ducimus amet dolore laborum quae itaque sunt culpa at ipsam aperiam illo, modi doloremque, vitae facere. | |
| </p> | |
| <figure> | |
| <img src="imagenes/paypal.png" alt=""> | |
| </figure> | |
| </article> | |
| </section> | |
| <footer> | |
| <p>Diseño y Desarrollo Web By Agustin CDW - 2018 - www.cachorrosdelaweb.com</p> | |
| </footer></body> | |
| </html> ------------------------------------------------------------------------------------------------------------------------
Código css
*{
margin:0;
padding: 0;
}
body{
background: #A1BEC2;
}
p{
font-size: 14px;
font-family: arial;
line-height: 20px;
}
h3{
color: #CCC;
background: url(../imagenes/h1.jpg) repeat-x;
border-radius: 10px 10px 0 0;
font-family: verdana;
font-size: 20px;
font-weight: bold;
line-height: 50px;
height: 50px;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
width: 100%;
}
h4{
font-size: 16px;
font-family: verdana;
font-weight: bold;
}
header{
margin: auto;
margin-bottom: 5px;
border-radius: 10px;
box-shadow: 0px 0px 5px #160142;
background: url('../imagenes/header.png');
height: 150px;
width: 960px;
}
header h1{
text-shadow: 1px 1px 7px #FFF;
color: #000;
font-family: verdana;
font-size: 40px;
font-weight: bold;
line-height: 150px;
margin-top: 10px;
padding-left: 20px;
text-transform: uppercase;
vertical-align: middle;
}
nav{
margin-top: 3px;
border-radius:10px;
background: #001A33;
height: 50px;
margin: auto;
margin-bottom: 5px;
width: 960px;
}
nav ul{
text-align: center;
list-style: none;
width: 100%;
}
nav ul li{
color: #FFF;
font-size: 20px;
font-family: arial;
font-weight: bold;
display: inline-block;
line-height: 50px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
vertical-align: middle;
text-transform: uppercase;
}
nav ul li:hover{
color: #21EDC7;
}
#slider{
background: url('../imagenes/fondo_interior.png') #CFFFBF;
border-radius: 10px;
margin: auto;
margin-bottom: 5px;
width: 960px;
}
#slider img{
height: 350px;
}
#continicio{
display: inline-block;
vertical-align: top;
width: 50%;
}
#continicio h2{
font-size: 40px;
font-family: verdana;
font-weight: bold;
}
#slider figure img{
display: block;
border-radius: 10px;
box-shadow: 1px 1px 10px #000;
opacity: .9;
width: 100%;
}
.contenido{
background: url('../imagenes/fondo_interior.png') #CFFFBF;
border-radius: 10px;
margin-top: 3px;
margin: auto;
margin-bottom: 5px;
width: 960px;
}
.articulos{
padding: 10px;
}
.articulos img{
display: block;
margin: auto;
text-align: center;
}
.serv1{
padding-top: 10px;
padding-bottom: 10px;
margin-left: 25px;
display: inline-block;
width: 280px;
}
.serv1 img{
border-radius: 10px;
border:1px solid #000;
margin-top: 10px;
height: 150px;
width: 100%;
}
footer{
border-radius: 10px;
background: url(../imagenes/FondoFooter.jpg);
height: 75px;
margin: auto;
margin-bottom: 5px;
width: 960px;
}
footer p{
color: #FFF;
font-family: verdana;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
line-height: 75px;
vertical-align: middle;
}
.is-10-desktop{ background-color: #fff;font-size: 30px; font-family: Geneva, Tahoma, Verdana, sans-serif; }
|
 |
| Demo |
Hola mi nombre es Agustin ,soy informático desde los 15 años, soy apasionado ala informatica. 
No hay comentarios.:
Publicar un comentario