Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS & JavaScript) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "Build A Responsive Website Using HTML, CSS, and JavaScript Animation", we will learn how to create it following these simple easy steps. From the header navigation to the footer element, we will dissolve all of them here.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
- Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
HTML
<!-- Header Section -->
<header>
<div class="logo">
<a href="#">
<img src="./img/logo.png" alt="" />
<span>EduVerse</span>
</a>
<button id="navBar"><img src="./img/bar.png" alt="" /></button>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#program-section">Program</a></li>
<li><a href="#about-section">About Us</a></li>
<li><a href="#campus-section">Campus</a></li>
<li><a href="#contact-section">Contact Us</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<div id="hero-section">
<div class="overlay"></div>
<div class="hero-texts">
<h1>Unlock Your Potential and Achieve Your Dreams!</h1>
<p>
With expert instructors, hands-on learning experiences, and a flexible
platform, you’ll have the support you need to thrive. From beginner to
advanced, our curriculum is tailored to suit your needs, empowering
you to learn at your own pace.
</p>
<a href="" class="btn">Explore more</a>
</div>
</div>
<!-- Program Section -->
<section id="program-section">
<div class="title">
<h2>What we Offer</h2>
</div>
<div class="programs">
<div class="program">
<img src="./img/program1.webp" alt="" />
<div>
<img src="./img/program1.png" alt="" />
<span>Internship and Job Placement Services</span>
</div>
</div>
<div class="program">
<img src="./img/program2.webp" alt="" />
<div>
<img src="./img/program2.png" alt="" />
<span>Free scholarships</span>
</div>
</div>
<div class="program">
<img src="./img/program3.webp" alt="" />
<div>
<img src="./img/program3.png" alt="" />
<span>Free Online Courses</span>
</div>
</div>
</div>
</section>
<!-- About Us Section -->
<section id="about-section">
<div class="about">
<div class="about-image">
<img src="./img/about.webp" alt="" />
</div>
<div class="about-texts">
<span>About University</span>
<h2>Nuturing Young Graduates of Our World Today!</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet,
iste modi incidunt totam, eius quis explicabo eos repudiandae, vero
ut expedita mollitia culpa laborum. Aut cupiditate ratione incidunt
quam rerum.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum
tempore quibusdam accusamus et animi. Suscipit saepe quia vel ea
harum accusantium qui deserunt doloremque, natus porro asperiores
tempora. Voluptatum, optio?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sint
maiores pariatur asperiores sapiente sunt. Consequuntur distinctio
amet, repellat recusandae sint modi itaque inventore vitae
architecto. Perspiciatis iste inventore veniam.
</p>
</div>
</div>
</section>
<!-- Campus Section -->
<section id="campus-section">
<div class="title">
<span>Gallery</span>
<h2>Campus Photos</h2>
</div>
<div class="galleries">
<div><img src="./img/gal1.webp" alt="" /></div>
<div><img src="./img/gal2.webp" alt="" /></div>
<div><img src="./img/gal3.webp" alt="" /></div>
<div><img src="./img/gal4.webp" alt="" /></div>
</div>
</section>
<section id="contact-section">
<div class="title">
<span>contact us</span>
<h2>Get in Touch</h2>
</div>
<div class="contact">
<div class="contact-info">
<h4>Send us a message <img src="./img/mail.png" alt="" /></h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi
inventore molestias ducimus voluptas sed dolorum dolorem saepe
possimus ipsum dicta obcaecati, natus facilis earum, placeat quod
sapiente enim laboriosam dolores.
</p>
<div>
<img src="./img/email.png" alt="" />
<span>info.school@support.com</span>
</div>
<div>
<img src="./img/phone.png" alt="" />
<span>(123) 908 80380</span>
</div>
<div>
<img src="./img/location.png" alt="" />
<span>7 Westmorland Road London, E17 8JA</span>
</div>
</div>
<div class="contact-form">
<form>
<input type="text" placeholder="Your Name" required />
<input type="email" placeholder="Your Email" required />
<textarea rows="10" placeholder="Your Comment"></textarea>
<button>Submit</button>
</form>
</div>
</div>
</section>
<!-- Footer Section -->
<section id="footer-section">
<div class="footer">
<p>© Copyright EduVerse 2025. All right reserved</p>
<div>
<a href="#">Terms & Conditions</a>
<a href="#">Privacy Policy</a>
</div>
</div>
</section>
Add the following CSS codes to your style.css file to make your website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website.
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
header {
position: fixed;
width: 100%;
padding: 20px 15%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
header.active {
background: #5c7cfa;
}
.logo {
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
}
.logo a {
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.2em;
}
.logo a img {
width: 40px;
}
.logo button {
display: none;
}
nav ul li {
list-style: none;
display: inline;
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: #fff;
padding: 5px 10px;
border-radius: 20px;
transition: 0.5s ease;
}
nav ul li:last-child a {
background: #fff;
color: #000;
}
nav ul li a:hover {
background: #fff;
color: #000;
}
nav ul li:last-child a:hover {
background: transparent;
color: #fff;
}
/* Hero Section Styling */
#hero-section {
position: relative;
min-height: 100vh;
background: url(./img/hero.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 5%;
}
#hero-section .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
/* mix-blend-mode: multiply; */
}
#hero-section .hero-texts {
z-index: 1;
text-align: center;
color: #fff;
}
#hero-section .hero-texts h1 {
font-size: 3em;
max-width: 800px;
width: 100%;
margin: 0 auto;
}
#hero-section .hero-texts p {
max-width: 800px;
width: 100%;
margin: 20px auto;
line-height: 2em;
font-size: 1.1em;
}
a.btn {
background: #fff;
color: #000;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 20px;
padding: 10px 25px;
width: fit-content;
text-decoration: none;
margin: 0 auto;
font-size: 1.1em;
transition: transform 0.3s ease;
}
a.btn:hover {
transform: scale(0.9);
}
section {
padding: 100px 15%;
}
/* Global Style */
.title {
text-align: center;
}
.title h2 {
font-size: 2em;
margin: 5px 0;
}
.title span {
font-size: 1.3em;
font-weight: 500;
text-transform: uppercase;
}
/* Program Section Style */
.programs {
display: flex;
justify-content: center;
align-items: center;
gap: 2em;
/* flex-wrap: wrap; */
margin-top: 50px;
}
.program {
position: relative;
width: 400px;
height: 350px;
overflow: hidden;
border-radius: 10px;
}
.program img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.program > div {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 1em;
color: #fff;
transition: 0.2s ease;
}
.program > div img {
width: 50px;
height: 50px;
}
.program:hover > div {
top: 0;
}
/* About Section Style */
.about {
display: flex;
justify-content: center;
align-items: center;
gap: 2em;
}
.about-image {
position: relative;
width: 400px;
height: 400px;
overflow: hidden;
border-radius: 10px;
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: 0.3s ease;
}
.about-image:hover img {
transform: scale(1.1);
}
.about-texts span {
font-size: 1.2em;
}
.about-texts h2 {
font-size: 2em;
max-width: 700px;
margin-top: 10px;
}
.about-texts p {
margin: 10px 0;
line-height: 1.5em;
max-width: 700px;
}
/* Campus Section Styling */
.galleries {
display: flex;
align-items: center;
justify-content: center;
gap: 2em;
margin-top: 50px;
}
.galleries > div {
width: 400px;
height: 400px;
border-radius: 6px;
overflow: hidden;
}
.galleries > div img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: 0.3s ease;
}
.galleries > div:hover img {
transform: scale(1.1);
}
/* Contact Section Style */
.contact {
margin-top: 50px;
display: flex;
justify-content: space-between;
}
.contact-info h4 {
font-size: 2em;
display: flex;
align-items: center;
gap: 0.5em;
}
.contact-info h4 img {
width: 30px;
}
.contact-info p {
max-width: 500px;
line-height: 1.4em;
margin: 15px 0;
}
.contact-info > div {
display: flex;
align-items: center;
gap: 0.5em;
margin: 20px 0;
}
.contact-info > div img {
width: 25px;
object-fit: cover;
object-position: center;
}
.contact-form form input,
textarea {
width: 100%;
padding: 10px 5px;
margin: 10px 0;
outline: none;
border: 1px solid grey;
border-radius: 4px;
text-indent: 10px;
}
.contact-form form button {
display: block;
padding: 10px 25px;
cursor: pointer;
border: none;
color: #fff;
background: #5c7cfa;
border-radius: 20px;
font-size: 1em;
}
/* Footer Section Style */
#footer-section {
padding: 20px 15%;
}
.footer {
border-top: 1px solid grey;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
}
.footer a {
text-decoration: none;
color: #000;
}
/* Mobile Responsiveness */
@media (max-width: 767px) {
header {
padding: 20px 5%;
}
nav {
position: fixed;
top: 0;
right: -999px;
bottom: 0;
width: 200px;
background: #5c7cfa;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 0.3s ease;
}
nav ul li {
display: block;
margin: 20px 0;
}
.logo {
width: 100%;
}
.logo button {
display: flex;
padding: 5px 10px;
border-radius: 4px;
border: none;
cursor: pointer;
}
.logo button img {
width: 20px;
}
nav.active {
right: 0;
}
#hero-section .hero-texts h1 {
font-size: 2em;
}
/* Program Section */
.programs {
flex-wrap: wrap;
}
.program {
max-width: 100%;
max-height: 100%;
height: 300px;
}
/* About Section */
.about {
flex-direction: column-reverse;
}
.about-image {
max-width: 100%;
max-height: 100%;
height: 300px;
}
.about-texts h2 {
font-size: 1.7em;
}
/* Gallery Section */
.galleries {
flex-wrap: wrap;
}
.galleries > div {
max-width: 100%;
max-height: 100%;
height: 300px;
}
/* Contact Section */
.contact {
flex-wrap: wrap;
}
/* Footer Section */
.footer {
flex-wrap: wrap;
justify-content: center;
gap: 1em;
}
}
JAVASCRIPT
Finally add the following script code to your script.css file to add functionality to your website
//Navigation Bar Function
const navBar = document.getElementById("navBar");
const nav = document.querySelector("nav");
//Handle NavBar Click
navBar.addEventListener("click", (e) => {
nav.classList.toggle("active");
});
//Handle Window Scroll
const header = document.querySelector("header");
window.addEventListener("scroll", (e) => {
if (window.scrollY > 200) {
header.classList.add("active");
} else {
header.classList.remove("active");
}
});Conclusion and Final word
Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can "Build A Responsive Website Using HTML, CSS, and JavaScript Animation". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.
Happy Coding Journey 🚀
0 Comments
We are happy to hear from you.