<!DOCTYPE html> <!-- Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license -Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/html.html to edit this template +Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/html.html to edit this template --> <html> <head> @@ -37,19 +36,20 @@ table {color: #888888; background-color: #313335; font-family: monospace; font-w <link href="pacific.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> - <div class="wrapper"> + <div id="wrapper"> <body> - <header> <h1>Pacific Trails Resort</h1> </header> + <header> <h1><a id="headerlink" href=index.html>Pacific Trails Resort</a></h1> </header> <nav> - <b> - <a href="index.html"> Home</a> - <a href="yurts.html"> Yurts</a> - <a href="activities.html"> Activities</a> - <a href="reservations.html"> Reservations</a> - </b> + <ul> + <li><a href="index.html"> Home</a></li> + <li><a href="yurts.html"> Yurts</a></li> + <li><a href="activities.html"> Activities</a></li> + <li><a href="reservations.html"> Reservations</a></li> + </ul> </nav> - <div id="trailhero"> + <div id="trailhero"> </div> + <div id="body"> <main><h2>Activities at Pacific Trails</h2></main> <dl> <dt><strong>Hiking</strong></dt> @@ -66,6 +66,7 @@ table {color: #888888; background-color: #313335; font-family: monospace; font-w <a href="mailto:caleb@fontenot.com"> caleb@fontenot.com</a> </footer> </div> + </div> </html>
<!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>Pacific Trail Resort</title> <meta charset="UTF-8"> <link href="pacific.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> -<div class="wrapper"> - <body> - <header> - <h1>Pacific Trails Resort</h1> +<div id="wrapper"> + <header> + <h1><a id="headerlink" href=index.html>Pacific Trails Resort</a></h1> </header> + <body> + <nav> - <b> - <a href="index.html"> Home</a> - <a href="yurts.html"> Yurts</a> - <a href="activities.html"> Activities</a> - <a href="reservations.html"> Reservations</a> - </b> + <ul> + <li><a href="index.html"> Home</a></li> + <li><a href="yurts.html"> Yurts</a></li> + <li><a href="activities.html"> Activities</a></li> + <li><a href="reservations.html"> Reservations</a></li> + </ul> </nav> - <div id="homehero"> + <div id="homehero"> </div> + <div id="body"> <main><h2>Enjoy Nature in Luxury</h2></main> + <p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuous appointed private yurt and a cooked-to-order breakfast each morning.</p> <ul> @@ -79,13 +81,16 @@ table {color: #888888; background-color: #313335; font-family: monospace; font-w <br> </p> </div> + </body> <footer> <small><i>Copyright © 2023 Pacific Trails Resort</i></small> <br> <a href="mailto:caleb@fontenot.com"> caleb@fontenot.com</a> </footer> + </div> </div> +</html>
/* Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license @@ -27,47 +29,67 @@ table {color: #888888; background-color: #313335; font-family: monospace; font-w Created on : Jan 25, 2023, 9:50:47 AM Author : caleb */ - +* { + box-sizing: border-box; +} body { - background-color: #90C7E3; - background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3); + background-color: #EAEAEA; + color: #555555; font-family: Arial, Helvetica, sans-serif; } -.wrapper { - background-color: #FFFFFF; - width: 80%; - min-width: 960px; - max-width: 2048px; - box-shadow: 3px 3px 3px #333333; - margin-left: auto; - margin-right: auto; -} + header { background-color: #002171; color: #FFFFFF; - line-height: 60px; - top-padding: 15px; text-align: center; - background-image: url("images/sunset.jpg"); - background-repeat: no-repeat; - background-position: right; } + nav { - background-color: #FFFFFF; - text-align: center; + //float: left; + //width: 160px; font-weight: bold; + padding: 0; + font-size: 120%; + text-align: center; + //text-decoration: none; +} + +nav ul { + list-style-type: none; + margin: 0; + padding-left: 0; + font-size: 1.2em; +} +nav li { + border-bottom: 1px solid darkblue; +} + +nav a:link, a:visited { + color: #344873; +} +nav :hover { + color: #A52A2A; +} +header a:link a:visited { text-decoration: none; - padding: 1em; + color: #FFFFFF; } + + main { - top-padding: 1px; - right-padding: 20px; - left-padding: 20px; + padding: 1px 20px 20px 30px; + display: block; + overflow: auto; + background-color: #FFFFFF; } + h1{ margin-bottom: 0; font-family: Georgia, "Times New Roman", sans-serif; + //font-size: 3em; + padding-bottom: 0.5em; + letter-spacing: 0.25em; } h2 { color: #1976D2; @@ -81,9 +103,6 @@ table {color: #888888; background-color: #313335; font-family: monospace; font-w dt { color: #002171; } -ul { - list-style-image: url('images/marker.gif') -} footer { font-size: 75%; font-style: italic; @@ -91,34 +110,117 @@ table {color: #888888; background-color: #313335; font-family: monospace; font-w text-align: center; padding: 2em; } -.resort { - color: #1976D2; - font-weight: bold; -} -.contact { - font-size: 90%; -} + img { height: 100%; width: 100%; } -#homehero { +// Classes and ids +.resort { + color: #1976D2; + font-weight: bold; +} + +#contact { font-size: 90%} + +#homehero { height: 300px; - background-image: url("images/coast.jpg"); + //margin-left: 190px; + background-image: url("images/coast2.jpg"); background-repeat: no-repeat; background-size: 100% 100%; } -#yurthero { +#yurthero { height: 300px; background-image: url("images/yurt.jpg"); background-repeat: no-repeat; background-size: 100% 100%; + //margin-left: 190px; } -#trailhero { +#trailhero { height: 300px; background-image: url("images/trail.jpg"); background-repeat: no-repeat; background-size: 100% 100%; + //margin-left: 190px; +} +#body { + background-color: #FFFFFF; + //margin-left: 190px; + width: auto; +} + +#wrapper { + background-color: #90C7E3; + //width: 80%; + background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3); + //min-width: 960px; + //max-width: 2048px; + //box-shadow: 1px 1px 1px #000033; + //margin-left: auto; + //margin-right: auto; +} +#headerlink { + color: white; + text-decoration: none; +} + +table { + border: 0px; +} +nav li { + box-shadow: 1px 1px 1px blue; + //font-size: 0.5em; +} + +// Medium Styles + +@media (min-width: 600px) { + nav ul { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-around; + } + nav li { + boarder-bottom: none; + } + section { + margin-left: 2em; + margin-right: 2em; + flex: 1; + } + .flow { + display: flex; + flex-direction: row; + } +} +@media (min-width: 1024px) { + #wrapper { + margin: auto; + width: 80%; + border: 1px solid #002171; + box-shadow: 3px 3px 3px #002171; + } + nav { text-align: left; + padding-left: 1em; + + } +@supports (display: grid) + nav ul {flex-direction: column; + padding-top: 1em;} + .hero { grid-area: hero;} + header { grid-area: header;} + nav { grid-area: nav;} + main { grid-area: main;} + footer { grid-area: footer; } + #wrapper { display: grid; + grid-template: "header header" + "nav hero" + "nav main" + "nav footer" + / 180px 1fr; + } }