#first we have frame the page
<html>
<frameset rows="23%,*"
frameborder="0">
<frameset cols="11%,*"
frameborder="0">
<frame src="clgweblogo.html"> # this frame for logo
<frame src="clgwebnameframe.html"> # this frame for name of college
</frameset>
<frameset rows="5%,*">
<frame src="clgwebicons.html"> # this frame for college icons
<frame src="fourthframe.html"name="aaa"> # this frame for images and for extra details ,decarations
</frameset>
</html>
next coding for college logo
<html>
<head>
<style>
body{
background-image:url("images (3).jpeg"); # use can use your own images path
background-repeat:no-repeat;
background-position:top-left;
background-size:155px;
}
</style>
</head>
<body>
</body>
</html>
next coding for name frame
<html>
<head>
<style>
body{
background-image:url("images (8).jpeg");
background-repeat:repeat-x;
text-shadow:2px 3px blue;
}
</style>
</head>
<body>
<center>
<h1 style="color:green"> ARTS AND SCIENCE COLLEGE</h1>
<h3 style="color:yellow">(An Autonomous Co-educational Institution,Affiliated to Bharathiyar university,<br>
coimbatore and Reaccredited with 'A' Grade by NAAC)</center></h3>
</body>
</html>
next coding college icons
<html>
<head>
<style>
ul{
list-style-type:none;
background-color:black;
overflow:fixed;
margin:0;
padding:1px;
position:fixed;
width:100%;
}
li{
float:left;
}
li a{
display:block;
padding:0px 40px;
color:white;
text-align:center;
text-decoration:none;
}
li a:hover{
background-color:green;
}
</style>
</head>
<body>
<ul>
<li><a href="fourthframe.html" target="aaa">HOME</a></li>
<li><a href="course.html" target="aaa">COURSE OFFERED</a></li>
<li><a href="clgresult.html" target="aaa">RESULT</a></li>
<li><a href="">ABOUT US</a></li>
<li><a href="">STAFF PROFILE</a></li>
<li><a href="">GALLERY</a></li>
<li><a href="">FEES</a></li>
<li><a href="contact.html"target="aaa">CONTACT</a></li>
</ul>
</body>
</html>
next coding for fourth frame
(it will very simple coding consist of only images if you don't want this you customize)
<html>
<head>
<body>
<img src="download1.jpeg"
style="width:440px;height:460px;">
<img src="download2.jpeg"
style="width:440px;height:460px;">
<img src="images.jpeg"
style="width:440px;height:460px;">
</body>
</head>
</html>
next is inner coding for icons
#CONTACT
<html>
<head>
<style>
div{
color:green;
}
</style>
<body>
<div>
ARTS & SCIENCE COLLEGE<br>
xxxxxpalayam,Gobichettipalayam<br>
Phone:04285-56899,242645<br>
TeleFax:042345640230
Email:xxxxxcollege@sancharnet.in
</div>
</body>
</head>
</html>
#RESULT
<html>
<head>
<style>
input:focus{
background-color:lightblue;
}
body{
background-color:lightgreen;
}
</style>
</head>
<center>
<body>
<h2 style="color:red">WELCOME! CHECK YOUR RESULT</h2>
</body>
<form>
ROLL NO:
<input type="number" name="rollno"><br><br>
<br>
<input type="submit" value="submit">
</form>
</center>
</body>
</html>
you can customize this for better look
Comments
Post a Comment