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

Week 4: CSS Animation and Transition

Browse Source
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.

87
css/atlantic.css
View File

@ -50,6 +50,93 @@ header ul li *[href]:hover {
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) {

66
index.html
View File

@ -36,22 +36,19 @@
</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
<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>
@ -60,9 +57,12 @@
<li>Heated jacuzzi and sauna</li>
<li>Guided fishing tours</li>
</ul>
</div>
</div>
</article>
</div>
<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>
@ -74,27 +74,43 @@
<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>