Refactor. JS time!
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Practice with Gradients</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
background-color: #DA70D6;
|
||||
background-image: linear-gradient(to
|
||||
bottom, #FF0000, #DA70D6);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Linear Gradient</h1>
|
||||
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content
|
||||
This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content
|
||||
This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content
|
||||
This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content
|
||||
This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content
|
||||
This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content
|
||||
This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
|
||||
<h2>Heading 2</h2>
|
||||
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Practice with Gradients</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
background-color: #DA70D6;
|
||||
background-image: radial-gradient(#FF0000, #DA70D6);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Radial Gradient</h1>
|
||||
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content
|
||||
This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content
|
||||
This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content
|
||||
This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content
|
||||
This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content
|
||||
This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content
|
||||
This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
|
||||
<h2>Heading 2</h2>
|
||||
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Lighthouse Bistro</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body { background-image: url(background.jpg);
|
||||
font-family: Arial, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
h1 { background-image: url(lighthouselogo.jpg);
|
||||
background-color: #00ff00;
|
||||
background-repeat: no-repeat;
|
||||
height: 100px; font-size: 3em;
|
||||
padding-left: 150px; padding-top: 30px;
|
||||
border-radius: 15px;
|
||||
margin-top: 0;
|
||||
text-shadow: 3px 3px 3px #00ff00;
|
||||
}
|
||||
|
||||
h2 { color: #000033;
|
||||
font-family: arial, sans-serif;
|
||||
text-shadow: 1px 1px 0 #00ff00;
|
||||
}
|
||||
footer { font-size: .80em;
|
||||
font-style: italic;
|
||||
}
|
||||
#container { background-color: #FFFFFF;
|
||||
padding: 2em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: #FFFFFF;
|
||||
padding: 2em;
|
||||
width: 80%;
|
||||
min-width: 800px;
|
||||
box-shadow: 5px 5px 100px #00ff00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<header>
|
||||
<h1>Lighthouse Bistro</h1>
|
||||
</header>
|
||||
<nav><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="directions.html">Directions</a> <a href="contact.html">Contact</a>
|
||||
</nav>
|
||||
<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>
|
||||
<footer>
|
||||
Copyright © Your Name Here
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
After Width: | Height: | Size: 7.0 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 45 KiB |
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>KayakDoorCounty.net</title>
|
||||
<style>
|
||||
body { background-color: #FFFFE8;
|
||||
font-family: Verdana, Arial, sans-serif; }
|
||||
#container { width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
min-width: 650px;
|
||||
max-width: 1280px;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 10px 10px 10px #333333;
|
||||
border: 1px solid #000033;
|
||||
}
|
||||
header { background-color: #000033;
|
||||
color: #FFFFB9;
|
||||
background-image: url(headerbackblue.jpg);
|
||||
background-position: right;
|
||||
background-repeat: no-repeat;
|
||||
height: 80px;
|
||||
padding-top: 5px;
|
||||
padding-left: 2em;
|
||||
text-shadow: 1px 1px 1px #FFF;
|
||||
}
|
||||
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; }
|
||||
h1 { margin-bottom: 0; }
|
||||
nav { font-weight: bold;
|
||||
font-size: 1.25em;
|
||||
background-color: #FFFFCC;
|
||||
text-align: center;
|
||||
}
|
||||
nav a { text-decoration: none; }
|
||||
main { background-color: #004D99;
|
||||
background-image: url(heroback2.jpg);
|
||||
background-size: 100% 100%;
|
||||
color: #FFFFFF;
|
||||
padding: 2em;
|
||||
/* Correct display for Internet Explorer */
|
||||
display: block;
|
||||
}
|
||||
footer { font-style: italic;
|
||||
text-align: center;
|
||||
background-color: #000033;
|
||||
color: #FFFFCC;
|
||||
padding: 0.5em;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<header>
|
||||
<h1>KayakDoorCounty.net</h1>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="tours.html">Tours</a>
|
||||
<a href="reservations.html">Reservations</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
</nav>
|
||||
<main>
|
||||
<h2>Your next adventure is only a paddle away ....</h2>
|
||||
|
||||
<p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
|
||||
<h3>Featured tours this week:</h3>
|
||||
<ul>
|
||||
<li>Cana Island</li>
|
||||
<li>Mink River</li>
|
||||
<li>Europe Lake</li>
|
||||
</ul>
|
||||
</main>
|
||||
<footer>
|
||||
<small><i>Copyright © KayakDoorCounty.net</i></small>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>KayakDoorCounty.net</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFE8;
|
||||
font-family: Verdana, Arial, sans-serif;
|
||||
}
|
||||
#container {
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
min-width: 650px;
|
||||
max-width: 1280px;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 10px 10px 10px #333333;
|
||||
border: 1px solid #000033;
|
||||
}
|
||||
header {
|
||||
background-color: #000033;
|
||||
color: #FFFFB9;
|
||||
background-image: url(headerbackblue.jpg);
|
||||
background-position: right;
|
||||
background-repeat: no-repeat;
|
||||
height: 80px;
|
||||
padding-top: 5px;
|
||||
padding-left: 2em;
|
||||
text-shadow: 1px 1px 1px #FFF;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
nav {
|
||||
font-weight: bold;
|
||||
font-size: 1.25em;
|
||||
background-color: #FFFFCC;
|
||||
text-align: center;
|
||||
}
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
main {
|
||||
background-color: #004D99;
|
||||
background-image: url(heroback2.jpg);
|
||||
background-size: 100% 100%;
|
||||
color: #FFFFFF;
|
||||
padding: 2em;
|
||||
}
|
||||
footer {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
background-color: #000033;
|
||||
color: #FFFFCC;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<header>
|
||||
<h1>KayakDoorCounty.net</h1>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="tours.html">Tours</a>
|
||||
<a href="reservations.html">Reservations</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
</nav>
|
||||
<main>
|
||||
<h2>Your next adventure is only a paddle away ....</h2>
|
||||
|
||||
<p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
|
||||
<h3>Featured tours this week:</h3>
|
||||
<ul>
|
||||
<li>Cana Island</li>
|
||||
<li>Mink River</li>
|
||||
<li>Europe Lake</li>
|
||||
</ul>
|
||||
</main>
|
||||
<footer>
|
||||
<small><i>Copyright © KayakDoorCounty.net</i></small>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
BIN
Assignments/HTML/lab6.2_CalebFontenot/public_html/6.7/fall.jpg
Normal file
After Width: | Height: | Size: 130 KiB |
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Fall Nature Hikes</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
#content { background-image: url(fall.jpg);
|
||||
background-repeat: no-repeat;
|
||||
margin: auto;
|
||||
width:640px;
|
||||
height: 480px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
h1 { background-color: #FFFFFF;
|
||||
opacity: 0.6;
|
||||
font-size: 4em;
|
||||
padding: 10px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<h1>Fall Nature Hikes</h1>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
BIN
Assignments/HTML/lab6.2_CalebFontenot/public_html/6.8/fall.jpg
Normal file
After Width: | Height: | Size: 130 KiB |
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Fall Nature Hikes</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
#content {
|
||||
background-image: url(fall.jpg);
|
||||
background-repeat: no-repeat;
|
||||
margin: auto;
|
||||
width:640px;
|
||||
height: 480px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
h1 {
|
||||
color: #FFFFFF;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-family: Verdana, Helvetica, sans-serif;
|
||||
font-size: 5em;
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<h1>Fall Nature Hikes</h1>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
BIN
Assignments/HTML/lab6.2_CalebFontenot/public_html/6.9/fall.jpg
Normal file
After Width: | Height: | Size: 130 KiB |
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Fall Nature Hikes</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
#content {
|
||||
background-image: url(fall.jpg);
|
||||
background-repeat: no-repeat;
|
||||
margin: auto;
|
||||
width:640px;
|
||||
height: 480px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
h1 {
|
||||
color: #FFFFCC;
|
||||
color: hsla(60, 100%, 90%, 0.8);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 6em;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<h1>Fall Nature Hikes</h1>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>CSS3 background-clip</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.test { background-image: url(myislandback.jpg);
|
||||
background-clip: cover;
|
||||
width: 120px;
|
||||
padding: 100px;
|
||||
margin-bottom: 10px;
|
||||
border: 10px dashed #000;
|
||||
}
|
||||
.test1 { background-image: url(myislandback.jpg);
|
||||
background-clip: padding-box;
|
||||
width: 400px;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
border: 10px dashed #ff0000;
|
||||
}
|
||||
.test2 { background-image: url(myislandback.jpg);
|
||||
background-clip: border-box;
|
||||
width: 400px;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
border: 10px dashed #ff0000;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<h1>Tropical Island</h1>
|
||||
<p>
|
||||
Enjoy relaxing in the warm sunshine on your own tropical island retreat.
|
||||
</p>
|
||||
</div>
|
||||
<div class="test1">
|
||||
<h1>Tropical Island</h1>
|
||||
<p>
|
||||
Enjoy relaxing in the warm sunshine on your own tropical island retreat.
|
||||
</p>
|
||||
</div>
|
||||
<div class="test2">
|
||||
<h1>Tropical Island</h1>
|
||||
<p>
|
||||
Enjoy relaxing in the warm sunshine on your own tropical island retreat.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
After Width: | Height: | Size: 21 KiB |
15
Assignments/HTML/lab6.2_CalebFontenot/public_html/index.html
Normal 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>
|