Commits

Seth Hobson committed 18f1ce3

President CSS assignment complete

  • Participants
  • Parent commits c9e5f73

Comments (0)

Files changed (3)

homework/h5/presidents.html

 <!-- This file produces a grid of images of 4 presidents with their names.  The names are links to
 pages for each of the presidents 
 Adapted from:  Franklyn Turbak
+Modified by: Seth Hobson
 -->
 <head>
 <link rel="stylesheet" href="presidents_style.css">
 <body>
 <!-- this is where you must include the navbar.html file when you remove the navbar div -->
  <div id="navbar">
+  <h2>Famous Presidents</h2>
+  <ul>
+    <li><a href="presidents.html">Home Page</a></li>
+    <li><a href="washington.html">George Washington</a></li>
+    <li><a href="#">John Adams</a></li>
+    <li><a href="#">Thomas Jefferson</a></li>
+    <li><a href="#">James Madison</a></li>
+    <li><a href="http://whitehouse.gov">www.whitehouse.gov</a></li>
+  </ul>
  </div>
  <div id="main">
       <div id="gallery">

homework/h5/presidents_style.css

 /* CSS Document 
 This file defines the styles used by the president.html stylesheet for the CSS Assignment
 Adapted from Franklyn Turbak
+Modified by: Seth Hobson
 */
 
-#gallery {float: left; width: 500px; background-color: yellow; margin-left:auto; margin-right:auto}
-.pres {clear:left;}
-.presImg {float:left;}
-.presImg img {width:100px; height:125px; margin-left:25px; margin-top:25px;}
-.presName {height:25px; padding-left:150px; padding-top:75px; padding-bottom: 50px; font-size:20px;}
-.presName a {color: black; text-decoration:none;} 
+#gallery {
+	float: left; 
+	width: 600px; 
+	/*background-color: yellow;*/ 
+	margin-left:auto; 
+	margin-right:auto
+}
+
+.pres {
+	float:left;
+	width: 40%;
+	margin: 25px;
+}
+
+.presImg {
+	float:left;
+	background-color: aqua;
+}
+
+.presImg img {
+	width:200px; 
+	height:250px; 
+	margin-left:25px; 
+	margin-top:25px;
+	margin-right: 25px;
+	margin-bottom: 25px;
+}
+
+.presName {
+	position: relative;
+	top: -30px;
+	text-align: center;
+	height:25px;
+	font-size:16px;
+}
+
+.presName a {
+	color: blue; 
+	text-decoration:none;
+} 
 
 body  {
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 12pt;
 }
 
-h2,h3 {
+h2, h3 {
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	color: blue; 
-	}
+}
 
-h2 {font-size: 18pt;
-	text-align: center;}
+h2 {
+	font-size: 12pt;
+	text-align: center;
+}
 
-h3 {font-size: 14pt;}
+h3 {
+	font-size: 14pt; 
+}
 
 #main {
- /* you must define this for the assignment */
+	margin-left: 300px;
+}
+
+#main h1 {
+	color: blue;
 }
  
  
 #navbar {
-/*  you must define this for the assignment */
+	float: left;
+	width: 200px;
    
+}
+
+#navbar h2 {
+	color: blue;
+	font-size: 12pt;
+	padding-left: 20px;
+}
+
+#navbar ul {
+	list-style-type: none;
+	padding-left: 20px;
+}
+
+#navbar ul li {
+	margin-bottom: 25px;
 }

homework/h5/washington.html

+<!DOCTYPE html>
+<html>
+<!-- This file produces a grid of images of 4 presidents with their names.  The names are links to
+pages for each of the presidents 
+Adapted from:  Franklyn Turbak
+Modified by:  Seth Hobson
+-->
+<head>
+<link rel="stylesheet" href="presidents_style.css">
+<meta charset=UTF-8">
+<title>George Washington</title>
+</head>
+<body>
+<!-- this is where you must include the navbar.html file when you remove the navbar div -->
+ <div id="navbar">
+  <h2>Famous Presidents</h2>
+  <ul>
+    <li><a href="presidents.html">Home Page</a></li>
+    <li><a href="washington.html">George Washington</a></li>
+    <li><a href="#">John Adams</a></li>
+    <li><a href="#">Thomas Jefferson</a></li>
+    <li><a href="#">James Madison</a></li>
+    <li><a href="http://whitehouse.gov">www.whitehouse.gov</a></li>
+  </ul>
+  </div>
+  <div id="main">
+    <h1>George Washington</h1>
+    <p>George Washington was one of the Founding Fathers of the United States, serving as the commander-in-chief of the Continental Army during the American Revolutionary War and later as the new republic's first President. - Wikipedia</p> 
+  </div>
+
+</body>
+</html> 
+