Week 4: CSS Animation and Transition
This commit is contained in:
parent
3190d81d49
commit
5c24e2c8fc
GPG Key ID:
EFC0C720A240551C
1
.cache/.otp_sesion_105.232.65.234
Normal file
1
.cache/.otp_sesion_105.232.65.234
Normal file
@ -0,0 +1 @@
|
||||
|
||||
BIN
atlantic.jpg
Normal file
BIN
atlantic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
BIN
atlantic.mp4
Normal file
BIN
atlantic.mp4
Normal file
Binary file not shown.
103
css/atlantic.css
103
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: linear-gradient(0deg, rgba(34,34,34,1) 0%, rgba(84,84,84,1) 50%, rgba(34,34,34,1) 100%);
|
||||
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%);
|
||||
box-shadow: inset 0 0 10px #000000;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
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: 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%);
|
||||
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: linear-gradient(0deg, rgba(34,34,34,1) 0%, rgba(84,84,84,1) 50%, rgba(34,34,34,1) 100%);
|
||||
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%);
|
||||
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) {
|
||||
|
||||
94
index.html
94
index.html
@ -36,33 +36,33 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main id="homehero">
|
||||
<h2>Enjoy Nature in Luxury</h2>
|
||||
<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>
|
||||
<main>
|
||||
<div id="home-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>
|
||||
<h3>What We Offer</h3>
|
||||
<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>
|
||||
</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>
|
||||
<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 style="padding: 50px 50px;">
|
||||
<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"
|
||||
style="width: 100%;">
|
||||
<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="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>
|
||||
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>
|
||||
Copyright © 1999 Atlantic Fishing Resort<br>
|
||||
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
|
||||
<div style="padding: 50px 50px;">
|
||||
Copyright © 1999 Atlantic Fishing Resort
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user