<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>index.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
body {color: #a9b7c6; background-color: #2b2b2b; font-family: monospace; font-weight: bold}
pre {color: #a9b7c6; background-color: #2b2b2b; font-family: monospace; font-weight: bold}
table {color: #888888; background-color: #313335; font-family: monospace; font-weight: bold}
.ST0 {color: #628fb5; background-color: #323232}
.value {color: #a5c261}
.ST2 {color: #6897bb}
.ST3 {color: #6a8759}
.tag {color: #e8bf6a}
.ST1 {color: #505050; background-color: #323232}
.ws {color: #505050}
.argument {color: #bababa}
.block-comment {color: #808080}
-->
</style>
</head>
<body>
<table width="100%"><tr><td align="center">/home/caleb/ASDV-WebDev/Assignments/lab7_CalebFontenot/public_html/7.12/index.html</td></tr></table>
<pre>
<span class="ST0">&lt;!DOCTYPE</span> <span class="ST0">html</span><span class="ST0">&gt;</span>
<span class="tag">&lt;</span><span class="tag">html</span> <span class="argument">lang</span><span class="argument">=</span><span class="value">&quot;en&quot;</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">head</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">title</span><span class="tag">&gt;</span>KayakDoorCounty.net<span class="tag">&lt;/</span><span class="tag">title</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">meta</span> <span class="argument">charset</span><span class="argument">=</span><span class="value">&quot;utf-8&quot;</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">style</span><span class="tag">&gt;</span> 
body { font-family: Tahoma, Verdana, Arial, sans-serif; 
       margin: <span class="ST2">0</span>; padding: <span class="ST2">0</span>; 
}
.hero { 
    background-image: <span class="ST3">url(beached.jpg)</span>; 
    min-height: <span class="ST2">100vh</span>;  
    background-repeat: no-repeat; 
    background-size: cover;  
}       
.tourshero { 
    background-image: <span class="ST3">url(kayaks.jpg)</span>; 
    min-height: <span class="ST2">100vh</span>;
    background-repeat: no-repeat; 
    background-size: cover;  
}
.rentalshero { 
    background-image: <span class="ST3">url(rentals.jpg)</span>; 
    min-height: <span class="ST2">100vh</span>; 
    background-repeat: no-repeat; 
    background-size: cover; 
}
.contacthero { 
    background-image: <span class="ST3">url(lonekayak.jpg)</span>; 
    min-height: <span class="ST2">100vh</span>;  
    background-repeat: no-repeat; 
    background-size: cover; 
}
nav { z-index:<span class="ST2">9999</span>;
      position: fixed;
          top: <span class="ST2">0</span>;
          left: <span class="ST2">0</span>;
          padding: <span class="ST2">.5em</span>; 
          height: <span class="ST2">40px</span>;
          background:rgba(<span class="ST2">25</span>,<span class="ST2">25</span>, <span class="ST2">25</span>, <span class="ST2">0.70</span>);
          width: <span class="ST2">100%</span>;
          font-size: <span class="ST2">120%</span>;
          font-weight: bold;
          min-width: <span class="ST2">900px</span>;       }
nav ul { list-style-type: none; 
         margin: <span class="ST2">5px</span>; }
nav ul li { display: inline; padding-left: <span class="ST2">2em</span>; padding-right: <span class="ST2">2em</span>; }
nav a { text-decoration:none; }
nav a:link { color: <span class="ST2">#EAEAEA</span>; }
nav a:visited { color: <span class="ST2">#FFF</span>; }
nav a:hover { color: <span class="ST2">#FDA27F</span>; }
h1 { height: <span class="ST2">100px</span>; 
     padding-top: <span class="ST2">2em</span>; 
         text-align: center;
      background:rgba(<span class="ST2">255</span>, <span class="ST2">255</span>, <span class="ST2">255</span>, <span class="ST2">0.80</span>);
        }
.space  { height: <span class="ST2">20vh</span>; }
<span class="ST2">#tours</span>, <span class="ST2">#rentals</span>, <span class="ST2">#contact</span> {  background-color: <span class="ST2">#FFF</span>;
                                                  width: <span class="ST2">60%</span>;
                                                  padding-left: <span class="ST2">6em</span>;
                                                  padding-top: <span class="ST2">70px</span>;
                                                  padding-bottom: <span class="ST2">2em</span>;
}
footer {   background:rgba(<span class="ST2">25</span>,<span class="ST2">25</span>, <span class="ST2">25</span>, <span class="ST2">0.90</span>);
         width: <span class="ST2">100%</span>;
         font-size: <span class="ST2">90%</span>;
         text-align: center;    
         color: <span class="ST2">#EAEAEA</span>;
                 position: fixed;
                 bottom: <span class="ST2">0</span>;
                }       
footer a { text-decoration: none;
           color: <span class="ST2">#EAEAEA</span>; }            
<span class="tag">&lt;/</span><span class="tag">style</span><span class="tag">&gt;</span> 
<span class="tag">&lt;/</span><span class="tag">head</span><span class="tag">&gt;</span> 
<span class="tag">&lt;</span><span class="tag">body</span><span class="tag">&gt;</span> 
<span class="tag">&lt;</span><span class="tag">nav</span><span class="tag">&gt;</span>
    <span class="tag">&lt;</span><span class="tag">ul</span><span class="tag">&gt;</span>
     <span class="tag">&lt;</span><span class="tag">li</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag">a</span> <span class="argument">href</span><span class="argument">=</span><span class="value">&quot;#home&quot;</span><span class="tag">&gt;</span>KayakDoorCounty.net<span class="tag">&lt;/</span><span class="tag">a</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag">li</span><span class="tag">&gt;</span>
     <span class="tag">&lt;</span><span class="tag">li</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag">a</span> <span class="argument">href</span><span class="argument">=</span><span class="value">&quot;#tours&quot;</span><span class="tag">&gt;</span>Tours<span class="tag">&lt;/</span><span class="tag">a</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag">li</span><span class="tag">&gt;</span>
     <span class="tag">&lt;</span><span class="tag">li</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag">a</span> <span class="argument">href</span><span class="argument">=</span><span class="value">&quot;#rentals&quot;</span><span class="tag">&gt;</span>Rentals<span class="tag">&lt;/</span><span class="tag">a</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag">li</span><span class="tag">&gt;</span>
     <span class="tag">&lt;</span><span class="tag">li</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag">a</span> <span class="argument">href</span><span class="argument">=</span><span class="value">&quot;#contact&quot;</span><span class="tag">&gt;</span>Contact<span class="tag">&lt;/</span><span class="tag">a</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag">li</span><span class="tag">&gt;</span>
   <span class="tag">&lt;/</span><span class="tag">ul</span><span class="tag">&gt;</span>
<span class="tag">&lt;/</span><span class="tag">nav</span><span class="tag">&gt;</span>


<span class="block-comment">&lt;!-- Home Page --&gt;</span>
<span class="tag">&lt;</span><span class="tag">section</span> <span class="argument">id</span><span class="argument">=</span><span class="value">&quot;</span>home<span class="value">&quot;</span> <span class="argument">class</span><span class="argument">=</span><span class="value">&quot;</span>hero<span class="value">&quot;</span> <span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">div</span> <span class="argument">class</span><span class="argument">=</span><span class="value">&quot;</span>space<span class="value">&quot;</span><span class="tag">&gt;</span> <span class="tag">&lt;/</span><span class="tag">div</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">h1</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag">a</span> <span class="argument">href</span><span class="argument">=</span><span class="value">&quot;#home&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag">img</span> <span class="argument">src</span><span class="argument">=</span><span class="value">&quot;kayakdc.gif&quot;</span> <span class="argument">alt</span><span class="argument">=</span><span class="value">&quot;KayakDoorCounty.net&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag">a</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag">h1</span><span class="tag">&gt;</span> 
<span class="tag">&lt;/</span><span class="tag">section</span><span class="tag">&gt;</span>

<span class="block-comment">&lt;!-- Tours Page --&gt;</span>
<span class="tag">&lt;</span><span class="tag">section</span> <span class="argument">id</span><span class="argument">=</span><span class="value">&quot;</span>tours<span class="value">&quot;</span><span class="tag">&gt;</span> 
<span class="tag">&lt;</span><span class="tag">h2</span><span class="tag">&gt;</span>Tours by KayakDoorCounty.net<span class="tag">&lt;/</span><span class="tag">h2</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">h2</span><span class="tag">&gt;</span>Your next adventure is only a paddle away....<span class="tag">&lt;/</span><span class="tag">h2</span><span class="tag">&gt;</span> 
<span class="tag">&lt;</span><span class="tag">p</span><span class="tag">&gt;</span>Take a guided kayak tour while you explore the scenic shoreline of Door County<span class="tag">&lt;</span><span class="tag">p</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">h3</span><span class="tag">&gt;</span>Featured tours this week:<span class="tag">&lt;/</span><span class="tag">h3</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">ul</span><span class="tag">&gt;</span>
  <span class="tag">&lt;</span><span class="tag">li</span><span class="tag">&gt;</span>Cana Island<span class="tag">&lt;/</span><span class="tag">li</span><span class="tag">&gt;</span>
  <span class="tag">&lt;</span><span class="tag">li</span><span class="tag">&gt;</span>Mink River<span class="tag">&lt;/</span><span class="tag">li</span><span class="tag">&gt;</span>
  <span class="tag">&lt;</span><span class="tag">li</span><span class="tag">&gt;</span>Europe Lake<span class="tag">&lt;/</span><span class="tag">li</span><span class="tag">&gt;</span>
<span class="tag">&lt;/</span><span class="tag">ul</span><span class="tag">&gt;</span>
<span class="tag">&lt;/</span><span class="tag">section</span><span class="tag">&gt;</span> 
<span class="tag">&lt;</span><span class="tag">div</span> <span class="argument">class</span><span class="argument">=</span><span class="value">&quot;</span>tourshero<span class="value">&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag">div</span><span class="tag">&gt;</span>
<span class="block-comment">&lt;!-- Rentals Page --&gt;</span>
<span class="tag">&lt;</span><span class="tag">section</span> <span class="argument">id</span><span class="argument">=</span><span class="value">&quot;</span>rentals<span class="value">&quot;</span><span class="tag">&gt;</span> 
<span class="tag">&lt;</span><span class="tag">h2</span><span class="tag">&gt;</span>Rent Kayaks from KayakDoorCounty.net<span class="tag">&lt;/</span><span class="tag">h2</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">h3</span><span class="tag">&gt;</span>Be Your Own Guide.....<span class="tag">&lt;/</span><span class="tag">h3</span><span class="tag">&gt;</span> 
<span class="tag">&lt;</span><span class="tag">p</span><span class="tag">&gt;</span>Half day, full day, and week-long rentals available.<span class="tag">&lt;</span><span class="tag">br</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag">br</span><span class="tag">&gt;</span>
Rent a kayak at one of these three scenic locations:<span class="tag">&lt;/</span><span class="tag">p</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">ul</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">li</span><span class="tag">&gt;</span>Eagle Harbor<span class="tag">&lt;/</span><span class="tag">li</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">li</span><span class="tag">&gt;</span>Sister Bay<span class="tag">&lt;/</span><span class="tag">li</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">li</span><span class="tag">&gt;</span>Garrett Bay<span class="tag">&lt;/</span><span class="tag">li</span><span class="tag">&gt;</span>
<span class="tag">&lt;/</span><span class="tag">ul</span><span class="tag">&gt;</span>
<span class="tag">&lt;/</span><span class="tag">section</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">div</span> <span class="argument">class</span><span class="argument">=</span><span class="value">&quot;</span>rentalshero<span class="value">&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag">div</span><span class="tag">&gt;</span>
<span class="block-comment">&lt;!-- Contact Page --&gt;</span>
<span class="tag">&lt;</span><span class="tag">section</span>  <span class="argument">id</span><span class="argument">=</span><span class="value">&quot;</span>contact<span class="value">&quot;</span><span class="tag">&gt;</span> 
<span class="tag">&lt;</span><span class="tag">h2</span><span class="tag">&gt;</span>Contact KayakDoorCounty.net<span class="tag">&lt;/</span><span class="tag">h2</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">h3</span><span class="tag">&gt;</span>Call, Text, or Email<span class="tag">&lt;/</span><span class="tag">h3</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">p</span><span class="tag">&gt;</span>A trained kayak guide will answer all your questions and get you out on the water!<span class="tag">&lt;</span><span class="tag">br</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">p</span><span class="tag">&gt;</span>Call to reserve your kayak today!<span class="tag">&lt;/</span><span class="tag">p</span><span class="tag">&gt;</span>
555-555-5555<span class="tag">&lt;</span><span class="tag">br</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag">br</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">a</span> <span class="argument">href</span><span class="argument">=</span><span class="value">&quot;mailto:info@kayakdoorcounty.net&quot;</span><span class="tag">&gt;</span>info@kayakdoorcounty.net<span class="tag">&lt;/</span><span class="tag">a</span><span class="tag">&gt;</span>
<span class="tag">&lt;/</span><span class="tag">section</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">div</span> <span class="argument">class</span><span class="argument">=</span><span class="value">&quot;</span>contacthero<span class="value">&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag">div</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">footer</span><span class="tag">&gt;</span>
KayakDoorCounty.net<span class="tag">&lt;</span><span class="tag">br</span><span class="tag">&gt;</span>
<span class="tag">&lt;</span><span class="tag">a</span> <span class="argument">href</span><span class="argument">=</span><span class="value">&quot;mailto:info@kayakdoorcounty.net&quot;</span><span class="tag">&gt;</span>info@kayakdoorcounty.net<span class="tag">&lt;/</span><span class="tag">a</span><span class="tag">&gt;</span>
<span class="tag">&lt;/</span><span class="tag">footer</span><span class="tag">&gt;</span>
<span class="tag">&lt;/</span><span class="tag">body</span><span class="tag">&gt;</span> 
&lt;/html&gt; 
</pre></body>
</html>