Skip to content

Instantly share code, notes, and snippets.

/index.html

Last active October 14, 2015 02:43
Show Gist options
  • Save anonymous/05167e8a65f8502044ea to your computer and use it in GitHub Desktop.
Save anonymous/05167e8a65f8502044ea to your computer and use it in GitHub Desktop.
Download ZIP
Do Now Activity Do Now Activity // source http://jsbin.com/voziwun
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Do Now Activity" />
<meta charset=utf-8 />
<title>Do Now Activity</title>
<style id="jsbin-css">
/* Add your CSS! */
.challenge1 {
}
.line {
}
/* Not for any challenge, just to separate the challenges better. */
h1 {
color: #EF5330;
text-align: center;
}
li {
border-top: 3px solid black;
padding: 1em 0;
}
</style>
</head>
<body>
<h1>Do Now Activity</h1>
<p>Do your best to complete the challenges, try to complete them all if you can! Here's a handy <a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS Reference page</a> if you need it.</p>
<ul>
<li><em>Challenge 1</em>: Style the next div with a <strong>rounded border</strong>. Apply the css to the <code>.challenge1</code> class.
<div class="challenge1">
<p>Wrap this div with a rounded border!</p>
</div>
</li>
<li>
<em>Challenge 2</em>: Place a black line under each paragraph. Add your CSS to the <code>.line</code> class.
<div>
<p class="line">Line 1</p>
<p class="line">Line 2</p>
<p class="line">Line 3</p>
</div>
</li>
<li><em>Challenge 3</em>: Put the divs <strong>side-by-side</strong>. If you have time, add some additional styles to the divs so that it's easier to see that they are separated.
<div>
<div class="challenge3">
This div goes on the left.
</div>
<div class="challenge3">
This div goes beside the first one, to the right.
</div>
</div>
</li>
</ul>
<p>Great Job! You're done :)</p>
<script id="jsbin-source-css" type="text/css">
/* Add your CSS! */
.challenge1 {
}
.line {
}
/* Not for any challenge, just to separate the challenges better. */
h1 {
color: #EF5330;
text-align: center;
}
li {
border-top: 3px solid black;
padding: 1em 0;
}
</script>
</body>
</html>
Raw
jsbin.voziwun.css
/* Add your CSS! */
.challenge1 {
}
.line {
}
/* Not for any challenge, just to separate the challenges better. */
h1 {
color: #EF5330;
text-align: center;
}
li {
border-top: 3px solid black;
padding: 1em 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment