1 form
login page <title>
<head>
<body>
<center> <h1 student login information (/h1) </center>
<form>
<div class ="Container"> <center>
<div> <label> Username : </label>
<input type="text" place holder = "enter the username required> </div>
<div><label> Password :</label>
<input type="Password" place holder ="enter the Password" required> </div>
<div> <button type= "Submit"> login </button> </div>
<input type="checkbox" checked =" Checked"
remember me
<div> <button type="button" class= Cancel btn"> Cancel </button> </div>
<div> forget <a href ='#'> password </a> </div
</div>
</form>
</body>
</html>
2 key animation
<!DOCTYPE html><head><Style> h1{
Color black;text align: Center;}
div{ Position:relative;animation jtp 7s infinite;}
@keyframes jtp {
0% { top: 100px;width: 0px;Font-size: 10px;
transform : translate (0px) Scale (1.4) rotate (80deg);}
25%{ top:100px;background: yellow;Width: 50px;Font-size: 20px;
transform : translate (100px) Scale (1.3) rotate (60deg);}
50%{ top:100px;background: orange;Width: 50px;Font-size: 20px;
transform : translate (200px) Scale (1.2) rotate (40deg);}
75%{ top:100px;background: pink;Width: 50px;Font-size: 40px;
transform : translate (400px) Scale (1.1) rotate (20deg);}
100%{ top:100px;background: red;Width: 10px;Font-size: 60px;
transform : translate (400px) Scale (1) rotate (0deg);}}</style></head><body><div><h1>
Multimedia and animation
</h1></div></body></html>
3 Multiple animation
<!DOCTYPE html><html><head><style> div {
width: 100px; height: 100px;background-color: red; position: relative; animation-name:
example; animation-duration: 4s;}
@keyframes example
{ 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px;
top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}</style></head><body><h1> Multiple Animation</h1><div></div><p><b>Note:</b> When
an animation is finished, it goes back to its original style.</p></body></html>
4 Font property
<!DOCTYPE html><html><head><style>p.a { font: 15px Arial, sans-serif;}p.b { font:
italic small-caps bold 12px/30px Georgia, serif;}</style></head><body><h1>The font
Property</h1><p class="a">This is a paragraph. The font size is set to 12 pixels, and
the font family is Calibri.</p><p class="b">This is a paragraph. The font is set to italic
and bold, with small-caps (all lowercase letters are converted to uppercase). The font
size is set to 12 pixels, the line height is set to 30 pixels, and the font family is
Georgia.</p></body></html>
1 Svg circle
<!DOCTYPE html>
<html><body><center><h1 style="color:green">Welcome To multimedia and
animation</h1><svg height="400" width="400"><circle cx="150" cy="150" r="100"
stroke="gray"stroke-width="2" fill="green" /></svg><svg height="300"
width="300"><circle cx="150" cy="150" r="100" stroke="green"stroke-width="2"
fill="blue" /></svg></center></body></html>
2.Svg ellipse
<html> <title>SVG Ellipse Sample SVG Ellipse Image
3 Svg star
SVG SVG
Star
4 Stroke text