Skip to content

Instantly share code, notes, and snippets.

@IgnacioGaldames

IgnacioGaldames/flex.html

Created August 11, 2016 21:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save IgnacioGaldames/f2703cdf2b13eeb8d5673fcd5626e23a to your computer and use it in GitHub Desktop.
Save IgnacioGaldames/f2703cdf2b13eeb8d5673fcd5626e23a to your computer and use it in GitHub Desktop.
Download ZIP
caja flex
Raw
flex.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<style type="text/css">
html {
font-size: 62.5%;
}
.flexbox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-around;
width: 100%;
}
.imagen, .textos {
align-self: center;
}
.imagen {
width: 40%;
}
.imagen img {
max-width: 100%;
height: auto;
}
.textos {
width: 50%;
font-family: 'Roboto', sans-serif;
}
.flexbox:nth-child(even) .textos {
order: -1;
}
.textos h1 {
font-size: 20px; font-size: 2rem;
color: #3366cc;
}
.textos p {
font-size: 16px; font-size: 1.6rem;
}
@media screen and (max-width: 760px) {
.flexbox {
flex-direction: column;
}
.imagen, .textos {
width: 90%;
}
.flexbox:nth-child(even) .textos {
order: 1;
}
}
</style>
</head>
<body>
<div class="flexbox">
<div class="imagen"><img src="http://placehold.it/1920x1080" alt="" /></div>
<div class="textos">
<h1>lorem</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quasi dolores debitis suscipit dolorum quidem aliquam laborum officiis magnam enim optio perferendis culpa fugiat velit vitae inventore, sequi deserunt cumque.
</p>
</div>
</div>
<div class="flexbox">
<div class="imagen"><img src="http://placehold.it/1920x1080" alt="" /></div>
<div class="textos">
<h1>Ipsum.</h1>
<p>Accusantium cum expedita modi fuga voluptate eveniet eos velit, laudantium in, dolorum totam quae soluta. Distinctio facilis laudantium itaque quis sit cumque provident tempore, quidem blanditiis repellat dignissimos, sapiente autem.</p>
</div>
</div>
<div class="flexbox">
<div class="imagen"><img src="http://placehold.it/1920x1080" alt="" /></div>
<div class="textos">
<h1>Dolor</h1>
<p>Ipsa velit nemo quos vero aliquam necessitatibus maiores facere illum iusto, recusandae dolores sunt rerum nihil a quidem optio atque. Consectetur at saepe, eum, nesciunt consequuntur in aliquid nobis beatae.</p>
</div>
</div>
<div class="flexbox">
<div class="imagen"><img src="http://placehold.it/1920x1080" alt="" /></div>
<div class="textos">
<h1>Sit amet</h1>
<p>Minima odio officia iure, modi possimus accusamus placeat recusandae unde repellat nobis tenetur earum debitis dolor incidunt labore, expedita et eligendi. Aspernatur ipsa quidem soluta reiciendis, blanditiis accusamus magni consequuntur!</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment