Skip to content

Instantly share code, notes, and snippets.

@furenku

furenku/ejemplo-position.html

Last active November 14, 2017 03:07
Show Gist options
  • Save furenku/a4e0926ab9fa1c62fcb3df54c35f45c8 to your computer and use it in GitHub Desktop.
Save furenku/a4e0926ab9fa1c62fcb3df54c35f45c8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ejemplo-position.html
<!-- html:5 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ejemplo Position</title>
<link rel="stylesheet" href="css/estilos-position.css">
</head>
<body>
<header>
Cabecera
</header>
<main>
<!-- section#portada -->
<section id="portada">
<!-- .fondo>img[http://unsplash.it/1200/650] -->
<div class="fondo">
<img src="http://unsplash.it/1200/650" alt="">
</div>
<!-- nav.texto>ul>(li>a{Texto Portada $})*3 -->
<nav class="texto">
<ul>
<li><a href="">Texto Portada 1</a></li>
<li><a href="">Texto Portada 2</a></li>
<li><a href="">Texto Portada 3</a></li>
</ul>
</nav>
</section>
<!-- section#contenido -->
<section id="contenido">
<!-- (p>lorem40)*10 -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis molestias dolorem, hic fugit impedit quam beatae. Ratione minima fugit veritatis culpa velit, expedita, quae ab repellendus facere. Et aliquid esse assumenda, dicta obcaecati ex voluptates sapiente tenetur, nesciunt suscipit cum!</p>
<p>Sed provident sapiente alias officia nemo aliquam minus, autem consequuntur repellendus voluptatem unde harum perspiciatis earum, in totam, architecto quidem adipisci ex odit? Voluptates ex cum, fuga explicabo. Iure illum dignissimos autem, rem ea enim eius nulla inventore repellat molestias!</p>
<p>Nulla aspernatur perspiciatis sit asperiores molestiae iste veritatis accusantium distinctio perferendis esse inventore nobis unde, blanditiis libero aliquid, ipsa, a facilis quisquam ab consectetur vero vitae. Quidem aspernatur, distinctio accusamus nostrum sint repellat ullam, laborum accusantium ad magnam, nobis rerum!</p>
<p>Reprehenderit illo, consequatur quaerat dolorum nobis voluptatibus a dolores veritatis dolore ab accusamus vitae magnam excepturi accusantium fugiat unde in cupiditate maiores, inventore placeat veniam laudantium et doloribus? Sapiente provident dolore fuga possimus. Velit aliquid consequuntur dicta at magni nulla.</p>
<p>Dolor provident ipsa voluptate eveniet earum, odit laborum eum accusantium sequi libero, sint numquam, atque et ex omnis. Debitis iusto repudiandae, sapiente dolor magni, quisquam tempora, voluptate veniam temporibus nihil iure deserunt placeat maxime qui inventore sunt officia quidem quia.</p>
<p>Cupiditate vitae nam nulla adipisci soluta laboriosam velit neque incidunt hic repudiandae reprehenderit modi, ea, id dicta, quisquam veniam voluptas natus esse vero consequatur deleniti veritatis exercitationem obcaecati recusandae! Adipisci obcaecati rerum fuga soluta maiores voluptas, omnis, dolorum eligendi vero.</p>
<p>Fugit eos dicta voluptatibus ad voluptatum placeat similique beatae nesciunt soluta illo harum sit incidunt temporibus, modi a officia, totam minus labore deleniti praesentium enim veritatis. Explicabo magni possimus, recusandae alias omnis deleniti illum maxime necessitatibus fugiat, sint at dignissimos!</p>
<p>Doloribus recusandae excepturi accusantium in voluptatem eligendi consectetur! Doloremque corporis quia ratione natus omnis ab magnam aspernatur modi perferendis eum dolorem, et tenetur, maiores magni officiis eius, dolores maxime aut iure. Doloremque distinctio, aut ab praesentium enim, eaque culpa voluptatum.</p>
<p>Atque cupiditate, maxime eligendi accusamus et sapiente rerum rem nihil debitis iste, dolore reiciendis necessitatibus. Pariatur voluptatum illum nostrum nesciunt. Itaque nostrum, repudiandae. Repellendus unde ratione itaque temporibus, suscipit doloribus excepturi repudiandae officia eveniet molestias natus soluta, saepe quia. Atque!</p>
<p>Molestias minus non, aliquid culpa voluptatibus beatae, voluptatem. Deserunt laborum, expedita quae accusamus! Ut, rerum eius. Mollitia ipsam adipisci ratione vitae autem facere culpa eos eligendi nemo dolorum, accusamus blanditiis magni asperiores recusandae quas. Officia eius maiores accusamus eveniet suscipit?</p>
</section>
</main>
<footer>
Pie de Página
</footer>
</body>
</html>
Raw
estilos-position.css
* {
outline: 1px solid #0bc1ed;
}
body, ul, li {
/*p0*/
padding: 0;
/*m0*/
margin: 0;
}
body > header,
body > footer {
/*posf */
position: fixed;
width: 100%;
}
body > header {
/*t0*/
top: 0;
/*bgc#ddd*/
background-color: #ddd;
/*h48*/
height: 48px;
/* colocar en capa superior */
/*zi99*/
z-index: 99;
}
body > footer {
/*b0*/
bottom: 0;
/*bgc#ccc*/
background-color: #ccc;
/*h32*/
height: 32px;
}
body > main {
/* arreglar espacio bajo menu superior */
/*posr*/
position: relative;
top: 48px;
/* alternativas: margin y padding*/
/*mt48*/
/*margin-top: 48px;*/
/*pt48*/
/*padding-top: 48px;*/
/* solucionar espacio que queda debajo de footer */
/*pb32*/
padding-bottom: 32px;
}
#portada {
/*h60vh*/
height: 60vh;
/*posr*/
position: relative;
}
#portada .fondo,
#portada .texto {
/*posa*/
position: absolute;
/*l0*/
left: 0;
/*t0*/
top: 0;
/*w100p*/
width: 100%;
/*h100p*/
height: 100%;
}
img {
/*w100p*/
width: 100%;
/*h100p*/
height: 100%;
}
#portada .texto {
/*tac*/
text-align: center;
/*w50vw*/
width: 50vw;
/*ml25vw*/
margin-left: 25vw;
}
#portada .texto li {
/*h20vh*/
height: 20vh;
/*fz10vh*/
font-size: 10vh;
/* quitar balas de lista */
list-style: none;
}
#portada .texto li a {
color: #fff;
/*tdn*/
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment