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

Week 5: Cross-Browser Testing

Browse Source
This commit is contained in:
Llewellyn van der Merwe 2022-02-21 01:07:36 +02:00
parent 5c24e2c8fc
commit a6d5898f61
Signed by: Llewellyn
GPG Key ID: EFC0C720A240551C
6 changed files with 84 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.cache/.otp_sesion_105.232.65.234
View File

@ -1 +0,0 @@

33
activities.html
View File

@ -22,36 +22,43 @@
<nav>
<ul>
<li>
<a href="index.html">Home</a>
<a href="index.html">Home</a>
</li>
<li>
<a href="units.html">Units</a>
<a href="units.html">Units</a>
</li>
<li>
<a href="#" class="active">Activities</a>
<a href="#" class="active">Activities</a>
</li>
<li>
<a href="reservations.html">Reservations</a>
<a href="reservations.html">Reservations</a>
</li>
</ul>
</nav>
</header>
<div id="trailhero"></div>
<main>
<h2>Activities while staying at Atlantic Fishing Resort</h2>
<h3>Dune Adventures</h3>
<p><span class="resort">Atlantic Fishing Resort</span> in situated in the dune belt of the Namib. Take a guided
scenic drive either on camels or quadbikes for the more adventurous.</p>
<article id="activity-focus">
<div>
<h3>Dune Adventures</h3>
<p><span class="resort">Atlantic Fishing Resort</span> in situated in the dune belt of the Namib. Take a
guided
scenic drive either on camels or quadbikes for the more adventurous.</p>
</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
fishing tackle. Find guided tours or venture out by yourself geared up with 4x4 and plenty of sunscreens.</p>
fishing tackle. Find guided tours or venture out by yourself geared up with 4x4 and plenty of
sunscreens.</p>
</div>
<div>
<h3>Dolphin &amp; Bird Watching</h3>
<p>While anytime is a good time for bird watching at the Atlantic coast, we can organize dolphin and birdwatching
<p>While anytime is a good time for bird watching at the Atlantic coast, we can organize dolphin and
birdwatching
boat trips available daily.</p>
</div>
</article>
</main>
<footer>

58
css/atlantic.css
View File

@ -50,7 +50,15 @@ header ul li *[href]:hover {
box-shadow: inset 0 0 10px #000000;
}
#home-hero {
.flex-container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-evenly;
flex-direction: column;
}
#hero {
background-color: white;
padding: 20px;
-webkit-duration: 1s;
@ -59,10 +67,27 @@ header ul li *[href]:hover {
transition-duration: 1s;
}
#home-hero:hover {
#hero:hover {
background-color: #a3bedb;
}
#activity-focus {
background-color: white;
padding: 20px;
-webkit-duration: 1s;
-moz-duration: 1s;
-o-duration: 1s;
transition-duration: 1s;
}
#activity-focus:hover {
background-color: #c7dcf2;
}
#contact {
text-align: center;
}
@keyframes image-fun {
0% {
left: -500px;
@ -141,35 +166,40 @@ header ul li *[href]:hover {
/* Mobile devices */
@media screen and (max-width: 480px) {
/* flex container */
header nav ul {
height: 40px;
font-size: 0.9rem;
}
/* flex item */
header ul li *[href] {
line-height: 40px;
height: 40px;
}
}
.flex-container {
flex-direction: column;
}
/* iPads, Tablets. */
@media screen and (min-width: 481px) {
/* flex container */
header nav ul {
height: 40px;
font-size: 1rem;
}
/* flex item */
header ul li *[href] {
line-height: 40px;
height: 40px;
}
}
.flex-container {
flex-direction: column;
}
/* Small screens, laptops */
@media screen and (min-width: 769px) {
@ -178,23 +208,24 @@ header ul li *[href]:hover {
font-size: 1.4rem;
}
/* flex item */
header ul li *[href] {
line-height: 50px;
height: 50px;
}
}
.flex-container {
flex-direction: row;
}
/* Desktops, large screens. */
@media screen and (min-width: 1025px) {
/* flex container */
header nav ul {
height: 50px;
font-size: 1.6rem;
}
/* flex item */
header ul li *[href] {
line-height: 50px;
height: 50px;
@ -204,15 +235,18 @@ header ul li *[href]:hover {
/* Extra large screens, TV. */
@media screen and (min-width: 1201px) {
/* flex container */
header nav ul {
height: 50px;
font-size: 2rem;
}
/* flex item */
header ul li *[href] {
line-height: 50px;
height: 50px;
}
}
}
.flex-container {
flex-direction: row;
}

31
index.html
View File

@ -35,12 +35,13 @@
</li>
</ul>
</nav>
</header>
<main>
<div id="home-hero">
<div id="hero">
<h2 style="text-align: center">Enjoy Nature in Luxury</h2>
<article>
<div class="flex-container" style="display: flex; align-items: flex-start; justify-content: space-evenly;">
<div class="flex-container">
<div>
<h3>What We Offer</h3>
<p><span class="resort">Atlantic Fishing Resort</span> offers a special lodging experience on the
@ -63,7 +64,7 @@
</div>
<article>
<div style="padding: 50px 50px;">
<div class="flex-container" style="display: flex; align-items: flex-start; justify-content: space-evenly;">
<div class="flex-container">
<div>
<h3>Find us</h3>
<h4>Using our GEO Location service</h4>
@ -77,6 +78,7 @@
<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;">
<img id="rent-car-image" src="images/rent_car.jpg" alt="Rent a car in Namibia"
style="display: none;">
<img id="walking-distance-image" src="images/walking_distance.jpg" alt="Walking in the dunes"
@ -85,19 +87,15 @@
</div>
</div>
</article>
<div class="flex-container" style="display: flex; align-items: flex-start; justify-content: space-evenly;">
<div>
<video controls="controls"
poster="pacific.jpg"
width="320" height="240">
<source src="pacific.mp4" type="video/mp4">
<source src="pacific.ogg" type="video/ogg">
<embed type="application/x-shockwave-flash"
src="pacific.swf" quality="high"
width="320" height="240">
</video>
</div>
<div>
<div style="text-align: center">
<video controls autoplay loop
poster="atlantic.jpg"
width="900" height="600">
<source src="atlantic.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div id="contact">
<span class="resort">Atlantic Fishing Resort</span><br />
12010 Atlantic Fishing Road<br />
Hentiesbaai, Namibia 95555<br /><br />
@ -105,7 +103,6 @@
<span id="desktop">888-555-5555</span><br /><br />
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</div>
</div>
</main>
<footer>
<div style="padding: 50px 50px;">

4
js/geo.js
View File

@ -42,14 +42,14 @@ function getDistance(lat1, lat2, lon1, lon2) {
function showPosition() {
if (navigator.geolocation) {
watchID = navigator.geolocation.watchPosition(successCallback);
watchID = navigator.geolocation.getCurrentPosition(successCallback);
} else {
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
function successCallback(position) {
document.getElementById("toggleWatchBtn").innerHTML = "Stop checking my location";
document.getElementById("toggleWatchBtn").innerHTML = "Check my Location Again";
// Check position has been changed or not before doing anything
if (prevLat != position.coords.latitude || prevLong != position.coords.longitude) {

4
units.html
View File

@ -36,9 +36,9 @@
</ul>
</nav>
</header>
<div id="yurthero"></div>
<main>
<div id="hero">
<h2>Prepare for your stay at Atlantic Fishing Resort</h2>
<dl>
@ -59,7 +59,7 @@
plan to dress for changing weather with layers of clothing.
</dd>
</dl>
</div>
<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>