Skip to content

Instantly share code, notes, and snippets.

@vampaynani
Last active October 9, 2019 05:56
Show Gist options
  • Save vampaynani/6e11ec26ab6d124fc84690341c43382f to your computer and use it in GitHub Desktop.
Save vampaynani/6e11ec26ab6d124fc84690341c43382f to your computer and use it in GitHub Desktop.
Ejercicio de Flexbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
section{
min-height: 100vh;
}
.third-section img{
width: 100%;
}
@media (min-width: 768px){
.third-section{
min-height: 70vh;
}
}
</style>
</head>
<body>
<section class="first-section"><h1>El título</h1></section>
<section class="second-section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nibh tellus, tincidunt vitae tortor ac, pellentesque posuere purus. Nulla sed libero auctor, hendrerit odio vitae, posuere nunc. Integer rutrum massa lorem, vel eleifend justo dignissim vitae. Proin suscipit leo est. Pellentesque nec nulla interdum neque lacinia blandit. Vivamus vitae ipsum lacus. Phasellus metus nibh, pellentesque id feugiat nec, porta vitae dui. Nam bibendum ultrices ante, vel sagittis eros molestie vel. Quisque mollis nulla odio, nec blandit est cursus id. Aliquam at nibh eget ipsum ornare aliquet ut ut metus. Vivamus nec eros at dolor commodo condimentum. Donec non accumsan elit, et varius augue. Maecenas congue consequat ex, a efficitur sem tincidunt ut. Cras et felis at nisi porttitor accumsan a et nisi. Nam in velit est. Integer a rutrum turpis.</p>
<p>Maecenas et pretium massa, ac rutrum mi. Nunc mi magna, bibendum quis dapibus id, interdum vitae est. Nam egestas, augue vitae ultricies volutpat, lacus risus suscipit sapien, quis commodo magna purus ac lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam lobortis risus vel molestie pharetra. Vestibulum faucibus, risus sed fermentum congue, nunc tortor elementum purus, ac tempus lacus lacus ultricies eros. Duis malesuada quam in ex tempor, facilisis faucibus sem pharetra. Donec eget risus neque. Morbi et ante nulla. Mauris nisi mi, euismod vel posuere id, pharetra a purus. Praesent vehicula velit at purus imperdiet vestibulum. Suspendisse ac nisi nibh. Suspendisse euismod massa felis, ut posuere nisi commodo vel. Mauris nulla est, ultricies nec urna sit amet, euismod pellentesque lectus. Nunc sit amet purus in diam placerat lobortis non sed nulla.</p>
<p>Curabitur elit tortor, consequat non semper sed, ullamcorper sit amet augue. Morbi viverra metus at ex cursus ultricies. Aliquam erat volutpat. Quisque ut est aliquet, venenatis lacus eget, viverra nulla. Maecenas tempor vulputate dui, ac porta libero. Nunc feugiat condimentum sagittis. Curabitur eget mauris vel lacus pulvinar dictum. Morbi at magna sem. Praesent blandit libero eget lorem dapibus consequat. Sed pulvinar mollis purus.</p>
</section>
<section class="third-section">
<div class="image"><img src="https://via.placeholder.com/150" width="150" /></div>
<div class="image second-image"><img src="https://via.placeholder.com/150" width="150" /></div>
<div class="image"><img src="https://via.placeholder.com/150" width="150" /></div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment