Last updated on 02 May 2023 by Dezven
| Youtube : | https://youtu.be/DFM6r3dCr10 |
| Views : | 44489 |
| Skills : | html, css |
| Category : | Web Design |
| Tag : | school,university,college |
In This Tutorial We Are Learning How To Create College Website With The Use Of HTML and CSS. This website is going to be pure HTML and CSS.
We are not going to use any javascript and jquery in this college website. It is created only using pure HTML and CSS
In our college website, we are going to design 3 main section : Header section, Main Body And Footer section
In this tutorial we are going to design these three section with the help of their subsections. Subsections are created as per the website content.
Header
Main Body
Footer
To see full coding video to understand easily. You can watch the video tutorial below.
Firstly, Create the folder on dekstop, my folder name is : college website Inside folder college website folder, create two sub folder : - 1) css and 2) images
Inside college website folder, I am creating HTML file file name - index.html
Inside college website folder, I am creating CSS file - file name - style.css
Lest's start with writing basic HTML 5 code in index.html, and link the style.css file to index.html file
<>
<>
<>
<>College Website Template<>
<>
<>
<>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html,
body {
font-family Roboto, sans-serif, arial;
font-size: 16px;
color: #242424;
}
.container {
width: 1300px;
margin: 0px auto;
}
In our Marquee section, we are having content. we are using content are written in marquee tag.
Please copy and paste the below code to design Top header section
<!---TOP-HEADER STARTS TOP-HEADER STARTS--->
<>
<>
<> NEWS : <>
<> My college: How To Lorem Ipsum is simply dummy text of the printing and typesetting industry. <>
<>
<>
/****************HEADER SECTION****************/
.header {
background: #0055a4;
padding: 6px;
}
.header b {
background: #fff;
color: red;
padding: 10px;
font-size: 20px;
}
.header marquee {
font-size: 20px;
color: #ffffff;
width: 80%;
}
In our Logo And Menu section, we are having content and logo. For Creating we have logo, we are using img tag.
Please copy and paste the below code to design Logo And Menu section
<>
<!---LOGO SECTION ----->
<>
<!----MENU SECTION----->
<>
<>Home<>
<>About us<>
<>Events<>
<>Gallery<>
<>Notice Board<>
<>Contact us<>
<>
<>
/**********LOGO SECTION**********/
.logo {
height: 65px;
}
/**********MENU SECTION**********/
nav {
float: right;
padding: 25px 0px;
}
nav a {
color: black;
text-decoration: none;
font-size: 18px;
padding: 2px 10px;
font-weight: 500;
}
In our Slider Section, we are having content, image and we are using img tag. In our slider, we are going to show banner of college campus
Please copy and paste the below code to design Slider Section
<!-----SLIDER SECTION----->
<>
<>
<>
<!----END SLIDER SECTION----->
/*****SLIDER SECTION*****/
.slider img {
width: 100%;
}
In our Campus News, College Event Calender Section, we are having content, image, marquee and we are using ul, img and marquee tag. For Creating image, we have ul, img and marquee tag.
Please copy and paste the below code to design Campus News, College Event Calender Section
<>
<>
<!----CAMPUS NEWS SECTION----->
<>
<>Recent Event<>
<>
<>
<>
<>
<>01-April-2023 :<> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <>
<>
<>
<>01-April-2023 :<> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <>
<>
<>
<>01-April-2023 :<> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <>
<>
<>
<>01-April-2023 :<> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <>
<>
<>
<>01-April-2023 :<> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <>
<>
<>
<>01-April-2023 :<> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <>
<>
<>
<>01-April-2023 :<> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <>
<>
<>
<>01-April-2023 :<> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <>
<>
<>
<>01-April-2023 :<> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus... <>
<>
<>
<>
<>
<>
<!-----CAMPUS NEWS SECTION----->
<>
<>Campus News<>
<>
<>
<>
<>
<>
<>
<>There are many variations.<>
<>Sep.04.2012<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry...<>
<>
<>
<>
<>
<>
<>There are many variations.<>
<>Sep.04.2012<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry...<>
<>
<>
<>
<>
<>
<>There are many variations.<>
<>Sep.04.2012<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry...<>
<>
<>
<>
<>
<>
<>There are many variations.<>
<>Sep.04.2012<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry...<>
<>
<>
<>
<>
<!------EVENT SECTION------>
<>
<>College Event Calender<>
<>
<>
<>
<>11 <> April <> Lorem Ipsum is simply dummy text of the printing text printing industry...
<>
<>
<>19 <> May <> Lorem Ipsum is simply dummy text of the printing industry dummy text...
<>
<>
<>21 <> June <> Lorem Ipsum is simply dummy text of the printing industry orem Ipsum...
<>
<>
<>17 <> July <> Lorem Ipsum is simply dummy text of the printing industry simply dummy...
<>
<>
<>31 <> Marc <> Lorem Ipsum is simply dummy text of the printing industry...
<>
<>
<>
<>
<>
<>
/****************EVENT SECTION*************/
.main-section {
width: 100%;
float: left;
padding: 100px 0px 100px 0px;
}
.event {
width: 32%;
margin-right: 1%;
float: left;
background-color: #fff;
}
.event i {
color: red;
font-size: 14px;
}
.event div {
padding: 10px;
}
.event .heading {
padding: 10px;
color: #fff;
background: #0055a4;
text-align: center;
font-size: 22px;
font-weight: 400;
margin-bottom: 10px;
}
.event ul li {
margin-bottom: 20px;
width: 100%;
float: left;
list-style: none;
}
.event-date {
background: red;
float: left;
text-align: center;
font-size: 14px;
color: #fff;
padding: 8px 12px;
margin-right: 10px;
}
/*******CAMPUS NEWS SECTION***********/
.campus-news span {
width: 80px;
float: left;
}
.campus-news h2 {
font-weight: 600;
font-size: 16px;
}
.campus-news h6 {
font-weight: 500;
font-size: 13px;
color: red;
}
.campus-news p {
font-size: 14px;
}
In our About Us Section, we are have creating content and image, we are using anchor tag and img tag. For Creating image, we have img tag.
<!-----ABOUT US SECTION------>
<>
<>
<>
<>Our Institue<>
<>About My College<>
<>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.If you are going to use a passage.<>
<>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.If you are going to use a passage of anything embarrassing hidden in the middle of text Lorem ipsum. <>
<>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus.If you are going to use a passage of a Lorem ipsum<>
<>Read More<>
<>
<>
<>
<>
<>
<>
<!-----College INFO SECTION----->
<>
<>Our Chairman<>
<>
<>
<>
<>
<>
<>
<>Dr. Jay sharma<>
<>Chairman, My College<>
<>2010-2023<>
<>
<>
<>
<>
<>
<>Dr. Jay sharma<>
<>Principal, My College<>
<>2020-2023<>
<>
<>
<>
<>
<!-----College AWARD SECTION----->
<>
<>Our College Awards<>
<>
<>
<>
<>
<!-----College CERTIFICATE SECTION----->
<>
<>My College Certificate<>
<>
<>
<>
<>
<>
<>
/****************ABOUT US SECTION****************/
.heading {
font-size: 28px;
font-weight: 500;
margin-bottom: 30px;
color: #0055a4;
}
.subhead {
font-size: 18px;
color: red;
font-weight: 500;
}
.about-us div {
width: 45%;
float: left;
line-height: 30px;
font-size: 18px;
}
.about-us h4 {
font-size: 18px;
color: red;
font-weight: 500;
}
.about-us p {
font-size: 16px;
margin-bottom: 20px;
padding-right: 30px;
line-height: 23px;
}
.about-us img {
width: 40%;
float: left;
}
/****************AWARD SECTION****************/
.award p {
width: 100%;
float: left;
font-size: 16px;
}
.award img {
width: 100%;
}
.award b {
min-width: 115px;
float: left;
margin-bottom: 20px;
}
.award h3 {
font-size: 23px;
margin-bottom: 20px;
text-align: center;
}
/****************CHAIRMAN SECTION****************/
.chairman img {
width: 150px;
float: left;
margin-right: 10px;
}
.chairman h2 {
font-size: 22px;
margin-top: 30px;
}
.chairman h4 {
font-size: 16px;
color: red;
font-weight: 400;
}
In our Testimonial Section, we are having content, image and icon we are using icon from font awesome and img tag. For Creating image, we have icon and img tag.
Please copy and paste the below code to design font awesome Section
<!-----TESTIMONIAL SECTION------>
<>
<>
<>Testimonial<>
<>What Parents Say About Our College<>
<>
<>
<>
<>
<> Contrary to popular belief, Lorem Ipsum is not simply. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard, a Latin professor at Hampden-Sydney College.
<>
<>
<>
<>
<>
<>
<>Kiya<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<> Contrary to popular belief, Lorem Ipsum is not simply. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard, a Latin professor at Hampden-Sydney College.
<>
<>
<>
<>
<>
<>
<>Divya<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<> Contrary to popular belief, Lorem Ipsum is not simply. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard, a Latin professor at Hampden-Sydney College.
<>
<>
<>
<>
<>
<>
<>Richa<>
<>
<>
<>
<>
<>
<>
<>
<>
/****************TESTIMONIAL SECTION****************/
.testimonial {
width: 30.5%;
float: left;
margin-right: 2.5%;
}
.testimonial-text {
background: #0055a40f;
padding: 20px;
line-height: 35px;
border-radius: 10px;
font-size: 18px;
text-align: center;
border: 1px solid #0055a4;
}
.testimonial-detail {
float: left;
margin-top: 10px;
}
.testimonial-img {
float: left;
}
.testimonial-name {
margin-left: 10px;
float: left;
}
.testimonial-name h5 {
font-size: 18px;
margin-top: 8px;
}
In our My Gallery Section, we are having image. we are using ul and img tag. For Creating image, we have ul,Marquee and img tag.
Please copy and paste the below code to design My Gallery And Placement Section
<!------GALLERY SECTION ------>
<>
<>
<>My Gallery<>
<>Our College Gallery<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<!-------PLACEMENT SECTION ------->
<>
<>
<>Top Placement<>
<>Our Partner Company<>
<>
<>
<>
<>
<>
/****************GALLERY SECTION****************/
.gallery img {
width: 23.2%;
margin-right: 1.5%;
margin-bottom: 20px;
}
In our footer section, we are having content our get in social media icons. For Creating footer section we have ul, a(anchor) tag and paragraph tag.
Please copy and paste the below code to design Footer section
<!---FOOTER SECTION--->
<>
<>
<>
<>
<>
<>
<> 186, 3rd floor, Business Building Ring Road, Near Google Mall, <> Zone-II, Highway street, Bhopal, MP, 462011 <>
<>
<>
<> +91 - 9926 661 418
<>
<>
<> info@dezven.com
<>
<>
<>
<>
<>
<>
<>
<>
<> Home<>
<> About us<>
<> Tutorial<>
<> Event<>
<> Gallery<>
<> Press Release<>
<> Courses<>
<> Contact Us<>
<>
<>
<>
/****************FOOTER SECTION****************/
.footer {
background-color: #f0f3fa;
padding: 40px 0px;
width: 100%;
float: left;
}
.footer-logo {
height: 70px;
width: auto;
}
.footer-sect {
width: 100%;
float: left;
text-align: center;
margin-top: 20px;
font-size: 16px;
}
.footer-sect a {
color: #202020;
margin-left: 10px;
text-decoration: none;
}
After saving the file, You can run the index.html file in any browser like chrome,mozilla, safari. You can see the college website you have design using html and css code. You can also use this for college website project in html with source code
Vasu
That's amazing
Rakshitha
Super and thank you
Amar kumar
Very nice code
Sadiq
College website project source code in HTML
Dhruv singh
can you please share College website project source code
Gautam Dev
Can I use this template as a school project ......
Daniel
Perfect design for college website using html and css
Nichol
Nice template for college website project using html and css