Skip to content

Instantly share code, notes, and snippets.

Created December 16, 2016 08:12
Show Gist options
  • Save anonymous/eed22a6bd815c411cbfd4cdaaa991265 to your computer and use it in GitHub Desktop.
Save anonymous/eed22a6bd815c411cbfd4cdaaa991265 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/sibahocizo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body {
width:90%;
}
.media {
display: grid;
grid-template-columns: 25% 75%;
grid-gap: 1rem;
}
.media .img {
max-width: 100%;
height: auto;
}
.media p {
margin: 0 0 1rem;
}
</style>
</head>
<body>
<div class="media">
<img src="http://surreyfire.co.uk/wp-content/uploads/2014/02/SFSL-Feature-Alarms.png" alt="" class="img">
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat molestias itaque sunt tenetur pariatur possimus consectetur, voluptatibus. Facilis quas, aut amet et, reprehenderit deserunt, unde vitae totam rerum fugiat hic.</p>
<div class="media">
<img src="http://surreyfire.co.uk/wp-content/uploads/2014/02/SFSL-Feature-Alarms.png" alt="" class="img">
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat molestias itaque sunt tenetur pariatur possimus consectetur, voluptatibus. Facilis quas, aut amet et, reprehenderit deserunt, unde vitae totam rerum fugiat hic.</p></div>
</div></div>
</div>
<script id="jsbin-source-css" type="text/css">body {
width:90%;
}
.media {
display: grid;
grid-template-columns: 25% 75%;
grid-gap: 1rem;
}
.media .img {
max-width: 100%;
height: auto;
}
.media p {
margin: 0 0 1rem;
}</script>
</body>
</html>
body {
width:90%;
}
.media {
display: grid;
grid-template-columns: 25% 75%;
grid-gap: 1rem;
}
.media .img {
max-width: 100%;
height: auto;
}
.media p {
margin: 0 0 1rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment