diff --git a/.gitignore b/.gitignore
index c7be0ac..c997f86 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,4 @@
 >>>>>>> Stashed changes
 /Assignments/lab6.2_CalebFontenot/nbproject/private/
 /Assignments/MP04_CalebFontenot/nbproject/private/
+/Assignments/lab7_CalebFontenot/nbproject/private/
diff --git a/Assignments/lab7_CalebFontenot/.bowerrc b/Assignments/lab7_CalebFontenot/.bowerrc
new file mode 100644
index 0000000..0ba26f2
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/.bowerrc
@@ -0,0 +1,3 @@
+{
+    "directory": "public_html/bower_components"
+}
diff --git a/Assignments/lab7_CalebFontenot/Gruntfile.js b/Assignments/lab7_CalebFontenot/Gruntfile.js
new file mode 100644
index 0000000..496183b
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/Gruntfile.js
@@ -0,0 +1,9 @@
+/* 
+ * Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
+ * Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/Gruntfile.js to edit this template
+ */
+module.exports = function (grunt) {
+    // Project configuration.
+    grunt.initConfig({
+    });
+};
diff --git a/Assignments/lab7_CalebFontenot/bower.json b/Assignments/lab7_CalebFontenot/bower.json
new file mode 100644
index 0000000..def611e
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/bower.json
@@ -0,0 +1,13 @@
+{
+    "name": "lab7_CalebFontenot",
+    "version": "1.0.0",
+    "main": "path/to/main.css",
+    "ignore": [
+        ".jshintrc",
+        "**/*.txt"
+    ],
+    "dependencies": {
+    },
+    "devDependencies": {
+    }
+}
diff --git a/Assignments/lab7_CalebFontenot/gulpfile.js b/Assignments/lab7_CalebFontenot/gulpfile.js
new file mode 100644
index 0000000..eccfb02
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/gulpfile.js
@@ -0,0 +1,10 @@
+/* 
+ * Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
+ * Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/gulpfile.js to edit this template
+ */
+
+var gulp = require('gulp');
+
+gulp.task('default', function () {
+    // place code for your default task here
+});
diff --git a/Assignments/lab7_CalebFontenot/nbproject/project.properties b/Assignments/lab7_CalebFontenot/nbproject/project.properties
new file mode 100644
index 0000000..4b5d7fb
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/nbproject/project.properties
@@ -0,0 +1,5 @@
+file.reference.lab7_CalebFontenot-public_html=public_html
+file.reference.lab7_CalebFontenot-test=test
+files.encoding=UTF-8
+site.root.folder=${file.reference.lab7_CalebFontenot-public_html}
+test.folder=${file.reference.lab7_CalebFontenot-test}
diff --git a/Assignments/lab7_CalebFontenot/nbproject/project.xml b/Assignments/lab7_CalebFontenot/nbproject/project.xml
new file mode 100644
index 0000000..64cfcc5
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/nbproject/project.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://www.netbeans.org/ns/project/1">
+    <type>org.netbeans.modules.web.clientproject</type>
+    <configuration>
+        <data xmlns="http://www.netbeans.org/ns/clientside-project/1">
+            <name>lab7_CalebFontenot</name>
+        </data>
+    </configuration>
+</project>
diff --git a/Assignments/lab7_CalebFontenot/package.json b/Assignments/lab7_CalebFontenot/package.json
new file mode 100644
index 0000000..66cad02
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/package.json
@@ -0,0 +1,8 @@
+{
+    "name": "lab7_CalebFontenot",
+    "version": "1.0.0",
+    "keywords": ["util", "functional", "server", "client", "browser"],
+    "author": "caleb",
+    "contributors": [],
+    "dependencies": {}
+}
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.1/box1.html b/Assignments/lab7_CalebFontenot/public_html/7.1/box1.html
new file mode 100644
index 0000000..2d635bf
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.1/box1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>CSS</title>
+        <meta charset="utf-8">
+        <style>
+            .div1 {
+                width:200px;
+                height:200px;
+                background-color:#D1ECFF;
+                border: 3px dashed #000000;
+                padding:5px;
+            }
+            .div2 {
+                width:100px;
+                height:100px;
+                background-color:#FFFFFF;
+                border: 3px ridge #000000;
+                padding:5px;
+                margin:10px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="div1">
+            This is the first box.
+        </div>
+        <div class="div2">
+            This is the second box.
+        </div>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.1/box2.html b/Assignments/lab7_CalebFontenot/public_html/7.1/box2.html
new file mode 100644
index 0000000..a048af3
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.1/box2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>CSS</title>
+        <meta charset="utf-8">
+        <style>
+            .div1 {
+                width:200px;
+                height:200px;
+                background-color:#D1ECFF;
+                border: 3px dashed #000000;
+                padding:5px;
+            }
+            .div2 {
+                width:100px;
+                height:100px;
+                background-color:#FFFFFF;
+                border: 3px ridge #000000;
+                padding:5px;
+                margin:5px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="div1">
+            This is the first box.
+        <div class="div2">
+            This is the second box.
+        </div>
+</div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.10/beached.jpg b/Assignments/lab7_CalebFontenot/public_html/7.10/beached.jpg
new file mode 100644
index 0000000..017c0c9
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.10/beached.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.10/index.html b/Assignments/lab7_CalebFontenot/public_html/7.10/index.html
new file mode 100644
index 0000000..23b348e
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.10/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Kayak Adventure</title>
+<style>
+.hero { position: relative; }
+.hero h1 { position: absolute; 
+     z-index: 999;   
+     top: 40%;
+     left: 10%; 
+     color: rgba(255, 255, 255, 0.6); 
+     font-family: Georgia, serif;
+	 width: 40%;
+}
+</style>
+</head> 
+<body>
+<div class="hero">
+  <h1>Your next adventure is only a paddle away...</h1>
+  <img src="beached.jpg" alt="kayaks on the beach" width="900" height="578">    
+</div>
+
+</body>
+</html>                            
\ No newline at end of file
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.11/index.html b/Assignments/lab7_CalebFontenot/public_html/7.11/index.html
new file mode 100644
index 0000000..f7c7619
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.11/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body {font-family: Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+}  
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 155px;
+		background-image: url(lighthouselogo.jpg); 
+		background-repeat: no-repeat;
+		height: 130px;
+		margin-top: 40px;
+}
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+nav { position: fixed; top: 0; left: 0; 
+     height: 40px;
+	 min-width: 40em;
+	 width: 100%;
+     background-color: #B3C7E6;
+	 z-index: 9999;
+}
+nav ul { list-style-type: none;
+         text-align: right;
+		 font-size: 1.5em;
+		 margin: 5px;
+         padding-right: 10%;		 
+}
+nav li { display: inline; }
+nav a { text-decoration: none;
+        padding-left: 10px;
+		padding-right: 10px;
+}
+main { padding: 20px 20px 0 20px; 
+           background-color: #ffffff;
+           color: #000000;
+		   display: block;
+} 
+main img { margin: 10px;
+             float: right;
+}
+
+footer {font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom:20px;
+}
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+	<ul>
+	  <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	 </ul>
+  </nav>
+  <main> 
+      <img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  </main>
+  <footer>Copyright &copy; 
+  </footer>
+</div>
+</body>
+</html>
+
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.11/lighthouseisland.jpg b/Assignments/lab7_CalebFontenot/public_html/7.11/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.11/lighthouseisland.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.11/lighthouselogo.jpg b/Assignments/lab7_CalebFontenot/public_html/7.11/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.11/lighthouselogo.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.12/beached.jpg b/Assignments/lab7_CalebFontenot/public_html/7.12/beached.jpg
new file mode 100644
index 0000000..017c0c9
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.12/beached.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.12/index.html b/Assignments/lab7_CalebFontenot/public_html/7.12/index.html
new file mode 100644
index 0000000..8892ce0
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.12/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>KayakDoorCounty.net</title>
+<meta charset="utf-8">
+<style> 
+body { font-family: Tahoma, Verdana, Arial, sans-serif; 
+       margin: 0; padding: 0; 
+}
+.hero { 
+    background-image: url(beached.jpg); 
+    min-height: 100vh;  
+    background-repeat: no-repeat; 
+    background-size: cover;  
+}	
+.tourshero { 
+    background-image: url(kayaks.jpg); 
+    min-height: 100vh;
+    background-repeat: no-repeat; 
+    background-size: cover;  
+}
+.rentalshero { 
+    background-image: url(rentals.jpg); 
+    min-height: 100vh; 
+    background-repeat: no-repeat; 
+    background-size: cover; 
+}
+.contacthero { 
+    background-image: url(lonekayak.jpg); 
+    min-height: 100vh;  
+    background-repeat: no-repeat; 
+    background-size: cover; 
+}
+nav { z-index:9999;
+      position: fixed;
+	  top: 0;
+	  left: 0;
+	  padding: .5em; 
+	  height: 40px;
+	  background:rgba(25,25, 25, 0.70);
+	  width: 100%;
+	  font-size: 120%;
+	  font-weight: bold;
+	  min-width: 900px;    	  }
+nav ul { list-style-type: none; 
+         margin: 5px; }
+nav ul li { display: inline; padding-left: 2em; padding-right: 2em; }
+nav a { text-decoration:none; }
+nav a:link { color: #EAEAEA; }
+nav a:visited { color: #FFF; }
+nav a:hover { color: #FDA27F; }
+h1 { height: 100px; 
+     padding-top: 2em; 
+	 text-align: center;
+      background:rgba(255, 255, 255, 0.80);
+     	}
+.space  { height: 20vh; }
+#tours, #rentals, #contact {  background-color: #FFF;
+						  width: 60%;
+						  padding-left: 6em;
+						  padding-top: 70px;
+						  padding-bottom: 2em;
+}
+footer {   background:rgba(25,25, 25, 0.90);
+         width: 100%;
+         font-size: 90%;
+         text-align: center;	
+         color: #EAEAEA;
+		 position: fixed;
+		 bottom: 0;
+		}	
+footer a { text-decoration: none;
+           color: #EAEAEA; }		
+</style> 
+</head> 
+<body> 
+<nav>
+    <ul>
+     <li><a href="#home">KayakDoorCounty.net</a></li>
+     <li><a href="#tours">Tours</a></li>
+     <li><a href="#rentals">Rentals</a></li>
+     <li><a href="#contact">Contact</a></li>
+   </ul>
+</nav>
+
+
+<!-- Home Page -->
+<section id="home" class="hero" >
+<div class="space"> </div>
+<h1><a href="#home"><img src="kayakdc.gif" alt="KayakDoorCounty.net"></a></h1> 
+</section>
+
+<!-- Tours Page -->
+<section id="tours"> 
+<h2>Tours by KayakDoorCounty.net</h2>
+<h2>Your next adventure is only a paddle away....</h2> 
+<p>Take a guided kayak tour while you explore the scenic shoreline of Door County<p>
+<h3>Featured tours this week:</h3>
+<ul>
+  <li>Cana Island</li>
+  <li>Mink River</li>
+  <li>Europe Lake</li>
+</ul>
+</section> 
+<div class="tourshero"></div>
+<!-- Rentals Page -->
+<section id="rentals"> 
+<h2>Rent Kayaks from KayakDoorCounty.net</h2>
+<h3>Be Your Own Guide.....</h3> 
+<p>Half day, full day, and week-long rentals available.<br><br>
+Rent a kayak at one of these three scenic locations:</p>
+<ul>
+<li>Eagle Harbor</li>
+<li>Sister Bay</li>
+<li>Garrett Bay</li>
+</ul>
+</section>
+<div class="rentalshero"></div>
+<!-- Contact Page -->
+<section  id="contact"> 
+<h2>Contact KayakDoorCounty.net</h2>
+<h3>Call, Text, or Email</h3>
+<p>A trained kayak guide will answer all your questions and get you out on the water!<br>
+<p>Call to reserve your kayak today!</p>
+555-555-5555<br><br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</section>
+<div class="contacthero"></div>
+<footer>
+KayakDoorCounty.net<br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</footer>
+</body> 
+</html> 
\ No newline at end of file
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.12/index1.html b/Assignments/lab7_CalebFontenot/public_html/7.12/index1.html
new file mode 100644
index 0000000..9fa742a
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.12/index1.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>KayakDoorCounty.net</title>
+<meta charset="utf-8">
+<style> 
+body { font-family: Tahoma, Verdana, Arial, sans-serif; 
+       margin: 0; padding: 0; 
+}
+.hero { 
+    background-image: url(beached.jpg); 
+    min-height: 100vh;  
+    background-repeat: no-repeat; 
+    background-size: cover;  
+}	
+.tourshero { 
+    background-image: url(kayaks.jpg); 
+    min-height: 100vh;
+    background-repeat: no-repeat; 
+    background-size: cover;  
+}
+.rentalshero { 
+    background-image: url(rentals.jpg); 
+    min-height: 100vh; 
+    background-repeat: no-repeat; 
+    background-size: cover; 
+}
+ .contacthero { 
+    background-image: url(lonekayak.jpg); 
+    min-height: 100vh;  
+    background-repeat: no-repeat; 
+    background-size: cover; 
+}
+nav { z-index:9999;
+      position: fixed;
+	  top: 0;
+	  left: 0;
+	  padding: .5em; 
+	  height: 40px;
+	  background:rgba(25,25, 25, 0.70);
+	  width: 100%;
+	  font-size: 120%;
+	  font-weight: bold;
+	  min-width: 900px;    	  }
+nav ul { list-style-type: none; 
+         margin: 5px; }
+nav ul li { display: inline; padding-left: 2em; padding-right: 2em; }
+nav a { text-decoration:none; }
+nav a:link { color: #EAEAEA; }
+nav a:visited { color: #FFF; }
+nav a:hover { color: #FDA27F; }
+h1 { height: 100px; 
+     padding-top: 2em; 
+	 text-align: center;
+      background:rgba(255, 255, 255, 0.80);
+     	}
+.space  { height: 20vh; }
+#tours, #rentals, #contact {  background-color: #FFF;
+						  width: 60%;
+						  padding-left: 6em;
+						  padding-top: 70px;
+						  padding-bottom: 2em;
+}
+footer {   background:rgba(25,25, 25, 0.90);
+         width: 100%;
+         font-size: 90%;
+         text-align: center;	
+         color: #EAEAEA;
+		}	
+footer a { text-decoration: none;
+           color: #EAEAEA; }		
+</style> 
+</head> 
+<body> 
+<nav>
+    <ul>
+     <li><a href="#home">KayakDoorCounty.net</a></li>
+     <li><a href="#tours">Tours</a></li>
+     <li><a href="#rentals">Rentals</a></li>
+     <li><a href="#contact">Contact</a></li>
+   </ul>
+</nav>
+
+
+<!-- Home Page -->
+<section id="home" class="hero" >
+<div class="space"> </div>
+<h1><a href="#home"><img src="kayakdc.gif" alt="KayakDoorCounty.net"></a></h1> 
+</section>
+
+<!-- Tours Page -->
+<section id="tours"> 
+<h2>Tours by KayakDoorCounty.net</h2>
+<h2>Your next adventure is only a paddle away....</h2> 
+<p>Take a guided kayak tour while you explore the scenic shoreline of Door County<p>
+<h3>Featured tours this week:</h3>
+<ul>
+  <li>Cana Island</li>
+  <li>Mink River</li>
+  <li>Europe Lake</li>
+</ul>
+</section> 
+<div class="tourshero"></div>
+<!-- Rentals Page -->
+<section id="rentals"> 
+<h2>Rent Kayaks from KayakDoorCounty.net</h2>
+<h3>Be Your Own Guide.....</h3> 
+<p>Half day, full day, and week-long rentals available.<br><br>
+Rent a kayak at one of these three scenic locations:</p>
+<ul>
+<li>Eagle Harbor</li>
+<li>Sister Bay</li>
+<li>Garrett Bay</li>
+</ul>
+</section>
+<div class="rentalshero"></div>
+<!-- Contact Page -->
+<section  id="contact"> 
+<h2>Contact KayakDoorCounty.net</h2>
+<h3>Call, Text, or Email</h3>
+<p>A trained kayak guide will answer all your questions and get you out on the water!<br>
+<p>Call to reserve your kayak today!</p>
+555-555-5555<br><br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</section>
+<div class="contacthero"></div>
+<footer>
+KayakDoorCounty.net<br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</footer>
+</body> 
+</html> 
\ No newline at end of file
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.12/index2.html b/Assignments/lab7_CalebFontenot/public_html/7.12/index2.html
new file mode 100644
index 0000000..26d7543
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.12/index2.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<!-- This is the parallax scrolling single page webste -->
+<html lang="en">
+<head>
+<title>KayakDoorCounty.net</title>
+<meta charset="utf-8">
+<style> 
+body { font-family: Tahoma, Verdana, Arial, sans-serif; 
+       margin: 0; padding: 0;
+       }
+.hero { 
+    background-image: url(beached.jpg); 
+    min-height: 100vh;  
+    background-attachment: fixed; 
+    background-position: center; 
+    background-repeat: no-repeat; 
+    background-size: cover; 
+	padding: 0;
+}
+.tourshero { 
+    background-image: url(kayaks.jpg); 
+    min-height: 100vh;
+    background-attachment: fixed; 
+    background-position: center; 
+    background-repeat: no-repeat; 
+    background-size: cover; 
+ }
+.rentalshero { 
+    background-image: url(rentals.jpg); 
+    min-height: 100vh; 
+    background-attachment: fixed; 
+    background-position: center; 
+    background-repeat: no-repeat; 
+    background-size: cover; 
+ }
+ .contacthero { 
+    background-image: url(lonekayak.jpg); 
+    min-height: 100vh;  
+    background-attachment: fixed; 
+    background-position: center; 
+    background-repeat: no-repeat; 
+    background-size: cover; 
+ }
+ 
+nav { z-index:9999;
+      position: fixed;
+	  top: 0;
+	  left: 0;
+	  padding: .5em;
+	  height: 40px;
+	  background:rgba(25,25, 25, 0.70);
+	  width: 100%;
+	  font-size: 120%;
+	  font-weight: bold;
+	  min-width: 900px;
+ }
+nav ul { list-style-type: none; 
+         margin: 5px; }
+nav ul li { display: inline; padding-left: 2em; padding-right: 2em; }
+nav a { text-decoration:none; }
+nav a:link { color: #EAEAEA; }
+nav a:visited { color: #FFF; }
+nav a:hover { color: #FDA27F; }
+h1 { height: 100px; 
+     padding-top: 2em; 
+	 text-align: center;
+     background:rgba(255, 255, 255, 0.80);
+}
+.space {height: 20vh; }
+#tours, #rentals, #contact {  background-color: #FFF;
+		                  width: 60%;
+						  padding-left: 6em;
+						  padding-top: 70px;
+						  padding-bottom: 2em; }
+footer {   background:rgba(25,25, 25, 0.90);
+         width: 100%;
+         font-size: 90%;
+         text-align: center;	
+         color: #EAEAEA; 
+
+		 position: fixed;
+         bottom: 0;}	
+footer a { text-decoration: none;  
+          color: #EAEAEA; }		
+</style> 
+</head> 
+<body> 
+<nav>
+  <ul>
+    <li><a href="#home">KayakDoorCounty.net</a></li>
+    <li><a href="#tours">Tours</a></li>
+    <li><a href="#rentals">Rentals</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ul>
+</nav>
+
+<!-- Home Page -->
+<section id="home" class="hero">
+<div  class="space"> </div> 
+<h1><a href="#home"><img src="kayakdc.gif" alt="KayakDoorCounty.net"></a></h1> 
+</section>
+
+
+<!-- Tours Page -->
+<section id="tours"> 
+<h2>Tours by KayakDoorCounty.net</h2>
+<h2>Your next adventure is only a paddle away....</h2> 
+<p>Take a guided kayak tour while you explore the scenic shoreline of Door County<p>
+<h3>Featured tours this week:</h3>
+<ul>
+  <li>Cana Island</li>
+  <li>Mink River</li>
+  <li>Europe Lake</li>
+</ul>
+</section> 
+<div class="tourshero"></div>
+
+<!-- Rentals Page -->
+<section id="rentals"> 
+<h2>Rent Kayaks from KayakDoorCounty.net</h2>
+<h3>Be Your Own Guide.....</h3> 
+<p>Half day, full day, and week-long rentals available.<br><br>
+Rent a kayak at one of these three scenic locations:</p>
+<ul>
+<li>Eagle Harbor</li>
+<li>Sister Bay</li>
+<li>Garrett Bay</li>
+</ul>
+</section>
+<div class="rentalshero"></div>
+<!-- Contact Page -->
+<section id="contact"> 
+<h2>Contact KayakDoorCounty.net</h2>
+<h3>Call, Text, or Email</h3>
+<p>A trained kayak guide will answer all your questions and get you out on the water!<br>
+Call to reserve your kayak today!</p>
+555-555-5555<br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</section>
+<div class="contacthero"></div>
+<footer>
+KayakDoorCounty.net<br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</footer>
+</body> 
+</html> 
\ No newline at end of file
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.12/kayakdc.gif b/Assignments/lab7_CalebFontenot/public_html/7.12/kayakdc.gif
new file mode 100644
index 0000000..8fd7564
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.12/kayakdc.gif differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.12/kayaks.jpg b/Assignments/lab7_CalebFontenot/public_html/7.12/kayaks.jpg
new file mode 100644
index 0000000..61a8b35
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.12/kayaks.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.12/lonekayak.jpg b/Assignments/lab7_CalebFontenot/public_html/7.12/lonekayak.jpg
new file mode 100644
index 0000000..3f4a0c7
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.12/lonekayak.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.12/rentals.jpg b/Assignments/lab7_CalebFontenot/public_html/7.12/rentals.jpg
new file mode 100644
index 0000000..dd42699
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.12/rentals.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.2/float.html b/Assignments/lab7_CalebFontenot/public_html/7.2/float.html
new file mode 100644
index 0000000..651fe15
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.2/float.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS Float</title>
+<meta charset="utf-8">
+<style>
+body {  width: 500px;
+        background-color: #FFFFFF;
+        color: #000000;
+}
+div {  background-color: #F3F1BF;
+}
+h1 {   background-color: #658B42;
+       padding: 10px;	
+       color: #E1DB5F;
+}
+p {    font-family: Arial,sans-serif;  
+}
+.float { float: left;
+         margin-right: 10px;
+         border: 3px ridge #000000;
+}
+</style>
+</head>
+<body>
+<h1>Yellow Lady Slipper</h1>
+<div>
+<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
+<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
+</div>
+<h2>Be Green When Enjoying Wildflowers</h2>
+<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p> 
+</body>
+</html>
\ No newline at end of file
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.2/yls.jpg b/Assignments/lab7_CalebFontenot/public_html/7.2/yls.jpg
new file mode 100644
index 0000000..7dd9982
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.2/yls.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.3/float.html b/Assignments/lab7_CalebFontenot/public_html/7.3/float.html
new file mode 100644
index 0000000..5fa88d6
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.3/float.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>CSS Float</title>
+        <meta charset="utf-8">
+        <style>
+            body {
+                width: 500px;
+                background-color: #FFFFFF;
+                color: #000000;
+            }
+            div {
+                background-color: #F3F1BF;
+            }
+            h1 {
+                background-color: #658B42;
+                padding: 10px;
+                color: #E1DB5F;
+            }
+            p {
+                font-family: Arial,sans-serif;
+            }
+            .float {
+                float: left;
+                margin-right: 10px;
+                border: 3px ridge #000000;
+            }
+            .clearleft {
+                clear: left;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Yellow Lady Slipper</h1>
+        <div>
+            <img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
+            <p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
+            <!br class="clearleft">
+        </div>
+        <h2 class="clearleft">Be Green When Enjoying Wildflowers</h2>
+        <p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p> 
+    </body>
+
+</html>
\ No newline at end of file
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.3/yls.jpg b/Assignments/lab7_CalebFontenot/public_html/7.3/yls.jpg
new file mode 100644
index 0000000..7dd9982
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.3/yls.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.4/float.html b/Assignments/lab7_CalebFontenot/public_html/7.4/float.html
new file mode 100644
index 0000000..908282c
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.4/float.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>CSS Float</title>
+        <meta charset="utf-8">
+        <style>
+            body {
+                width: 500px;
+                background-color: #FFFFFF;
+                color: #000000;
+            }
+            div {
+                background-color: #F3F1BF;
+                overflow: scroll;
+                width: 300px;
+                height: 100px;
+            }
+            h1 {
+                background-color: #658B42;
+                padding: 10px;
+                color: #E1DB5F;
+            }
+            p {
+                font-family: Arial,sans-serif;
+            }
+            .float {
+                float: left;
+                margin-right: 10px;
+                border: 3px ridge #000000;
+            }
+            .clearleft {
+                clear: left;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Yellow Lady Slipper</h1>
+        <div>
+            <img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
+            <p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
+            <!br class="clearleft">
+        </div>
+        <h2 class="clearleft">Be Green When Enjoying Wildflowers</h2>
+        <p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p> 
+    </body>
+
+</html>
\ No newline at end of file
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.4/yls.jpg b/Assignments/lab7_CalebFontenot/public_html/7.4/yls.jpg
new file mode 100644
index 0000000..7dd9982
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.4/yls.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.5/boxsizing1.html b/Assignments/lab7_CalebFontenot/public_html/7.5/boxsizing1.html
new file mode 100644
index 0000000..9a3d434
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.5/boxsizing1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Default box-sizing</title>
+<meta charset="utf-8">
+<style>
+body { width: 600px; }
+.pod { float: left; 
+    width: 30%;
+	height: 150px;
+	background-color: #D1ECFF;
+	padding: 20px; margin: 10px; border: 1px solid #000033; }
+</style>
+
+</head>
+<body>
+<main>
+<h1>Default box-sizing</h1>
+ <div class="pod">
+Element 1
+</div>
+<div class="pod">
+Element 2
+</div>
+<div class="pod">
+Element 3
+</div>
+</main>
+
+</body>
+</html>
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.5/boxsizing2.html b/Assignments/lab7_CalebFontenot/public_html/7.5/boxsizing2.html
new file mode 100644
index 0000000..cdce2d2
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.5/boxsizing2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>box-sizing set to border-box</title>
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body { width: 600px; }
+.pod { float: left; 
+    width: 30%;
+	height: 150px;
+	background-color: #D1ECFF;
+	padding:20px; margin: 10px; border: 1px solid #000033; }
+</style>
+
+</head>
+<body>
+<main>
+<h1>box-sizing set to border-box</h1>
+<div class="pod">
+Element 1
+</div>
+<div class="pod">
+Element 2
+</div>
+<div class="pod">
+Element 3
+</div>
+</main>
+
+</body>
+</html>
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.5/lighthouseisland.jpg b/Assignments/lab7_CalebFontenot/public_html/7.5/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.5/lighthouseisland.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.5/lighthouselogo.jpg b/Assignments/lab7_CalebFontenot/public_html/7.5/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.5/lighthouselogo.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.5/starter5.html b/Assignments/lab7_CalebFontenot/public_html/7.5/starter5.html
new file mode 100644
index 0000000..c92423f
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.5/starter5.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+    * {
+        box-sizing: border-box;
+    }
+    body {
+        font-family:Verdana, Arial, sans-serif;
+        background-color: #00005D;
+    }
+    #wrapper {
+        background-color: #b3c7e6;
+        color: #000066;
+        width: 80%;
+        margin: auto;
+        min-width:940px;
+    }
+    nav {
+        float: left;
+        width: 150px;
+    }
+    nav ul {
+        list-style-type: none;
+        padding: 10px;
+    }
+    nav a {
+        text-decoration: none;
+        padding: 10px;
+        font-weight: bold;
+    }
+    nav a:link {
+        color: #FFFFFF;
+    }
+    nav a:visited {
+        color: #EAEAEA;
+    }
+    nav a:hover {
+        color: #000066;
+    }
+    main {
+        margin-left: 155px;
+        background-color: #ffffff;
+        color: #000000;
+        display: block;
+    }
+    header {
+        background-color: #869dc7;
+        color: #00005D;
+        font-size: 150%;
+        padding: 10px 10px 10px 155px;
+        background-image: url(lighthouselogo.jpg);
+        background-repeat: no-repeat;
+        height: 130px;
+    }
+
+    h2 {
+        color: #869dc7;
+        font-family: arial, sans-serif;
+    }
+    .content {
+        padding: 20px 20px 0 20px;
+    }
+    #floatright {
+        margin: 10px;
+        float: right;
+    }
+
+    footer {
+        font-size:70%;
+        text-align: center;
+        clear: right;
+        padding-bottom:20px;
+    }
+</style>
+</head>
+
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Menu</a></li>
+     <li><a href="directions.html">Directions</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav> 
+  <main> 
+   	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+     <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery!</p>
+	<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  </main> <!-- end of main content -->
+   <footer>Copyright &copy;
+   </footer>
+  </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.6/index.html b/Assignments/lab7_CalebFontenot/public_html/7.6/index.html
new file mode 100644
index 0000000..c3c3cb6
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.6/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body {font-family:Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+} 
+nav { float: left;
+	          width: 150px;
+} 
+nav ul { list-style-type: none; padding: 10px; }
+nav a { text-decoration: none; padding: 10px;
+        font-weight: bold; }
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #000066; }
+main { margin-left: 155px;
+               background-color: #ffffff;
+               color: #000000;
+			   display: block;
+} 
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 155px;
+		background-image: url(lighthouselogo.jpg); 
+		background-repeat: no-repeat;
+		height: 130px;
+}
+
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+.content {padding: 20px 20px 0 20px; 
+} 
+#floatright { margin: 10px;
+             float: right;
+}
+
+footer {font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom:20px;
+}
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+    <nav>
+	<ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	</ul>
+    </nav>
+  <main>
+    <div class="content"> 
+      <img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+    </div>
+    <footer>Copyright &copy;
+    </footer>
+  </main>
+</div>
+</body>
+</html>
+
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.6/lighthouseisland.jpg b/Assignments/lab7_CalebFontenot/public_html/7.6/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.6/lighthouseisland.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.6/lighthouselogo.jpg b/Assignments/lab7_CalebFontenot/public_html/7.6/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.6/lighthouselogo.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.6/singlecol.html b/Assignments/lab7_CalebFontenot/public_html/7.6/singlecol.html
new file mode 100644
index 0000000..36350bf
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.6/singlecol.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Layout Example</title>
+        <meta charset="utf-8">
+        <style>
+            nav {
+                float: left;
+                height: 150px;
+                padding: 10px;
+            }
+            main {
+                margin-left: 160px;
+                padding: 10px;
+                background-color: #FFFFFF;
+            }
+            #wrapper {
+                width: 80%;
+                margin-left: auto;
+                margin-right: auto;
+                background-color: #EAEAEA;
+            }
+            body {
+                background-color: #000066;
+            }
+            header {
+                background-color: #CCCCFF;
+            }
+            h1 {
+                margin: 0;
+                padding: 10px;
+            }
+            footer {
+                text-align: center;
+                font-style: italic;
+                background-color: #CCCCFF;
+                clear: both;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="wrapper">
+            <header><h1>Layout Example</h1></header>
+            <nav>
+                <a href="index.html">Home</a> <br>
+                <a href="page1.html">Page 1</a><br>
+                <a href="page2.html">Page 2</a>
+            </nav>
+            <main>
+                <h2>Page Heading</h2>
+                <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.</p>
+            </main>
+            <footer>Copyright &copy; </footer>
+        </div>
+    </body>
+</html>
+
+
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.7/bistro.css b/Assignments/lab7_CalebFontenot/public_html/7.7/bistro.css
new file mode 100644
index 0000000..af57614
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.7/bistro.css
@@ -0,0 +1,47 @@
+* { box-sizing: border-box; }
+body { background-color: #00005D;
+	   font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto; 
+           width: 80%; 
+		   min-width: 940px;
+		   background-color: #B3C7E6; 
+		   color: #000066; }
+header { background-color: #869DC7; 
+         color: #00005D;
+         font-size: 150%; 
+		 padding: 10px 10px 10px 155px;
+         height: 150px;
+         background-repeat: no-repeat;
+         background-image: url(lighthouselogo.jpg); }
+nav { float: left; 
+      width: 150px; 
+	  font-weight: bold;
+      letter-spacing: 0.1em; }
+main { background-color: #FFFFFF; 
+       color: #000000;
+	   padding: 10px 20px; 
+	   display: block;
+	   overflow: auto; }
+h2 { color: #869DC7; font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none;
+         margin: 0; 
+		 padding: 0; }
+nav a { text-decoration: none; 
+        padding: 20px; 
+		display: block;
+        background-color: #B3C7E6;
+        border-bottom: 1px solid #FFFFFF; 
+}
+nav a:link    { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover   { color: #869DC7;
+                background-color: #EAEAEA; } 
+footer { font-size: 70%; 
+         text-align: center;
+	     padding: 10px;
+	    background-color: #869DC7; 
+	    clear: both;
+}
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.7/index.html b/Assignments/lab7_CalebFontenot/public_html/7.7/index.html
new file mode 100644
index 0000000..2b3ac7c
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.7/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link href="bistro.css" rel="stylesheet">
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Menu</a></li>
+     <li><a href="directions.html">Directions</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav> 
+  <main> 
+   	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+     <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery!</p>
+	<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+   </main> <!-- end of main content -->
+   <footer>Copyright &copy;
+   </footer>
+  </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.7/lighthouseisland.jpg b/Assignments/lab7_CalebFontenot/public_html/7.7/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.7/lighthouseisland.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.7/lighthouselogo.jpg b/Assignments/lab7_CalebFontenot/public_html/7.7/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.7/lighthouselogo.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.8/bistro.css b/Assignments/lab7_CalebFontenot/public_html/7.8/bistro.css
new file mode 100644
index 0000000..e006876
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.8/bistro.css
@@ -0,0 +1,44 @@
+* { box-sizing: border-box; }
+body { background-color: #00005D;
+	   font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto; 
+           width: 80%; 
+		   min-width: 940px;
+		   background-color: #B3C7E6; 
+		  color: #000066; }
+header { background-color: #869DC7; 
+        color: #00005D;
+        font-size: 150%; 
+		padding: 10px 10px 10px 155px;
+        height: 150px;
+        background-repeat: no-repeat;
+        background-image: url(lighthouselogo.jpg); }
+nav { float: right; 
+     width: 150px; 
+	 font-weight: bold;
+     letter-spacing: 0.1em; }
+main { background-color: #FFFFFF; 
+          color: #000000;
+		  padding: 10px 20px; 
+		 display: block;
+		overflow: auto; }
+h2 { color: #869DC7;
+    font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none; margin: 0; padding: 0; }
+nav a { text-decoration: none; padding: 20px; display: block;
+       background-color: #B3C7E6;
+       border-bottom: 1px solid #FFFFFF; 
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #869DC7;
+             background-color: #EAEAEA; } 
+footer { font-size: 70%; 
+       text-align: center;
+	   padding: 10px;
+	   background-color: #869DC7; 
+	   clear: both;
+}
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.8/bistroprint.css b/Assignments/lab7_CalebFontenot/public_html/7.8/bistroprint.css
new file mode 100644
index 0000000..9bde47b
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.8/bistroprint.css
@@ -0,0 +1,31 @@
+* { box-sizing: border-box; }
+body { background-color: #00005D;
+	   font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto; 
+           width: 80%; 
+		   min-width: 940px;
+		   background-color: #B3C7E6; 
+		  color: #000066; }
+header { color: #000000; font-size: 20pt; }
+nav { display: none; }
+main { font-family: "Times New Roman", serif; font-size: 12pt; }
+h2 { color: #869DC7;
+    font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none; margin: 0; padding: 0; }
+nav a { text-decoration: none; padding: 20px; display: block;
+       background-color: #B3C7E6;
+       border-bottom: 1px solid #FFFFFF; 
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #869DC7;
+             background-color: #EAEAEA; } 
+footer { font-size: 70%; 
+       text-align: center;
+	   padding: 10px;
+	   background-color: #869DC7; 
+	   clear: both;
+}
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.8/index.html b/Assignments/lab7_CalebFontenot/public_html/7.8/index.html
new file mode 100644
index 0000000..99a61a1
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.8/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link href="bistro.css" rel="stylesheet" media="screen">
+<link href="bistroprint.css" rel="stylesheet" media="print">
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Menu</a></li>
+     <li><a href="directions.html">Directions</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav> 
+  <main> 
+   	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+     <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery!</p>
+	<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+   </main> <!-- end of main content -->
+   <footer>Copyright &copy; 
+   </footer>
+  </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.8/lighthouseisland.jpg b/Assignments/lab7_CalebFontenot/public_html/7.8/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.8/lighthouseisland.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.8/lighthouselogo.jpg b/Assignments/lab7_CalebFontenot/public_html/7.8/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.8/lighthouselogo.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.9/bistro.css b/Assignments/lab7_CalebFontenot/public_html/7.9/bistro.css
new file mode 100644
index 0000000..18e29ae
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.9/bistro.css
@@ -0,0 +1,49 @@
+* { box-sizing: border-box; }
+body { background-color: #00005D;
+	   font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto; 
+           width: 80%; 
+		   min-width: 940px;
+		   background-color: #B3C7E6; 
+		  color: #000066; }
+header { background-color: #869DC7; 
+        color: #00005D;
+        font-size: 150%; 
+		padding: 10px 10px 10px 155px;
+        height: 150px;
+        background-repeat: no-repeat;
+        background-image: url(lighthouselogo.jpg); }
+nav { float: right; 
+     width: 150px; 
+	 font-weight: bold;
+     letter-spacing: 0.1em; }
+main { background-color: #FFFFFF; 
+          color: #000000;
+		  padding: 10px 20px; 
+		 display: block;
+		overflow: auto; }
+h2 { color: #869DC7;
+    font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none; margin: 0; padding: 0; }
+nav a { text-decoration: none; padding: 20px; display: block;
+       background-color: #B3C7E6;
+       border-bottom: 1px solid #FFFFFF; 
+	   background-image: url(sprites.gif);
+background-repeat: no-repeat;
+background-position: right 0;
+	   
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #869DC7;
+             background-color: #EAEAEA; 
+			 background-position: right -100px;} 
+footer { font-size: 70%; 
+       text-align: center;
+	   padding: 10px;
+	   background-color: #869DC7; 
+	   clear: both;
+}
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.9/index.html b/Assignments/lab7_CalebFontenot/public_html/7.9/index.html
new file mode 100644
index 0000000..2b3ac7c
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/7.9/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link href="bistro.css" rel="stylesheet">
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Menu</a></li>
+     <li><a href="directions.html">Directions</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav> 
+  <main> 
+   	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+     <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery!</p>
+	<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+   </main> <!-- end of main content -->
+   <footer>Copyright &copy;
+   </footer>
+  </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.9/lighthouseisland.jpg b/Assignments/lab7_CalebFontenot/public_html/7.9/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.9/lighthouseisland.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.9/lighthouselogo.jpg b/Assignments/lab7_CalebFontenot/public_html/7.9/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.9/lighthouselogo.jpg differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/7.9/sprites.gif b/Assignments/lab7_CalebFontenot/public_html/7.9/sprites.gif
new file mode 100644
index 0000000..832901a
Binary files /dev/null and b/Assignments/lab7_CalebFontenot/public_html/7.9/sprites.gif differ
diff --git a/Assignments/lab7_CalebFontenot/public_html/index.html b/Assignments/lab7_CalebFontenot/public_html/index.html
new file mode 100644
index 0000000..f6f390f
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!--
+Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
+Click nbfs://nbhost/SystemFileSystem/Templates/Other/html.html to edit this template
+-->
+<html>
+    <head>
+        <title>TODO supply a title</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+        <div>TODO write content</div>
+    </body>
+</html>
diff --git a/Assignments/lab7_CalebFontenot/public_html/starter1.html b/Assignments/lab7_CalebFontenot/public_html/starter1.html
new file mode 100644
index 0000000..33152ed
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/starter1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>CSS</title>
+        <meta charset="utf-8">
+        <style>
+
+        </style>
+    </head>
+    <body>
+
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/Assignments/lab7_CalebFontenot/public_html/starter2.html b/Assignments/lab7_CalebFontenot/public_html/starter2.html
new file mode 100644
index 0000000..995eddb
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/starter2.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS Float</title>
+<meta charset="utf-8">
+<style>
+body { width:500px;
+       background-color:#FFFFFF;
+       color:#000000;
+}
+div {  background-color:#F3F1BF;
+}
+h1 {   background-color:#658B42;
+       padding:10px;	
+       color: #E1DB5F;
+}
+p {    font-family:Arial,sans-serif;  
+ }
+</style>
+</head>
+<body>
+<h1>Yellow Lady Slipper</h1>
+<div>
+  <img src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
+  <p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
+</div>
+<h2>Be Green When Enjoying Wildflowers</h2>
+<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p> 
+</body>
+</html>
\ No newline at end of file
diff --git a/Assignments/lab7_CalebFontenot/public_html/starter3.html b/Assignments/lab7_CalebFontenot/public_html/starter3.html
new file mode 100644
index 0000000..005b55d
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/starter3.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body {font-family:Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+} 
+nav { float: left;
+	  width: 150px;
+} 
+main { margin-left: 155px;
+       background-color: #ffffff;
+       color: #000000;
+} 
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 155px;
+		background-image: url(lighthouselogo.jpg); 
+		background-repeat: no-repeat;
+		height: 130px;
+}
+
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+.content {padding: 20px 20px 0 20px; 
+} 
+main { display: block; }
+#floatright { margin: 10px;
+             float: right;
+}
+
+footer { font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom:20px;
+}
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+    <nav>
+      <a href="index.html">Home</a>
+      <a href="rooms.html">Menu</a>
+      <a href="directions.html">Directions</a>
+      <a href="contact.html">Contact</a>
+    </nav>
+  <main>
+    <div class="content"> 
+      <img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+    </div>
+    <footer>Copyright &copy;
+    </footer>
+  </main>
+</div>
+</body>
+</html>
+
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/starter4.html b/Assignments/lab7_CalebFontenot/public_html/starter4.html
new file mode 100644
index 0000000..8580eb8
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/starter4.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+body {font-family:Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+}  
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 155px;
+		background-image: url(lighthouselogo.jpg); 
+		background-repeat: no-repeat;
+		height: 130px;
+}
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+main { padding: 20px 20px 0 20px; 
+           background-color: #ffffff;
+           color: #000000;
+		   display: block;
+} 
+main img { margin: 10px;
+             float: right;
+}
+
+footer {font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom:20px;
+}
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+	<ul>
+	  <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	 </ul>
+  </nav>
+  <main> 
+      <img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  </main>
+  <footer>Copyright &copy;
+  </footer>
+</div>
+</body>
+</html>
+
+
diff --git a/Assignments/lab7_CalebFontenot/public_html/twocolumn3.html b/Assignments/lab7_CalebFontenot/public_html/twocolumn3.html
new file mode 100644
index 0000000..dad89ec
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/public_html/twocolumn3.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Layout Example</title>
+<meta charset="utf-8">
+<style>
+body { font-family:Verdana, Arial, sans-serif;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+} 
+nav { float: left;
+	          width: 150px;
+} 
+
+main { margin-left: 155px;
+               background-color: #ffffff;
+               color: #000000;
+} 
+nav ul {
+    list-style-type: none;
+padding: 10px;
+
+}
+nav a {
+    text-decoration: none;
+}
+</style>
+</head>
+<body>
+<div id="wrapper">
+  <header><h1>Layout Example</h1></header>
+  <nav>
+   <ul>
+    <li><a href="index.html">Home</a></li>
+    <li><a href="menu.html">Menu</a></li>
+    <li><a href="directions.html">Directions</a></li>
+	<li><a href="contact.html">Contact</a></li>
+   </ul>
+  </nav>
+  <main>
+    <h2>Page Heading</h2>
+    <p>This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence.</p>
+  </main>
+  <footer>Copyright &copy; </footer>
+</div>
+</body>
+</html>
+
+
+
diff --git a/Assignments/lab7_CalebFontenot/test/singlecol.html b/Assignments/lab7_CalebFontenot/test/singlecol.html
new file mode 100644
index 0000000..19d341d
--- /dev/null
+++ b/Assignments/lab7_CalebFontenot/test/singlecol.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Layout Example</title>
+<meta charset="utf-8">
+<style>
+
+</style>
+</head>
+<body>
+<div id="wrapper">
+  <header><h1>Layout Example</h1></header>
+  <nav>
+    <a href="index.html">Home</a>
+    <a href="page1.html">Page 1</a>
+    <a href="page2.html">Page 2</a>
+  </nav>
+  <main>
+    <h2>Page Heading</h2>
+    <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.</p>
+  </main>
+  <footer>Copyright &copy; </footer>
+</div>
+</body>
+</html>
+
+
+
diff --git a/Chapter ZIPs/chapter7/7.1/box1.html b/Chapter ZIPs/chapter7/7.1/box1.html
new file mode 100644
index 0000000..524f7ea
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.1/box1.html	
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS</title>
+<meta charset="utf-8">
+<style>
+.div1 { width:200px;
+        height:200px;
+        background-color:#D1ECFF;
+        border: 3px dashed #000000; 
+        padding:5px;
+}
+.div2 { width:100px;
+        height:100px;
+        background-color:#FFFFFF;
+        border: 3px ridge #000000;
+        padding:5px;
+        margin:10px;
+}
+</style>
+</head>
+<body>
+<div class="div1">
+  This is the first box.
+</div>
+<div class="div2">
+  This is the second box.
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/7.1/box2.html b/Chapter ZIPs/chapter7/7.1/box2.html
new file mode 100644
index 0000000..bdc2c69
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.1/box2.html	
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS</title>
+<meta charset="utf-8">
+<style>
+.div1 { width:200px;
+        height:200px;
+        background-color:#D1ECFF;
+        border:3px dashed #000000;
+        padding:5px;
+}
+.div2 { width:100px;
+        height:100px;
+        background-color:#FFFFFF;
+        border:3px ridge #000000;
+        padding:5px;
+        margin:10px;
+}
+</style>
+</head>
+<body>
+<div class="div1">
+  This is the outer box.
+  <div class="div2">
+  This is the inner box.
+  </div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/7.10/beached.jpg b/Chapter ZIPs/chapter7/7.10/beached.jpg
new file mode 100644
index 0000000..017c0c9
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.10/beached.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.10/index.html b/Chapter ZIPs/chapter7/7.10/index.html
new file mode 100644
index 0000000..23b348e
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.10/index.html	
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Kayak Adventure</title>
+<style>
+.hero { position: relative; }
+.hero h1 { position: absolute; 
+     z-index: 999;   
+     top: 40%;
+     left: 10%; 
+     color: rgba(255, 255, 255, 0.6); 
+     font-family: Georgia, serif;
+	 width: 40%;
+}
+</style>
+</head> 
+<body>
+<div class="hero">
+  <h1>Your next adventure is only a paddle away...</h1>
+  <img src="beached.jpg" alt="kayaks on the beach" width="900" height="578">    
+</div>
+
+</body>
+</html>                            
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/7.11/index.html b/Chapter ZIPs/chapter7/7.11/index.html
new file mode 100644
index 0000000..f7c7619
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.11/index.html	
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body {font-family: Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+}  
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 155px;
+		background-image: url(lighthouselogo.jpg); 
+		background-repeat: no-repeat;
+		height: 130px;
+		margin-top: 40px;
+}
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+nav { position: fixed; top: 0; left: 0; 
+     height: 40px;
+	 min-width: 40em;
+	 width: 100%;
+     background-color: #B3C7E6;
+	 z-index: 9999;
+}
+nav ul { list-style-type: none;
+         text-align: right;
+		 font-size: 1.5em;
+		 margin: 5px;
+         padding-right: 10%;		 
+}
+nav li { display: inline; }
+nav a { text-decoration: none;
+        padding-left: 10px;
+		padding-right: 10px;
+}
+main { padding: 20px 20px 0 20px; 
+           background-color: #ffffff;
+           color: #000000;
+		   display: block;
+} 
+main img { margin: 10px;
+             float: right;
+}
+
+footer {font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom:20px;
+}
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+	<ul>
+	  <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	 </ul>
+  </nav>
+  <main> 
+      <img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  </main>
+  <footer>Copyright &copy; 
+  </footer>
+</div>
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/7.11/lighthouseisland.jpg b/Chapter ZIPs/chapter7/7.11/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.11/lighthouseisland.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.11/lighthouselogo.jpg b/Chapter ZIPs/chapter7/7.11/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.11/lighthouselogo.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.12/beached.jpg b/Chapter ZIPs/chapter7/7.12/beached.jpg
new file mode 100644
index 0000000..017c0c9
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.12/beached.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.12/index.html b/Chapter ZIPs/chapter7/7.12/index.html
new file mode 100644
index 0000000..8892ce0
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.12/index.html	
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>KayakDoorCounty.net</title>
+<meta charset="utf-8">
+<style> 
+body { font-family: Tahoma, Verdana, Arial, sans-serif; 
+       margin: 0; padding: 0; 
+}
+.hero { 
+    background-image: url(beached.jpg); 
+    min-height: 100vh;  
+    background-repeat: no-repeat; 
+    background-size: cover;  
+}	
+.tourshero { 
+    background-image: url(kayaks.jpg); 
+    min-height: 100vh;
+    background-repeat: no-repeat; 
+    background-size: cover;  
+}
+.rentalshero { 
+    background-image: url(rentals.jpg); 
+    min-height: 100vh; 
+    background-repeat: no-repeat; 
+    background-size: cover; 
+}
+.contacthero { 
+    background-image: url(lonekayak.jpg); 
+    min-height: 100vh;  
+    background-repeat: no-repeat; 
+    background-size: cover; 
+}
+nav { z-index:9999;
+      position: fixed;
+	  top: 0;
+	  left: 0;
+	  padding: .5em; 
+	  height: 40px;
+	  background:rgba(25,25, 25, 0.70);
+	  width: 100%;
+	  font-size: 120%;
+	  font-weight: bold;
+	  min-width: 900px;    	  }
+nav ul { list-style-type: none; 
+         margin: 5px; }
+nav ul li { display: inline; padding-left: 2em; padding-right: 2em; }
+nav a { text-decoration:none; }
+nav a:link { color: #EAEAEA; }
+nav a:visited { color: #FFF; }
+nav a:hover { color: #FDA27F; }
+h1 { height: 100px; 
+     padding-top: 2em; 
+	 text-align: center;
+      background:rgba(255, 255, 255, 0.80);
+     	}
+.space  { height: 20vh; }
+#tours, #rentals, #contact {  background-color: #FFF;
+						  width: 60%;
+						  padding-left: 6em;
+						  padding-top: 70px;
+						  padding-bottom: 2em;
+}
+footer {   background:rgba(25,25, 25, 0.90);
+         width: 100%;
+         font-size: 90%;
+         text-align: center;	
+         color: #EAEAEA;
+		 position: fixed;
+		 bottom: 0;
+		}	
+footer a { text-decoration: none;
+           color: #EAEAEA; }		
+</style> 
+</head> 
+<body> 
+<nav>
+    <ul>
+     <li><a href="#home">KayakDoorCounty.net</a></li>
+     <li><a href="#tours">Tours</a></li>
+     <li><a href="#rentals">Rentals</a></li>
+     <li><a href="#contact">Contact</a></li>
+   </ul>
+</nav>
+
+
+<!-- Home Page -->
+<section id="home" class="hero" >
+<div class="space"> </div>
+<h1><a href="#home"><img src="kayakdc.gif" alt="KayakDoorCounty.net"></a></h1> 
+</section>
+
+<!-- Tours Page -->
+<section id="tours"> 
+<h2>Tours by KayakDoorCounty.net</h2>
+<h2>Your next adventure is only a paddle away....</h2> 
+<p>Take a guided kayak tour while you explore the scenic shoreline of Door County<p>
+<h3>Featured tours this week:</h3>
+<ul>
+  <li>Cana Island</li>
+  <li>Mink River</li>
+  <li>Europe Lake</li>
+</ul>
+</section> 
+<div class="tourshero"></div>
+<!-- Rentals Page -->
+<section id="rentals"> 
+<h2>Rent Kayaks from KayakDoorCounty.net</h2>
+<h3>Be Your Own Guide.....</h3> 
+<p>Half day, full day, and week-long rentals available.<br><br>
+Rent a kayak at one of these three scenic locations:</p>
+<ul>
+<li>Eagle Harbor</li>
+<li>Sister Bay</li>
+<li>Garrett Bay</li>
+</ul>
+</section>
+<div class="rentalshero"></div>
+<!-- Contact Page -->
+<section  id="contact"> 
+<h2>Contact KayakDoorCounty.net</h2>
+<h3>Call, Text, or Email</h3>
+<p>A trained kayak guide will answer all your questions and get you out on the water!<br>
+<p>Call to reserve your kayak today!</p>
+555-555-5555<br><br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</section>
+<div class="contacthero"></div>
+<footer>
+KayakDoorCounty.net<br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</footer>
+</body> 
+</html> 
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/7.12/index1.html b/Chapter ZIPs/chapter7/7.12/index1.html
new file mode 100644
index 0000000..9fa742a
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.12/index1.html	
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>KayakDoorCounty.net</title>
+<meta charset="utf-8">
+<style> 
+body { font-family: Tahoma, Verdana, Arial, sans-serif; 
+       margin: 0; padding: 0; 
+}
+.hero { 
+    background-image: url(beached.jpg); 
+    min-height: 100vh;  
+    background-repeat: no-repeat; 
+    background-size: cover;  
+}	
+.tourshero { 
+    background-image: url(kayaks.jpg); 
+    min-height: 100vh;
+    background-repeat: no-repeat; 
+    background-size: cover;  
+}
+.rentalshero { 
+    background-image: url(rentals.jpg); 
+    min-height: 100vh; 
+    background-repeat: no-repeat; 
+    background-size: cover; 
+}
+ .contacthero { 
+    background-image: url(lonekayak.jpg); 
+    min-height: 100vh;  
+    background-repeat: no-repeat; 
+    background-size: cover; 
+}
+nav { z-index:9999;
+      position: fixed;
+	  top: 0;
+	  left: 0;
+	  padding: .5em; 
+	  height: 40px;
+	  background:rgba(25,25, 25, 0.70);
+	  width: 100%;
+	  font-size: 120%;
+	  font-weight: bold;
+	  min-width: 900px;    	  }
+nav ul { list-style-type: none; 
+         margin: 5px; }
+nav ul li { display: inline; padding-left: 2em; padding-right: 2em; }
+nav a { text-decoration:none; }
+nav a:link { color: #EAEAEA; }
+nav a:visited { color: #FFF; }
+nav a:hover { color: #FDA27F; }
+h1 { height: 100px; 
+     padding-top: 2em; 
+	 text-align: center;
+      background:rgba(255, 255, 255, 0.80);
+     	}
+.space  { height: 20vh; }
+#tours, #rentals, #contact {  background-color: #FFF;
+						  width: 60%;
+						  padding-left: 6em;
+						  padding-top: 70px;
+						  padding-bottom: 2em;
+}
+footer {   background:rgba(25,25, 25, 0.90);
+         width: 100%;
+         font-size: 90%;
+         text-align: center;	
+         color: #EAEAEA;
+		}	
+footer a { text-decoration: none;
+           color: #EAEAEA; }		
+</style> 
+</head> 
+<body> 
+<nav>
+    <ul>
+     <li><a href="#home">KayakDoorCounty.net</a></li>
+     <li><a href="#tours">Tours</a></li>
+     <li><a href="#rentals">Rentals</a></li>
+     <li><a href="#contact">Contact</a></li>
+   </ul>
+</nav>
+
+
+<!-- Home Page -->
+<section id="home" class="hero" >
+<div class="space"> </div>
+<h1><a href="#home"><img src="kayakdc.gif" alt="KayakDoorCounty.net"></a></h1> 
+</section>
+
+<!-- Tours Page -->
+<section id="tours"> 
+<h2>Tours by KayakDoorCounty.net</h2>
+<h2>Your next adventure is only a paddle away....</h2> 
+<p>Take a guided kayak tour while you explore the scenic shoreline of Door County<p>
+<h3>Featured tours this week:</h3>
+<ul>
+  <li>Cana Island</li>
+  <li>Mink River</li>
+  <li>Europe Lake</li>
+</ul>
+</section> 
+<div class="tourshero"></div>
+<!-- Rentals Page -->
+<section id="rentals"> 
+<h2>Rent Kayaks from KayakDoorCounty.net</h2>
+<h3>Be Your Own Guide.....</h3> 
+<p>Half day, full day, and week-long rentals available.<br><br>
+Rent a kayak at one of these three scenic locations:</p>
+<ul>
+<li>Eagle Harbor</li>
+<li>Sister Bay</li>
+<li>Garrett Bay</li>
+</ul>
+</section>
+<div class="rentalshero"></div>
+<!-- Contact Page -->
+<section  id="contact"> 
+<h2>Contact KayakDoorCounty.net</h2>
+<h3>Call, Text, or Email</h3>
+<p>A trained kayak guide will answer all your questions and get you out on the water!<br>
+<p>Call to reserve your kayak today!</p>
+555-555-5555<br><br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</section>
+<div class="contacthero"></div>
+<footer>
+KayakDoorCounty.net<br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</footer>
+</body> 
+</html> 
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/7.12/index2.html b/Chapter ZIPs/chapter7/7.12/index2.html
new file mode 100644
index 0000000..26d7543
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.12/index2.html	
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<!-- This is the parallax scrolling single page webste -->
+<html lang="en">
+<head>
+<title>KayakDoorCounty.net</title>
+<meta charset="utf-8">
+<style> 
+body { font-family: Tahoma, Verdana, Arial, sans-serif; 
+       margin: 0; padding: 0;
+       }
+.hero { 
+    background-image: url(beached.jpg); 
+    min-height: 100vh;  
+    background-attachment: fixed; 
+    background-position: center; 
+    background-repeat: no-repeat; 
+    background-size: cover; 
+	padding: 0;
+}
+.tourshero { 
+    background-image: url(kayaks.jpg); 
+    min-height: 100vh;
+    background-attachment: fixed; 
+    background-position: center; 
+    background-repeat: no-repeat; 
+    background-size: cover; 
+ }
+.rentalshero { 
+    background-image: url(rentals.jpg); 
+    min-height: 100vh; 
+    background-attachment: fixed; 
+    background-position: center; 
+    background-repeat: no-repeat; 
+    background-size: cover; 
+ }
+ .contacthero { 
+    background-image: url(lonekayak.jpg); 
+    min-height: 100vh;  
+    background-attachment: fixed; 
+    background-position: center; 
+    background-repeat: no-repeat; 
+    background-size: cover; 
+ }
+ 
+nav { z-index:9999;
+      position: fixed;
+	  top: 0;
+	  left: 0;
+	  padding: .5em;
+	  height: 40px;
+	  background:rgba(25,25, 25, 0.70);
+	  width: 100%;
+	  font-size: 120%;
+	  font-weight: bold;
+	  min-width: 900px;
+ }
+nav ul { list-style-type: none; 
+         margin: 5px; }
+nav ul li { display: inline; padding-left: 2em; padding-right: 2em; }
+nav a { text-decoration:none; }
+nav a:link { color: #EAEAEA; }
+nav a:visited { color: #FFF; }
+nav a:hover { color: #FDA27F; }
+h1 { height: 100px; 
+     padding-top: 2em; 
+	 text-align: center;
+     background:rgba(255, 255, 255, 0.80);
+}
+.space {height: 20vh; }
+#tours, #rentals, #contact {  background-color: #FFF;
+		                  width: 60%;
+						  padding-left: 6em;
+						  padding-top: 70px;
+						  padding-bottom: 2em; }
+footer {   background:rgba(25,25, 25, 0.90);
+         width: 100%;
+         font-size: 90%;
+         text-align: center;	
+         color: #EAEAEA; 
+
+		 position: fixed;
+         bottom: 0;}	
+footer a { text-decoration: none;  
+          color: #EAEAEA; }		
+</style> 
+</head> 
+<body> 
+<nav>
+  <ul>
+    <li><a href="#home">KayakDoorCounty.net</a></li>
+    <li><a href="#tours">Tours</a></li>
+    <li><a href="#rentals">Rentals</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ul>
+</nav>
+
+<!-- Home Page -->
+<section id="home" class="hero">
+<div  class="space"> </div> 
+<h1><a href="#home"><img src="kayakdc.gif" alt="KayakDoorCounty.net"></a></h1> 
+</section>
+
+
+<!-- Tours Page -->
+<section id="tours"> 
+<h2>Tours by KayakDoorCounty.net</h2>
+<h2>Your next adventure is only a paddle away....</h2> 
+<p>Take a guided kayak tour while you explore the scenic shoreline of Door County<p>
+<h3>Featured tours this week:</h3>
+<ul>
+  <li>Cana Island</li>
+  <li>Mink River</li>
+  <li>Europe Lake</li>
+</ul>
+</section> 
+<div class="tourshero"></div>
+
+<!-- Rentals Page -->
+<section id="rentals"> 
+<h2>Rent Kayaks from KayakDoorCounty.net</h2>
+<h3>Be Your Own Guide.....</h3> 
+<p>Half day, full day, and week-long rentals available.<br><br>
+Rent a kayak at one of these three scenic locations:</p>
+<ul>
+<li>Eagle Harbor</li>
+<li>Sister Bay</li>
+<li>Garrett Bay</li>
+</ul>
+</section>
+<div class="rentalshero"></div>
+<!-- Contact Page -->
+<section id="contact"> 
+<h2>Contact KayakDoorCounty.net</h2>
+<h3>Call, Text, or Email</h3>
+<p>A trained kayak guide will answer all your questions and get you out on the water!<br>
+Call to reserve your kayak today!</p>
+555-555-5555<br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</section>
+<div class="contacthero"></div>
+<footer>
+KayakDoorCounty.net<br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</footer>
+</body> 
+</html> 
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/7.12/kayakdc.gif b/Chapter ZIPs/chapter7/7.12/kayakdc.gif
new file mode 100644
index 0000000..8fd7564
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.12/kayakdc.gif differ
diff --git a/Chapter ZIPs/chapter7/7.12/kayaks.jpg b/Chapter ZIPs/chapter7/7.12/kayaks.jpg
new file mode 100644
index 0000000..61a8b35
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.12/kayaks.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.12/lonekayak.jpg b/Chapter ZIPs/chapter7/7.12/lonekayak.jpg
new file mode 100644
index 0000000..3f4a0c7
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.12/lonekayak.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.12/rentals.jpg b/Chapter ZIPs/chapter7/7.12/rentals.jpg
new file mode 100644
index 0000000..dd42699
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.12/rentals.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.2/float.html b/Chapter ZIPs/chapter7/7.2/float.html
new file mode 100644
index 0000000..651fe15
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.2/float.html	
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS Float</title>
+<meta charset="utf-8">
+<style>
+body {  width: 500px;
+        background-color: #FFFFFF;
+        color: #000000;
+}
+div {  background-color: #F3F1BF;
+}
+h1 {   background-color: #658B42;
+       padding: 10px;	
+       color: #E1DB5F;
+}
+p {    font-family: Arial,sans-serif;  
+}
+.float { float: left;
+         margin-right: 10px;
+         border: 3px ridge #000000;
+}
+</style>
+</head>
+<body>
+<h1>Yellow Lady Slipper</h1>
+<div>
+<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
+<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
+</div>
+<h2>Be Green When Enjoying Wildflowers</h2>
+<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p> 
+</body>
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/7.2/yls.jpg b/Chapter ZIPs/chapter7/7.2/yls.jpg
new file mode 100644
index 0000000..7dd9982
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.2/yls.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.3/iefix.html b/Chapter ZIPs/chapter7/7.3/iefix.html
new file mode 100644
index 0000000..e9dedf5
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.3/iefix.html	
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Layout Example</title>
+<meta charset="utf-8">
+<style>
+nav { float: left;
+      width: 150px; 
+      padding: 10px;   }
+main { margin-left: 160px; 
+      padding: 10px; 
+      background-color: #FFFFFF; 
+  /* The following declaration forces IE to display
+	   the new HTML5 main element as needed. 
+       The display property is introduced in Chapter 7	 */
+	   display: block;
+	  }  
+body { background-color: #000066; }
+#wrapper { width: 80%;  
+           margin-left: auto; 
+           margin-right: auto;
+           background-color: #EAEAEA; }
+header { background-color: #CCCCFF; }
+h1 { margin: 0;
+     padding: 10px; }
+
+footer { text-align: center;
+         font-style: italic;
+         background-color: #CCCCFF;
+		 clear: both; } 
+</style>
+</head>
+<body>
+<div id="wrapper">
+  <header><h1>Layout Example</h1></header>
+  <nav>
+    <a href="index.html">Home</a><br>
+    <a href="page1.html">Page 1</a><br>
+    <a href="page2.html">Page 2</a>
+  </nav>
+  <main>
+    <h2>Page Heading</h2>
+    <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.</p>
+  </main>
+  <footer>Copyright &copy; </footer>
+</div>
+</body>
+</html>
+
+
+
diff --git a/Chapter ZIPs/chapter7/7.3/index.html b/Chapter ZIPs/chapter7/7.3/index.html
new file mode 100644
index 0000000..dcfa9e8
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.3/index.html	
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Layout Example</title>
+<meta charset="utf-8">
+<style>
+nav { float: left;
+      width: 150px; 
+      padding: 10px;   }
+main { margin-left: 160px; 
+       padding: 10px; 
+       background-color: #FFFFFF;  }  
+body { background-color: #000066; }
+#wrapper { width: 80%;  
+           margin-left: auto; 
+           margin-right: auto;
+           background-color: #EAEAEA; }
+header { background-color: #CCCCFF; }
+h1 { margin: 0;
+     padding: 10px; }
+
+footer { text-align: center;
+         font-style: italic;
+         background-color: #CCCCFF; 
+		 clear: both; } 
+</style>
+</head>
+<body>
+<div id="wrapper">
+  <header><h1>Layout Example</h1></header>
+  <nav>
+    <a href="index.html">Home</a><br>
+    <a href="page1.html">Page 1</a><br>
+    <a href="page2.html">Page 2</a>
+  </nav>
+  <main>
+    <h2>Page Heading</h2>
+    <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.</p>
+  </main>
+  <footer>Copyright &copy; </footer>
+</div>
+</body>
+</html>
+
+
+
diff --git a/Chapter ZIPs/chapter7/7.4/index.html b/Chapter ZIPs/chapter7/7.4/index.html
new file mode 100644
index 0000000..a15f7fc
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.4/index.html	
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body { font-family:Verdana, Arial, sans-serif;
+       background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+} 
+nav { float: left;
+	  width: 150px;
+} 
+nav ul { list-style-type: none;
+         padding: 10px; }
+nav a { text-decoration: none;
+        padding: 10px;
+        font-weight: bold; }
+main { margin-left: 155px;
+       background-color: #ffffff;
+       color: #000000;
+	   display: block;
+} 
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 155px;
+		background-image: url(lighthouselogo.jpg); 
+		background-repeat: no-repeat;
+		height: 130px;
+}
+
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+.content {padding: 20px 20px 0 20px; 
+} 
+#floatright { margin: 10px;
+             float: right;
+}
+
+footer { font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom:20px;
+}
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+    <nav>
+      <ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	 </ul>
+    </nav>
+  <main>
+    <div class="content"> 
+      <img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+    </div>
+    <footer>Copyright &copy; 
+    </footer>
+  </main>
+</div>
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/7.4/lighthouseisland.jpg b/Chapter ZIPs/chapter7/7.4/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.4/lighthouseisland.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.4/lighthouselogo.jpg b/Chapter ZIPs/chapter7/7.4/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.4/lighthouselogo.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.5/index.html b/Chapter ZIPs/chapter7/7.5/index.html
new file mode 100644
index 0000000..a1589a8
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.5/index.html	
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body {font-family:Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+}  
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 155px;
+		background-image: url(lighthouselogo.jpg); 
+		background-repeat: no-repeat;
+		height: 130px;
+}
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+nav ul { list-style-type: none;
+         text-align: center;
+		 font-size: 1.5em;
+		 margin: 5px; 
+}
+nav li { display: inline; }
+nav a { text-decoration: none;
+        padding-left: 10px;
+		padding-right: 10px;
+}
+main { padding: 20px 20px 0 20px; 
+           background-color: #ffffff;
+           color: #000000;
+		   display: block;
+} 
+main img { margin: 10px;
+             float: right;
+}
+
+footer { font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom:20px;
+}
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+	<ul>
+	  <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	 </ul>
+  </nav>
+  <main> 
+      <img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  </main>
+  <footer>Copyright &copy; 
+  </footer>
+</div>
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/7.5/lighthouseisland.jpg b/Chapter ZIPs/chapter7/7.5/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.5/lighthouseisland.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.5/lighthouselogo.jpg b/Chapter ZIPs/chapter7/7.5/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.5/lighthouselogo.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.6/index.html b/Chapter ZIPs/chapter7/7.6/index.html
new file mode 100644
index 0000000..c3c3cb6
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.6/index.html	
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body {font-family:Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+} 
+nav { float: left;
+	          width: 150px;
+} 
+nav ul { list-style-type: none; padding: 10px; }
+nav a { text-decoration: none; padding: 10px;
+        font-weight: bold; }
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #000066; }
+main { margin-left: 155px;
+               background-color: #ffffff;
+               color: #000000;
+			   display: block;
+} 
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 155px;
+		background-image: url(lighthouselogo.jpg); 
+		background-repeat: no-repeat;
+		height: 130px;
+}
+
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+.content {padding: 20px 20px 0 20px; 
+} 
+#floatright { margin: 10px;
+             float: right;
+}
+
+footer {font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom:20px;
+}
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+    <nav>
+	<ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	</ul>
+    </nav>
+  <main>
+    <div class="content"> 
+      <img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+    </div>
+    <footer>Copyright &copy;
+    </footer>
+  </main>
+</div>
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/7.6/lighthouseisland.jpg b/Chapter ZIPs/chapter7/7.6/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.6/lighthouseisland.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.6/lighthouselogo.jpg b/Chapter ZIPs/chapter7/7.6/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.6/lighthouselogo.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.7/bistro.css b/Chapter ZIPs/chapter7/7.7/bistro.css
new file mode 100644
index 0000000..bb9eb8b
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.7/bistro.css	
@@ -0,0 +1,47 @@
+* { box-sizing: border-box; }
+body { background-color: #00005D;
+	   font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto; 
+           width: 80%; 
+		   min-width: 940px;
+		   background-color: #B3C7E6; 
+		   color: #000066; }
+header { background-color: #869DC7; 
+         color: #00005D;
+         font-size: 150%; 
+		 padding: 10px 10px 10px 155px;
+         height: 150px;
+         background-repeat: no-repeat;
+         background-image: url(lighthouselogo.jpg); }
+nav { float: right; 
+      width: 150px; 
+	  font-weight: bold;
+      letter-spacing: 0.1em; }
+main { background-color: #FFFFFF; 
+       color: #000000;
+	   padding: 10px 20px; 
+	   display: block;
+	   overflow: auto; }
+h2 { color: #869DC7; font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none;
+         margin: 0; 
+		 padding: 0; }
+nav a { text-decoration: none; 
+        padding: 20px; 
+		display: block;
+        background-color: #B3C7E6;
+        border-bottom: 1px solid #FFFFFF; 
+}
+nav a:link    { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover   { color: #869DC7;
+                background-color: #EAEAEA; } 
+footer { font-size: 70%; 
+         text-align: center;
+	     padding: 10px;
+	    background-color: #869DC7; 
+	    clear: both;
+}
+
diff --git a/Chapter ZIPs/chapter7/7.7/index.html b/Chapter ZIPs/chapter7/7.7/index.html
new file mode 100644
index 0000000..2b3ac7c
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.7/index.html	
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link href="bistro.css" rel="stylesheet">
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Menu</a></li>
+     <li><a href="directions.html">Directions</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav> 
+  <main> 
+   	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+     <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery!</p>
+	<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+   </main> <!-- end of main content -->
+   <footer>Copyright &copy;
+   </footer>
+  </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/7.7/lighthouseisland.jpg b/Chapter ZIPs/chapter7/7.7/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.7/lighthouseisland.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.7/lighthouselogo.jpg b/Chapter ZIPs/chapter7/7.7/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.7/lighthouselogo.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.8/bistro.css b/Chapter ZIPs/chapter7/7.8/bistro.css
new file mode 100644
index 0000000..e006876
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.8/bistro.css	
@@ -0,0 +1,44 @@
+* { box-sizing: border-box; }
+body { background-color: #00005D;
+	   font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto; 
+           width: 80%; 
+		   min-width: 940px;
+		   background-color: #B3C7E6; 
+		  color: #000066; }
+header { background-color: #869DC7; 
+        color: #00005D;
+        font-size: 150%; 
+		padding: 10px 10px 10px 155px;
+        height: 150px;
+        background-repeat: no-repeat;
+        background-image: url(lighthouselogo.jpg); }
+nav { float: right; 
+     width: 150px; 
+	 font-weight: bold;
+     letter-spacing: 0.1em; }
+main { background-color: #FFFFFF; 
+          color: #000000;
+		  padding: 10px 20px; 
+		 display: block;
+		overflow: auto; }
+h2 { color: #869DC7;
+    font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none; margin: 0; padding: 0; }
+nav a { text-decoration: none; padding: 20px; display: block;
+       background-color: #B3C7E6;
+       border-bottom: 1px solid #FFFFFF; 
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #869DC7;
+             background-color: #EAEAEA; } 
+footer { font-size: 70%; 
+       text-align: center;
+	   padding: 10px;
+	   background-color: #869DC7; 
+	   clear: both;
+}
+
diff --git a/Chapter ZIPs/chapter7/7.8/bistroprint.css b/Chapter ZIPs/chapter7/7.8/bistroprint.css
new file mode 100644
index 0000000..9bde47b
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.8/bistroprint.css	
@@ -0,0 +1,31 @@
+* { box-sizing: border-box; }
+body { background-color: #00005D;
+	   font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto; 
+           width: 80%; 
+		   min-width: 940px;
+		   background-color: #B3C7E6; 
+		  color: #000066; }
+header { color: #000000; font-size: 20pt; }
+nav { display: none; }
+main { font-family: "Times New Roman", serif; font-size: 12pt; }
+h2 { color: #869DC7;
+    font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none; margin: 0; padding: 0; }
+nav a { text-decoration: none; padding: 20px; display: block;
+       background-color: #B3C7E6;
+       border-bottom: 1px solid #FFFFFF; 
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #869DC7;
+             background-color: #EAEAEA; } 
+footer { font-size: 70%; 
+       text-align: center;
+	   padding: 10px;
+	   background-color: #869DC7; 
+	   clear: both;
+}
+
diff --git a/Chapter ZIPs/chapter7/7.8/index.html b/Chapter ZIPs/chapter7/7.8/index.html
new file mode 100644
index 0000000..99a61a1
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.8/index.html	
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link href="bistro.css" rel="stylesheet" media="screen">
+<link href="bistroprint.css" rel="stylesheet" media="print">
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Menu</a></li>
+     <li><a href="directions.html">Directions</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav> 
+  <main> 
+   	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+     <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery!</p>
+	<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+   </main> <!-- end of main content -->
+   <footer>Copyright &copy; 
+   </footer>
+  </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/7.8/lighthouseisland.jpg b/Chapter ZIPs/chapter7/7.8/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.8/lighthouseisland.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.8/lighthouselogo.jpg b/Chapter ZIPs/chapter7/7.8/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.8/lighthouselogo.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.9/bistro.css b/Chapter ZIPs/chapter7/7.9/bistro.css
new file mode 100644
index 0000000..18e29ae
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.9/bistro.css	
@@ -0,0 +1,49 @@
+* { box-sizing: border-box; }
+body { background-color: #00005D;
+	   font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto; 
+           width: 80%; 
+		   min-width: 940px;
+		   background-color: #B3C7E6; 
+		  color: #000066; }
+header { background-color: #869DC7; 
+        color: #00005D;
+        font-size: 150%; 
+		padding: 10px 10px 10px 155px;
+        height: 150px;
+        background-repeat: no-repeat;
+        background-image: url(lighthouselogo.jpg); }
+nav { float: right; 
+     width: 150px; 
+	 font-weight: bold;
+     letter-spacing: 0.1em; }
+main { background-color: #FFFFFF; 
+          color: #000000;
+		  padding: 10px 20px; 
+		 display: block;
+		overflow: auto; }
+h2 { color: #869DC7;
+    font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none; margin: 0; padding: 0; }
+nav a { text-decoration: none; padding: 20px; display: block;
+       background-color: #B3C7E6;
+       border-bottom: 1px solid #FFFFFF; 
+	   background-image: url(sprites.gif);
+background-repeat: no-repeat;
+background-position: right 0;
+	   
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #869DC7;
+             background-color: #EAEAEA; 
+			 background-position: right -100px;} 
+footer { font-size: 70%; 
+       text-align: center;
+	   padding: 10px;
+	   background-color: #869DC7; 
+	   clear: both;
+}
+
diff --git a/Chapter ZIPs/chapter7/7.9/index.html b/Chapter ZIPs/chapter7/7.9/index.html
new file mode 100644
index 0000000..2b3ac7c
--- /dev/null
+++ b/Chapter ZIPs/chapter7/7.9/index.html	
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link href="bistro.css" rel="stylesheet">
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Menu</a></li>
+     <li><a href="directions.html">Directions</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav> 
+  <main> 
+   	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+     <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery!</p>
+	<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+   </main> <!-- end of main content -->
+   <footer>Copyright &copy;
+   </footer>
+  </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/7.9/lighthouseisland.jpg b/Chapter ZIPs/chapter7/7.9/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.9/lighthouseisland.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.9/lighthouselogo.jpg b/Chapter ZIPs/chapter7/7.9/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.9/lighthouselogo.jpg differ
diff --git a/Chapter ZIPs/chapter7/7.9/sprites.gif b/Chapter ZIPs/chapter7/7.9/sprites.gif
new file mode 100644
index 0000000..832901a
Binary files /dev/null and b/Chapter ZIPs/chapter7/7.9/sprites.gif differ
diff --git a/Chapter ZIPs/chapter7/absolute.html b/Chapter ZIPs/chapter7/absolute.html
new file mode 100644
index 0000000..c81d6e6
--- /dev/null
+++ b/Chapter ZIPs/chapter7/absolute.html	
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Absolute Positioning</title>
+<meta charset="utf-8">
+<style>
+h1 {   background-color:#cccccc;
+       padding:5px;	
+       color: #000000;
+}
+p {position: absolute;
+       left:200px;
+       top:100px;
+       font-family:Arial,sans-serif;
+       width:300px;
+}
+</style>
+</head>
+<body>
+<h1>Absolute Positioning</h1>
+<p>This paragraph is 300 pixels wide and uses CSS absolute positioning to be placed 200 pixels in from the left and 100 pixels down from the top of the browser window.</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/beached.jpg b/Chapter ZIPs/chapter7/beached.jpg
new file mode 100644
index 0000000..017c0c9
Binary files /dev/null and b/Chapter ZIPs/chapter7/beached.jpg differ
diff --git a/Chapter ZIPs/chapter7/boxsizing1.html b/Chapter ZIPs/chapter7/boxsizing1.html
new file mode 100644
index 0000000..9a3d434
--- /dev/null
+++ b/Chapter ZIPs/chapter7/boxsizing1.html	
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Default box-sizing</title>
+<meta charset="utf-8">
+<style>
+body { width: 600px; }
+.pod { float: left; 
+    width: 30%;
+	height: 150px;
+	background-color: #D1ECFF;
+	padding: 20px; margin: 10px; border: 1px solid #000033; }
+</style>
+
+</head>
+<body>
+<main>
+<h1>Default box-sizing</h1>
+ <div class="pod">
+Element 1
+</div>
+<div class="pod">
+Element 2
+</div>
+<div class="pod">
+Element 3
+</div>
+</main>
+
+</body>
+</html>
diff --git a/Chapter ZIPs/chapter7/boxsizing2.html b/Chapter ZIPs/chapter7/boxsizing2.html
new file mode 100644
index 0000000..cdce2d2
--- /dev/null
+++ b/Chapter ZIPs/chapter7/boxsizing2.html	
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>box-sizing set to border-box</title>
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body { width: 600px; }
+.pod { float: left; 
+    width: 30%;
+	height: 150px;
+	background-color: #D1ECFF;
+	padding:20px; margin: 10px; border: 1px solid #000033; }
+</style>
+
+</head>
+<body>
+<main>
+<h1>box-sizing set to border-box</h1>
+<div class="pod">
+Element 1
+</div>
+<div class="pod">
+Element 2
+</div>
+<div class="pod">
+Element 3
+</div>
+</main>
+
+</body>
+</html>
diff --git a/Chapter ZIPs/chapter7/coast2.jpg b/Chapter ZIPs/chapter7/coast2.jpg
new file mode 100644
index 0000000..ac2b452
Binary files /dev/null and b/Chapter ZIPs/chapter7/coast2.jpg differ
diff --git a/Chapter ZIPs/chapter7/faqs.html b/Chapter ZIPs/chapter7/faqs.html
new file mode 100644
index 0000000..7b4589c
--- /dev/null
+++ b/Chapter ZIPs/chapter7/faqs.html	
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>FAQs</title>
+<meta charset="utf-8">
+<style>
+#wrapper { margin: auto; width: 80%; }
+</style>
+</head>
+<body>
+<div id="wrapper">
+<h1 id="top">Frequently Asked Questions</h1>
+<ul>
+  <li><a href="#faq0">Why doesn&apos;t the heading tag go in the head section?</a></li>
+  <li><a href="#faq1">Why does the text in my web page wrap differently than the examples?</a></li>
+  <li><a href="#faq2">How can I create web pages that look exactly the same on all browsers?</a></li>
+  <li><a href="#faq3">How do I know when to use an id, a class, or a descendant selector?</a></li>
+  <li><a href="#faq4">My CSS doesn&apos;t work. What can I do?</a></li>
+</ul>
+
+<h2 id="faq0">Why doesn&apos;t the heading tag go in the head section?</h2>
+     <p>It&apos;s common for students to try to code the heading tags in the head section of the document, but someone doing this won&apos;t be happy with the way the browser displays the web page. Even though &quot;heading tag&quot; and &quot;head section&quot; sound similar, always code heading tags in the body section of the web page document.</p>
+<a href="#top">Back to Top</a>
+<h2 id="faq1">Why does the text in my web page wrap differently than the examples?</h2>
+     <p>The text may wrap a little differently because your screen resolution or browser viewport size may not be the same as those on the computer used for the screen captures. That&apos;s part of the nature of working with the Web&mdash;expect your web pages to look slightly different in the multitude of screen resolutions, browser viewport sizes, and devices that people will use to view your designs.</p>
+<a href="#top">Back to Top</a>
+<h2 id="faq2">How can I create web pages that look exactly the same on all browsers?</h2>
+	<p>You can&apos;t.Design with the most popular browsers and screen resolutions in mind,  but expect your web pages to look slightly different when displayed by different browsers and on monitors with different screen resolutions. Expect web pages to look even more different when displayed on mobile devices. You&apos;ll learn about responsive web design techniques later in this chapter.</p>
+<a href="#top">Back to Top</a>
+<h2 id="faq3">How do I know when to use an id, a class, or a descendant selector?</h2>
+	<p>The most efficient way to configure CSS is to use HTML elements as selectors. However, sometimes you need to be more specific&mdash;that&apos;s when other types of selectors are useful. Create a class when you need to configure one or more specific objects on a web page in the same way. A class can be applied more than once per web page. An id is similar to a class, but be mindful that it is not valid to apply an id more than once on a web page. To repeat: an id can be used once and only once on each web page. Use an id for a unique item, such as the navigation hyperlink that indicates the current page. As you become more comfortable with CSS, you&apos;ll begin to see the power and efficiency of descendant selectors, which allow you to target elements within a specific context (such as all paragraphs in the footer area) without the need to code additional classes or ids within the HTML code.</p>
+<a href="#top">Back to Top</a>
+<h2 id="faq4">My CSS doesn&apos;t work. What can I do?</h2>
+	<p>Coding CSS is a detail&ndash;oriented process. There are several common errors that can cause the browser not to apply CSS correctly to a web page. With a careful review of your code
+and the following tips, you should get your CSS working:</p>
+<ul>
+  <li>Verify that you are using the colon &quot;:&quot; and semicolon &quot;;&quot; symbols in the right spots&mdash;they are easy to confuse. The : symbol should separate the properties from their values. The ; symbol should be placed between each property : value configuration.</li>
+  <li>Check that you are not using = signs instead of : between each property and its value.</li>
+  <li>Verify that the { and } symbols are properly placed around the style rules for each selector.</li>
+  <li>Check the syntax of your selectors, their properties, and property values for correct usage.</li>
+  <li>If part of your CSS works and part doesn&#39;t, read through the CSS and check to determine the first rule that is not applied. Often the error is in the rule above the rule that is not applied.</li>
+  <li>Use the W3C&apos;s CSS validator at <a href="http://jigsaw.w3.org/css-validator">http://jigsaw.w3.org/css-validator </a> to help you find syntax errors.</li>
+</ul>
+
+<a href="#top">Back to Top</a>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<a href="#top">Back to Top</a>
+</div>
+</body>
+</html>
diff --git a/Chapter ZIPs/chapter7/favorites.html b/Chapter ZIPs/chapter7/favorites.html
new file mode 100644
index 0000000..94142fc
--- /dev/null
+++ b/Chapter ZIPs/chapter7/favorites.html	
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!-- This web page is demonstrated in the VideoNote "Linking to a Named Fragment" -->
+<html lang="en">
+<head>
+<title>Favorite Sites</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1 id="top">Favorite Sites</h1>
+<ul>
+  <li><a href="#hobbies">Hobbies</a></li>
+  <li><a href="#HTML5">HTML5</a></li>
+  <li><a href="#CSS">CSS</a></li>
+</ul>
+<h2 id="hobbies">Hobbies</h2>
+     <dl>
+       <dt>Running</dt>
+         <dd><a href="http://www.runningnetwork.com">http://www.runningnetwork.com</a></dd>
+       <dt>Cooking</dt>
+         <dd><a href="http://www.cooking.com">http://www.cooking.com</a></dd>
+     </dl>
+<h2 id="HTML5">HTML5</h2>
+     <dl>
+       <dt>Specification</dt>
+          <dd><a href="http://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a></dd>
+       <dt>Tutorials</dt>
+          <dd><a href="http://www.w3schools.com/html5">http://www.w3schools.com/html5</a></dd>
+       </dl>
+<h2 id="CSS">CSS</h2>
+     <dl>
+       <dt>W3C Cascading Style Sheets</dt>
+          <dd><a href="http://www.w3.org/Style/CSS">http://www.w3.org/Style/CSS</a></dd>
+       <dt>Tutorials</dt>
+          <dd><a href="http://www.w3schools.com/css3">http://www.w3schools.com/css3</a></dd>
+     </dl>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<h2><a href="#top">Back to Top</a></h2>
+</body>
+</html>
diff --git a/Chapter ZIPs/chapter7/fixed.html b/Chapter ZIPs/chapter7/fixed.html
new file mode 100644
index 0000000..c9246ee
--- /dev/null
+++ b/Chapter ZIPs/chapter7/fixed.html	
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+body {font-family:Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+} 
+#leftcolumn { float: left;
+	          width: 150px;
+} 
+#rightcolumn { margin-left: 155px;
+               background-color: #ffffff;
+               color: #000000;
+} 
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 155px;
+		background-image: url(lighthouselogo.jpg); 
+		background-repeat: no-repeat;
+		height: 130px;
+}
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+	 padding-bottom: 1em;
+}
+p { margin-bottom: 3em; }
+.content {padding: 20px 20px 0 20px; 
+} 
+#floatright { margin: 10px;
+             float: right;
+}
+
+footer {font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom: 5em;
+		 padding-top: 5em;
+}
+nav { position: fixed; }
+nav ul { list-style-type: none; 
+         padding: 10px; }
+nav a { text-decoration: none; 
+        padding: 10px;
+        font-weight: bold; }
+
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <div id="leftcolumn">
+    <nav>
+	 <ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	 </ul>
+    </nav>
+  </div>
+  <div id="rightcolumn">
+    <div class="content"> 
+      <img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+    </div>
+    <footer>Copyright &copy; 
+    </footer>
+  </div>
+</div>
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/float.html b/Chapter ZIPs/chapter7/float.html
new file mode 100644
index 0000000..5a49a9d
--- /dev/null
+++ b/Chapter ZIPs/chapter7/float.html	
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS</title>
+<meta charset="utf-8">
+<style>
+h1 {   background-color:#A8C682;
+       padding: 5px;	
+       color: #000000;
+}
+p {    font-family: Arial,sans-serif;    
+}
+#yls {float: right;
+      margin: 0 0 5px 5px; 
+      border: 1px solid #000000;
+}
+
+</style>
+</head>
+<body>
+<h1>Wildflowers</h1>
+<img id="yls" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
+<p>The heading and paragraph follow normal flow. The Yellow Lady Slipper pictured on the right is a wildflower. It grows in wooded areas and blooms in June each year. The Yellow Lady Slipper is a member of the orchid family.</p> 
+</body>
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/float/.clear1.html.kate-swp b/Chapter ZIPs/chapter7/float/.clear1.html.kate-swp
new file mode 100644
index 0000000..1583b55
Binary files /dev/null and b/Chapter ZIPs/chapter7/float/.clear1.html.kate-swp differ
diff --git a/Chapter ZIPs/chapter7/float/clear1.html b/Chapter ZIPs/chapter7/float/clear1.html
new file mode 100644
index 0000000..f006195
--- /dev/null
+++ b/Chapter ZIPs/chapter7/float/clear1.html	
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS Float</title>
+<meta charset="utf-8">
+<style>
+body {width: 500px;
+      background-color: #FFFFFF;
+      color: #000000;
+}
+div {background-color: #F3F1BF;
+} 
+h1 {   background-color: #658B42;
+       padding: 10px;	
+       color: #e1db5f;
+}
+p {    font-family: Arial,sans-serif; 
+}
+.float {float: left;
+        margin-right: 10px;
+        border: 3px ridge #000000;
+}
+.clearleft {clear: left; }
+</style> 
+</head> 
+<body> 
+<h1>Yellow Lady Slipper</h1> 
+<div>
+<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100"> 
+<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p> 
+<br class="clearleft">
+</div>
+<h2 >Be Green When Enjoying Wildflowers</h2> 
+<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p> 
+</body> 
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/float/clear2.html b/Chapter ZIPs/chapter7/float/clear2.html
new file mode 100644
index 0000000..3476bb9
--- /dev/null
+++ b/Chapter ZIPs/chapter7/float/clear2.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS Float</title>
+<meta charset="utf-8">
+<style> 
+body {width: 500px;
+      background-color: #FFFFFF;
+      color: #000000;
+}
+div {background-color: #F3F1BF;
+} 
+h1 {   background-color: #658B42;
+       padding: 10px;	
+       color: #e1db5f;
+}
+p {    font-family: Arial, sans-serif; 
+}
+.float {float: left;
+        margin-right: 10px;
+        border: 3px ridge #000000;
+}
+.clearleft {clear:left; }
+</style> 
+</head> 
+<body> 
+<h1>Yellow Lady Slipper</h1> 
+<div>
+<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100"> 
+<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p> 
+</div>
+<h2 class="clearleft">Be Green When Enjoying Wildflowers</h2> 
+<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p> 
+</body> 
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/float/float.html b/Chapter ZIPs/chapter7/float/float.html
new file mode 100644
index 0000000..c376afb
--- /dev/null
+++ b/Chapter ZIPs/chapter7/float/float.html	
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS Float</title>
+<meta charset="utf-8">
+<style>
+body {width: 500px;
+      background-color: #FFFFFF;
+      color: #000000;
+}
+div {background-color: #F3F1BF;
+}
+h1 {   background-color: #658B42;
+       padding: 10px;	
+       color: #E1DB5F;
+}
+p {    font-family: Arial,sans-serif;  
+}
+.float {float: left;
+        margin-right: 10px;
+        border: 3px ridge #000000;
+}
+</style>
+</head>
+<body>
+<h1>Yellow Lady Slipper</h1>
+<div>
+<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
+<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
+</div>
+<h2>Be Green When Enjoying Wildflowers</h2>
+<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p> 
+</body>
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/float/lighthouseisland.jpg b/Chapter ZIPs/chapter7/float/lighthouseisland.jpg
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/Chapter ZIPs/chapter7/float/lighthouseisland.jpg differ
diff --git a/Chapter ZIPs/chapter7/float/overflow.html b/Chapter ZIPs/chapter7/float/overflow.html
new file mode 100644
index 0000000..464b11a
--- /dev/null
+++ b/Chapter ZIPs/chapter7/float/overflow.html	
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS Float</title>
+<meta charset="utf-8">
+<style>
+body {width: 500px;
+      background-color: #FFFFFF;
+      color: #000000;
+}
+div { background-color: #F3F1BF;
+      overflow: auto;
+      width: 100%;  
+}
+ 
+h1 {   background-color: #658B42;
+       padding: 10px;	
+       color: #E1DB5F;
+}
+p {    font-family: Arial, sans-serif; 
+}
+.float {float: left;
+        margin-right: 10px;
+        border: 3px ridge #000000;
+}
+</style> 
+</head> 
+<body> 
+<h1>Yellow Lady Slipper</h1> 
+<div>
+<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100"> 
+<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p> 
+</div>
+<h2>Be Green When Enjoying Wildflowers</h2> 
+<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p> 
+</body> 
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/float/scroll.html b/Chapter ZIPs/chapter7/float/scroll.html
new file mode 100644
index 0000000..f5b2c48
--- /dev/null
+++ b/Chapter ZIPs/chapter7/float/scroll.html	
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS Float</title>
+<meta charset="utf-8">
+<style>
+body {width: 500px;
+      background-color: #FFFFFF;
+      color: #000000;
+}
+div { background-color: #F3F1BF;
+      overflow: scroll;
+      width: 300px;	 
+      height: 100px;	  
+}
+ 
+h1 {   background-color: #658B42;
+       padding: 10px;	
+       color: #E1DB5F;
+}
+p {    font-family: Arial, sans-serif; 
+}
+.float {float: left;
+        margin-right: 10px;
+        border: 3px ridge #000000;
+}
+</style> 
+</head> 
+<body> 
+<h1>Yellow Lady Slipper</h1> 
+<div>
+<img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100"> 
+<p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p> 
+</div>
+<h2>Be Green When Enjoying Wildflowers</h2> 
+<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p> 
+</body> 
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/float/twocolumn.html b/Chapter ZIPs/chapter7/float/twocolumn.html
new file mode 100644
index 0000000..823f415
--- /dev/null
+++ b/Chapter ZIPs/chapter7/float/twocolumn.html	
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body {font-family:Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           width: 80%;
+		   margin: auto;
+           min-width:850px;
+} 
+nav { float: left;
+	  width: 150px;
+	  padding: 20px;
+} 
+main { margin-left: 165px;
+       background-color: #FFFFFF;
+	   padding: 20px;
+	     /* The following declaration forces IE to display
+	   the new HTML5 main element as needed. 
+       The display property is introduced in Chapter 7	 */
+	   display: block;
+} 
+header{ background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 155px;
+}
+h1 { margin: 0; }
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+main img { margin: 10px;
+           float: right;
+}
+footer {font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom:20px;
+		 margin-left: 165px;
+		 background-color: #FFFFFF;
+}	
+
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+    <nav>
+      <a href="index.html">Home</a><br>
+      <a href="rooms.html">Menu</a><br>
+      <a href="directions.html">Directions</a><br>
+      <a href="contact.html">Contact</a>
+	</nav>
+    <main> 
+      <img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+    </main>
+    <footer>Copyright &copy;
+    </footer>
+</div>
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/float/yls.jpg b/Chapter ZIPs/chapter7/float/yls.jpg
new file mode 100644
index 0000000..c0fd27e
Binary files /dev/null and b/Chapter ZIPs/chapter7/float/yls.jpg differ
diff --git a/Chapter ZIPs/chapter7/layout/lighthouse.jpg b/Chapter ZIPs/chapter7/layout/lighthouse.jpg
new file mode 100644
index 0000000..a81be63
Binary files /dev/null and b/Chapter ZIPs/chapter7/layout/lighthouse.jpg differ
diff --git a/Chapter ZIPs/chapter7/layout/lightlogo.jpg b/Chapter ZIPs/chapter7/layout/lightlogo.jpg
new file mode 100644
index 0000000..f54bc0b
Binary files /dev/null and b/Chapter ZIPs/chapter7/layout/lightlogo.jpg differ
diff --git a/Chapter ZIPs/chapter7/layout/sticky.html b/Chapter ZIPs/chapter7/layout/sticky.html
new file mode 100644
index 0000000..9a0ed52
--- /dev/null
+++ b/Chapter ZIPs/chapter7/layout/sticky.html	
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title> 
+<meta charset="utf-8">
+<style>
+body {font-family:Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width: 850px;
+		   max-width: 1200px;
+} 
+
+ 
+main { display: block; /* for Internet Explorer version 10 and below */
+       padding: 3em;
+       background-color: #ffffff;
+       color: #000000;
+} 
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 30px;
+	}
+nav { position: sticky;
+      top: 0;
+	  background-color: #B3C7E6; 
+	  height: 40px;
+}
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+
+#floatright { margin: 10px;
+             float: right;
+}
+
+footer { background-color: #869dc7; 
+         color: #FFFFFF;
+         font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding: 2em;
+}	
+nav ul { list-style-type: none;}
+nav li {  display: inline; }
+nav a  { text-decoration: none; 
+         padding-right: 10px; }
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+     <ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	</ul>
+  </nav>
+  <main> 
+      <img src="lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinammon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinammon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinammon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinammon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinammon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+
+
+
+    </main>
+    <footer>Copyright &copy; 2020
+    </footer>
+</div>
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/lighthouseisland.jpg b/Chapter ZIPs/chapter7/lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/Chapter ZIPs/chapter7/lighthouseisland.jpg differ
diff --git a/Chapter ZIPs/chapter7/lighthouselogo.jpg b/Chapter ZIPs/chapter7/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/Chapter ZIPs/chapter7/lighthouselogo.jpg differ
diff --git a/Chapter ZIPs/chapter7/navigation.html b/Chapter ZIPs/chapter7/navigation.html
new file mode 100644
index 0000000..a7d507c
--- /dev/null
+++ b/Chapter ZIPs/chapter7/navigation.html	
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+body {font-family:Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:850px;
+} 
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px;
+
+}
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+main { padding: 20px 20px 0 20px; 
+       background-color:#ffffff;
+	   color: #000000;
+	   display: block; 
+} 
+main img { margin: 10px;
+             float: right;
+}
+footer {font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom:20px;
+}	
+nav ul { list-style-type: none;}
+nav li { display: inline; }
+nav a { text-decoration: none; 
+         padding-right: 10px; }
+
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse&nbsp;Island&nbsp;Bistro</h1>
+  </header>
+	<nav>
+     <ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	</ul>
+  </nav>
+  <main> 
+      <img src="lighthouseisland.jpg" width="250" height="355"  alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+    </main>
+    <footer>Copyright &copy; 
+    </footer>
+</div>
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/relative.html b/Chapter ZIPs/chapter7/relative.html
new file mode 100644
index 0000000..44b7353
--- /dev/null
+++ b/Chapter ZIPs/chapter7/relative.html	
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Relative Positioning</title>
+<meta charset="utf-8">
+<style>
+h1 {   background-color:#cccccc;
+       padding:5px;	
+       color: #000000;
+}
+p {  position: relative;
+	 left:30px;
+     font-family:Arial,sans-serif;
+}
+</style>
+</head>
+<body>
+<h1>Relative Positioning</h1>
+<p>This paragraph uses CSS relative positioning to be placed 30 pixels in from the left side.</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/singlecol.html b/Chapter ZIPs/chapter7/singlecol.html
new file mode 100644
index 0000000..19d341d
--- /dev/null
+++ b/Chapter ZIPs/chapter7/singlecol.html	
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Layout Example</title>
+<meta charset="utf-8">
+<style>
+
+</style>
+</head>
+<body>
+<div id="wrapper">
+  <header><h1>Layout Example</h1></header>
+  <nav>
+    <a href="index.html">Home</a>
+    <a href="page1.html">Page 1</a>
+    <a href="page2.html">Page 2</a>
+  </nav>
+  <main>
+    <h2>Page Heading</h2>
+    <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.</p>
+  </main>
+  <footer>Copyright &copy; </footer>
+</div>
+</body>
+</html>
+
+
+
diff --git a/Chapter ZIPs/chapter7/sprites.gif b/Chapter ZIPs/chapter7/sprites.gif
new file mode 100644
index 0000000..832901a
Binary files /dev/null and b/Chapter ZIPs/chapter7/sprites.gif differ
diff --git a/Chapter ZIPs/chapter7/spwstart/beached.jpg b/Chapter ZIPs/chapter7/spwstart/beached.jpg
new file mode 100644
index 0000000..017c0c9
Binary files /dev/null and b/Chapter ZIPs/chapter7/spwstart/beached.jpg differ
diff --git a/Chapter ZIPs/chapter7/spwstart/index.html b/Chapter ZIPs/chapter7/spwstart/index.html
new file mode 100644
index 0000000..525dd02
--- /dev/null
+++ b/Chapter ZIPs/chapter7/spwstart/index.html	
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>KayakDoorCounty.net</title>
+<meta charset="utf-8">
+<style> 
+body { font-family: Tahoma, Verdana, Arial, sans-serif; 
+       margin: 0; padding: 0; 
+}
+.hero { 
+    background-image: url(beached.jpg); 
+    min-height: 100vh; 
+	background-position: center;
+    background-repeat: no-repeat; 
+    background-size: cover;  
+}	
+.tourshero { 
+    background-image: url(kayaks.jpg); 
+    min-height: 100vh;
+	background-position: center;
+    background-repeat: no-repeat; 
+    background-size: cover;  
+}
+.rentalshero { 
+    background-image: url(rentals.jpg); 
+    min-height: 100vh; 
+	background-position: center;
+    background-repeat: no-repeat; 
+    background-size: cover; 
+}
+.contacthero { 
+    background-image: url(lonekayak.jpg); 
+    min-height: 100vh; 
+    background-position: center;	
+    background-repeat: no-repeat; 
+    background-size: cover; 
+}
+nav { z-index:9999;
+      position: fixed;
+	  top: 0;
+	  left: 0;
+	  padding: .5em; 
+	  height: 40px;
+	  background:rgba(25,25, 25, 0.70);
+	  width: 100%;
+	  font-size: 120%;
+	  font-weight: bold;
+	  min-width: 900px;    	  }
+nav ul { list-style-type: none; 
+         margin: 5px; }
+nav ul li { display: inline; padding-left: 2em; padding-right: 2em; }
+nav a { text-decoration:none; }
+nav a:link { color: #EAEAEA; }
+nav a:visited { color: #FFF; }
+nav a:hover { color: #FDA27F; }
+h1 { height: 100px; 
+     padding-top: 2em; 
+	 text-align: center;
+      background:rgba(255, 255, 255, 0.80);
+     	}
+.space  { height: 20vh; }
+#tours, #rentals, #contact {  background-color: #FFF;
+						  width: 60%;
+						  padding-left: 6em;
+						  padding-top: 70px;
+						  padding-bottom: 2em;
+}
+footer {   background:rgba(25,25, 25, 0.90);
+         width: 100%;
+         font-size: 90%;
+         text-align: center;	
+         color: #EAEAEA;
+         position: fixed;
+         bottom: 0;		 
+		}	
+footer a { text-decoration: none;
+           color: #EAEAEA; }		
+</style> 
+</head> 
+<body> 
+<nav>
+
+
+
+
+
+
+</nav>
+
+<!-- Home Page -->
+<section id="    " class="hero" >
+<div class="space"> </div>
+<h1><a href="#home"><img src="kayakdc.gif" alt="KayakDoorCounty.net"></a></h1> 
+</section>
+
+<!-- Tours Page -->
+<section id="    "> 
+<h2>Tours by KayakDoorCounty.net</h2>
+<h2>Your next adventure is only a paddle away....</h2> 
+<p>Take a guided kayak tour while you explore the scenic shoreline of Door County<p>
+<h3>Featured tours this week:</h3>
+<ul>
+  <li>Cana Island</li>
+  <li>Mink River</li>
+  <li>Europe Lake</li>
+</ul>
+</section> 
+<div class="tourshero"></div>
+<!-- Rentals Page -->
+<section id="       "> 
+<h2>Rent Kayaks from KayakDoorCounty.net</h2>
+<h3>Be Your Own Guide.....</h3> 
+<p>Half day, full day, and week-long rentals available.<br><br>
+Rent a kayak at one of these three scenic locations:</p>
+<ul>
+<li>Eagle Harbor</li>
+<li>Sister Bay</li>
+<li>Garrett Bay</li>
+</ul>
+</section>
+<div class="rentalshero"></div>
+<!-- Contact Page -->
+<section  id="       "> 
+<h2>Contact KayakDoorCounty.net</h2>
+<h3>Call, Text, or Email</h3>
+<p>A trained kayak guide will answer all your questions and get you out on the water!<br>
+<p>Call to reserve your kayak today!</p>
+555-555-5555<br><br>
+<a href="email:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</section>
+<div class="contacthero"></div>
+<footer>
+KayakDoorCounty.net<br>
+<a href="mailto:info@kayakdoorcounty.net">info@kayakdoorcounty.net</a>
+</footer>
+</body> 
+</html> 
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/spwstart/kayakdc.gif b/Chapter ZIPs/chapter7/spwstart/kayakdc.gif
new file mode 100644
index 0000000..8fd7564
Binary files /dev/null and b/Chapter ZIPs/chapter7/spwstart/kayakdc.gif differ
diff --git a/Chapter ZIPs/chapter7/spwstart/kayaks.jpg b/Chapter ZIPs/chapter7/spwstart/kayaks.jpg
new file mode 100644
index 0000000..61a8b35
Binary files /dev/null and b/Chapter ZIPs/chapter7/spwstart/kayaks.jpg differ
diff --git a/Chapter ZIPs/chapter7/spwstart/lonekayak.jpg b/Chapter ZIPs/chapter7/spwstart/lonekayak.jpg
new file mode 100644
index 0000000..3f4a0c7
Binary files /dev/null and b/Chapter ZIPs/chapter7/spwstart/lonekayak.jpg differ
diff --git a/Chapter ZIPs/chapter7/spwstart/rentals.jpg b/Chapter ZIPs/chapter7/spwstart/rentals.jpg
new file mode 100644
index 0000000..dd42699
Binary files /dev/null and b/Chapter ZIPs/chapter7/spwstart/rentals.jpg differ
diff --git a/Chapter ZIPs/chapter7/starter1.html b/Chapter ZIPs/chapter7/starter1.html
new file mode 100644
index 0000000..8b64ba2
--- /dev/null
+++ b/Chapter ZIPs/chapter7/starter1.html	
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS</title>
+<meta charset="utf-8">
+<style>
+
+</style>
+</head>
+<body>
+ 
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/starter2.html b/Chapter ZIPs/chapter7/starter2.html
new file mode 100644
index 0000000..995eddb
--- /dev/null
+++ b/Chapter ZIPs/chapter7/starter2.html	
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS Float</title>
+<meta charset="utf-8">
+<style>
+body { width:500px;
+       background-color:#FFFFFF;
+       color:#000000;
+}
+div {  background-color:#F3F1BF;
+}
+h1 {   background-color:#658B42;
+       padding:10px;	
+       color: #E1DB5F;
+}
+p {    font-family:Arial,sans-serif;  
+ }
+</style>
+</head>
+<body>
+<h1>Yellow Lady Slipper</h1>
+<div>
+  <img src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
+  <p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
+</div>
+<h2>Be Green When Enjoying Wildflowers</h2>
+<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p> 
+</body>
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/starter3.html b/Chapter ZIPs/chapter7/starter3.html
new file mode 100644
index 0000000..005b55d
--- /dev/null
+++ b/Chapter ZIPs/chapter7/starter3.html	
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body {font-family:Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+} 
+nav { float: left;
+	  width: 150px;
+} 
+main { margin-left: 155px;
+       background-color: #ffffff;
+       color: #000000;
+} 
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 155px;
+		background-image: url(lighthouselogo.jpg); 
+		background-repeat: no-repeat;
+		height: 130px;
+}
+
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+.content {padding: 20px 20px 0 20px; 
+} 
+main { display: block; }
+#floatright { margin: 10px;
+             float: right;
+}
+
+footer { font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom:20px;
+}
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+    <nav>
+      <a href="index.html">Home</a>
+      <a href="rooms.html">Menu</a>
+      <a href="directions.html">Directions</a>
+      <a href="contact.html">Contact</a>
+    </nav>
+  <main>
+    <div class="content"> 
+      <img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+    </div>
+    <footer>Copyright &copy;
+    </footer>
+  </main>
+</div>
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/starter4.html b/Chapter ZIPs/chapter7/starter4.html
new file mode 100644
index 0000000..8580eb8
--- /dev/null
+++ b/Chapter ZIPs/chapter7/starter4.html	
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<style>
+body {font-family:Verdana, Arial, sans-serif;
+      background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+}  
+header { background-color: #869dc7;
+        color: #00005D; 
+        font-size: 150%; 
+        padding: 10px 10px 10px 155px;
+		background-image: url(lighthouselogo.jpg); 
+		background-repeat: no-repeat;
+		height: 130px;
+}
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+main { padding: 20px 20px 0 20px; 
+           background-color: #ffffff;
+           color: #000000;
+		   display: block;
+} 
+main img { margin: 10px;
+             float: right;
+}
+
+footer {font-size:70%;
+         text-align: center;
+		 clear: right;
+         padding-bottom:20px;
+}
+</style> 
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+	<ul>
+	  <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	 </ul>
+  </nav>
+  <main> 
+      <img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  </main>
+  <footer>Copyright &copy;
+  </footer>
+</div>
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/starter5.html b/Chapter ZIPs/chapter7/starter5.html
new file mode 100644
index 0000000..4ffd069
--- /dev/null
+++ b/Chapter ZIPs/chapter7/starter5.html	
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Menu</a></li>
+     <li><a href="directions.html">Directions</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav> 
+  <main> 
+   	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+     <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery!</p>
+	<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  </main> <!-- end of main content -->
+   <footer>Copyright &copy;
+   </footer>
+  </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/Chapter ZIPs/chapter7/template.html b/Chapter ZIPs/chapter7/template.html
new file mode 100644
index 0000000..6a48229
--- /dev/null
+++ b/Chapter ZIPs/chapter7/template.html	
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Chapter ZIPs/chapter7/twocolumn3.html b/Chapter ZIPs/chapter7/twocolumn3.html
new file mode 100644
index 0000000..5093a96
--- /dev/null
+++ b/Chapter ZIPs/chapter7/twocolumn3.html	
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Layout Example</title>
+<meta charset="utf-8">
+<style>
+body { font-family:Verdana, Arial, sans-serif;
+}
+#wrapper { background-color: #b3c7e6; 
+           color: #000066;
+           width: 80%;
+		   margin: auto;
+           min-width:940px;
+} 
+nav { float: left;
+	          width: 150px;
+} 
+
+main { margin-left: 155px;
+               background-color: #ffffff;
+               color: #000000;
+} 
+</style>
+</head>
+<body>
+<div id="wrapper">
+  <header><h1>Layout Example</h1></header>
+  <nav>
+   <ul>
+    <li><a href="index.html">Home</a></li>
+    <li><a href="menu.html">Menu</a></li>
+    <li><a href="directions.html">Directions</a></li>
+	<li><a href="contact.html">Contact</a></li>
+   </ul>
+  </nav>
+  <main>
+    <h2>Page Heading</h2>
+    <p>This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence. This is a sentence. This s a sentence.</p>
+  </main>
+  <footer>Copyright &copy; </footer>
+</div>
+</body>
+</html>
+
+
+
diff --git a/Chapter ZIPs/chapter7/yls.jpg b/Chapter ZIPs/chapter7/yls.jpg
new file mode 100644
index 0000000..7dd9982
Binary files /dev/null and b/Chapter ZIPs/chapter7/yls.jpg differ
diff --git a/Chapter ZIPs/chapter7/yogadoor2.jpg b/Chapter ZIPs/chapter7/yogadoor2.jpg
new file mode 100644
index 0000000..fe0de96
Binary files /dev/null and b/Chapter ZIPs/chapter7/yogadoor2.jpg differ
