Created
March 24, 2021 19:04
-
-
Save cbscribe/9ed92de29e263c1d6d6c918389986751 to your computer and use it in GitHub Desktop.
HTML Homepage Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
<h2>Upcoming Dates</h2> | |
<table> | |
<tr> | |
<th>Assignment</th> | |
<th>Due Date</th> | |
</tr> | |
<tr> | |
<td>Teachable Machine Project</td> | |
<td>March 24</td> | |
</tr> | |
<tr> | |
<td>Teachable Machine Document</td> | |
<td>March 26</td> | |
</tr> | |
</table> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
<blockquote cite="https://en.wikipedia.org/wiki/Cat"> | |
The cat (Felis catus) is a domestic species of small carnivorous mammal. | |
</blockquote> | |
<p><span>Choose a class above.</span></p> | |
<p>Watch this robot walking:</p> | |
<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> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment