Skip to content

Instantly share code, notes, and snippets.

@fightingtheboss

fightingtheboss/gist:4bd5cb54e027db2f4163

Created June 2, 2014 22:05
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 fightingtheboss/4bd5cb54e027db2f4163 to your computer and use it in GitHub Desktop.
Save fightingtheboss/4bd5cb54e027db2f4163 to your computer and use it in GitHub Desktop.
Download ZIP
A playground for testing your skills with @media queries
Raw
gistfile1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Queries!</title>
<meta name="viewport" content="initial-scale=1,width=device-width">
<style>
/* Add your styles here */
/* Add your media queries here */
</style>
</head>
<body>
<div class="container">
<img src="http://placehold.it/1080x300" alt="">
<article class="news">
<h1>Title 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, impedit, ab, illo excepturi praesentium illum iusto fugit eos eaque perspiciatis dolor doloribus ipsam. Tempore, molestias quibusdam soluta eaque culpa voluptates.</p>
</article>
<article class="news">
<h1>Title 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, impedit, ab, illo excepturi praesentium illum iusto fugit eos eaque perspiciatis dolor doloribus ipsam. Tempore, molestias quibusdam soluta eaque culpa voluptates.</p>
</article>
<article class="news">
<h1>Title 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, impedit, ab, illo excepturi praesentium illum iusto fugit eos eaque perspiciatis dolor doloribus ipsam. Tempore, molestias quibusdam soluta eaque culpa voluptates.</p>
</article>
<article class="news">
<h1>Title 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, impedit, ab, illo excepturi praesentium illum iusto fugit eos eaque perspiciatis dolor doloribus ipsam. Tempore, molestias quibusdam soluta eaque culpa voluptates.</p>
</article>
<article class="news">
<h1>Title 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, impedit, ab, illo excepturi praesentium illum iusto fugit eos eaque perspiciatis dolor doloribus ipsam. Tempore, molestias quibusdam soluta eaque culpa voluptates.</p>
</article>
<article class="news">
<h1>Title 6</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, impedit, ab, illo excepturi praesentium illum iusto fugit eos eaque perspiciatis dolor doloribus ipsam. Tempore, molestias quibusdam soluta eaque culpa voluptates.</p>
</article>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment