Week 4: CSS Animation and Transition

.cache/.otp_sesion_105.232.65.234

@@ -0,0 +1 @@
+

css/atlantic.css

@@ -10,16 +10,16 @@ header nav a {
 header .active {
     text-decoration-color: lightblue;
     padding: 0 10px;
-    background: rgb(34,34,34);
+    background: rgb(34, 34, 34);
-    background: linear-gradient(0deg, rgba(34,34,34,1) 0%, rgba(84,84,84,1) 50%, rgba(34,34,34,1) 100%);
+    background: linear-gradient(0deg, rgba(34, 34, 34, 1) 0%, rgba(84, 84, 84, 1) 50%, rgba(34, 34, 34, 1) 100%);
     box-shadow: inset 0 0 10px #000000;
 }
 
 header nav ul {
     padding-left: 0;
     list-style-type: none;
-    background: rgb(46,44,47);
+    background: rgb(46, 44, 47);
-    background: linear-gradient(0deg, rgba(46,44,47,1) 0%, rgba(110,121,122,1) 50%, rgba(46,44,47,1) 100%);
+    background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -29,7 +29,7 @@ header nav ul {
 header 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%);
+    background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
     display: flex;
     flex-grow: inherit;
 }
@@ -37,7 +37,7 @@ header ul li *[href]:link {
 header 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%);
+    background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
     display: flex;
     flex-grow: inherit;
 }
@@ -45,11 +45,98 @@ header ul li *[href]:visited {
 header ul li *[href]:hover {
     color: lightskyblue;
     padding: 0 10px;
-    background: rgb(34,34,34);
+    background: rgb(34, 34, 34);
-    background: linear-gradient(0deg, rgba(34,34,34,1) 0%, rgba(84,84,84,1) 50%, rgba(34,34,34,1) 100%);
+    background: linear-gradient(0deg, rgba(34, 34, 34, 1) 0%, rgba(84, 84, 84, 1) 50%, rgba(34, 34, 34, 1) 100%);
     box-shadow: inset 0 0 10px #000000;
 }
 
+#home-hero {
+    background-color: white;
+    padding: 20px;
+    -webkit-duration: 1s;
+    -moz-duration: 1s;
+    -o-duration: 1s;
+    transition-duration: 1s;
+}
+
+#home-hero:hover {
+    background-color: #a3bedb;
+}
+
+@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;
+        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: 650px;
+    }
+}
+
+#default-image {
+    border-radius: 20px;
+    width: 650px;
+    position: relative;
+    animation-name: image-fun;
+    animation-duration: 2s;
+}
+
+#book-flight-image, #rent-car-image, #walking-distance-image {
+    border-radius: 20px;
+    width: 650px;
+    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: 480px) {

index.html

@@ -36,33 +36,33 @@
         </ul>
     </nav>
 </header>
-<main id="homehero">
+<main>
-    <h2>Enjoy Nature in Luxury</h2>
+    <div id="home-hero">
-    <video controls="controls"
+        <h2 style="text-align: center">Enjoy Nature in Luxury</h2>
-           poster="pacific.jpg"
+        <article>
-           width="320" height="240">
+            <div class="flex-container" style="display: flex; align-items: flex-start; justify-content: space-evenly;">
-        <source src="pacific.mp4" type="video/mp4">
+                <div>
-        <source src="pacific.ogg" type="video/ogg">
+                    <h3>What We Offer</h3>
-        <embed type="application/x-shockwave-flash"
+                    <p><span class="resort">Atlantic Fishing Resort</span> offers a special lodging experience on the
-               src="pacific.swf" quality="high"
+                        Namibian West
-               width="320" height="240">
+                        Coast.<br/>
-    </video>
+                        Relax in serenity with panoramic views of the Atlantic Ocean.</p>
+                </div>
+                <div>
+                    <ul>
+                        <li>Private apartments with beach front views</li>
+                        <li>Activities in and around town</li>
+                        <li>Shops in walking distance</li>
+                        <li>Nightly fine dining at the Overlook Cafe</li>
+                        <li>Heated jacuzzi and sauna</li>
+                        <li>Guided fishing tours</li>
+                    </ul>
+                </div>
+            </div>
+        </article>
+    </div>
     <article>
-        <h3>What We Offer</h3>
+        <div style="padding: 50px 50px;">
-        <p><span class="resort">Atlantic Fishing Resort</span> offers a special lodging experience on the Namibian West
-            Coast.<br/>
-            Relax in serenity with panoramic views of the Atlantic Ocean.</p>
-        <ul>
-            <li>Private apartments with beach front views</li>
-            <li>Activities in and around town</li>
-            <li>Shops in walking distance</li>
-            <li>Nightly fine dining at the Overlook Cafe</li>
-            <li>Heated jacuzzi and sauna</li>
-            <li>Guided fishing tours</li>
-        </ul>
-    </article>
-    <article>
-        <div style="padding: 50px 0;">
             <div class="flex-container" style="display: flex; align-items: flex-start; justify-content: space-evenly;">
                 <div>
                     <h3>Find us</h3>
@@ -71,30 +71,46 @@
                         location.</p>
                     <button type="button" id="toggleWatchBtn" style="margin-bottom: 20px;">Check my location</button>
                     <!--Position information will be inserted here-->
-                    <div id="result" ></div>
+                    <div id="result"></div>
                 </div>
                 <div style="padding: 50px 0">
-                    <img id="default-image" src="images/default.jpg" alt="Atlantic Holiday Resort"
+                    <img id="default-image" src="images/default.jpg" alt="Atlantic Holiday Resort">
-                         style="width: 100%;">
                     <img id="book-flight-image" src="images/book_flight.jpg" alt="Book a flight to Namibia"
-                         style="width: 100%; display: none;">
+                         style="display: none;">
                     <img id="rent-car-image" src="images/rent_car.jpg" alt="Rent a car in Namibia"
-                         style="width: 100%; display: none;">
+                         style="display: none;">
                     <img id="walking-distance-image" src="images/walking_distance.jpg" alt="Walking in the dunes"
-                         style="width: 100%; display: none;">
+                         style="display: none;">
                 </div>
             </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>
+            <span class="resort">Atlantic Fishing Resort</span><br />
+            12010 Atlantic Fishing Road<br />
+            Hentiesbaai, Namibia 95555<br /><br />
+            <a id="mobile" href="tel:888-555-5555">888-555-5555</a>
+            <span id="desktop">888-555-5555</span><br /><br />
+            <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
+        </div>
+    </div>
 </main>
 <footer>
-    <span class="resort">Atlantic Fishing Resort</span><br>
+    <div style="padding: 50px 50px;">
-    12010 Atlantic Fishing Road<br>
+        Copyright © 1999 Atlantic Fishing Resort
-    Hentiesbaai, Namibia 95555<br><br>
+    </div>
-    <a id="mobile" href="tel:888-555-5555">888-555-5555</a>
-    <span id="desktop">888-555-5555</span><br><br>
-    Copyright © 1999 Atlantic Fishing Resort<br>
-    <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
 </footer>
 </body>
 </html>