Skip to content

Instantly share code, notes, and snippets.

@chipbell4

chipbell4/teaser.html

Created October 23, 2015 17:31
Show Gist options
  • Save chipbell4/6033029da00a37b38e6e to your computer and use it in GitHub Desktop.
Save chipbell4/6033029da00a37b38e6e to your computer and use it in GitHub Desktop.
Download ZIP
A Flexbox version for having a slider with text
Raw
teaser.html
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.container {
height: 10em;
margin: 0;
padding: 0;
display: flex;
border: 1px solid gray;
}
.container img {
height: 100%;
}
.container .content-container {
flex: 1;
height: 100%;
display: flex;
align-items: center;
padding: 2em;
}
.content {
flex: 1;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="http://placehold.it/450x350">
<div class="content-container">
<div class="content">
This is some content
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment