-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
169 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Whitewater rafting vacation | Dry Oar Boating | Contact Us</title> | ||
| <link rel="stylesheet" href="./styles/style.css"> | ||
| <style> | ||
| form { | ||
| /* Center the form on the page */ | ||
| margin: 0 auto; | ||
| width: 400px; | ||
| /* Form outline */ | ||
| padding: 1em; | ||
| border: 1px solid #ccc; | ||
| border-radius: 1em; | ||
| } | ||
|
|
||
| ul { | ||
| list-style: none; | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| form li + li { | ||
| margin-top: 1em; | ||
| } | ||
|
|
||
| label { | ||
| /* Uniform size & alignment */ | ||
| display: inline-block; | ||
| width: 90px; | ||
| text-align: right; | ||
| } | ||
|
|
||
| input, | ||
| textarea { | ||
| /* To make sure that all text fields have the same font settings | ||
| By default, textareas have a monospace font */ | ||
| font: 1em sans-serif; | ||
|
|
||
| /* Uniform text field size */ | ||
| width: 300px; | ||
| box-sizing: border-box; | ||
|
|
||
| /* Match form field borders */ | ||
| border: 1px solid #999; | ||
| } | ||
|
|
||
| input:focus, | ||
| textarea:focus { | ||
| /* Additional highlight for focused elements */ | ||
| border-color: #000; | ||
| } | ||
|
|
||
| textarea { | ||
| /* Align multiline text fields with their labels */ | ||
| vertical-align: top; | ||
|
|
||
| /* Provide space to type some text */ | ||
| height: 5em; | ||
| } | ||
|
|
||
| .button { | ||
| /* Align buttons with the text fields */ | ||
| padding-left: 90px; /* same size as the label elements */ | ||
| } | ||
|
|
||
| button { | ||
| /* This extra margin represent roughly the same space as the space | ||
| between the labels and their text fields */ | ||
| margin-left: 0.5em; | ||
| } | ||
|
|
||
| #feedback { | ||
| background-color: antiquewhite; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| padding: .5em; | ||
| /* make this element invisible until we are ready for it */ | ||
| display: none; | ||
| } | ||
| .moveDown { | ||
| margin-top: 3em; | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="content"> | ||
| <header> | ||
| <a id="logo_link" href="index.html"> | ||
| <img class="logo" src="images/logo.png" alt="Dry Oar Logo"> | ||
| </a> | ||
| <nav> | ||
| <a href="index.html">Home</a> | ||
| <a href="rivers.html">Rivers</a> | ||
| <a href="site-plan-rafting.html">Site Plan</a> | ||
| <a href="contactus.html">Contact Us</a> | ||
| </nav> | ||
| </header> | ||
| <main> | ||
| <h2>Contact Us</h2> | ||
| <div id="feedback"></div> | ||
|
|
||
| <form action="contactus.html" method="post"> | ||
| <ul> | ||
| <li> | ||
| <label for="name">Name:</label> | ||
| <input type="text" id="name" name="user_name" /> | ||
| </li> | ||
| <li> | ||
| <label for="mail">Email:</label> | ||
| <input type="email" id="mail" name="user_email" /> | ||
| </li> | ||
| <li> | ||
| <label for="msg">Message:</label> | ||
| <textarea id="msg" name="user_message"></textarea> | ||
| </li> | ||
| <li class="button"> | ||
| <button type="submit">Send your message</button> | ||
| </li> | ||
| </ul> | ||
|
|
||
| </form> | ||
|
|
||
| </main> | ||
| <footer> | ||
| <p>Dry Oar © 2023 - Reese Bernard</p> | ||
| <p><a href="site-plan-rafting.html">Site Plan</a></p> | ||
| <p><a href="contactus.html">Contact Us</a></p> | ||
| <div class="social"> | ||
| <a href="https://facebook.com" target="_blank"> | ||
| <img src="images/facebook.png" alt="fb icon"> | ||
| </a> | ||
| <a href="https://twitter.com" target="_blank"> | ||
| <img src="images/twitter.png" alt="twitter icon"> | ||
| </a> | ||
| <a href="https://instagram.com" target="_blank"> | ||
| <img src="images/instagram.png" alt="instagram icon"> | ||
| </a> | ||
| </div> | ||
| </footer> | ||
| </div> | ||
| <script> | ||
| // get the feedback div element so we can do something with it. | ||
| const feedbackElement = document.getElementById('feedback'); | ||
| // get the form so we can read what was entered in it. | ||
| const formElement = document.forms[0]; | ||
| // add a 'listener' to wait for a submission of our form. When that happens run the code below. | ||
| formElement.addEventListener('submit', function(e) { | ||
| // stop the form from doing the default action. | ||
| e.preventDefault(); | ||
| // set the contents of our feedback element to a message letting the user know the form was submitted successfully. Notice that we pull the name that was entered in the form to personalize the message! | ||
| feedbackElement.innerHTML = 'Hello '+ formElement.user_name.value +'! Thank you for your message. We will get back with you as soon as possible!'; | ||
| // make the feedback element visible. | ||
| feedbackElement.style.display = "block"; | ||
| // add a class to move everything down so our message doesn't cover it. | ||
| document.body.classList.toggle('moveDown'); | ||
| }); | ||
| </script> | ||
| </body> | ||
|
|
||
| </html> |