cbscribe/grade7.html

## grade7.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Mr. Bradfield's Classes</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!--navigation bar-->
        <ul class="nav">
          <li class="nav"><a href="index.html">Home</a></li>
          <li class="nav"><a class="active" href="grade7.html">Grade 7</a></li>
          <li class="nav"><a href="grade8.html">Grade 8</a></li>
          <li class="nav"><a href="apcsp.html">AP CSP</a></li>
        </ul>
        <!--end navigation bar-->
        <h1>Welcome to 7th Grade at Science Academy!</h1>
        <p>Here are some of the things we learn about in my 7th grade class:</p>
        <img style="float: right;" src="arduino.png" width="150">
        <p>
            <ul>
                <li>Electronics</li>
                <li>3D modeling</li>
                <li>Computer programming</li>
                <li>AI and Machine learning</li>
            </ul>
        </p>
        <form action="https://www.google.com/search">
            <input type="text" name="q">
            <input type="submit">
        </form>
        <h2>Upcoming Dates</h2>
        <table>
            <tr>
                <th>Assignment</th>
                <th>Due Date</th>
            </tr>
            <tr>
                <td>Homepage Project</td>
                <td>September 27</td>
            </tr>
            <tr>
                <td>Cell Model</td>
                <td>Oct 3</td>
            </tr>
        </table>
    </body>
</html>

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Mr. Bradfield's Classes</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!--navigation bar-->
        <ul class="nav">
          <li class="nav"><a class="active" href="index.html">Home</a></li>
          <li class="nav"><a href="grade7.html">Grade 7</a></li>
          <li class="nav"><a href="grade8.html">Grade 8</a></li>
          <li class="nav"><a href="apcsp.html">AP CSP</a></li>
        </ul>
        <h1>Welcome</h1>
        <p>Here's an example of a quote from Wikipedia:</p>
        <blockquote cite="https://en.wikipedia.org/wiki/Cat">
The cat (Felis catus) is a domestic species of small carnivorous mammal.
</blockquote>
        <p>Choose a class above.</p>
        <p>Watch this robot walking:</p>
        <div class="vid"><iframe width="280" height="157" src="https://www.youtube.com/embed/B186EfBtzvU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </body>
</html>

## style.css
@import "https://fonts.googleapis.com/css?family=Acme";

body {
    background: #eeeeee;
    color: #303841;
    font-family: Arial, sans-serif;
}

h1, h2 {
    font-family: 'Acme', Arial, sans-serif;
    color: #30475e;
}

ul.nav {
    font-family: 'Acme', Arial, sans-serif;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #303841;
}

li.nav {
  float: left;
  border-right: 1px solid #bbb;
}

li.nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

 /*Change the link color to #111 (black) on hover */
li.nav a:hover {
  background-color: #111;
}

.active {
  background-color: #f05454;
}

th {
  background-color: #f05454;
  color: white;
}

th, td {
    padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

span {
  background-color: black;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Mr. Bradfield's Classes</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<!--navigation bar-->
	<ul class="nav">
	<li class="nav"><a href="index.html">Home</a></li>
	<li class="nav"><a class="active" href="grade7.html">Grade 7</a></li>
	<li class="nav"><a href="grade8.html">Grade 8</a></li>
	<li class="nav"><a href="apcsp.html">AP CSP</a></li>
	</ul>
	<!--end navigation bar-->
	<h1>Welcome to 7th Grade at Science Academy!</h1>
	<p>Here are some of the things we learn about in my 7th grade class:</p>
	<img style="float: right;" src="arduino.png" width="150">
	<p>
	<ul>
	<li>Electronics</li>
	<li>3D modeling</li>
	<li>Computer programming</li>
	<li>AI and Machine learning</li>
	</ul>
	</p>
	<form action="https://www.google.com/search">
	<input type="text" name="q">
	<input type="submit">
	</form>
	<h2>Upcoming Dates</h2>
	<table>
	<tr>
	<th>Assignment</th>
	<th>Due Date</th>
	</tr>
	<tr>
	<td>Homepage Project</td>
	<td>September 27</td>
	</tr>
	<tr>
	<td>Cell Model</td>
	<td>Oct 3</td>
	</tr>
	</table>
	</body>
	</html>
	@import "https://fonts.googleapis.com/css?family=Acme";

	body {
	background: #eeeeee;
	color: #303841;
	font-family: Arial, sans-serif;
	}

	h1, h2 {
	font-family: 'Acme', Arial, sans-serif;
	color: #30475e;
	}

	ul.nav {
	font-family: 'Acme', Arial, sans-serif;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #303841;
	}

	li.nav {
	float: left;
	border-right: 1px solid #bbb;
	}

	li.nav a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	}

	/Change the link color to #111 (black) on hover /
	li.nav a:hover {
	background-color: #111;
	}

	.active {
	background-color: #f05454;
	}

	th {
	background-color: #f05454;
	color: white;
	}

	th, td {
	padding: 10px;
	text-align: left;
	border-bottom: 1px solid #ddd;
	}

	span {
	background-color: black;
	}