WEB PROGRAMMING EXERCISE 10 : ANIMATION

-


 


HERES THE ANIMATION VIDEO!!

FOR THE CODES

HTML

!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Exercise 010 Animated Web page</title>

<link rel="stylesheet" href="exercise 10CSS.css">

</head>


<body>


<div> <h1 style="font-size:40px;"> ANG POGI NI EMMAN </h1> </div> <br> <br> <br> <br> <br> <br> <br> <br> 


<p style="text-align: justify; text-indent: 50px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar mattis nunc sed blandit. Vitae aliquet nec ullamcorper sit amet risus nullam eget felis. Id faucibus nisl tincidunt eget nullam non nisi. Vitae sapien pellentesque habitant morbi. A lacus vestibulum sed arcu. Enim ut tellus elementum sagittis vitae et leo. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Gravida arcu ac tortor dignissim convallis aenean et. Quam viverra orci sagittis eu volutpat odio facilisis mauris. Et malesuada fames ac turpis egestas sed tempus urna. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Cursus euismod quis viverra nibh cras pulvinar. Tristique nulla aliquet enim tortor at. Placerat duis ultricies lacus sed turpis tincidunt. <br> </p>


<p style="text-align: justify; text-indent: 50px;">Faucibus ornare suspendisse sed nisi lacus sed viverra. Nullam vehicula ipsum a arcu. Nisl purus in mollis nunc sed id semper risus. Quam pellentesque nec nam aliquam sem et tortor. Volutpat commodo sed egestas egestas fringilla phasellus. Vel orci porta non pulvinar neque laoreet suspendisse interdum. At urna condimentum mattis pellentesque id nibh. Venenatis tellus in metus vulputate eu scelerisque. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Euismod lacinia at quis risus sed vulputate. Id volutpat lacus laoreet non curabitur. Rhoncus mattis rhoncus urna neque viverra justo. </p>


</body>

</html>


FOR CSS

div {

width: 98.5%;

height: 20%;

color: white;

text-align: center;

padding-top: 25px;

background-color: #151B54;

position: absolute;

animation-name: example;

animation-duration: 5s;

animation-iteration-count: infinite;

}


@keyframes example {

0% {background-color: #6495ED;}

20% {background-color: #57FEFF;}

40% {background-color: #008080;}

60% {background-color: #3EA055;}

80% {background-color: #FFFFE0;)

100% {background-color: #FFFF00;}

}

Comments

Post a Comment

Popular posts from this blog

-
Image
W elcome To My Art Blog Portraits are works of art that record the likenesses of humans or animals that are alive or have been alive. The word  portraiture  is used to describe this category of art. The purpose of a portrait is to memorialize an image of someone for the future. It can be done with painting, photography, sculpture or almost any other medium. Some portraiture is also created by artists purely for the sake of creating art, rather than working on commission. The human body and face are fascinating subjects that many artists like to study in their personal work. Many artists also choose to do a "self-portrait." It is a work of art depicting the artist created by their own hand. These are typically made from a reference photo or by looking in a mirror. Self-portraits can give you a good sense of how an artist views themselves and, quite often, it is rather introspective. Some artists will regularly create self-portraits
Read more
-
Image
 html EXERCISE NUMBER 1  PROFILE html   <!DOCTYPE html> <html> <head> <title>My Profile</title> <style> body {background-color: Skyblue;} // styles applied to body tag h1 {color: black;} // styles applied to h1 tag p {color: red;} // styles applied to p tag hr{ border: 10px solid red; } </style> </head> <body> <h1> Name : EMMANUEL B UBALDO </h1> <h1>My favorite Songs </h1> <hr> <ol> <li> 2002 by edge sheeran <li> centimeters by peggies <li> thru these tears lany <li> Gospel by panic at the disco <li> Meant it Lany and Lauv </lol> <h2>My favorite Subjects </h2> <ul> <li> Web programming <li> 3D modelling  <li> Drawing </ul> <h1> Links to your portfolio </h1> <p> <a href="https://www.instagram.com/emmonztah/"> instagram </a> </p> <p><a href="https://portaitart.blo
Read more