champlain
/
WEBD-225-40
1
0
Fork 0
Code Releases Activity

Week 4: CSS Animation and Transition

This commit is contained in:
Llewellyn van der Merwe 2022-02-14 02:29:00 +02:00
parent 3190d81d49
commit 5c24e2c8fc
Signed by: Llewellyn
GPG Key ID: EFC0C720A240551C
5 changed files with 151 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.cache/.otp_sesion_105.232.65.234 Normal file
View File

@ -0,0 +1 @@

BIN
atlantic.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 143 KiB

BIN
atlantic.mp4 Normal file
View File

Binary file not shown.

103
css/atlantic.css
View File

@ -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
View File

@ -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>