Skip to main content

Exercise 10: Animation (Finals Web Prog)


(Code for 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="Exercise10AnimatedWebpage.css">

</head>


<body>


<div> <h1 style="font-size:40px;"> ABOUT MYSELF  </h1> </div> <br> <br> <br> <br> <br> <br> <br> <br> 


<p style="text-align: justify; text-indent: 50px;">  Hi I'm Jillian Marren Dela Cruz. You can call me "Jill or Jillian" i'm currently 3rd year Multimedia Arts Student. 20 years of Age. I chose multimeida because i want to enchance my skills and i'm willing to learn about everything. I'm November Babies and My zodiac sign is Sagittarius. The Sagittarius Traits is Curious and energetic, Sagittarius is one of the biggest travelers among all zodiac signs. Their open mind and philosophical view motivates them to wander around the world in search of the meaning of life. Sagittarius is extrovert, optimistic and enthusiastic, and likes changes. Sagittarius-born are able to transform their thoughts into concrete actions and they will do anything to achieve their goals. Like the other fire signs, Sagittarius needs to be constantly in touch with the world to experience as much as possible. The ruling planet of Sagittarius is Jupiter, the largest planet of the zodiac. Their enthusiasm has no bounds, and therefore people born under the Sagittarius sign possess a great sense of humor and an intense curiosity. Freedom is their greatest treasure, because only then they can freely travel and explore different cultures and philosophies. Because of their honesty, Sagittarius-born are often impatient and tactless when they need to say or do something, so it's important to learn to express themselves in a tolerant and socially acceptable way. <br> </p>


</body>

</html>

(Code for CSS:)

div {

width: 90%;

height: 20%;

color: white;

text-align: center;

padding-top: 25px;

background-color: #fffff;

position: absolute;

animation-name: example;

animation-duration: 5s;

animation-iteration-count: infinite;

}


@keyframes example {

0% {background-color: #add8e6;}

20% {background-color: #c282cf;}

40% {background-color: #c282cf;}

60% {background-color: #f0549a;}

80% {background-color: #c9163a;)

100% {background-color: #add8e6;}

Comments

Popular posts from this blog

Exercise 11: YouTube Video Link Parameters (Finals Web Prog)

(Code for HTML:) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Youtube Videos Link Parameters </title> <link rel="stylesheet" href="Exercise11iFrameVideo.css"> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/183696100_2901575863495019_8667639209325296233_n.jpg?_nc_cat=100&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeGmZRPZmRmXrOArSHq09vPIKfIhC24RAaYp8iELbhEBpvFlFRJZ9cKWpyHOm3J-Tle-7AutVdLWleXZ1XrgIqBW&_nc_ohc=HTCL7Rxi8jAAX8t6M2L&_nc_ht=scontent.fmnl19-1.fna&oh=98676492910e87038adfb8cd76772c33&oe=60BD0C01" target="Jillian Dela Cruz">About</a> <a href="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/184092486_2901582303494375_8241790509753611562_n.jpg?_nc_cat=102&am

Exercise 13: Login and Sign Up Forms (Finals Interactive)

(CODE FOR LOGIN HTML:) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Login and Sign Up </title> <link rel="stylesheet" href="Exercise13Login.css"> </head> <body> <form name="form"> <h2>Login</h2> <p> Log in to Multimedia Website </p> <div> <label for="text"> <b> Username </b> </label> <input  id="user"  name="user" type="text" placeholder="Username"> </div> </div> <div> <label for="psw"> <b> Password </b> </label> <input id="pass" name="pass" type="password"  placeholder="Password"> </div> </div> <div> <button type="button" value="Login" onClick="validate(this.form)&qu

12 Months/ Finding the Events

  <html> <body style="background-color:#CBC6DC;"> <h2><p style="font-family:century gothic;"> ENTER NUMBER OF MONTH:</p></h2> <br><input id="text_a" type="text;" /> <p id="answer"></p> <button onclick="myFunction()">Submit</button> <script> function myFunction() { var a=document.getElementById("text_a").value; if (a=="1")   { document.getElementById("answer").innerHTML="1 - January, New Year";   } else if (a=="2")   {