responsive College Website Using Html CSS & JavaScript
Introduction
Hello coders, welcome to another new blog. Today in this blog post we’ll learn to create a college website using HTML, CSS and JavaScript. A college website is something where you can find all the information about a coaching institute or a education hub. In a college website you can find all the courses, faculty, campus and a lot more about that specific institute.
To create this college website, we’ve used HTML, CSS and JavaScript. These three are the basic frontend technologies. Using these technologies we’ve build our college website. In our code HTML which is known as hyper text markup language, sets the basic structure of our website. Then CSS which is known as Cascading style sheet design our website and make it visually appealing and interactive. At last JavaScript adds some minor functionality to our website.
If you guys also want to know and learn to create this college website then all you need is the knowledge of HTML, CSS and JavaScript. If you’ve basic knowledge of these core frontend technologies then you’re good to go. These type of project enhances our coding skills and make our coding foundations more strong. Let’s move to our code and understand it.
HTML (index.html)
Get Discount on Top Educational Courses
This is our HTML code which sets up the basic structure for our college website. Using this code usually we create a skeleton of our website and adds all the components to this file. Later we design and add functionality to this using CSS and JS. Let’s breakdown our code.
We’ve 5 HTML pages in our code and each page is dedicated to its own section. We’ve Home, about, course, blog and contact page in our folder. All these contains the code related to their section. The structure of all the file is almost same so we’ll focus on our index.html file which connects all these page. You can get all the code below.
- <!DOCTYPE html> : This defines the type of our document and ensures that our file is a html code file.
- <title> : This sets the title for our website’s as DCU.
- <link> : This links all the necessary cdn to our file like fonts, CSS file, Bootstrap cdn etc.
- <body> : This contains all the content of our website.
- <section class=”header”> : This section contains the navigation bar for the website and a logo for the page. This section will apply to all our files.
- <nav> : This contains all the nav menu button and each button link to its related page. Like if we click on the courses page then we’ll redirect to the courses page. It contains a logo as well.
- <div class=”text-box”> : This contains a heading, a paragraph and anchor tag which creates home page’s first interaction.
- <section class=”course”> : This section contains all the information about the courses about college. First it contains a h1 tag for the heading.
- <div class=”course-intro”>: This contains a paragraph which gives intro about the course.
- <div class=”row”> : This section contains three column and each column contains information about a specific courses.
- <div class=”course-col”> : This contains a heading and paragraph which shows course name and information.
- <section class=”campus”> : This contains a heading and a paragraph which shown information about campus.
- <div class=”row”> : This contains three columns and each column represent something about the campus.
- ⦁ <section class=”facilities”> : This section contains the information about the facilities in the college which are provided.
- ⦁ <div class=”row”> : This contains three column and each column has some elements which shows about the different facilities in the college.
- ⦁ <section class=”testimonial”> : This section contains the testimonials where students has reviewed the college and other student can see the feedback.
- ⦁ <section class=”cta”> : This contains the contact page and enroll information about the college. It has a heading and a paragraph for the cta section.
<title>Dynamic Convergence University</title>
<section class="header">
<nav>
<a href="home.html"><img decoding="async" src="Images/college_logo.png" alt="" /></a>
<div class="nav-links" id="navLinks">
<i class="fa fa-times"></i>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="courses.html">COURSES</a></li>
<li><a href="blog.html">BLOGS</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<i class="fa fa-bars"></i>
</nav>
<div class="text-box">
<h1>DCU : Igniting Engineering Dreams</h1>
<p>
At DCU, we believe in empowering aspiring engineers to realize their
full potential and shape the future with their innovative ideas.
</p>
<a href="" class="hero-btn">Visit Us To know More</a>
</div>
</section>
<!-- -course- -->
<section class="course">
<h1>Course We Offer</h1>
<div class="course-intro">
<p>
Explore our programs designed to nurture
your passion for technology and equip you with the skills to shape the
future.
</p>
</div>
<div class="row">
<div class="course-col">
<h3>B.TECH</h3>
<p>
The B.Tech program is designed to provide students with a strong
foundation in engineering principles and practical skills. It offers
a comprehensive understanding of various engineering disciplines,
allowing students to specialize in many areas.
</p>
</div>
<div class="course-col">
<h3>M.TECH</h3>
<p>
The M.Tech program is a postgraduate degree that focuses on advanced
engineering concepts and specialized knowledge. It enables students
to delve deeper into their chosen engineering field and undertake
research projects.
</p>
</div>
<div class="course-col">
<h3>RESEARCH</h3>
<p>
Our college also offers research opportunities for those driven to
advance the boundaries of engineering knowledge. These programs
provide a platform for students to engage in high-impact research
projects, collaborate with esteemed faculty.
</p>
</div>
</div>
</section>
<!-- -campus- -->
<section class="campus">
<h1>Our Global Campus</h1>
<p>
We offer a wide range of opportunities for students to
explore their interests and develop their skills.
</p>
<div class="row">
<div class="campus-col">
<img decoding="async" src="Images/campus1.jpg" alt="" />
<div class="layer">
<h3>LONDON</h3>
</div>
</div>
<div class="campus-col">
<img decoding="async" src="Images/campus2.jpg" alt="" />
<div class="layer">
<h3>AMERICA</h3>
</div>
</div>
<div class="campus-col">
<img decoding="async" src="Images/campus3.jpg" alt="" />
<div class="layer">
<h3>FRANCE</h3>
</div>
</div>
</div>
</section>
<!-- -facilities- -->
<section class="facilities">
<h1>Our Facilities</h1>
<div class="facilities-intro">
<p>
The DCU campus is equipped with state-of-the-art facilities and
resources to support the learning and research needs of our students.
</p>
</div>
<div class="row">
<div class="facilities-col">
<img decoding="async" src="Images/facilities1.jpg" alt="" />
<h3>World Class Library</h3>
<p>
Our library is one of the largest and most comprehensive in the
country.
</p>
</div>
<div class="facilities-col">
<img decoding="async" src="Images/facilities2.jpg" alt="" />
<h3>Largest Playground</h3>
<p>
The campus has a large and well-maintained playground for students
to enjoy.
</p>
</div>
<div class="facilities-col">
<img decoding="async" src="Images/facilities3.jpg" alt="" />
<h3>Tasty and Healthy Food</h3>
<p>
The campus has a well-equipped cafeteria that serves a variety of
nutritious and delicious meals.
</p>
</div>
</div>
</section>
<!-- -testimonials- -->
<section class="testimonial">
<h1>What Our Students Say</h1>
<!-- <p>the college is a funcking bullshit</p> -->
<div class="row">
<div class="testimonial-col">
<img decoding="async" src="Images/student1.jpg" alt="" />
<div>
<p>
"Top-notch infrastructure and a dynamic curriculum foster
innovation and skill development. A vibrant campus life adds a
perfect balance to the rigorous engineering education."
</p>
<h3>Sayak Bal</h3>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
</div>
<div class="testimonial-col">
<img decoding="async" src="Images/student2.png" alt="" />
<div>
<p>
"Exceptional faculty and hands-on labs make learning at this
engineering college a rewarding experience. The strong industry
connections provide ample opportunities for practical exposure."
</p>
<h3>Ranit Manik</h3>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
</div>
</section>
<!-- -call to action- -->
<section class="cta">
<h1>
Enroll For Our Online Courses <br />
from anywhere in the world!
</h1>
<a href="" class="hero-btn">CONTACT US</a>
</section>
<!-- -footer- -->
<section class="footer">
<h1>About Us</h1>
<div class="footer-intro">
<p>
"We are passionate developers dedicated to crafting innovative
solutions that merge technology with creativity. <br />Our mission is
to build seamless experiences that redefine possibilities."
</p>
</div>
<div class="icons">
<a href="https://www.facebook.com/profile.php?id=100094296491449" class="fa fa-facebook" target="_blank" rel="noopener"></a>
<a href="https://twitter.com/RANIT_MANIK" class="fa fa-twitter" target="_blank" rel="noopener"></a>
<a href="https://www.instagram.com/ranit_manik_/" class="fa fa-instagram" target="_blank" rel="noopener"></a>
<a href="https://www.linkedin.com/in/ranit-manik/" class="fa fa-linkedin" target="_blank" rel="noopener"></a>
</div>
<p>Made with <i class="fa fa-heart-o"></i> by RANIT</p>
<p>© 2021 Ranit Manik</p>
</section>
<!--Javascript for Toggle Menu-->
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-200px";
}
CSS (Style.css)
This is our CSS file. CSS stands for Cascading style sheet. This code makes our website visually appealing and interactive. Let’s breakdown the code.
- The code starts with universal selector and it sets margin and padding to zero.
- The header section creates a full screen with a min height of 100vh and a background image. Background property ensures the image scale with position relative.
- Navbar uses display flex properties which sets the elements horizontally. Nav links sets the alignment right and flex as 1. The navbar’s all items designed in such a way that it looks good on our website.
- A hover effect is added to the nav links, whenever someone hover on it s underline appears.
- The text box section sets position absolute and transform translate. Headings (h1) are styled for impact with font-size: 60px, and paragraphs have lighter text for contrast.
- The .hero-btn is a transparent button with a border. It turns red when we hover it. Hover effect is set in a way that it changes color smoothly.
- For the responsive design of our website, we’ve used media queries. Using media queries we’ve made our website’s layout fully responsive. All the elements are styled for smaller screens using media queries.
- The course section is styled in way that a heading appears on top of its section and a brief intro then we can see three boxes and each box contains some information about the course. The hover effect is also added to it.
- The campus section is also styled in the same way as the course section styled. On the hover .campus-col image slightly zoom over and makes a interacting view. The .layer turn red on the hover effect on it.
- Facilities section provides the facilities of the college. It has the some cards which are designed using CSS which showcase the features about the college
- Testimonial section is something which displays the feedback of the prior students about the college. The .fa icon styled red to match the theme
- The .cta has a full-width background image with a dark overlay and bold white text for emphasis.
- The footer section is styled for each page of the website. It centers the text and social icons. Icons color changes on hover.
- About section, blog section and Contact section is styled in a way that it looks visually appealing and interacting according the theme of website and for smaller screens responsiveness is also has been the focus.
So this was all about our CSS code.
* {
margin: 0;
padding: 0;
}
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
url("Images/bg1.jpeg");
background-position: center;
background-size: cover;
position: relative;
}
nav {
display: flex;
padding: 0% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
margin-top: 30px;
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 10px 35px;
position: relative;
}
.nav-links ul li a {
color: white;
text-decoration: none;
font-size: 16px;
font-family: "Poppins", sans-serif;
}
.nav-links ul li::after {
content: "";
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after {
width: 100%;
}
.text-box {
width: 87%;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1 {
font-size: 60px;
font-family: "Montserrat", sans-serif;
}
.text-box p {
margin: 25px 0 40px;
color: #fff3f3;
font-size: 17px;
font-family: "Poppins", sans-serif;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: white;
border: 1px solid #ffffff;
padding: 12px 34px;
font-size: 15px;
background: transparent;
position: relative;
}
.hero-btn:hover {
border: 1px solid #f44336;
background: #f44336;
transition: 0.8s;
}
nav .fa {
display: none;
}
@media (max-width: 700px) {
.text-box h1 {
font-size: 35px;
}
.nav-links ul li {
display: block;
}
.nav-links {
position: fixed;
background: #f44336;
height: 100vh;
width: 200px;
max-width: 100%;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 0.3s;
}
nav .fa {
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul {
padding: 30px;
}
}
/* ----course---------- */
.course {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
h1 {
font-size: 36px;
font-weight: 600;
}
.course-col p {
color: #8b8b8b;
font-size: 16px;
font-weight: 400;
line-height: 22px;
padding: 10px;
}
.row {
margin-top: 5%;
display: flex;
justify-content: space-between;
}
.course-col {
flex-basis: 31%;
background: #fff3f3;
border-radius: 10px;
margin-bottom: 5%;
padding: 20px 12px;
box-sizing: border-box;
transition: 0.5s;
}
.course-intro p {
color: #555;
margin-top: 25px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h3 {
text-align: center;
font-weight: 800px;
color: #000000;
margin: 10px 0;
font-size: 25px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.course-col:hover {
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.4);
border-radius: 30px;
transform: translateY(-10px);
}
@media (max-width: 700px) {
.row {
flex-direction: column;
}
.course-col:hover {
box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.4);
border-radius: 0px;
transform: translateX(0px);
}
}
/* -------------campus----------------- */
.campus {
width: 80%;
margin: auto;
text-align: center;
padding-top: 50px;
}
.campus p {
margin-top: 25px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #555;
}
.campus-col {
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.campus-col img {
width: 100%;
display: block;
object-fit: cover;
transition: all ease 0.5s;
scale: 1.1;
}
.campus-col:hover img {
scale: 1;
}
.layer {
background: (226, 0, 0, 0.7);
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer:hover {
background: rgba(226, 0, 0, 0.7);
}
.layer h3 {
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
}
.layer:hover h3 {
bottom: 49%;
opacity: 1;
}
/* ---------------facilities--------------------- */
.facilities {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
.facilities-intro p {
margin-top: 25px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.facilities-col {
flex-basis: 31%;
border-radius: 10px;
margin-bottom: 5%;
text-align: left;
}
.facilities-col img {
width: 100%;
border-radius: 10px;
}
.facilities-col p {
padding: 0;
color: #8b8b8b;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
.facilities-col h3 {
margin-top: 16px;
margin-bottom: 15px;
text-align: left;
}
/* --------------testimonials---------------- */
.testimonial {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
.testimonial-col {
flex-basis: 44%;
border-radius: 10px;
margin-bottom: 5%;
text-align: left;
background: #fff3f3;
padding: 25px;
cursor: pointer;
display: flex;
}
.testimonial-col img {
height: 40px;
margin-left: 5px;
margin-right: 30px;
border-radius: 50%;
}
.testimonial-col h3 {
font-family: "Poppins", sans-serif;
text-align: left;
}
.testimonial-col .fa {
color: #f44336;
}
@media (max-width: 700px) {
.testimonial-col img {
margin-left: 0px;
margin-right: 15px;
}
}
/* -------------cta---------- */
.cta {
margin: 100px auto;
width: 80%;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url("Images/bg2.jpg");
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding: 100px 0;
}
.cta h1 {
color: #fff;
margin-bottom: 40px;
padding: 0;
}
@media (max-width: 700px) {
.cta h1 {
font-size: 24px;
}
}
/* ---------footer------------ */
.footer {
width: 100%;
text-align: center;
padding: 30px 0;
}
.footer h4 {
margin-bottom: 25px;
margin-top: 20px;
font-weight: 600;
}
.icons .fa {
color: #f44336;
margin: 0 13px;
cursor: pointer;
padding: 18px 0;
text-decoration: none;
transition: transform 0.3s ease;
}
.fa-heart-o {
color: #f44336;
}
.icons .fa:hover {
color: #570802;
transform: scale(1.5);
}
.footer h1 {
margin-bottom: 25px;
}
.footer-intro p {
font-size: 18px;
color: #8b8b8b;
}
@media screen and (max-width: 700px) {
.footer-intro p {
font-size: 14px;
text-align: center;
margin-right: 25px;
margin-left: 25px;
}
}
/* --------------------about us page--------------------------------- */
.sub-header {
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
url(Images/about_us.jpg);
background-position: auto;
background-size: cover;
text-align: center;
}
.sub-header h1 {
margin-top: 30px;
font-family: "Montserrat", sans-serif;
color: #fff;
}
.about-us {
width: 80%;
margin: auto;
padding-top: 80px;
padding-bottom: 50px;
}
.about-col {
flex-basis: 48%;
padding: 30px 2px;
}
.about-col img {
width: 100%;
}
.about-col h1 {
padding-top: 0;
margin-top: 45px;
}
.about-col p {
padding: 15px 0 25px;
color: #8b8b8b;
line-height: 25px;
}
.red-btn {
border: 1px solid #f44336;
background: transparent;
color: #f44336;
}
.red-btn:hover {
color: #fff;
}
@media (max-width: 700px) {
.sub-header {
height: 50vh;
width: 100%;
background: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
url(Images/bg3.jpg) center/cover;
/* Center and cover the background */
text-align: center;
}
.about-col img {
display: none;
}
.about-col {
flex-basis: 48%;
padding: 0px 2px;
}
.about-us {
width: 80%;
margin: auto;
padding-top: 0px;
padding-bottom: 50px;
}
}
/* -------------------blog post-------------------- */
.blog-content {
width: 80%;
margin: auto;
padding: 60px 0;
}
.blog-left {
flex-basis: 65%;
}
.blog-left img {
width: 100%;
}
.blog-left h1 {
color: #222;
font-weight: 600;
margin: 30px 0;
}
.blog-left p {
color: #8b8b8b;
padding: 0;
}
.blog-right {
flex-basis: 32%;
}
.blog-right h3 {
background: #f44336;
color: #fff;
padding: 7px 0;
font-size: 16px;
margin-bottom: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.blog-right div {
display: flex;
align-items: center;
justify-content: space-between;
color: #555;
border-bottom: #8b8b8b 1px solid;
padding: 8px;
box-sizing: border-box;
}
.blog-right div:hover {
background-color: #8b8b8b;
border: #000 1px solid;
color: #000;
scale: 1.1;
transition: 0.3s;
}
.comment-box {
border: 1px solid #ccc;
margin: 50px 0;
padding: 10px 20px;
}
.comment-box h3 {
text-align: left;
}
.comment-form input,
.comment-form textarea {
width: 100%;
padding: 10px;
margin: 15px 0;
box-sizing: border-box;
border: none;
outline: none;
background: #f0f0f0;
}
.comment-form button {
margin: 10px 0;
}
@media (max-width: 700px) {
.sub-header h1 {
font-size: 24px;
}
.blog-left img {
display: none;
}
.blog-content {
width: 80%;
margin: auto;
padding: 0px 0;
}
.blog-right {
order: 1;
}
.blog-left {
order: 2;
}
.blog-left h1 {
color: #222;
font-size: 30px;
font-weight: 600;
margin: 30px 0;
}
}
/* ---------------------contact us-------------------- */
.location {
width: 80%;
margin: auto;
padding: 80px 0;
}
.location iframe {
width: 100%;
}
.contact-us {
width: 80%;
margin: auto;
}
.contact-col {
flex-basis: 48%;
margin-bottom: 30px;
}
.contact-col div {
display: flex;
align-items: center;
margin-bottom: 40px;
}
.contact-col div .fa {
font-size: 28px;
color: #f44336;
margin: 10px;
margin-right: 30px;
}
.contact-col div p {
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.contact-col div h5 {
font-size: 20px;
margin-bottom: 5px;
color: #555;
font-weight: 400;
font-family: Arial, Helvetica, sans-serif;
}
.contact-col input,
.contact-col textarea {
width: 100%;
padding: 15px;
margin-bottom: 17px;
outline: none;
border: 1px solid #ccc;
box-sizing: border-box;
}
.row {
margin-left: 10px;
display: flex;
}
Output:
Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.
TUI Expense Tracker Using Textual in Python Introduction: Managing money is a very important skill in life. But many people still use …
Educational Website using html CSS and JavaScript Introduction Hello friends, welcome to today’s new blog post. Today we have created a beautiful …
A Django-Based Gym Management System Introduction Managing a gym can be complicated because there are so many things to keep track of, …
how to create a video background with html CSS JavaScript Introduction Hello friends, you all are welcome to today’s new blog post. …
Get Huge Discounts
More Python Projects
