CCF_100/ASDV-WebDev
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Chapter7

Browse Source
This commit is contained in:
Chloe Fontenot 🏳️‍⚧️
2023-02-16 14:15:19 -06:00
parent a3d17b20cc
commit 8b84fc39b8
143 changed files with 4291 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -11,3 +11,4 @@
>>>>>>> Stashed changes >>>>>>> Stashed changes
/Assignments/lab6.2_CalebFontenot/nbproject/private/ /Assignments/lab6.2_CalebFontenot/nbproject/private/
/Assignments/MP04_CalebFontenot/nbproject/private/ /Assignments/MP04_CalebFontenot/nbproject/private/
/Assignments/lab7_CalebFontenot/nbproject/private/

3
Assignments/lab7_CalebFontenot/.bowerrc Normal file
View File

@@ -0,0 +1,3 @@
{
"directory": "public_html/bower_components"
}

9
Assignments/lab7_CalebFontenot/Gruntfile.js Normal file
View File

@@ -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({
});
};

13
Assignments/lab7_CalebFontenot/bower.json Normal file
View File

@@ -0,0 +1,13 @@
{
"name": "lab7_CalebFontenot",
"version": "1.0.0",
"main": "path/to/main.css",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
},
"devDependencies": {
}
}

10
Assignments/lab7_CalebFontenot/gulpfile.js Normal file
View File

@@ -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
});

5
Assignments/lab7_CalebFontenot/nbproject/project.properties Normal file
View File

@@ -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}

9
Assignments/lab7_CalebFontenot/nbproject/project.xml Normal file
View File

@@ -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>

8
Assignments/lab7_CalebFontenot/package.json Normal file
View File

@@ -0,0 +1,8 @@
{
"name": "lab7_CalebFontenot",
"version": "1.0.0",
"keywords": ["util", "functional", "server", "client", "browser"],
"author": "caleb",
"contributors": [],
"dependencies": {}
}

33
Assignments/lab7_CalebFontenot/public_html/7.1/box1.html Normal file
View File

@@ -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>

32
Assignments/lab7_CalebFontenot/public_html/7.1/box2.html Normal file
View File

@@ -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>

BIN
Assignments/lab7_CalebFontenot/public_html/7.10/beached.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

25
Assignments/lab7_CalebFontenot/public_html/7.10/index.html Normal file
View File

@@ -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>

112
Assignments/lab7_CalebFontenot/public_html/7.11/index.html Normal file
View File

@@ -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>

BIN
Assignments/lab7_CalebFontenot/public_html/7.11/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Assignments/lab7_CalebFontenot/public_html/7.11/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
Assignments/lab7_CalebFontenot/public_html/7.12/beached.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

134
Assignments/lab7_CalebFontenot/public_html/7.12/index.html Normal file
View File

@@ -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>

132
Assignments/lab7_CalebFontenot/public_html/7.12/index1.html Normal file
View File

@@ -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>

146
Assignments/lab7_CalebFontenot/public_html/7.12/index2.html Normal file
View File

@@ -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>

BIN
Assignments/lab7_CalebFontenot/public_html/7.12/kayakdc.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
Assignments/lab7_CalebFontenot/public_html/7.12/kayaks.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
Assignments/lab7_CalebFontenot/public_html/7.12/lonekayak.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
Assignments/lab7_CalebFontenot/public_html/7.12/rentals.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

34
Assignments/lab7_CalebFontenot/public_html/7.2/float.html Normal file
View File

@@ -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>

BIN
Assignments/lab7_CalebFontenot/public_html/7.2/yls.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

44
Assignments/lab7_CalebFontenot/public_html/7.3/float.html Normal file
View File

@@ -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>

BIN
Assignments/lab7_CalebFontenot/public_html/7.3/yls.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

47
Assignments/lab7_CalebFontenot/public_html/7.4/float.html Normal file
View File

@@ -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>

BIN
Assignments/lab7_CalebFontenot/public_html/7.4/yls.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

31
Assignments/lab7_CalebFontenot/public_html/7.5/boxsizing1.html Normal file
View File

@@ -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>

32
Assignments/lab7_CalebFontenot/public_html/7.5/boxsizing2.html Normal file
View File

@@ -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>

BIN
Assignments/lab7_CalebFontenot/public_html/7.5/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Assignments/lab7_CalebFontenot/public_html/7.5/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

112
Assignments/lab7_CalebFontenot/public_html/7.5/starter5.html Normal file
View File

@@ -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>

89
Assignments/lab7_CalebFontenot/public_html/7.6/index.html Normal file
View File

@@ -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>

BIN
Assignments/lab7_CalebFontenot/public_html/7.6/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Assignments/lab7_CalebFontenot/public_html/7.6/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

59
Assignments/lab7_CalebFontenot/public_html/7.6/singlecol.html Normal file
View File

@@ -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>

47
Assignments/lab7_CalebFontenot/public_html/7.7/bistro.css Normal file
View File

@@ -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;
}

40
Assignments/lab7_CalebFontenot/public_html/7.7/index.html Normal file
View File

@@ -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>

BIN
Assignments/lab7_CalebFontenot/public_html/7.7/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Assignments/lab7_CalebFontenot/public_html/7.7/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

44
Assignments/lab7_CalebFontenot/public_html/7.8/bistro.css Normal file
View File

@@ -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;
}

31
Assignments/lab7_CalebFontenot/public_html/7.8/bistroprint.css Normal file
View File

@@ -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;
}

41
Assignments/lab7_CalebFontenot/public_html/7.8/index.html Normal file
View File

@@ -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>

BIN
Assignments/lab7_CalebFontenot/public_html/7.8/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Assignments/lab7_CalebFontenot/public_html/7.8/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

49
Assignments/lab7_CalebFontenot/public_html/7.9/bistro.css Normal file
View File

@@ -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;
}

40
Assignments/lab7_CalebFontenot/public_html/7.9/index.html Normal file
View File

@@ -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>

BIN
Assignments/lab7_CalebFontenot/public_html/7.9/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Assignments/lab7_CalebFontenot/public_html/7.9/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
Assignments/lab7_CalebFontenot/public_html/7.9/sprites.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

15
Assignments/lab7_CalebFontenot/public_html/index.html Normal file
View File

@@ -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>

14
Assignments/lab7_CalebFontenot/public_html/starter1.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
</body>
</html>

30
Assignments/lab7_CalebFontenot/public_html/starter2.html Normal file
View File

@@ -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>

81
Assignments/lab7_CalebFontenot/public_html/starter3.html Normal file
View File

@@ -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>

74
Assignments/lab7_CalebFontenot/public_html/starter4.html Normal file
View File

@@ -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>

54
Assignments/lab7_CalebFontenot/public_html/twocolumn3.html Normal file
View File

@@ -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>

28
Assignments/lab7_CalebFontenot/test/singlecol.html Normal file
View File

@@ -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>

31
Chapter ZIPs/chapter7/7.1/box1.html Normal file
View File

@@ -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>

31
Chapter ZIPs/chapter7/7.1/box2.html Normal file
View File

@@ -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>

BIN
Chapter ZIPs/chapter7/7.10/beached.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

25
Chapter ZIPs/chapter7/7.10/index.html Normal file
View File

@@ -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>

112
Chapter ZIPs/chapter7/7.11/index.html Normal file
View File

@@ -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>

BIN
Chapter ZIPs/chapter7/7.11/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Chapter ZIPs/chapter7/7.11/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
Chapter ZIPs/chapter7/7.12/beached.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

134
Chapter ZIPs/chapter7/7.12/index.html Normal file
View File

@@ -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>

132
Chapter ZIPs/chapter7/7.12/index1.html Normal file
View File

@@ -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>

146
Chapter ZIPs/chapter7/7.12/index2.html Normal file
View File

@@ -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>

BIN
Chapter ZIPs/chapter7/7.12/kayakdc.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
Chapter ZIPs/chapter7/7.12/kayaks.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
Chapter ZIPs/chapter7/7.12/lonekayak.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
Chapter ZIPs/chapter7/7.12/rentals.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

34
Chapter ZIPs/chapter7/7.2/float.html Normal file
View File

@@ -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>

BIN
Chapter ZIPs/chapter7/7.2/yls.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

51
Chapter ZIPs/chapter7/7.3/iefix.html Normal file
View File

@@ -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>

46
Chapter ZIPs/chapter7/7.3/index.html Normal file
View File

@@ -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>

88
Chapter ZIPs/chapter7/7.4/index.html Normal file
View File

@@ -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>

BIN
Chapter ZIPs/chapter7/7.4/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Chapter ZIPs/chapter7/7.4/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

85
Chapter ZIPs/chapter7/7.5/index.html Normal file
View File

@@ -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>

BIN
Chapter ZIPs/chapter7/7.5/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Chapter ZIPs/chapter7/7.5/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

89
Chapter ZIPs/chapter7/7.6/index.html Normal file
View File

@@ -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>

BIN
Chapter ZIPs/chapter7/7.6/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Chapter ZIPs/chapter7/7.6/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

47
Chapter ZIPs/chapter7/7.7/bistro.css Normal file
View File

@@ -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;
}

40
Chapter ZIPs/chapter7/7.7/index.html Normal file
View File

@@ -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>

BIN
Chapter ZIPs/chapter7/7.7/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Chapter ZIPs/chapter7/7.7/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

44
Chapter ZIPs/chapter7/7.8/bistro.css Normal file
View File

@@ -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;
}

31
Chapter ZIPs/chapter7/7.8/bistroprint.css Normal file
View File

@@ -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;
}

41
Chapter ZIPs/chapter7/7.8/index.html Normal file
View File

@@ -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>

BIN
Chapter ZIPs/chapter7/7.8/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Chapter ZIPs/chapter7/7.8/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

49
Chapter ZIPs/chapter7/7.9/bistro.css Normal file
View File

@@ -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;
}

40
Chapter ZIPs/chapter7/7.9/index.html Normal file
View File

@@ -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>

BIN
Chapter ZIPs/chapter7/7.9/lighthouseisland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Chapter ZIPs/chapter7/7.9/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

Some files were not shown because too many files have changed in this diff Show More