samplecsscode

Write the Following code to get the above output:

<html>
<head><title> Welcome to food.com</title>
<style type=”text/css”>
.box
{
width: 300px;
border: 1px solid #ff0099;
padding: 0px;
}
.box:hover
{
-moz-box-shadow: 0 0 20px #ff0099;
-webkit-box-shadow: 0 0 20px #ff0099;
box-shadow: 0 0 20px #ff0099;
}

.boxtop
{
width: 200px;
border: 1px solid #ff0099;
padding: 10px;
-moz-box-shadow: 0 0 20px #000;
-webkit-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
}

.boxmarq
{
width: 500px;
border: 2px solid #000099;
padding: 10px;
-moz-box-shadow: 0 0 20px #000;
-webkit-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
}
</style>
</head>
<body background=”back1.jpg”>
<center>
<div class=”boxtop”><font size=5 face=”Viner Hand ITC” >f&nbsp;&nbsp;o&nbsp;&nbsp;o&nbsp;&nbsp;d&nbsp;&nbsp;.&nbsp;&nbsp;c&nbsp;&nbsp;o&nbsp;&nbsp;m</font></div><br>

<div class=”boxmarq”><marquee behavior=”alternate” scrolldelay=”1″>Welcome to SAMPLE CSS Coding</marquee></div><br>

<center><div class=”box”>
<br><br>
Bring the mouse to me and see the effect
<br><br>
<br><br>

</div>
<br>
<div class=”box”>
<marquee direction=”up”>Up marquee direction</marquee>
<marquee direction=”down”>Down marquee direction</marquee>
</div>
<marquee scrollamount=”5″ width=”40″>&lt;&lt;&lt;</marquee>Opposite Direction Marquees<marquee scrollamount=”5″ direction=”right” width=”40″>&gt;&gt;&gt;</marquee>

</center></body></html>