Week 5: Cross-Browser Testing

.cache/.otp_sesion_105.232.65.234

@@ -1 +0,0 @@
-

activities.html

@@ -36,22 +36,29 @@
             </ul>
         </nav>
     </header>
-    <div id="trailhero"></div>
 
     <main>
         <h2>Activities while staying at Atlantic Fishing Resort</h2>
-
+        <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
+            <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>

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;
     }
 }
+
+.flex-container {
+    flex-direction: row;
+}
+

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 style="text-align: center">
-        <div>
+        <video controls autoplay loop
-            <video controls="controls"
+               poster="atlantic.jpg"
-                   poster="pacific.jpg"
+               width="900" height="600">
-                   width="320" height="240">
+            <source src="atlantic.mp4" type="video/mp4">
-                <source src="pacific.mp4" type="video/mp4">
+            Your browser does not support the video tag.
-                <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 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;">

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) {

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>