Week 6: Responsive Site Build

css/atlantic.css

@@ -105,10 +105,167 @@ header ul li *[href]:hover {
         -moz-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
         transform: rotateZ(360deg);
-        width: 650px;
+        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;
+    position: relative;
+    animation-name: image-fun;
+    animation-duration: 2s;
+}
+
+#book-flight-image, #rent-car-image, #walking-distance-image {
+    border-radius: 20px;
+    width: 320px;
+    position: relative;
+    animation-name: image-spin;
+    animation-duration: 2s;
+}
+
+#toggleWatchBtn {
+    width: 180px;
+    height: 50px;
+    background: rgb(96, 95, 95);
+    background: linear-gradient(0deg, rgba(96, 95, 95, 1) 0%, rgba(255, 255, 255, 1) 100%);
+    -webkit-duration: .5s;
+    -moz-duration: .5s;
+    -o-duration: .5s;
+    transition-duration: .5s;
+}
+
+#toggleWatchBtn:hover {
+    width: 250px;
+    height: 60px;
+    font-size: 16px;
+}
+
+/* Mobile devices */
+@media screen and (max-width: 320px) {
+
+    header nav ul {
+        height: 40px;
+        font-size: 0.9rem;
+    }
+
+    header ul li *[href] {
+        line-height: 40px;
+        height: 40px;
+    }
+
+    h1 {
+        font-size: 20px;
+    }
+}
+
+/* iPads, Tablets. */
+@media screen and (min-width: 321px) {
+
+    header nav ul {
+        height: 40px;
+        font-size: 1rem;
+    }
+
+    header 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;
+            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: 650px;
+        }
+    }
     @keyframes image-spin {
         0% {
             left: 0;
@@ -145,81 +302,11 @@ header ul li *[href]:hover {
         animation-name: image-spin;
         animation-duration: 2s;
     }
-
-#toggleWatchBtn {
-    width: 180px;
-    height: 50px;
-    background: rgb(96, 95, 95);
-    background: linear-gradient(0deg, rgba(96, 95, 95, 1) 0%, rgba(255, 255, 255, 1) 100%);
-    -webkit-duration: .5s;
-    -moz-duration: .5s;
-    -o-duration: .5s;
-    transition-duration: .5s;
 }
 
-#toggleWatchBtn:hover {
-    width: 250px;
-    height: 60px;
-    font-size: 16px;
-}
-
-/* Mobile devices */
-@media screen and (max-width: 480px) {
-
-    header nav ul {
-        height: 40px;
-        font-size: 0.9rem;
-    }
-
-    header ul li *[href] {
-        line-height: 40px;
-        height: 40px;
-    }
-}
-
-.flex-container {
-    flex-direction: column;
-}
-
-/* iPads, Tablets. */
-@media screen and (min-width: 481px) {
-
-    header nav ul {
-        height: 40px;
-        font-size: 1rem;
-    }
-
-    header ul li *[href] {
-        line-height: 40px;
-        height: 40px;
-    }
-}
-
-
-.flex-container {
-    flex-direction: column;
-}
-
-/* Small screens, laptops */
-@media screen and (min-width: 769px) {
-
-    header nav ul {
-        height: 50px;
-        font-size: 1.4rem;
-    }
-
-    header ul li *[href] {
-        line-height: 50px;
-        height: 50px;
-    }
-}
-
-.flex-container {
-    flex-direction: row;
-}
 
 /* Desktops, large screens. */
-@media screen and (min-width: 1025px) {
+@media screen and (min-width: 1024px) {
 
     header nav ul {
         height: 50px;
@@ -230,10 +317,14 @@ header ul li *[href]:hover {
         line-height: 50px;
         height: 50px;
     }
+
+    h1 {
+        font-size: 46px;
+    }
 }
 
 /* Extra large screens, TV. */
-@media screen and (min-width: 1201px) {
+@media screen and (min-width: 1401px) {
 
     header nav ul {
         height: 50px;
@@ -246,7 +337,3 @@ header ul li *[href]:hover {
     }
 }
 
-.flex-container {
-    flex-direction: row;
-}
-

index.html

@@ -45,8 +45,7 @@
                 <div>
                     <h3>What We Offer</h3>
                     <p><span class="resort">Atlantic Fishing Resort</span> offers a special lodging experience on the
-                        Namibian West
+                        Namibian West Coast.<br/>
-                        Coast.<br/>
                         Relax in serenity with panoramic views of the Atlantic Ocean.</p>
                 </div>
                 <div>
@@ -74,7 +73,7 @@
                     <!--Position information will be inserted here-->
                     <div id="result"></div>
                 </div>
-                <div style="padding: 50px 0">
+                <div style="padding: 50px 0; text-align: center">
                     <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;">

units.html

@@ -36,29 +36,40 @@
             </ul>
         </nav>
     </header>
-
     <main>
+        <div id="banner">
+            <img id="large_image" src="banner_units_large.jpg" alt="Atlantic Coastal Town">
+            <img id="small_image" src="banner_units_small.jpg" alt="Atlantic Coastal Town">
+        </div>
         <div id="hero">
-        <h2>Prepare for your stay at Atlantic Fishing Resort</h2>
+            <h1 style="text-align: center">Prepare for your stay at Atlantic Fishing Resort</h1>
-
+            <article>
-        <dl>
+                <div class="flex-container">
-            <dt>Our Units</dt>
+                    <div>
-            <dd>Our luxury units sleep 6 or 8 people comfortably. They have outside BBQ's with ocean-front views. Each
+                        <h3>Our Units</h3>
-                unit is serviced daily (except Sundays and public holidays) by our friendly staff to help you to take a
+                        <p>Our luxury units sleep 6 or 8 people comfortably. They have outside BBQ's with ocean-front
-                break.
+                            views. Each unit is serviced daily (except Sundays and public holidays) by our friendly
-            </dd>
+                            staff
-
+                            to help you to take a break.
-            <dt>How are the units furnished?</dt>
+                        </p>
-            <dd>Each unit is furnished with a king-size bed and double and single beds to accommodate all guests.
+                    </div>
-                The luxury unit has a fully furnished kitchen, dining room and living room with at least 2 toilets, a
+                    <div>
-                bath and shower facilities with hot water. Each unit also has a garage available.
+                        <h3>How are the units furnished?</h3>
-            </dd>
+                        <p>Each unit is furnished with a king-size bed and double and single beds to accommodate all
-
+                            guests. The luxury unit has a fully furnished kitchen, dining room and living room with at
-            <dt>What should I bring?</dt>
+                            least 2 toilets, a bath and shower facilities with hot water. Each unit also has a garage
-            <dd>Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking shoes and
+                            available.
-                plan to dress for changing weather with layers of clothing.
+                        </p>
-            </dd>
+                    </div>
-        </dl>
+                    <div>
+                        <h3>What should I bring?</h3>
+                        <p>Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking
+                            shoes and plan to dress for changing weather with layers of clothing. Remember a hat and
+                            sunscreen for a very bright African sun.
+                        </p>
+                    </div>
+                </div>
+            </article>
         </div>
         <h3>Unit Packages</h3>
         <p>A variety of luxury unit packages are available. Choose a package below and contact us to begin your