College Website using HTML...hyperlinks, Css...

October 20, 2019

College Website using HTML...hyperlinks, Css...

HTML Code:

frame.html

Services.html

<html>

body{
    background-image: url("bk9.jpg");
    background-repeat: repeat;
    background-size: cover;

}

body {margin:0;}

.vertical-menu {

width: 200px;
}

.vertical-menu a {

    color: black;
    display: block;
    padding: .1px .1px;
    position: fixed
    text-decoration: none;
}

.vertical-menu a:hover {

background-color: #FF69B4;
color: black;
}

.vertical-menu a.active {

background-color: pink;
color: black;
}
</style>
</head>
<body>

<center><h2>Service Overview</h2></center>

<hr >

<b><center><a style="text-decoration:none" href="recent.html" target="r"><h4>Recent activities </h4></a></center></b>
<b><center><a style="text-decoration:none" href="gallery.html" target="r"><h4>Gallery</h4></a></center></b>
<b><center><a style="text-decoration:none" href="facilities.html" target="r"><h4>Facilities</h4></a></center></b>
<b><center><a style="text-decoration:none" href="courses.html" target="r"><h4>Courses</h4></a></center></b>
<b><center><a style="text-decoration:none" href="calender.html" target="r"><h4>Calender</h4></a></center></b>
</div>

</body>

</html>

Main.html

<html>

<head>

<style>

body{
    background-image: url("bk11.jpg");
    background-size: 1150px 500px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-repeat:no-repeat;
}
</style>

<style>

body {margin:0;}

.navbar {

overflow: hidden;
background-image:"pic5.jpg"
position: fixed;
top: 0;
width: 100%;
}

.navbar a {

float: left;
display: block;
color: red;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.navbar a:hover {

background: #FF69B4;
color: black;
}

.main {

padding: 16px;
margin-top: 30px;
height: 1500px;
}
</style>
</head>
<body>
<div class="navbar">
<b><a href="#home">Home</a></b>
<b><a href="aboutus.html">About</a></b>
<b><a href="college.html">College</a></b>
<b><a href="alumni.html">Alumni</a></b>
<b> <a href="magazine.html">Magazine</a></b>
<b> <a href="lib.html">Library</a></b>
<b> <a href="contact.html">Contact</a></b>
<b><a href="4.html">Our Alumni Are At</a></b>
</div>
<hr>
<font color="navy">
<we have a very big library for science and arts>

</body>

</html>

Alumni.html

/* Slideshow container */
.slideshow-container {
max-width: 150px;
position: relative;
margin: auto;
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
height: 90px
width: 150px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>

</head>

<center><h1 font-size:15px;>Our Alumni are At</h1><center>
<br><br><br>

    <div class="multicontainer">
        <div id="basicSlider">

      <div class="item"> <div class="numbertext">1</div> <img src="hcl.png" style="height:90px;width:150px;"> </div>
<br>
      <div class="item"> <div class="numbertext">2</div> <img src="hu.png" style="height:90px;width:150px;"> </div>
<br>
      <div class="item"> <div class="numbertext">3</div> <img src="infosis.png" style="height:90px;width:150px;" > </div>
<br>
      <div class="item"> <div class="numbertext">4</div> <img src="oracle.jpg" style="height:90px;width:150px;" > </div>
<br>
      <div class="item"> <div class="numbertext">5</div> <img src="sbi.jpg" style="height:90px;width:150px;" > </div>
<br>
      <div class="item"> <div class="numbertext">6</div> <img src="sony.png" style="height:90px;width:150px;"> </div>
<br>
      <div class="item"> <div class="numbertext">7</div> <img src="wipro.png" style="height:90px;width:150px;" > </div>
<br>
      <div class="item"> <div class="numbertext">8</div> <img src="lg.png" style="height:90px;width:150px;"> </div>
<br>
      <div class="item"> <div class="numbertext">9</div> <img src="tata.png" style="height:90px;width:150px;" > </div>
<br>
      <div class="item"> <div class="numbertext">10</div> <img src="lic.png" style="height:90px;width:150px;"> </div>
<br>
      <div class="item"> <div class="numbertext">11</div> <img src="suzu.jpg" style="height:90px;width:150px;"> </div>
<br>
      <div class="item"> <div class="numbertext">12</div> <img src="pidi.png" style="height:90px;width:150px;" > </div>
<br>
      <div class="item"> <div class="numbertext">13</div> <img src="haier.png" style="height:90px;width:150px;" > </div>
<br>
      <div class="item"> <div class="numbertext">14</div> <img src="adidas.jpg" style="height:90px;width:150px;"> </div>
<br>
      <div class="item"> <div class="numbertext">15</div> <img src="fusion.jpg" style="height:90px;width:150px;" > </div>

      </div>
      </div>
      </div>
      </div><br><br><br>

</div>
<br>

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

Aboutus.html

<font color="palevioletred">
<p><b><u>HISTORY</u></b>
<font color="mistyrose">
<h3>The college was established in 1968 affiliated to Madras University, Chennai. Later, the college became affiliated to Bharathiar University, Coimbatore. It is a co-educational grant-in-aid institution managed by the Gobi Arts College Council, registered on 25.8.1967 under the Societies Registration Act, XXI of 1860. The college was started with the noble objective of opening the doors of higher education to the poor and meritorious students who are mostly first generation students coming from agricultural families.</h3>
<hr>
<font color="palevioletred">
<br><b><u>COURSES</u></b>
<font color="mistyrose">
<h3>Eighteen undergraduate courses
Sixteen postgraduate programmes
M.Phil and Ph.D. programmes</h3>
<hr>
<font color="palevioletred">
<br><b><u>VISION</u></b>
<font color="mistyrose">
<h3>Social and Economic upliftment of the people of this area through value based quality education. Committed to serve the society with humility and trust, devoid of exploitation; to impart value based higher education, particularly to the socially and economically deprived sections of this area; to make the students of this institution worthy citizens of our glorious motherland.</h3></p>
<hr>
<a href="3.html"><b>BACK</b></a>
</body>
</html>

Alumni.html

<html>
<head>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
</style>
</head>
<a href="3.html"><center><b>BACK</b></center></a>
<head>
<style>
body{
    background-color: pink;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
</style>
</head>

<p><center><b>ALUMNI REGISTRATION FORM</b></center></p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
<label for="lname">Name in college</label>
<input type="text" id="lname" name="lname">
<label for="lname">Department studied</label>
<input type="text" id="lname" name="lname">
<label for="lname">Year of studied</label>
<br>
<input type="number" id="lname" name="lname">
<br>
<label for="fname">Date of Birth</label>
<br>
<input type="date" id="fname" name="fname">
<br>
<label for="fname">Phone number</label>
<br>
<input type="number" id="fname" name="fname">
<br>
<label for="fname">Address</label>
<input type="text" id="fname" name="fname">
<label for="fname">Fond memories</label>
<input type="text" id="fname" name="fname">
<label for="fname">Working in</label>
<input type="text" id="fname" name="fname">
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
<a href="3.html"><center><b>BACK</b></center></a>
</body>
</html>

Calender.html

<head>
<style>
body{
    background-image: url("bk4.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
</style>
</head>
<body link="MediumAquaMarine " vlink="MediumAquaMarine " alink="MediumAquaMarine ">
<a href="calendar.pdf"><center><h3>click here to calender</h3></center></a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="3.html"><center><b>BACK</b></center></a>
</body>
</html>

College.html

<html>
<head>
<style>
body{
    background-color: #002080;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
</style>
</head>
<body link="pink" vlink="pink" alink="pink">
<a href="3.html"><center><b>BACK</b></center></a>
<font color="palevioletred">
<p><b><u>ORIGIN</u></b>
<font color="mistyrose">
<h3>Gobi Arts & Science College established in the year 1968 is one of the top ranking post-graduate cum research institutions affiliated to Bharathiar University, Coimbatore. It is a co-educational grant-in-aid institution managed by the Gobi Arts College Council, registered on 25.8.1967 as a Society. The college was started with the noble objective of opening the doors of higher education to the poor and meritorious students who are mostly first generation students coming from agricultural families. The college commenced its educational service with Pre-University classes to begin with, made a steady but phenominal growth since inception, thanks to the vision and efficient strategies engineered by the management, coupled with unstinted support of the staff, in shaping the destiny of the college.</h3>
<h3>The unique philosophy and principle cherished by the Management of the college to admit students strictly on merit basis, abhoring the concept of collecting donations or capitation fees, fully recognizing the difficulties of the students who belong to the socially and economically deprived sections of the society, has earned the goodwill of the public.</h3>
<h3>The unique philosophy and principle cherished by the Management of the college to admit students strictly on merit basis, abhoring the concept of collecting donations or capitation fees, fully recognizing the difficulties of the students who belong to the socially and economically deprived sections of the society, has earned the goodwill of the public.</h3>
<h3> The college is located in a sprawling 50 acre land a top the 'Silver Hills' on the western outskirts of Gobichettipalayam town, 40 km west of Erode. The institution enjoys the status of autonomy since 1987. The autonomy offers flexibility to the various departments to fine the syllabi, based on the dynamic changes in the industrial and employment environment. With its excellent infra-structural facilities, the college has the cutting edge in the dissemination of knowledge and development of skills of very high order.</h3></p>
<hr>
<font color="palevioletred">
<p><b><u>VISION & MISSION</u></b>
<font color="mistyrose">
<h3>Vision
"Social and Economic upliftment of the people of this area through value based quality Education"
Mission
"Committed to serve the society with humility and trust, devoid of exploitation; to impart value based higher education, particularly to the socially and economically deprived sections of this area; to make students of this institution worthy citizens of our glorious motherland"</h3></p>
<hr>
<font color="palevioletred">
<p><b><u>LIBRARY</u></b>
<font color="mistyrose">
<h3>learning facilities<br>specialized services<br>collections<br>national journals/magazines<br>international journals/magazines<br>newspapres</h3></p>
<hr>
<font color="palevioletred">
<p><b><u>MAGAZINE</u></b>
<font color="mistyrose">
<br>
<br>
<b><u>Journals/Magazines

<br>
College Magazine</u></b>

<h3>Our college magazine is released once in a year. It contains various informations like special events, achievements made in the academic year by any individual / group / team in Curricular, Co-curricular and Extra-curricular Activities. It also provides a lot of informations covering various fields, tit bits, lyrics, jokes, etc.
Compuzine
Compuzine released once in a Month by the Department of Computer Science. It contains Information about Recent Technologies, Events on IT Field. It also provides a lot of informations like Puzzles, C, C++ Debugging Questions..</h3> </p>
<hr>
<font color="palevioletred">
<p><b><u>INFRASTRUCTURE</u></b>
<font color="mistyrose">
<br>
<br>
<b><u>BUILDING</u></b>
<h3>Temple
Main Building<br>
IT Building<br>
Administrative Building<br>
Chemistry Building<br>
Maths Building<br>
Computer Science Building<br>
Physics<br>
Canteen Block<br>
Museum</h3>
<b><u>LAB</u></b>
<h3>Computer Lab -I to VIII<br>
Communication Lab<br>
Browsing Center<br>
Seminar Hall<br>
Organic Chemistry Lab<br>
General Chemistry Lab<br>
Physics Lab I to II<br>
Botany Lab</h3>
<b><u>HALL</u></b>
<h3>K.A.M Hall<br>
A/C Conference Hall<br>
A.R.S Hall<br>
Seminar Hall<br>
Staff Counselling Hall<br>
Yoga Hall<br>
CIA Hall<br>
Examination Hall<br>
Girls waiting Hall</h3>
<b><u>SPORTS</u></b>
<h3>Gymnastic<br>
Play Ground<br>
Basket Ball <br>
Indoor Games</h3>
<b><u>AUDITORIUM</u></b>
<h3>P.K.R Auditorium<br>
K.M.R Auditorium <br>
Indoor Auditorium <br>
Seminar Hall<br>
Outdoor Auditorium<br>
Open air Theater </h3>
<b><u>CENTER & ROOM</u></b>
<h3>Research Center<br>
Civil Service Center <br>
Networking Center <br>
Seminar Hall<br>
NCC Room <br>
YRC Room <br>
Book Depot <br>
Building Material Room<br>
Students Dressing Room (Girls)<br>
Students Dressing Room (Men) <br>
Weight Lifting Room</h3></p>
<hr>
<font color="palevioletred">
<p><b><u>LOCATION</u></b>
<font color="mistyrose">
<a href="gascmap1.html" >MAP OF GASC</a>
<h3>The college is located in a sprawling 45 acre land atop the "Silver Hills" on the western outskirts of Gobichettipalayam town, 40 Kms. west of Erode town.
Town    : Gobichettipalayam District : Erode</h3></p>
<a href="3.html"><center><b>BACK</b></center></a>
</body>
</html>

Contact.html

<html>
<head>
<style>
body{
    background-image: url("bk4.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;

}
</style>
<body link="pink" vlink="pink" alink="pink">
</head>
<font color="greenyellow">
<p><center><h4>GOBI ARTS & SCIENCE COLLEGE,</center>
<center>KARATTADIPALAYAM POST,</center>
<center>GOBICHETTIPALAYAM PIN : 638453.</center>
<center>PHONE : 04285 - 240147, 240741 TELE FAX : 04285 240230</center>
<center>EMAIL : gobiartscollege@sancharnet.in </h4></center></p>
<a href="3.html"><center><b>BACK</b></center></a>
</body>
</html>

Courses.html

<body bgcolor="pink">
<style>
table, th, td {
    border: 1px solid black;
    color: black ;
}
</style>
<a href="3.html"><center><b>BACK</b></center></a>
<table style="width:100%">
<tr>
    <th>AIDED COURSES</th>
    <th>UNAIDED COURSES</th>
</tr>
<tr>
    <td>tamil</td>
    <td>tamil</td>
</tr>
<tr>
    <td>english</td>
    <td>english</td>
</tr>
<tr>
    <td>maths</td>
    <td>maths</td>
</tr>
<tr>
    <td>physics</td>
    <td>physics</td>
</tr>
<tr>
    <td>economics</td>
    <td>communicative lab</td>
</tr>
<tr>
    <td>political science</td>
    <td>chemistry</td>
</tr>
<tr>
    <td>chemistry</td>
    <td>commerce</td>
</tr>
<tr>
    <td>botany</td>
    <td>commerce(CA)</td>
</tr>
<tr>
    <td>zoolagy</td>
    <td>computer science</td>
</tr>
<tr>
    <td>commerce</td>
    <td>computer application</td>
</tr>
<tr>
    <td>management</td>
    <td>information technology</td>
</tr>
<tr>
    <td>computer science</td>
    <td>management</td>
</tr>
<tr>
    <td>physical education</td>
    <td>physical education</td>
</tr>
<tr>
    <td>library</td>
    <td>human excellence</td>
</tr>
<tr>
    <td></td>
    <td>library</td>
</tr>

</table>

</body>
</html>

Facilities.html

<html>
<head>
<style>
body{
    background-image: url("bk5.jpg");
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
</style>
</head>
<body bgcolor=#DB7093>
<body link="pink" vlink="pink" alink="pink">
<a href="3.html"><center><b>BACK</b></center></a>
<font color="GreenYellow ">
<h3><b><center>Library</center></b></h3>
<h3><b><center>Transportation\banking&ATM</center></b></h3>
<h3><b><center>Hostel</center></b></h3>
<h3><b><center>Sports(indoor&outdoor)</center></b></h3>
<h3><b><center>Fitness center</center></b></h3>
<h3><b><center>Infrastructure</center></b></h3>
<font color="00ff7f">
<a href="3.html"><b><center>BACK</center></b></a>
</body>
</html>

Gallery.html

<html>
<head>
<style>
body{
    background-image: url("bk1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(fl.png) 30 round;
}
</style>
</head>
<body link="pink" vlink="pink" alink="pink">
<body bgcolor=#DB7093>
<a href="3.html"><center><b>BACK</b></center></a>
<font color="OrangeRed" >

<p><b><h2><center>GALLERY</center></h2></b></p>

OUTPUT:

Comments

NivedhaItOctober 20, 2019 at 11:51 PM
nice priya easy to understand
ReplyDelete
Replies
Priyasanthoshi AnanthOctober 27, 2019 at 2:19 AM
You're Welcome!
ReplyDelete
Replies

Add comment

HTML Code:

frame.html

Services.html

<html>

body{
    background-image: url("bk9.jpg");
    background-repeat: repeat;
    background-size: cover;

}

body {margin:0;}

.vertical-menu {

width: 200px;
}

.vertical-menu a {

    color: black;
    display: block;
    padding: .1px .1px;
    position: fixed
    text-decoration: none;
}

.vertical-menu a:hover {

background-color: #FF69B4;
color: black;
}

.vertical-menu a.active {

background-color: pink;
color: black;
}
</style>
</head>
<body>

<center><h2>Service Overview</h2></center>

<hr >

</body>

</html>

Main.html

<html>

<head>

<style>

body{
    background-image: url("bk11.jpg");
    background-size: 1150px 500px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-repeat:no-repeat;
}
</style>

<style>

body {margin:0;}

.navbar {

overflow: hidden;
background-image:"pic5.jpg"
position: fixed;
top: 0;
width: 100%;
}

.navbar a {

float: left;
display: block;
color: red;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.navbar a:hover {

background: #FF69B4;
color: black;
}

.main {

</body>

</html>

Alumni.html

/* Slideshow container */
.slideshow-container {
max-width: 150px;
position: relative;
margin: auto;
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
height: 90px
width: 150px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>

</head>

</div>
<br>

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

Aboutus.html

Alumni.html

<p><center><b>ALUMNI REGISTRATION FORM</b></center></p>

Calender.html

College.html

<br>
College Magazine</u></b>

Contact.html

Courses.html

</body>
</html>

Facilities.html

Gallery.html

<html>
<head>
<style>
body{
    background-image: url("bk1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

<p><b><h2><center>GALLERY</center></h2></b></p>