How To Create A College Website Using HTML AND CSS With Source Code
| Youtube : | https://youtu.be/DFM6r3dCr10 |
| Views : | 57551 |
| 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
Section We Are Going To Create In Our College Website Using 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
- Top header With NEWS section
- Logo
- Main menu
Main Body
- Slider
- Recent Event, Campus News, College Event Calender
- About Collge
- Our Chairman
- Our College Awards
- My College Certificate
- Testimonial
- My Gallery
- Top Placement
Footer
- Address
- Contact Detail
- Social media link
Video Tutorial
To see full coding video to understand easily. You can watch the video tutorial below.
Let's Start The Coding
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
Meta html code. Copy And paste the code in index.html
<>
<>
<>
<>College Website Template<>
<>
<>
<>
Common CSS. Copy and paste the code in style.css
* {
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;
}
2) Now, we will design Top Header NEWS Marquee Section.
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
Marquee Section HTML Code. Copy This Code And Paste in index.html file
<!---TOP-HEADER STARTS TOP-HEADER STARTS--->
<>
<>
<> NEWS : <>
<> My college: How To Lorem Ipsum is simply dummy text of the printing and typesetting industry. <>
<>
<>
Marquee Section CSS Code. Copy The Code And Paste in style.css
/****************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%;
}
Output Of Top Header NEWS Marquee Section
3) Now, we will design Logo And Menu section
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 And Menu Section HTML Code. Copy This Code And Paste in index.html file
<>
<!---LOGO SECTION ----->
<>
<!----MENU SECTION----->
<>
<>Home<>
<>About us<>
<>Events<>
<>Gallery<>
<>Notice Board<>
<>Contact us<>
<>
<>
Logo And Menu Section Css Code. Copy The Code And Paste in style.css
/**********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;
}
Output Of Logo And Menu Section
4) Now, we will design Slider Section
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 Html Code. Copy This Code And Paste in index.html file
<!-----SLIDER SECTION----->
<>
<>
<>
<!----END SLIDER SECTION----->
Slider Section CSS Code. Copy The Code And Paste in style.css
/*****SLIDER SECTION*****/
.slider img {
width: 100%;
}
Output Of Slider Section
5) Now, we will design Campus News, College Event Calender Section.
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, College Event Calender Section HTML Code. Copy This Code And Paste in index.html file
<>
<>
<!----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...
<>
<>
<>
<>
<>
<>
Campus News, College Event Calender Section CSS Code. Copy The Code And Paste in style.css
/****************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;
}
Output Of Campus News, College Event Calender Section
6) Now, we will design About Us Section.
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 Section HTML Code. Copy This Code And Paste in index.html file
<!-----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 Section CSS Code. Copy The Code And Paste in style.css
/****************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;
}
Output Of About Us Section
7) Now, we will design Testimonial Section.
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 HTML Code. Copy This Code And Paste in index.html file
<!-----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 CSS Code. Copy The Code And Paste in style.css
/****************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;
}
Output Of Testimonial Section
8) Now, we will design My Gallery And Placement Section.
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
My Gallery And Placement Section HTML Code. Copy This Code And Paste in index.html file
<!------GALLERY SECTION ------>
<>
<>
<>My Gallery<>
<>Our College Gallery<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<!-------PLACEMENT SECTION ------->
<>
<>
<>Top Placement<>
<>Our Partner Company<>
<>
<>
<>
<>
<>
My Gallery And Placement Section CSS Code. Copy The Code And Paste in style.css
/****************GALLERY SECTION****************/
.gallery img {
width: 23.2%;
margin-right: 1.5%;
margin-bottom: 20px;
}
Output Of My Gallery And Placement Section
9) Now, we will design Footer section.
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 HTML Code. Copy This Code And Paste in index.html file
<!---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 CSS Code. Copy The Code And Paste in style.css
/****************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;
}
Output Of Footer Section
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
That's amazing
Super and thank you
Very nice code
College website project source code in HTML
can you please share College website project source code
Can I use this template as a school project ......
Perfect design for college website using html and css
Nice template for college website project using html and css