html:
<!DOCTYPE html> <html> <head> <title>One Page design</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <nav> <h2>Mi empresa</h2> <ul> <li>Fotos</li> <li>Articulos</li> <li>Mapa</li> </ul> </nav> <section id="imagen"> <h1>Esto es una empresa que mola</h1> <img src="img/paisaje.jpg" alt=""/> </section> <section id="fotos"> <figure> <img src="img/gato.jpg" alt=""/> <figcaption>Un lindo gatito</figcaption> </figure> <figure> <img src="img/mascota.jpg" alt=""/> <figcaption>Amor a los animales</figcaption> </figure> <figure> <img src="img/gato.jpg" alt=""/> <figcaption>El mejor amigo del hombre</figcaption> </figure> </section> <section id="textos"> <article> <h1>Esto es una artículo</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> <article> <h1>Esto es una artículo</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> <article> <h1>Esto es una artículo</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> <article> <h1>Esto es una artículo</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> </section> <section id="mapa"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d47878.40221632758!2d2.1679048317954788!3d41.40883185920695!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a4a2efe63f46cd%3A0x2ce5e151b3383c3c!2sNetmind!5e0!3m2!1sca!2ses!4v1525955904487" frameborder="0" style="border:0" allowfullscreen></iframe></section> </body> </html>
Css:
*{
font-family:Verdana,serif;
}
body{
margin:0;
}
nav{
position:fixed;
background-color: black;
color:white;
width:100%;
padding:10px;
}
nav ul li {
display: inline-block;
margin-left: 10px;
}
nav ul{
float:right;
position:relative;
right:40px;
}
nav h2{
float:left;
}
#imagen{
position: relative;
z-index: -1;
top:2em;
}
#imagen img{
width:100%;
}
#imagen h1{
font-weight: bold;
font-size: 6em;
text-align: center;
position: absolute;
top:0em;
width:100%;
text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
color: rgba(255,255,255,0.5);
}
#fotos{
margin-top: 20px;
}
#fotos figure img{
width: 100%;
height: auto;
}
#fotos figure{
margin: 2%;
border: 1px solid #ccc;
float: left;
width: 29%;
box-shadow: 10px 10px 5px #AAAAAA;
opacity:.8;
position:relative;
}
#fotos figure:hover{
border: 1px solid #777;
box-shadow: 10px 10px 5px #555555;
opacity:1;
}
#fotos figcaption{
padding: 15px;
text-align: center;
background-color: white;
}
#textos article{
float:left;
width:45%;
margin:2%;
padding:5em 2em;
box-sizing: border-box;
background: linear-gradient(to bottom, #abbaab,#ffffff);
}
#mapa iframe{
width:100%;
height:20em;
}
