garybunofsky/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Front End Web Development: Lesson 3, CSS the Right Way</title>
<style id="jsbin-css">
html {
  font-family: sans-serif;
  color:#333;
}
.card {
  background:#fff;
  border:1px solid #eaeaea;
  border-radius:5px;
}
.card h4 {
  font-size:1.25em;
}
.card ul {
  margin:0 0 0 -40px;
}
.card ul li {
  line-height:1.56em;
  padding:1em .75em;
}
.card img {
  height:auto;
  object-fit: cover;
  max-height:400px;
  width:100%;
}
.content-container {
  padding:1.5em;
}
/* Answer 1 */
.card ul {
  list-style:none;
}

/* Answer 2 */
.card ul li {
  border-bottom:1px solid #b7b7b7;
}
.card ul li:last-of-type {
  border-bottom:none;
}

/* Answer 3 */
.card ul li:nth-child(odd) {
  background:#f9f9f9;
}

/* Answer 4 */
.card h4 {
  color:#01adc7;
}

/* Answer 5 */
.card {
  box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}

/* Answer 6 */
 .card ul li::before {
  color: #01adc7;
  content: "\2022";
  margin-right:0.25em;
}

/* Answer 7 */
.card a {
  color:#01adc7;
}
.card a:hover {
  color:#0d8fa2;
}
</style>
</head>
<!--
    1. Remove the bullets from the unordered list.
    2. Add a border to the bottom of all list items except the last one.
    3. Add a background color to every other list item.
    4. Change the color of the h4 to #01adc7;
    5. Let's give it some depth; Add a box-shadow property to the card.
    6. Add blue bullets to the unordered list. Use the same hex color as the heading.
    7. Style the link color to blue, hex code #01adc7. Change all link colors to #01adc7 for their hovered, active and visited state.

-->
<body>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=1500&q=80" alt="">
    <div class="content-container">
      <h4>Playing with CSS</h4>
      <ul>
        <li>
          The intial release of CSS was December 17, 1996.
        </li>
        <li>
          The CSS em unit was originally derived from the width of the capital letter <strong>M</strong>.
        </li>
        <li>
          Eric Meyer has a great <a href="https://meyerweb.com/eric/tools/css/reset/" target="_blank">CSS reset snippet</a>. This block of code helps reduce browser inconsistencies, making it easier to style across all browsers.
        </li>
        <li>
          CSS stands for Cascading Style Sheet.
        </li>
        <li>
          <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself" target="_blank">DRY</a> is an acronym in development that stands for <em>Don't Repeat Yourself</em>. Many languages, including CSS, suggest keeping your code DRY.
        </li>
        <li>
          If you want to include a font, you'll likely need to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" target="_blank">@font-face</a>.
        </li>
      </ul>
    </div>
  </div>
<script id="jsbin-javascript">
var hamburger = document.getElementById('menu');
var main = document.getElementById('main');

var isDesktop = function () {
  var w = window,
      d = document,
      e = d.documentElement,
      g = d.getElementsByTagName('body')[0],
      x = w.innerWidth || e.clientWidth || g.clientWidth;

  console.log('The width is ' + x);
  if (x < 961) {
    return false;
  } else {
    return true;
  }
}

hamburger.addEventListener('click', function(){
  main.classList.toggle('isOpened');
});

console.log(isDesktop());
</script>


<script id="jsbin-source-css" type="text/css">html {
  font-family: sans-serif;
  color:#333;
}
.card {
  background:#fff;
  border:1px solid #eaeaea;
  border-radius:5px;
}
.card h4 {
  font-size:1.25em;
}
.card ul {
  margin:0 0 0 -40px;
}
.card ul li {
  line-height:1.56em;
  padding:1em .75em;
}
.card img {
  height:auto;
  object-fit: cover;
  max-height:400px;
  width:100%;
}
.content-container {
  padding:1.5em;
}
/* Answer 1 */
.card ul {
  list-style:none;
}

/* Answer 2 */
.card ul li {
  border-bottom:1px solid #b7b7b7;
}
.card ul li:last-of-type {
  border-bottom:none;
}

/* Answer 3 */
.card ul li:nth-child(odd) {
  background:#f9f9f9;
}

/* Answer 4 */
.card h4 {
  color:#01adc7;
}

/* Answer 5 */
.card {
  box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}

/* Answer 6 */
 .card ul li::before {
  color: #01adc7;
  content: "\2022";
  margin-right:0.25em;
}

/* Answer 7 */
.card a {
  color:#01adc7;
}
.card a:hover {
  color:#0d8fa2;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var hamburger = document.getElementById('menu');
var main = document.getElementById('main');

var isDesktop = function () {
  var w = window,
      d = document,
      e = d.documentElement,
      g = d.getElementsByTagName('body')[0],
      x = w.innerWidth || e.clientWidth || g.clientWidth;

  console.log('The width is ' + x);
  if (x < 961) {
    return false;
  } else {
    return true;
  }
}

hamburger.addEventListener('click', function(){
  main.classList.toggle('isOpened');
});

console.log(isDesktop());</script></body>
</html>

## jsbin.tifahaz.css
html {
  font-family: sans-serif;
  color:#333;
}
.card {
  background:#fff;
  border:1px solid #eaeaea;
  border-radius:5px;
}
.card h4 {
  font-size:1.25em;
}
.card ul {
  margin:0 0 0 -40px;
}
.card ul li {
  line-height:1.56em;
  padding:1em .75em;
}
.card img {
  height:auto;
  object-fit: cover;
  max-height:400px;
  width:100%;
}
.content-container {
  padding:1.5em;
}
/* Answer 1 */
.card ul {
  list-style:none;
}

/* Answer 2 */
.card ul li {
  border-bottom:1px solid #b7b7b7;
}
.card ul li:last-of-type {
  border-bottom:none;
}

/* Answer 3 */
.card ul li:nth-child(odd) {
  background:#f9f9f9;
}

/* Answer 4 */
.card h4 {
  color:#01adc7;
}

/* Answer 5 */
.card {
  box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}

/* Answer 6 */
 .card ul li::before {
  color: #01adc7;
  content: "\2022";
  margin-right:0.25em;
}

/* Answer 7 */
.card a {
  color:#01adc7;
}
.card a:hover {
  color:#0d8fa2;
}

## jsbin.tifahaz.js
var hamburger = document.getElementById('menu');
var main = document.getElementById('main');

var isDesktop = function () {
  var w = window,
      d = document,
      e = d.documentElement,
      g = d.getElementsByTagName('body')[0],
      x = w.innerWidth || e.clientWidth || g.clientWidth;

  console.log('The width is ' + x);
  if (x < 961) {
    return false;
  } else {
    return true;
  }
}

hamburger.addEventListener('click', function(){
  main.classList.toggle('isOpened');
});

console.log(isDesktop());
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Front End Web Development: Lesson 3, CSS the Right Way</title>
	<style id="jsbin-css">
	html {
	font-family: sans-serif;
	color:#333;
	}
	.card {
	background:#fff;
	border:1px solid #eaeaea;
	border-radius:5px;
	}
	.card h4 {
	font-size:1.25em;
	}
	.card ul {
	margin:0 0 0 -40px;
	}
	.card ul li {
	line-height:1.56em;
	padding:1em .75em;
	}
	.card img {
	height:auto;
	object-fit: cover;
	max-height:400px;
	width:100%;
	}
	.content-container {
	padding:1.5em;
	}
	/* Answer 1 */
	.card ul {
	list-style:none;
	}

	/* Answer 2 */
	.card ul li {
	border-bottom:1px solid #b7b7b7;
	}
	.card ul li:last-of-type {
	border-bottom:none;
	}

	/* Answer 3 */
	.card ul li:nth-child(odd) {
	background:#f9f9f9;
	}

	/* Answer 4 */
	.card h4 {
	color:#01adc7;
	}

	/* Answer 5 */
	.card {
	box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
	}

	/* Answer 6 */
	.card ul li::before {
	color: #01adc7;
	content: "\2022";
	margin-right:0.25em;
	}

	/* Answer 7 */
	.card a {
	color:#01adc7;
	}
	.card a:hover {
	color:#0d8fa2;
	}
	</style>
	</head>
	<!--
	1. Remove the bullets from the unordered list.
	2. Add a border to the bottom of all list items except the last one.
	3. Add a background color to every other list item.
	4. Change the color of the h4 to #01adc7;
	5. Let's give it some depth; Add a box-shadow property to the card.
	6. Add blue bullets to the unordered list. Use the same hex color as the heading.
	7. Style the link color to blue, hex code #01adc7. Change all link colors to #01adc7 for their hovered, active and visited state.

	-->
	<body>
	<div class="card">
	<img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=1500&q=80" alt="">
	<div class="content-container">
	<h4>Playing with CSS</h4>
	<ul>
	<li>
	The intial release of CSS was December 17, 1996.
	</li>
	<li>
	The CSS em unit was originally derived from the width of the capital letter <strong>M</strong>.
	</li>
	<li>
	Eric Meyer has a great <a href="https://meyerweb.com/eric/tools/css/reset/" target="_blank">CSS reset snippet</a>. This block of code helps reduce browser inconsistencies, making it easier to style across all browsers.
	</li>
	<li>
	CSS stands for Cascading Style Sheet.
	</li>
	<li>
	<a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself" target="_blank">DRY</a> is an acronym in development that stands for <em>Don't Repeat Yourself</em>. Many languages, including CSS, suggest keeping your code DRY.
	</li>
	<li>
	If you want to include a font, you'll likely need to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" target="_blank">@font-face</a>.
	</li>
	</ul>
	</div>
	</div>
	<script id="jsbin-javascript">
	var hamburger = document.getElementById('menu');
	var main = document.getElementById('main');

	var isDesktop = function () {
	var w = window,
	d = document,
	e = d.documentElement,
	g = d.getElementsByTagName('body')[0],
	x = w.innerWidth \|\| e.clientWidth \|\| g.clientWidth;

	console.log('The width is ' + x);
	if (x < 961) {
	return false;
	} else {
	return true;
	}
	}

	hamburger.addEventListener('click', function(){
	main.classList.toggle('isOpened');
	});

	console.log(isDesktop());
	</script>


	<script id="jsbin-source-css" type="text/css">html {
	font-family: sans-serif;
	color:#333;
	}
	.card {
	background:#fff;
	border:1px solid #eaeaea;
	border-radius:5px;
	}
	.card h4 {
	font-size:1.25em;
	}
	.card ul {
	margin:0 0 0 -40px;
	}
	.card ul li {
	line-height:1.56em;
	padding:1em .75em;
	}
	.card img {
	height:auto;
	object-fit: cover;
	max-height:400px;
	width:100%;
	}
	.content-container {
	padding:1.5em;
	}
	/* Answer 1 */
	.card ul {
	list-style:none;
	}

	/* Answer 2 */
	.card ul li {
	border-bottom:1px solid #b7b7b7;
	}
	.card ul li:last-of-type {
	border-bottom:none;
	}

	/* Answer 3 */
	.card ul li:nth-child(odd) {
	background:#f9f9f9;
	}

	/* Answer 4 */
	.card h4 {
	color:#01adc7;
	}

	/* Answer 5 */
	.card {
	box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
	}

	/* Answer 6 */
	.card ul li::before {
	color: #01adc7;
	content: "\2022";
	margin-right:0.25em;
	}

	/* Answer 7 */
	.card a {
	color:#01adc7;
	}
	.card a:hover {
	color:#0d8fa2;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var hamburger = document.getElementById('menu');
	var main = document.getElementById('main');

	var isDesktop = function () {
	var w = window,
	d = document,
	e = d.documentElement,
	g = d.getElementsByTagName('body')[0],
	x = w.innerWidth \|\| e.clientWidth \|\| g.clientWidth;

	console.log('The width is ' + x);
	if (x < 961) {
	return false;
	} else {
	return true;
	}
	}

	hamburger.addEventListener('click', function(){
	main.classList.toggle('isOpened');
	});

	console.log(isDesktop());</script></body>
	</html>