-
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
2 changed files
with
194 additions
and
59 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 |
|---|---|---|
| @@ -1,73 +1,82 @@ | ||
| <!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 | Home</title> | ||
| <link rel="stylesheet" href="./styles/style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <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="#">Page 2</a> | ||
| <a href="site-plan-rafting.html">Site Plan</a> | ||
| <a href="contactus.html">Contact Us</a> | ||
| </nav> | ||
| </header> | ||
| <div id="hero"> | ||
| <div id="hero-box"> | ||
| <img id="hero-img" src="images/hero.png" alt = "people enjoying white water rafting"> | ||
| <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="#">Page 2</a> | ||
| <a href="site-plan-rafting.html">Site Plan</a> | ||
| <a href="contactus.html">Contact Us</a> | ||
| </nav> | ||
| </header> | ||
| <div id="hero"> | ||
| <div id="hero-box"> | ||
| <img id="hero-img" src="images/hero.png" alt="people enjoying white water rafting"> | ||
| </div> | ||
| <section id="hero-msg"> | ||
| <h1 class="home-title">Have an Adventure!</h1> | ||
| <h4>Make memories with Dry Oar!</h4> | ||
| <div class="button-box"> | ||
| <a class="book" href="contactus.html"> Book Now</a> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| <section id="hero-msg"> | ||
| <h1 class="home-title">Have an Adventure!</h1> | ||
| <h4>Make memories with Dry Oar!</h4> | ||
| <div class = "button box"> | ||
| <a class = "book" href ="contactus.html"> Book Now</a> | ||
| <main class="home-grid"> | ||
| <section class="river-card"> | ||
| <img class="card-img" src="images/rivers.jpg" alt="river in forest"> | ||
| <img class="icon" src="images/river_icon.png" alt="river icon"> | ||
| <h2>Rivers</h2> | ||
| </section> | ||
| <section class="camping-card"> | ||
| <img class="card-img" src="images/camping.jpg" alt="tent in mountains"> | ||
| <img class="icon" src="images/fire_icon.png" alt="fire icon"> | ||
| <h2>Camping</h2> | ||
| </section> | ||
| <section class="rapids card"> | ||
| <img class="card-img" src="images/rapids.jpg" alt="rafting boat"> | ||
| <img class="icon" src="images/oars.png" alt="rafting boat"> | ||
| <h2>Rapids</h2> | ||
| </section> | ||
| <div id="background"></div> | ||
| <img class="mountains" src="images/mountains.jpg" alt="Misty Mountains"> | ||
| <section class="msg"> | ||
| <h2>More than just a Thrill</h2> | ||
| <p>Enjoy the breathtaking scenery. From valleys, meadows, canyons, and high peaks; it's way more than | ||
| just the rapids. It's a great way to get away from it all and relax amongst all the beauty of the | ||
| great outdoors. </p> | ||
| <a class='join' href="rivers.html"> Join us</a> | ||
| </section> | ||
| </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> | ||
| </section> | ||
| </footer> | ||
| </div> | ||
| <main class = "home-grid"> | ||
| <section class="river-card"> | ||
| <img class="card-img" src = "images/rivers.jpg" alt = "river in forest"> | ||
| <img class="icon" src = "images/river_icon.png" alt = "river icon"> | ||
| <h2>Rivers</h2> | ||
| </section> | ||
| <section class="camping-card"> | ||
| <img class="card-img" src = "images/camping.jpg" alt = "tent in mountains"> | ||
| <img class="icon" src = "images/fire_icon.png" alt = "fire icon" > | ||
| <h2>Camping</h2> | ||
| </section> | ||
| <section class="rapids card"> | ||
| <img class="card-img" src="images/rapids.jpg" alt = "rafting boat"> | ||
| <img class="icon" src = "images/oars.png" alt = "rafting boat"> | ||
| <h2>Rapids</h2> | ||
| </section> | ||
| <img class = "mountains" src = "images/mountains.jpg" alt = "Misty Mountains"> | ||
| <section class = "msg"> | ||
| <h2>More than just a Thrill</h2> | ||
| <p>Enjoy the breathtaking scenery. From valleys, meadows, canyons, and high peaks; it's way more than just the rapids. It's a great way to get away from it all and relax amongst all the beauty of the great outdoors. </p> | ||
| <a class='join' href = "rivers.html"> Join us</a> | ||
| </section> | ||
| </main> | ||
| <footer> | ||
| <p>Dry Oar © 20XX - Your First and Last Name Here</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"> | ||
| <img src="images/facebook.png" alt="fb icon"> | ||
| </a> | ||
| <a href="https://twitter.com"> | ||
| <img src="images/twitter.png" alt="twitter icon"> | ||
| </a> | ||
| <a href="https://instagram.com"> | ||
| <img src="images/instagram.png" alt="instagram icon"> | ||
| </a> | ||
| </div> | ||
| </footer> | ||
| </body> | ||
|
|
||
| </html> |
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,126 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Kenia&family=Oswald:wght@300&display=swap'); | ||
|
|
||
|
|
||
| :root { | ||
| /* change the values below to your colors from your palette */ | ||
| --primary-color: #0077b6 ; | ||
| --secondary-color: #fb8500 ; | ||
| --accent1-color: #ffd60a; | ||
| --accent2-color: white; | ||
|
|
||
| /* change the values below to your chosen font(s) */ | ||
| --heading-font: "Kenia"; | ||
| --paragraph-font: Oswald, Helvetica, sans-serif; | ||
|
|
||
| /* these colors below should be chosen from among your palette colors above */ | ||
| --headline-color-on-white: #396E94; /* headlines on a white background */ | ||
| --headline-color-on-color: white; /* headlines on a colored background */ | ||
| --paragraph-color-on-white: #396E94; /* paragraph text on a white background */ | ||
| --paragraph-color-on-color: white; /* paragraph text on a colored background */ | ||
| --paragraph-background-color: #396E94 ; | ||
| --nav-link-color: var(--accent2-color); | ||
| --nav-background-color: var(--secondary-color); | ||
| --nav-hover-link-color: var(--primary-color); | ||
| --nav-hover-background-color: var(--accent1-color); | ||
| } | ||
|
|
||
| body { | ||
| background-color: var(--primary-color); | ||
| } | ||
|
|
||
| #content { | ||
| max-width: 1600px; | ||
| margin: 0 auto; | ||
|
|
||
| } | ||
|
|
||
| header { | ||
| background-color: var(--secondary-color); | ||
| } | ||
|
|
||
| .logo { | ||
| width: 80px; | ||
| } | ||
|
|
||
| nav a { | ||
| color: var(--nav-link-color); | ||
| text-align: center; | ||
| text-decoration: none; | ||
| } | ||
| nav a:hover { | ||
| color: var(--nav-hover-link-color); | ||
| background-color: var(--nav-hover-background-color); | ||
| } | ||
|
|
||
| #hero-img { | ||
| width: 100%; | ||
| } | ||
|
|
||
| #hero-msg h1, #hero-msg h4 { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .home-title { | ||
| color: var(--headline-color-on-color); | ||
| } | ||
|
|
||
| h4 { | ||
| color: var(--headline-color-on-color); | ||
| } | ||
|
|
||
| .button-box { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .book, .join { | ||
| background-color: var(--nav-background-color); | ||
| color: var(--nav-link-color); | ||
| text-decoration: none; | ||
| } | ||
| .book:hover, .join:hover { | ||
| background-color: var(--nav-hover-background-color); | ||
| color: var(--nav-hover-link-color); | ||
| } | ||
|
|
||
| main section { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .icon { | ||
| width: 80px; | ||
| } | ||
|
|
||
| #background { | ||
| background-color: var(--secondary-color); | ||
| height: 725px; | ||
| } | ||
|
|
||
| .msg { | ||
| background-color: var(--paragraph-background-color); | ||
| } | ||
| .msg h2 { | ||
| color: var(--accent2-color); | ||
| } | ||
| .msg p { | ||
| color: var(--accent2-color); | ||
| } | ||
|
|
||
|
|
||
| footer { | ||
| background-color: var(--secondary-color); | ||
| color: var(--accent2-color); | ||
| } | ||
| footer a { | ||
| color: var(--nav-link-color); | ||
| text-decoration: none; | ||
| } | ||
| footer a:hover { | ||
| color: var(--nav-hover-link-color); | ||
| } | ||
| footer p { | ||
| font-size: 1.2em; | ||
| } | ||
| footer p a:hover { | ||
| background-color: var(--nav-hover-background-color); | ||
| color: var(--nav-hover-link-color); | ||
| } |