From a6d5898f61b19270f80f022fa636386a42bcb6ed Mon Sep 17 00:00:00 2001
From: Llewellyn van der Merwe <llewellyn@vdm.io>
Date: Mon, 21 Feb 2022 01:07:36 +0200
Subject: [PATCH] Week 5: Cross-Browser Testing

---
 .cache/.otp_sesion_105.232.65.234 |  1 -
 activities.html                   | 33 +++++++++++-------
 css/atlantic.css                  | 58 ++++++++++++++++++++++++-------
 index.html                        | 31 ++++++++---------
 js/geo.js                         |  4 +--
 units.html                        |  4 +--
 6 files changed, 84 insertions(+), 47 deletions(-)
 delete mode 100644 .cache/.otp_sesion_105.232.65.234

diff --git a/.cache/.otp_sesion_105.232.65.234 b/.cache/.otp_sesion_105.232.65.234
deleted file mode 100644
index 8b13789..0000000
--- a/.cache/.otp_sesion_105.232.65.234
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/activities.html b/activities.html
index 989b6b1..3b5ef90 100644
--- a/activities.html
+++ b/activities.html
@@ -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>
diff --git a/css/atlantic.css b/css/atlantic.css
index 4fa7524..b473856 100644
--- a/css/atlantic.css
+++ b/css/atlantic.css
@@ -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;
     }
-}
\ No newline at end of file
+}
+
+.flex-container {
+    flex-direction: row;
+}
+
diff --git a/index.html b/index.html
index ca6f473..93d0446 100644
--- a/index.html
+++ b/index.html
@@ -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;">
diff --git a/js/geo.js b/js/geo.js
index ce40979..9048904 100644
--- a/js/geo.js
+++ b/js/geo.js
@@ -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) {
diff --git a/units.html b/units.html
index 0f3a533..f735b59 100644
--- a/units.html
+++ b/units.html
@@ -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>