Sunday 15 April 2018

Website Design in HTML and CSS

Irawen April 15, 2018 HTML&CSS No comments

<html>
<head>
<title>Castor Classes</title>
<style type=”text/css”>
body{
background-color:gray;
font-family:Arial,Helvetica,sans-serif;
}
*
{
margin:0;
padding:0;
}
#wrapper{
border:1px solid;
width:970px;
padding:2px;
background-color:gray;
}
#header{
border:1px solid;
width:100%;
background-color:white;
}
#header ul{
list-style-type:none;
}
#header ul li{
border:1px solid;
float:left;
color:sky;
background-color:green;
width:190px;
text-align:center;;
height:30px;
line-height:30px;
}
#header ul li a{
text-decoration:none;
}
#header ul li:hover{
background-color:blue;
}
#image{
width:100px;
}
#bodypart{
border:1px solid;
margin-top:10px;
}
#bodyleft{
border:1px solid;
float:left;
width:250px;
}
#bodyleft h2{
background-color:pink;
color:sky;
padding:4px;
}
#bodyleft ul{
list-style-type:none;
}
#bodyleft ul li{
border:1px solid;
padding:5px;
height:30px;
line-height:20px;
}
#bodyleft ul li a{
color:black;
text-decoration:none;
}
#bodyleft ul li:hover{
color:blue;
background-color:yellow;
}
#bodyright{
border:1px solid;
width:1070px;
float:left;
margin-left:2px;
padding-right:10px;
}
#bodyright h2{
background-color:black;
color:red;
padding:2px;
}
#bodyright p{
padding:6px;
padding-right:10px;
font:20px;
text-align:justify;
}
#footer{
border:1px solid;
background-color:pink;
color:blue;
text-decoration:none;
padding:1px;
margin-top:1px;
}
#footerright{
border:0px solid;
width:150px;
margin-left:10px;
float:right;
margin-bottom:3px;
padding:1px;
text-decoration:none;
}

</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<ul>
<li><a href=”#”> Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Courses</a></li>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>Online Video</a></li>
</ul>
<div id=”image”></div>
<img src=”html/image/online.jpg”/></div>
</div>
<div id=”bodypart”>
<div id=”bodyleft”>
<h2>Courses</h2>
<ul>
<li><a href=”http://castorclasses.com/courses/matlab-program-2/”>MatLab </a></li>
<li><a href=”http://castorclasses.com/courses/c-language/”>C Language</a></li>
<li><a href=”http://castorclasses.com/php-programs/”>PhP </a></li>
<li><a href=”http://castorclasses.com/courses/java/”>Java </a></li>
<li><a href=”http://castorclasses.com/html-and-css/”>HTML and CSS </a></li>
<li><a href=”#”> C++</a></li>
</ul>
</div>
<div id=”bodyright”>
<h2>Welcome to our online Courses (Castor Classes)</h2>
<p>This is provide a online classes for all subject.Online courses are revolutionizing formal education,
and have opened a new genre of outreach on cultural and scientific topics. These courses deliver a series of lessons to a web browser or mobile device,
to be conveniently accessed anytime, anyplace.</p>
<p>An online course is designed as a built environment for learning.Deciding to study online can bring up a whole range of emotions –
excitement, pride and maybe a little apprehension –
but don’t worry. With Open Colleges,
you’ll have all the flexibility and support you need to get through your course and create a new future.
Find out more about the benefits of studying online with us below,
discover more about how online learning works, or simply go ahead and get started.</p>
<p>This is provide a online classes for all subject.Online courses are revolutionizing formal education, but don’t worry. With Open Colleges,
you’ll have all the flexibility and support you need to get through your course and create a new future.
Find out more about the benefits of studying online with us below,
and have opened a new genre of outreach on cultural and scientific topics. These courses deliver a series of lessons to a web browser or mobile device,
to be conveniently accessed anytime, anyplace.</p>
</div>
<br clear=”all”/>
</div>
<div id=”footer”>
<h3>About Us</h3>
<li><a href=”http://castorclasses.com/contact-us/about-us/introduction/”>Introduction</li>
<li><a href=”http://castorclasses.com/contact-us/about-us/mission-and-vision/”>Mission and Vision</li>
<li><a href=”http://castorclasses.com/contact-us/about-us/management/”>Managements</li>
<div id=”footerright”>
<h4>Thank You</h4>
<li>Castor Classes</li>
</div>
<br clear=”all”/>
</div>
</div>
</body>
</html>