champlain/WEBD-225-40
1
0
Fork 0
Code Releases Activity

Week 7: Device-Specific Layouts

Browse Source
This commit is contained in:
Llewellyn van der Merwe 2022-03-05 04:21:01 +02:00
parent 20520e287e
commit 23dd0c1ca1
Signed by: Llewellyn
GPG Key ID: EFC0C720A240551C
6 changed files with 571 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
activities.html
View File

@ -12,13 +12,25 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<script src="/js/hiddenNav.js"></script>
<!-- Completed files -->
</head>
<body>
<div id="wrapper">
<div>
<header>
<h1>Atlantic Fishing Resort</h1>
<div id="mySidenav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="index.html">Home</a>
<a href="units.html">Units</a>
<a href="#" class="active">Activities</a>
<a href="reservations.html">Reservations</a>
</div>
<div id="main">
<span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
</div>
<div class="mainNav">
<nav>
<ul>
<li>
@ -35,8 +47,8 @@
</li>
</ul>
</nav>
</div>
</header>
<main>
<h2>Activities while staying at Atlantic Fishing Resort</h2>
<article id="activity-focus">
@ -48,7 +60,8 @@
</div>
<div>
<h3>Shore Fishing</h3>
<p>Fast open stretches of cold Atlantic shore gives ample opportunity for fishing from the beach. Buy or rent
<p>Fast open stretches of cold Atlantic shore gives ample opportunity for fishing from the beach. Buy or
rent
fishing tackle. Find guided tours or venture out by yourself geared up with 4x4 and plenty of
sunscreens.</p>
</div>
@ -60,7 +73,6 @@
</div>
</article>
</main>
<footer>
Copyright © 1999 Atlantic Fishing Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>

446
css/atlantic.css
View File

@ -1,13 +1,100 @@
/* Nav Bar */
header nav {
table {
width: 100%;
font-size: 12px;
border-collapse: collapse;
}
th {
text-align: left;
}
tr {
border: 1px solid;
}
/* Form style */
fieldset {
margin: 10px 2px;
padding: 10px 20px;
}
/* submit button */
input[type=submit] {
background: rgb(35, 55, 55);
background: linear-gradient(180deg, rgba(35, 55, 55, 1) 0%, rgba(100, 131, 131, 1) 7%, rgba(47, 79, 79, 1) 24%, rgba(9, 14, 14, 1) 100%);
box-shadow: 1px 13px 23px 0 rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 1px 13px 23px 0 rgba(0, 0, 0, 0.75);
color: white;
padding: 15px 60px;
border: none;
border-radius: 5px;
cursor: pointer;
float: right;
font-weight: bold;
}
/* change the submit button style on hover */
input[type=submit]:hover {
background: rgb(35, 55, 55);
background: linear-gradient(0deg, rgba(35, 55, 55, 1) 0%, rgba(103, 140, 140, 1) 7%, rgba(47, 79, 79, 1) 24%, rgba(9, 14, 14, 1) 100%);
box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.75);
color: lightgrey;
font-weight: bold;
}
/* Focus on field that is being entered*/
input:focus {
background-color: darkslategrey;
color: white;
}
.form-padding {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 50px;
}
/* container */
.container {
margin-top: 20px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 30px 30px 80px;
box-shadow: 2px 0 31px 0 rgba(145, 145, 145, 0.75);
-webkit-box-shadow: 2px 0 31px 0 rgba(145, 145, 145, 0.75);
}
/* remove floats after columns*/
.row {
max-width: 100%;
margin-bottom: 10px;
}
/* Center the contact form */
#contactForm {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
}
/* Sizing of input fields */
input {
padding: 5px 5px;
font-size: 14px;
}
/* Main Nav Bar */
.mainNav nav {
padding: 0;
}
header nav a {
.mainNav nav a {
text-decoration: none;
}
header .active {
.mainNav .active {
text-decoration-color: lightblue;
padding: 0 10px;
background: rgb(34, 34, 34);
@ -15,7 +102,7 @@ header .active {
box-shadow: inset 0 0 10px #000000;
}
header nav ul {
.mainNav nav ul {
padding-left: 0;
list-style-type: none;
background: rgb(46, 44, 47);
@ -23,10 +110,9 @@ header nav ul {
display: flex;
justify-content: flex-start;
align-items: center;
font-family: "Liberation Sans", sans-serif;
}
header ul li *[href]:link {
.mainNav ul li *[href]:link {
color: whitesmoke;
padding: 0 10px;
background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
@ -34,7 +120,7 @@ header ul li *[href]:link {
flex-grow: inherit;
}
header ul li *[href]:visited {
.mainNav ul li *[href]:visited {
color: aliceblue;
padding: 0 10px;
background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
@ -42,7 +128,7 @@ header ul li *[href]:visited {
flex-grow: inherit;
}
header ul li *[href]:hover {
.mainNav ul li *[href]:hover {
color: lightskyblue;
padding: 0 10px;
background: rgb(34, 34, 34);
@ -50,6 +136,41 @@ header ul li *[href]:hover {
box-shadow: inset 0 0 10px #000000;
}
/* Side nav bar */
.sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sideNav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sideNav a:hover {
color: #f1f1f1;
}
.sideNav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
@ -58,6 +179,15 @@ header ul li *[href]:hover {
flex-direction: column;
}
.geoLoc {
text-align: center;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#hero {
background-color: white;
padding: 20px;
@ -88,51 +218,9 @@ header ul li *[href]:hover {
text-align: center;
}
@keyframes image-fun {
0% {
left: -500px;
top: -300px;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
width: 10px;
}
100% {
left: 0px;
top: 0px;
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
width: 320px;
}
}
@keyframes image-spin {
0% {
left: 0;
top: 100px;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
width: 10px;
}
100% {
left: 0;
top: 0;
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
width: 320px;
}
}
#default-image {
border-radius: 20px;
width: 320px;
width: 300px;
position: relative;
animation-name: image-fun;
animation-duration: 2s;
@ -163,89 +251,127 @@ header ul li *[href]:hover {
font-size: 16px;
}
/* Mobile devices */
@media screen and (max-width: 320px) {
header nav ul {
height: 40px;
font-size: 0.9rem;
@keyframes image-fun {
0% {
left: -500px;
top: -300px;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
width: 10px;
}
100% {
left: 0px;
top: 0px;
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
width: 300px;
}
}
header ul li *[href] {
line-height: 40px;
height: 40px;
@keyframes image-spin {
0% {
left: 0;
top: 100px;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
width: 10px;
}
100% {
left: 0;
top: 0;
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
width: 300px;
}
}
/* iPhone and Android (Portrait) */
@media screen and (max-width: 320px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
.mainNav {
display: none;
}
h1 {
font-size: 20px;
}
video {
display: none;
}
}
/* iPads, Tablets. */
@media screen and (min-width: 321px) {
@media screen and (max-width: 479px) {
.mainNav {
display: none;
}
header nav ul {
h1 {
font-size: 20px;
}
video {
display: none;
}
img#small_image {
width: 100%;
}
}
/* iPhone and Android (Landscape) */
@media screen and (min-width: 480px) {
table {
font-size: 16px;
}
.sideNav {
display: none;
}
/* column for the label */
.col-25 {
float: left;
text-align: left;
width: 150px;
}
/* column for the input fields */
.col-75 {
margin-left: 130px;
max-width: 100%;
padding-top: 10px;
}
#main {
display: none;
}
.mainNav nav ul {
height: 40px;
font-size: 1rem;
}
header ul li *[href] {
.mainNav ul li *[href] {
line-height: 40px;
height: 40px;
}
img#large_image {
display: none;
}
img#small_image {
display: block;
width: 100%;
}
h1 {
font-size: 26px;
}
video {
display: none;
}
}
/* Small screens, laptops */
@media screen and (min-width: 768px) {
header nav ul {
height: 50px;
font-size: 1.4rem;
}
header ul li *[href] {
line-height: 50px;
height: 50px;
}
img#small_image {
display: none;
}
img#large_image {
display: block;
width: 100%;
}
.flex-container {
flex-direction: row;
}
h1 {
font-size: 36px;
}
video {
display: inline-block;
}
@keyframes image-fun {
0% {
left: -500px;
@ -266,6 +392,7 @@ header ul li *[href]:hover {
width: 650px;
}
}
@keyframes image-spin {
0% {
left: 0;
@ -276,6 +403,7 @@ header ul li *[href]:hover {
transform: rotateY(0deg);
width: 10px;
}
100% {
left: 0;
top: 0;
@ -289,7 +417,7 @@ header ul li *[href]:hover {
#default-image {
border-radius: 20px;
width: 650px;
width: 100%;
position: relative;
animation-name: image-fun;
animation-duration: 2s;
@ -302,38 +430,106 @@ header ul li *[href]:hover {
animation-name: image-spin;
animation-duration: 2s;
}
h1 {
font-size: 24px;
}
video {
display: none;
}
/* Desktops, large screens. */
img#small_image {
width: 100%;
}
}
/* iPad (portrait) */
@media screen and (min-width: 768px) {
.mainNav nav ul {
height: 50px;
font-size: 1.4rem;
}
.mainNav ul li *[href] {
line-height: 50px;
height: 50px;
}
.form-padding {
padding-left: 100px;
padding-right: 100px;
}
img#small_image {
display: none;
}
#default-image {
width: 650px;
}
img#large_image {
display: block;
width: 100%;
}
.flex-container {
flex-direction: row;
}
h1 {
font-size: 36px;
}
video {
display: inline-block;
}
}
/* Standard Resolution Monitors */
@media screen and (min-width: 1024px) {
table {
font-size: 24px;
}
header nav ul {
.mainNav nav ul {
height: 50px;
font-size: 1.6rem;
}
header ul li *[href] {
.mainNav ul li *[href] {
line-height: 50px;
height: 50px;
}
.form-padding {
padding-left: 200px;
padding-right: 200px;
}
h1 {
font-size: 46px;
}
}
/* Extra large screens, TV. */
@media screen and (min-width: 1401px) {
/* High Resolution Monitors */
@media screen and (min-width: 1366px) {
header nav ul {
.mainNav nav ul {
height: 50px;
font-size: 2rem;
}
header ul li *[href] {
.mainNav ul li *[href] {
line-height: 50px;
height: 50px;
}
.form-padding {
padding-left: 300px;
padding-right: 300px;
}
}

20
index.html
View File

@ -13,12 +13,24 @@
<![endif]-->
<script src="/js/geo.js"></script>
<script src="/js/hiddenNav.js"></script>
<!-- Completed files -->
</head>
<body>
<header id="wrapper">
<header>
<h1>Atlantic Fishing Resort</h1>
<div id="mySidenav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#" class="active">Home</a>
<a href="units.html">Units</a>
<a href="activities.html">Activities</a>
<a href="reservations.html">Reservations</a>
</div>
<div id="main">
<span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
</div>
<div class="mainNav">
<nav>
<ul>
<li>
@ -35,7 +47,7 @@
</li>
</ul>
</nav>
</div>
</header>
<main>
<div id="hero">
@ -62,7 +74,7 @@
</article>
</div>
<article>
<div style="padding: 50px 50px;">
<div style="padding: 50px 10px;">
<div class="flex-container">
<div>
<h3>Find us</h3>
@ -73,7 +85,7 @@
<!--Position information will be inserted here-->
<div id="result"></div>
</div>
<div style="padding: 50px 0; text-align: center">
<div class="geoLoc">
<img id="default-image" src="images/default.jpg" alt="Atlantic Holiday Resort">
<img id="book-flight-image" src="images/book_flight.jpg" alt="Book a flight to Namibia"
style="display: none;">

9
js/hiddenNav.js Normal file
View File

@ -0,0 +1,9 @@
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}

84
reservations.html
View File

@ -12,14 +12,25 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<script src="/js/hiddenNav.js"></script>
<!-- Completed files -->
</head>
<body>
<div id="wrapper">
<div>
<header>
<h1>Atlantic Fishing Resort</h1>
<div id="mySidenav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="index.html">Home</a>
<a href="units.html">Units</a>
<a href="activities.html">Activities</a>
<a href="#" class="active">Reservations</a>
</div>
<div id="main">
<span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
</div>
<div class="mainNav">
<nav>
<ul>
<li>
@ -36,40 +47,83 @@
</li>
</ul>
</nav>
</div>
</header>
<main>
<h2>Reservations at Atlantic Fishing Resort</h2>
<div class="form-padding">
<form method="post" action="http://webdevbasics.net/scripts/pacific.php">
<div class="container">
<h3>Contact Us</h3>
<p>Required information is marked with an asterisk (*).</p>
<form method="post" action="http://webdevbasics.net/scripts/pacific.php">
<fieldset>
<legend>Personal Information</legend>
<div class="row">
<div class="col-25">
<label for="myFName">* First Name:</label>
</div>
<div class="col-75">
<input type="text" name="myFName" id="myFName" required="required">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="myLName">* Last Name:</label>
</div>
<div class="col-75">
<input type="text" name="myLName" id="myLName" required="required">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="myEmail">* E-mail:</label>
</div>
<div class="col-75">
<input type="email" name="myEmail" id="myEmail" required="required">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="myPhone">Phone:</label>
</div>
<div class="col-75">
<input type="tel" name="myPhone" id="myPhone">
</div>
</div>
</fieldset>
<fieldset>
<legend>Booking Details</legend>
<div class="row">
<div class="col-25">
<label for="myDate">Arrival Date:</label>
</div>
<div class="col-75">
<input type="date" name="myDate" id="myDate">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="myNights">Nights:</label>
</div>
<div class="col-75">
<input type="number" name="myNights" id="myNights" min="1" max="14">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="myComments">* Comments:</label>
<textarea name="myComments" id="myComments" rows="2" cols="20" required="required"></textarea>
</div>
<div class="col-75">
<textarea name="myComments" id="myComments" rows="2" cols="20"
required="required"></textarea>
</div>
</div>
</fieldset>
<input type="submit" id="mySubmit" value="Submit">
</div>
</form>
</div>
</main>
<footer>
Copyright © 1999 Atlantic Fishing Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>

26
units.html
View File

@ -11,14 +11,24 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<script src="/js/hiddenNav.js"></script>
<!-- Completed files -->
</head>
<body>
<div id="wrapper">
<div>
<header>
<h1>Atlantic Fishing Resort</h1>
<div id="mySidenav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="index.html">Home</a>
<a href="#" class="active">Units</a>
<a href="activities.html">Activities</a>
<a href="reservations.html">Reservations</a>
</div>
<div id="main">
<span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
</div>
<div class="mainNav">
<nav>
<ul>
<li>
@ -35,10 +45,11 @@
</li>
</ul>
</nav>
</div>
</header>
<main>
<div id="banner">
<img id="large_image" src="banner_units_large.jpg" alt="Atlantic Coastal Town">
<img id="large_image" src="banner_units_large.jpg" alt="Atlantic Coastal Town" hidden="">
<img id="small_image" src="banner_units_small.jpg" alt="Atlantic Coastal Town">
</div>
<div id="hero">
@ -74,7 +85,7 @@
<h3>Unit Packages</h3>
<p>A variety of luxury unit packages are available. Choose a package below and contact us to begin your
reservation. We’re happy to build a custom package just for you!</p>
<div style="padding-left: 20px; padding-right: 20px; padding-bottom: 50px">
<table>
<tr>
<th>Package Name</th>
@ -82,21 +93,18 @@
<th>Nights</th>
<th>Cost per Person</th>
</tr>
<tr>
<td>Weekend Escape</td>
<td class="text">Two breakfasts, a trail map, a picnic snack</td>
<td>2</td>
<td>$450</td>
</tr>
<tr>
<td>Weekday Retreat</td>
<td class="text">Four breakfasts, a trail map, guided shore fishing tour</td>
<td>4</td>
<td>$600</td>
</tr>
<tr>
<td>Full Adventure</td>
<td class="text">Six breakfasts, full fishing tackle rental daily, a trail map</td>
@ -104,8 +112,8 @@
<td>$800</td>
</tr>
</table>
</div>
</main>
<footer>
Copyright © 1999 Atlantic Fishing Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>