michelleroth/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>my game</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <link rel="stylesheet" href="main.css">
</head>
<body>

  <div class="container">
    <h1>Animal Game</h1>

    <form id="js-xxx">
      <label for="xxxx">Click to Play!</label>

      <button type="submit">Get Started</button>
    </form>

<div class="question-list">
  <div class="question" id="first-question">
    <p>What animal is fluffier?<p>

    <input type="checkbox"> puppy </input>
    <input answer type="checkbox"> elephant </input>

    <button type="button"> Submit </button>
  </div>

  <div class="question">
     <p>What noise does a pig make?<p>
     <input type="checkbox"> oink </input>
    <input answer type="checkbox"> meow </input>

<button type="button"> Submit </button>
  </div>

  </div>
  <div class="question">
      <p>What color is a gold fish<p>
    <input type="checkbox"> puppy </input>
    <input answer type="checkbox"> elephant </input>

<button type="button"> Submit </button>
  </div>

<div class="question">
      <p>Which of the following animals flies<p>
    <input type="checkbox"> dolphin </input>
    <input answer type="checkbox"> eagle </input>

<button type="button"> Submit </button>
</div>

  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
   </div>
   </div>
 </div>
</body>
</html>

 <!--  <div class="container">
    <h1>animal quiz</h1>

<p class="questions">Question</p>

	<ul class="answers">
		<!-- <input type="quiz" value="a" id="q1a"><label for="q1a">red</label><br/>
		<input type="quiz" value="b" id="q1b"><label for="q1b">gold</label><br/>
		<input type="quiz" value="c" id="q1c"><label for="q1c">blue</label><br/>
	</ul>


<!-- <p class="question">2. What noise does a pig make?</p>

	<ul class="answers">
		<input type="quiz" name="q2" value="a" id="q2a"><label for="q2a">rawer</label><br/>
		<input type="quiz" name="q2" value="b" id="q2b"><label for="q2b">hello</label><br/>
		<input type="quiz" name="q2" value="c" id="q2c"><label for="q2c">oink</label><br/>
	</ul>

<p class="question">3. What temperature does a polar bear like?</p>

	<ul class="answers">
		<input type="quiz" name="q3" value="a" id="q3a"><label for="q3a">tropical</label><br/>           <input type="quiz" name="q3" value="b" id="q3b"><label for="q3b">warm</label><br/>
		<input type="quiz" name="q3" value="c" id="q3c"><label for="q3c">freezing</label><br/>
	</ul>

<p class="question">4. What do you call a baby seal?</p>

	<ul class="answers">
		<input type="quiz" name="q4" value="a" id="q4a"><label for="q4a">kitten</label><br/>
		<input type="quiz" name="q4" value="b" id="q4b"><label for="q4b">pup</label><br/>
		<input type="quiz" name="q4" value="c" id="q4c"><label for="q4c">baby</label><br/>
	</ul>

<p class="question">5. How much do koalas sleep</p>

	<ul class="answers">
		<input type="quiz" name="q5" value="a" id="q5a"><label for="q5a">23 hours a day</label><br/>
		<input type="quiz" name="q5" value="b" id="q5b"><label for="q5b">5 hours a day</label><br/>
		<input type="quiz" name="q5" value="c" id="q5c"><label for="q5c">never</label><br/>
	</ul>
 -->

<!-- //<br/> -->
	<!-- <div id="results">
		show me the answers
</div>

	<div id="category1"> <p>
			<strong>Question 1:</strong> The correct answer is the <strong>Answer 2</strong>.</p>
	</div>

	<div id="category2"> <p>
		<strong>Question 2:</strong> The correct answer is <strong>Answer 3</strong>.</p>
	</div>

	<div id="category3"> <p>
		<strong>Question 3:</strong> The correct answer is <strong>Answer 3</strong>.</p>
	</div>

	<div id="category4"> <p>
		<strong>Question 4:</strong> The correct answer is <strong>Answer 2</strong>.</p>
	</div>

	<div id="category5"> <p>

## main.css
* {
  box-sizing: border-box;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  background-color: #b3cbf2;
  margin-bottom: 20px;
  border: 1px solid grey;
  padding: 20px;
}

main {
  padding: 30px;
  background-color: white;
}


h1, h2 {
  font-family: 'Lato';
}

p {
  font-family: 'Cabin';
}

hr {
  width: 50%;
  margin-left: 0;
}


body {
  font-family: 'Roboto', sans-serif;
  padding: 60px;
}

button:hover {
  cursor: pointer;
  padding: 5px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid grey;
  padding: 40px;
  background-color: aquamarine;
  text-orientation: 100px;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>my game</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

	<link rel="stylesheet" href="main.css">
	</head>
	<body>

	<div class="container">
	<h1>Animal Game</h1>

	<form id="js-xxx">
	<label for="xxxx">Click to Play!</label>

	<button type="submit">Get Started</button>
	</form>

	<div class="question-list">
	<div class="question" id="first-question">
	<p>What animal is fluffier?<p>

	<input type="checkbox"> puppy </input>
	<input answer type="checkbox"> elephant </input>

	<button type="button"> Submit </button>
	</div>

	<div class="question">
	<p>What noise does a pig make?<p>
	<input type="checkbox"> oink </input>
	<input answer type="checkbox"> meow </input>

	<button type="button"> Submit </button>
	</div>

	</div>
	<div class="question">
	<p>What color is a gold fish<p>
	<input type="checkbox"> puppy </input>
	<input answer type="checkbox"> elephant </input>

	<button type="button"> Submit </button>
	</div>

	<div class="question">
	<p>Which of the following animals flies<p>
	<input type="checkbox"> dolphin </input>
	<input answer type="checkbox"> eagle </input>

	<button type="button"> Submit </button>
	</div>

	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
	<script type="text/javascript" src="app.js"></script>
	</div>
	</div>
	</div>
	</body>
	</html>

	<!-- <div class="container">
	<h1>animal quiz</h1>

	<p class="questions">Question</p>

	<ul class="answers">
	<!-- <input type="quiz" value="a" id="q1a"><label for="q1a">red</label><br/>
	<input type="quiz" value="b" id="q1b"><label for="q1b">gold</label><br/>
	<input type="quiz" value="c" id="q1c"><label for="q1c">blue</label><br/>
	</ul>



	<!-- <p class="question">2. What noise does a pig make?</p>

	<ul class="answers">
	<input type="quiz" name="q2" value="a" id="q2a"><label for="q2a">rawer</label><br/>
	<input type="quiz" name="q2" value="b" id="q2b"><label for="q2b">hello</label><br/>
	<input type="quiz" name="q2" value="c" id="q2c"><label for="q2c">oink</label><br/>
	</ul>

	<p class="question">3. What temperature does a polar bear like?</p>

	<ul class="answers">
	<input type="quiz" name="q3" value="a" id="q3a"><label for="q3a">tropical</label><br/> <input type="quiz" name="q3" value="b" id="q3b"><label for="q3b">warm</label><br/>
	<input type="quiz" name="q3" value="c" id="q3c"><label for="q3c">freezing</label><br/>
	</ul>

	<p class="question">4. What do you call a baby seal?</p>

	<ul class="answers">
	<input type="quiz" name="q4" value="a" id="q4a"><label for="q4a">kitten</label><br/>
	<input type="quiz" name="q4" value="b" id="q4b"><label for="q4b">pup</label><br/>
	<input type="quiz" name="q4" value="c" id="q4c"><label for="q4c">baby</label><br/>
	</ul>

	<p class="question">5. How much do koalas sleep</p>

	<ul class="answers">
	<input type="quiz" name="q5" value="a" id="q5a"><label for="q5a">23 hours a day</label><br/>
	<input type="quiz" name="q5" value="b" id="q5b"><label for="q5b">5 hours a day</label><br/>
	<input type="quiz" name="q5" value="c" id="q5c"><label for="q5c">never</label><br/>
	</ul>
	-->

	<!-- //<br/> -->
	<!-- <div id="results">
	show me the answers
	</div>

	<div id="category1"> <p>
	<strong>Question 1:</strong> The correct answer is the <strong>Answer 2</strong>.</p>
	</div>

	<div id="category2"> <p>
	<strong>Question 2:</strong> The correct answer is <strong>Answer 3</strong>.</p>
	</div>

	<div id="category3"> <p>
	<strong>Question 3:</strong> The correct answer is <strong>Answer 3</strong>.</p>
	</div>

	<div id="category4"> <p>
	<strong>Question 4:</strong> The correct answer is <strong>Answer 2</strong>.</p>
	</div>

	<div id="category5"> <p>
	* {
	box-sizing: border-box;
	}

	.container {
	max-width: 600px;
	margin: 0 auto;
	background-color: #b3cbf2;
	margin-bottom: 20px;
	border: 1px solid grey;
	padding: 20px;
	}

	main {
	padding: 30px;
	background-color: white;
	}


	h1, h2 {
	font-family: 'Lato';
	}

	p {
	font-family: 'Cabin';
	}

	hr {
	width: 50%;
	margin-left: 0;
	}


	body {
	font-family: 'Roboto', sans-serif;
	padding: 60px;
	}

	button:hover {
	cursor: pointer;
	padding: 5px;
	}

	.container {
	max-width: 600px;
	margin: 0 auto;
	border: 1px solid grey;
	padding: 40px;
	background-color: aquamarine;
	text-orientation: 100px;
	}