# index.html

/home/caleb/ASDV-WebDev/Assignments/lab7_CalebFontenot/public_html/7.12/index.html

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