Html practice
css:
.clr { clear:both; }
#wrap { width:860px; margin:0 auto; }
#curvy-container { width:253px; float:left; margin-left:10px; margin-top:20px; }
.curvy-container-top {
height:47px;
width:253px;
margin:0;
padding:0;
float:left;
clear:both;
background-image: url(images/help-box_01.jpg);
background-position:top;
background-repeat:no-repeat;
}
.curvy-container-mid { width:253px; background:url(images/img-mid-curvy.jpg) repeat-y; }
.curvy-container-mid ul { list-style:none; margin:0 0 0 10px; padding:0;}
.curvy-container-mid ul li { font-family:Arial, Helvetica, sans-serif; font-size:13px;margin:0;padding:3px;font-weight:normal; }
.curvy-container-mid ul li a{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;
text-decoration:none;}
.curvy-container-mid ul li a:hover{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#0099FF;
text-decoration:none;}
.curvy-container-bottom {
height:25px;
background-image: url(images/img-bottom-curvy.jpg);
background-position:top;
background-repeat:no-repeat;
}
.span_text
{
padding-left:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.span_text_2
{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin-left:15px;
text-decoration:none;
}
.span_text_3
{
color: #666666;
margin-left:70px;
margin-top:2px;
}
.span_text_more
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color: #0099FF;
text-decoration:none;
}
.break a
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-decoration:none;
font-weight:bold;
margin-left:20px;
}
.break a:hover
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color: #0099FF;
text-decoration:none;
font-weight:bold;
}
.arrow
{
padding-left:30px;
}
.box_span_text
{
width:253px;
font-size:15px;
font-family:"Trebuchet MS";
font-weight:bold;
color: #FFFFFF;
text-align:center;
line-height:40px;
margin-top:5px;
}
Html:
.clr { clear:both; }
#wrap { width:860px; margin:0 auto; }
#curvy-container { width:253px; float:left; margin-left:10px; margin-top:20px; }
.curvy-container-top {
height:47px;
width:253px;
margin:0;
padding:0;
float:left;
clear:both;
background-image: url(images/help-box_01.jpg);
background-position:top;
background-repeat:no-repeat;
}
.curvy-container-mid { width:253px; background:url(images/img-mid-curvy.jpg) repeat-y; }
.curvy-container-mid ul { list-style:none; margin:0 0 0 10px; padding:0;}
.curvy-container-mid ul li { font-family:Arial, Helvetica, sans-serif; font-size:13px;margin:0;padding:3px;font-weight:normal; }
.curvy-container-mid ul li a{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;
text-decoration:none;}
.curvy-container-mid ul li a:hover{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#0099FF;
text-decoration:none;}
.curvy-container-bottom {
height:25px;
background-image: url(images/img-bottom-curvy.jpg);
background-position:top;
background-repeat:no-repeat;
}
.span_text
{
padding-left:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.span_text_2
{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin-left:15px;
text-decoration:none;
}
.span_text_3
{
color: #666666;
margin-left:70px;
margin-top:2px;
}
.span_text_more
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color: #0099FF;
text-decoration:none;
}
.break a
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-decoration:none;
font-weight:bold;
margin-left:20px;
}
.break a:hover
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color: #0099FF;
text-decoration:none;
font-weight:bold;
}
.arrow
{
padding-left:30px;
}
.box_span_text
{
width:253px;
font-size:15px;
font-family:"Trebuchet MS";
font-weight:bold;
color: #FFFFFF;
text-align:center;
line-height:40px;
margin-top:5px;
}
Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>free</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="curvy-container">
<div class="curvy-container-top">
<div class="box_span_text">Common Sections</div>
</div>
<div class="curvy-container-mid">
<ul>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Home</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>About Us</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Sromobazar Solution</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Contact Us</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Overseas Education</strong></a>
</span>
</li>
<div class="span_text_2">
<p style="margin-left:15px;"><strong class="span_text_more">Countrywise Universities List:</strong></p>
<ul>
<span class="break"><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=1" >Asia</a></span>
<li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=2">India</a></li>
</ul>
</div>
<div class="span_text_2">
<ul>
<span class="break"><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=28" >Japan</a></span>
<li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-detail&ID=w2v2z2&ownerId=x2"> University Of Tokyo</a></li>
<li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-detail&ID=w2v2z2&ownerId=x2">University Of Tokyo</a></li>
<li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-detail&ID=w2v2z2&ownerId=x2"> University Of Tokyo</a></li>
</ul>
</div>
<div class="span_text_2">
<ul>
<span class="break"><a href="#" >Africa</a></span>
<li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=140">South Africa</a></li>
</ul>
</div>
<div class="span_text_2">
<ul>
<span class="break"><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=2">North America</a></span>
<li class="span_text_3" > <img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=104"> Unitied States</a></li>
</ul>
</div>
<div class="span_text_2">
<ul>
<span class="break"><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=96">Canada</a></span>
<li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-detail&ID=w2v2v2&ownerId=x2"> Mcgrill University</a></li>
</ul>
</div>
<div class="span_text_2">
<ul>
<span class="break"><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=3">South America</a></span>
<li class="span_text_3" > <img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=113"> Argentina</a></li>
</ul>
</div>
<div class="span_text_2">
<ul>
<span class="break"><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=4">Europe</a></span>
<li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=90"> United Kingdom</a></li>
</ul>
</div>
<div class="span_text_2">
<ul>
<span class="break"><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=6">Australia</a></span>
<li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=124">Australia</a></li>
<li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=126">Newzealan</a></li>
</ul>
</div>
</ul>
</div>
<div class="curvy-container-bottom" >
</div>
</div>
<div id="curvy-container">
<div class="curvy-container-top">
<div class="box_span_text">Account Login Sections</div>
</div>
<div class="curvy-container-mid">
<ul>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Create Account</strong></a>
</span>
</li>
<div>
<ul>
<li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=41">Employeer</a></li>
<li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=11">Job seeker</a></li>
<li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=21">Student</a></li>
<li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=51">University Admin</a></li>
<li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=13">Corporate Group</a></li>
<li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=61">University Agency</a></li>
</ul>
</div>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Sign In</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Advance Search</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Job Listing</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Category Wise Job list</strong></a>
</span>
</li>
<div class="span_text_2">
<ul class="span_text_3">
<li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=job-listing&ID=42&isBidable=1">Accounts/Finance</a></li>
<li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=job-listing&ID=57&isBidable=1">IT/Telecommunication</a></li>
</ul>
</div>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Employee Listing</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Job seeker Listing</strong></a>
</span>
</li>
</ul>
</div>
<div class="curvy-container-bottom"></div>
<br />
<div class="curvy-container-top">
<div class="box_span_text">Common Sections</div>
</div>
<div class="curvy-container-mid">
<ul>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>List of Student</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Universities</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>List of Embassy</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Get Widges</strong></a>
</span>
</li>
</ul>
</div>
<div class="curvy-container-bottom"></div>
</div>
<!--help-->
<div id="curvy-container">
<div class="curvy-container-top">
<div class="box_span_text">Help</div>
</div>
<div class="curvy-container-mid">
<ul>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Help and Support</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>FAQ</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Payment Process</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>FAQ</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Searching For jobs</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Registering</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>For Corporate Group</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Keeping Your details Uptodate</strong></a>
</span>
</li>
<li>
<img src="images/arrow2.jpg" />
<span class="span_text">
<a href="http://www.sromobazar.com/index.php"><strong>Technical And Other Help Issue</strong></a>
</span>
</li>
</ul>
</div>
<div class="curvy-container-bottom"></div>
</div>
</div>
</body>
</html>
