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

lab6.2

Browse Source
This commit is contained in:
Chloe Fontenot 🏳️‍⚧️
2023-02-09 21:27:49 -06:00
parent 30567e99a9
commit af5cb644cd
35 changed files with 1064 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
Assignments/lab6.2_CalebFontenot/public_html/6.10/linear.html Normal file
View File

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

30
Assignments/lab6.2_CalebFontenot/public_html/6.10/radial.html Normal file
View File

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

BIN
Assignments/lab6.2_CalebFontenot/public_html/6.5/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

58
Assignments/lab6.2_CalebFontenot/public_html/6.5/index.html Normal file
View File

@@ -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> &nbsp;<a href="menu.html">Menu</a> &nbsp;<a href="directions.html">Directions</a> &nbsp;<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 &copy; Your Name Here
</footer>
</div>
</body>
</html>

BIN
Assignments/lab6.2_CalebFontenot/public_html/6.5/lighthouselogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
Assignments/lab6.2_CalebFontenot/public_html/6.6/headerbackblue.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
Assignments/lab6.2_CalebFontenot/public_html/6.6/heroback2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

80
Assignments/lab6.2_CalebFontenot/public_html/6.6/iefix.html Normal file
View File

@@ -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> &nbsp;
<a href="tours.html">Tours</a> &nbsp;
<a href="reservations.html">Reservations</a> &nbsp;
<a href="contact.html">Contact</a> &nbsp;
</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 &copy; KayakDoorCounty.net</i></small>
</footer>
</div>
</body>
</html>

90
Assignments/lab6.2_CalebFontenot/public_html/6.6/index.html Normal file
View File

@@ -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> &nbsp;
<a href="tours.html">Tours</a> &nbsp;
<a href="reservations.html">Reservations</a> &nbsp;
<a href="contact.html">Contact</a> &nbsp;
</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 &copy; KayakDoorCounty.net</i></small>
</footer>
</div>
</body>
</html>

BIN
Assignments/lab6.2_CalebFontenot/public_html/6.7/fall.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

27
Assignments/lab6.2_CalebFontenot/public_html/6.7/index.html Normal file
View File

@@ -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/lab6.2_CalebFontenot/public_html/6.8/fall.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

30
Assignments/lab6.2_CalebFontenot/public_html/6.8/rgba.html Normal file
View File

@@ -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/lab6.2_CalebFontenot/public_html/6.9/fall.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

29
Assignments/lab6.2_CalebFontenot/public_html/6.9/hsla.html Normal file
View File

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

52
Assignments/lab6.2_CalebFontenot/public_html/clip/index.html Normal file
View File

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

BIN
Assignments/lab6.2_CalebFontenot/public_html/clip/myislandback.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

15
Assignments/lab6.2_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>