Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) 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 "How To Make A Responsive Construction Website Using HTML CSS & JavaScript", we will learn how to create it following these simple easy steps.
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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BuildingCo - Whole House Renovations</title>
<!-- GSAP CDN -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<!-- GSAP SPLITTEXT -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>
<script src="script.js" defer></script>
</head>
<body>
<header>
<div class="container header-container">
<div class="top-bar">
<div class="top-contact-info">
<span><ion-icon name="call-outline"></ion-icon> 0123 456 7890</span>
<span
><ion-icon name="mail-outline"></ion-icon>
info@buildingco.com</span
>
</div>
<div class="top-social-icons">
<a href="#" aria-label="Facebook"
><ion-icon name="logo-facebook"></ion-icon
></a>
<a href="#" aria-label="Twitter"
><ion-icon name="logo-twitter"></ion-icon
></a>
<a href="#" aria-label="Instagram"
><ion-icon name="logo-instagram"></ion-icon
></a>
<a href="#" aria-label="LinkedIn"
><ion-icon name="logo-linkedin"></ion-icon
></a>
</div>
</div>
<nav class="navbar">
<a href="" class="logo">BuildingCo</a>
<div class="nav-actions">
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#" class="nav-button">Get a Quote</a>
<button
class="hamburger"
id="hamburger-menu"
aria-label="Toggle menu"
>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
</div>
</nav>
</div>
</header>
<main>
<section class="hero-section">
<div class="container">
<div class="hero-content">
<h1>Crafting Exceptional Whole Home Renovations</h1>
<p>
BuildingCo offers bespoke renovation services, transforming your
house into the dream home you've always envisioned. From concept
to completion, we deliver unparalleled quality and timeless design
across the North West.
</p>
<a href="#" class="hero-button">Discover Our Projects</a>
</div>
</div>
<div class="hero-image">
<img
src="./images/hero.jpg"
alt="Modern renovated kitchen and living space"
/>
</div>
</section>
<section class="about-section">
<div class="container">
<h2>Our Refined Renovation Process</h2>
<p>
We offer a comprehensive home design & build service, working with
clients in Liverpool and throughout the North West. Our focus is on
meticulous planning, exquisite craftsmanship, and seamless project
management to bring your vision to life.
</p>
<div class="gallery-grid">
<div class="gallery-item gallery-1">
<img
src="./images/about-1.jpg"
alt="Luxury kitchen refurbishment"
/>
<div class="gallery-overlay">
<h3>Luxury Kitchens</h3>
<p>
Designing and installing kitchens that blend functionality
with sophisticated aesthetics.
</p>
</div>
</div>
<div class="gallery-item gallery-2">
<img src="/images/about-2.jpg" alt="Elegant bathroom design" />
<div class="gallery-overlay">
<h3>Elegant Bathrooms</h3>
<p>
Creating spa-like bathroom retreats with premium fixtures and
finishes.
</p>
</div>
</div>
<div class="gallery-item">
<img src="./images/about-3.jpg" alt="Modern living spaces" />
<div class="gallery-overlay">
<h3>Modern Living Spaces</h3>
<p>
Transforming living areas into open, inviting, and stylish
environments.
</p>
</div>
</div>
<div class="gallery-item">
<img src="./images/about-4.jpg" alt="Stylish home extensions" />
<div class="gallery-overlay">
<h3>Home Extensions</h3>
<p>
Expanding your living space with thoughtful and harmonious
extensions.
</p>
</div>
</div>
<div class="gallery-item">
<img src="./images/about-5.jpg" alt="Outdoor living areas" />
<div class="gallery-overlay">
<h3>Outdoor Living</h3>
<p>
Crafting luxurious outdoor spaces for relaxation and
entertainment.
</p>
</div>
</div>
<div class="gallery-item">
<img src="./images/about-6.jpg" alt="Architectural detailing" />
<div class="gallery-overlay">
<h3>Architectural Detailing</h3>
<p>
Enhancing your home with bespoke architectural features and
finishes.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="why-choose-us">
<div class="container">
<h2>Why Choose BuildingCo for Your Renovation?</h2>
<div class="choose-us-content">
<div class="choose-us-item">
<ion-icon name="megaphone-outline"></ion-icon>
<h3>Client-Centric Approach</h3>
<p>
We prioritize your vision, working closely with you from initial
design to final touches to ensure your complete satisfaction.
</p>
</div>
<div class="choose-us-item">
<ion-icon name="trophy-outline"></ion-icon>
<h3>Unrivaled Quality</h3>
<p>
Our commitment to excellence ensures every detail is executed
with the highest standards of craftsmanship and premium
materials.
</p>
</div>
<div class="choose-us-item">
<ion-icon name="cog-outline"></ion-icon>
<h3>Seamless Project Management</h3>
<p>
Experience a stress-free renovation journey with our expert team
handling all aspects of your project efficiently.
</p>
</div>
</div>
</div>
</section>
<section class="certifications-section">
<div class="container">
<h2>Our Valued Accreditations & Partnerships</h2>
<div class="cert-logos">
<img
src="https://placehold.co/150x60/f5f0eb/333333?text=NICEIC"
alt="NICEIC Logo"
/>
<img
src="https://placehold.co/150x60/f5f0eb/333333?text=Gas+Safe"
alt="Gas Safe Logo"
/>
<img
src="https://placehold.co/150x60/f5f0eb/333333?text=FMB"
alt="Federation of Master Builders Logo"
/>
<img
src="https://placehold.co/150x60/f5f0eb/333333?text=TrustMark"
alt="TrustMark Logo"
/>
</div>
</div>
</section>
<section class="feedback-section">
<div class="container">
<h2>Feedback From Our Esteemed Clients</h2>
<div class="feedback-grid">
<div class="video-testimonial">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/AXQogDzxOoM?si=tQz_ZRsURJ5QpSHx"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
<div class="text-testimonials">
<div class="testimonial-card">
<ion-icon name="bookmark-outline"></ion-icon>
<p>
"BuildingCo transformed our outdated house into a modern
masterpiece. Their attention to detail and commitment to
quality was truly outstanding. We couldn't be happier with our
luxurious new home!"
</p>
<div class="testimonial-author">Sarah & John D.</div>
<div class="testimonial-source">Liverpool, UK</div>
</div>
<div class="testimonial-card">
<ion-icon name="bookmark-outline"></ion-icon>
<p>
"From the initial consultation to the final handover, the team
at BuildingCo was professional, innovative, and incredibly
efficient. Our extension is exactly what we dreamed of, and
more."
</p>
<div class="testimonial-author">Michael R.</div>
<div class="testimonial-source">Cheshire, UK</div>
</div>
</div>
</div>
</div>
</section>
<section class="google-reviews">
<div class="container">
<h3>Read More 5-Star Reviews on Google</h3>
<div class="google-reviews-grid">
<div class="google-review-card">
<div class="rating">
<ion-icon name="star-outline"></ion-icon
><ion-icon name="star-outline"></ion-icon
><ion-icon name="star-outline"></ion-icon
><ion-icon name="star-outline"></ion-icon
><ion-icon name="star-outline"></ion-icon>
</div>
<p>
"Excellent service from start to finish. The team were always on
time and finished the project ahead of schedule. Highly
recommend for any home renovation."
</p>
<div class="author">Emily W.</div>
</div>
<div class="google-review-card">
<div class="rating">
<ion-icon name="star-outline"></ion-icon
><ion-icon name="star-outline"></ion-icon
><ion-icon name="star-outline"></ion-icon
><ion-icon name="star-outline"></ion-icon
><ion-icon name="star-outline"></ion-icon>
</div>
<p>
"Professional, tidy, and their work quality is simply superb.
Our new kitchen is the envy of all our friends. Thank you,
BuildingCo!"
</p>
<div class="author">David P.</div>
</div>
<div class="google-review-card">
<div class="rating">
<ion-icon name="star-outline"></ion-icon
><ion-icon name="star-outline"></ion-icon
><ion-icon name="star-outline"></ion-icon
><ion-icon name="star-outline"></ion-icon
><ion-icon name="star-outline"></ion-icon>
</div>
<p>
"We had a full house refurbishment, and BuildingCo managed
everything perfectly. The communication was great, and the
result is stunning."
</p>
<div class="author">Jessica T.</div>
</div>
</div>
</div>
</section>
<section class="cta-section">
<div class="container cta-content">
<h2>Ready to Transform Your Home?</h2>
<p>
Get a project started with BuildingCo and experience the difference
of premium design and impeccable craftsmanship.
</p>
<button class="cta-button">Get Your Free Consultation Today</button>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-col footer-info">
<h3>BuildingCo</h3>
<p>
Crafting exceptional living spaces across the North West. Your
vision, our expertise.
</p>
<p>
<ion-icon name="location-outline"></ion-icon> 123 Renovation
Drive, Liverpool, L1 1AB
</p>
<p><ion-icon name="call-outline"></ion-icon> 0123 456 7890</p>
<p><ion-icon name="mail-outline"></ion-icon> info@buildingco.com</p>
</div>
<div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Services</h3>
<ul>
<li><a href="#">Kitchen Renovations</a></li>
<li><a href="#">Bathroom Refurbishments</a></li>
<li><a href="#">Home Extensions</a></li>
<li><a href="#">Full House Remodels</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Follow Us</h3>
<div class="footer-social-icons">
<a href="#" aria-label="Facebook"
><ion-icon name="logo-facebook"></ion-icon
></a>
<a href="#" aria-label="Twitter"
><ion-icon name="logo-twitter"></ion-icon
></a>
<a href="#" aria-label="Instagram"
><ion-icon name="logo-instagram"></ion-icon
></a>
<a href="#" aria-label="LinkedIn"
><ion-icon name="logo-linkedin"></ion-icon
></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>
© 2025 BuildingCo. All rights reserved. |
<a href="#">Privacy Policy</a>
</p>
</div>
</div>
</footer>
<!-- IONICON CDN -->
<script
type="module"
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
></script>
</body>
</html>
Next, add the following CSS codes to your style.css file to make 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=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@300;400;500&display=swap");
:root {
--primary-color: #1a2a46;
--secondary-color: #c09f80;
--accent-color: #a87f5e;
--light-bg: #f5f0eb;
--text-color: #333333;
--light-text: #ffffff;
--border-color: #e0e0e0;
--body-font: "Poppins", sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: var(--body-font);
box-sizing: border-box;
color: var(--text-color);
background-color: var(--light-bg);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
header {
background-color: var(--primary-color);
color: var(--light-text);
padding: 15px 0;
border-bottom: 3px solid var(--accent-color);
position: relative;
z-index: 1000;
}
.header-container {
display: flex;
flex-direction: column;
}
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 10px;
}
.top-contact-info span {
display: inline-flex;
align-items: center;
gap: 10px;
margin-right: 20px;
font-size: 0.9em;
color: rgba(255, 255, 255, 0.8);
}
.top-social-icons a {
color: var(--light-text);
margin-left: 15px;
font-size: 1.1em;
text-decoration: none;
transition: color 0.3s ease;
}
.top-social-icons a:hover {
color: var(--secondary-color);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8em;
font-weight: 700;
color: var(--secondary-color);
text-decoration: none;
}
.nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
margin-left: 30px;
}
.nav-links a {
color: var(--light-text);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
padding: 5px 0;
}
.nav-links a:hover {
color: var(--secondary-color);
}
.nav-actions {
display: flex;
align-items: center;
}
.nav-button {
background-color: var(--secondary-color);
color: var(--primary-color);
padding: 10px 20px;
margin-left: 20px;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s ease, color 0.3s ease;
white-space: nowrap;
}
.nav-button:hover {
background-color: var(--accent-color);
color: var(--light-text);
}
.hamburger {
display: none;
cursor: pointer;
background: none;
border: none;
padding: 10px;
margin-left: 15px;
}
.hamburger .bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
background-color: var(--light-text);
transition: all 0.3s ease-in-out;
}
/* Hero Section */
.hero-section {
background-color: var(--primary-color);
color: var(--light-text);
display: flex;
align-items: center;
min-height: 550px;
position: relative;
overflow: hidden;
padding: 80px 0;
}
.hero-content {
width: 100%;
flex: 1;
z-index: 1;
}
.hero-content h1 {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.1;
color: var(--secondary-color);
}
.hero-content p {
font-size: 1.1em;
line-height: 1.8;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
max-width: 550px;
}
.hero-button {
background-color: var(--accent-color);
color: var(--light-text);
padding: 15px 30px;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
font-size: 1.1em;
transition: background-color 0.3s ease;
}
.hero-button:hover {
background-color: var(--secondary-color);
color: var(--primary-color);
}
.hero-image {
flex: 1;
display: flex;
justify-content: flex-end;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 50%;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-bottom-left-radius: 150px;
}
/* About Section */
.about-section {
background-color: var(--light-bg);
padding: 80px 0;
text-align: center;
}
.about-section h2 {
font-size: 2.5em;
color: var(--primary-color);
margin-bottom: 20px;
}
.about-section p {
max-width: 800px;
margin: 0 auto 50px auto;
font-size: 1.1em;
color: var(--text-color);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-top: 40px;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}
.gallery-item:hover {
transform: translateY(-8px);
}
.gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(26, 42, 70, 0.6);
color: var(--light-text);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
padding: 20px;
box-sizing: border-box;
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.5em;
color: var(--secondary-color);
}
.gallery-overlay p {
font-size: 0.9em;
text-align: center;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
}
/* Why Choose Us Section */
.why-choose-us {
background-color: var(--primary-color);
color: var(--light-text);
padding: 80px 0;
text-align: center;
}
.why-choose-us h2 {
font-size: 2.5em;
color: var(--secondary-color);
margin-bottom: 50px;
}
.choose-us-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
}
.choose-us-item {
flex: 1;
min-width: 280px;
max-width: 380px;
text-align: left;
padding: 30px;
background-color: rgba(255, 255, 255, 0.08);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: transform 0.3s ease, background-color 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.choose-us-item:hover {
transform: translateY(-10px);
background-color: rgba(255, 255, 255, 0.15);
}
.choose-us-item ion-icon {
font-size: 2.5em;
color: var(--accent-color);
margin-bottom: 15px;
display: block;
}
.choose-us-item h3 {
font-size: 1.6em;
color: var(--secondary-color);
margin-bottom: 10px;
}
.choose-us-item p {
font-size: 0.95em;
color: rgba(255, 255, 255, 0.9);
}
/* Certifications Section */
.certifications-section {
padding: 60px 0;
text-align: center;
border-top: 1px solid var(--border-color);
}
.certifications-section h2 {
font-size: 2.2em;
color: var(--primary-color);
margin-bottom: 40px;
}
.cert-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 30px;
}
.cert-logos img {
height: 60px;
filter: grayscale(80%) opacity(0.7);
transition: filter 0.3s ease, transform 0.3s ease;
}
.cert-logos img:hover {
filter: grayscale(0%) opacity(1);
transform: scale(1.05);
}
/* Feedback Section */
.feedback-section {
background-color: var(--light-bg);
padding: 80px 0;
}
.feedback-section h2 {
font-size: 2.5em;
color: var(--primary-color);
text-align: center;
margin-bottom: 50px;
}
.feedback-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 40px;
align-items: center;
}
.video-testimonial {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.video-testimonial iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.text-testimonials {
display: flex;
flex-direction: column;
gap: 30px;
}
.testimonial-card {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border-left: 5px solid var(--secondary-color);
position: relative;
transition: transform 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
}
.testimonial-card ion-icon {
position: absolute;
top: 20px;
right: 20px;
font-size: 3em;
color: var(--secondary-color);
opacity: 0.3;
line-height: 1;
}
.testimonial-card p {
font-style: italic;
margin-bottom: 15px;
color: var(--text-color);
font-size: 1.05em;
}
.testimonial-author {
font-weight: 600;
color: var(--primary-color);
font-size: 1.1em;
}
.testimonial-source {
font-size: 0.9em;
color: #777;
margin-top: 5px;
}
/* Google Reviews */
.google-reviews {
background-color: var(--light-bg);
padding: 60px 0;
text-align: center;
border-top: 1px solid var(--border-color);
}
.google-reviews h3 {
font-size: 2em;
color: var(--primary-color);
margin-bottom: 30px;
}
.google-reviews-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
.google-review-card {
background-color: #fff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
flex: 1 1 300px;
max-width: 350px;
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease;
}
.google-review-card:hover {
transform: translateY(-5px);
}
.google-review-card .rating {
color: #ffd700;
font-size: 1.5em;
margin-bottom: 10px;
}
.google-review-card p {
font-size: 0.95em;
color: #555;
margin-bottom: 15px;
flex-grow: 1;
}
.google-review-card .author {
font-weight: 600;
color: var(--primary-color);
}
/* CTA Section */
.cta-section {
background-color: var(--primary-color);
color: var(--light-text);
padding: 80px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-content {
position: relative;
z-index: 1;
}
.cta-section h2 {
font-size: 3em;
color: var(--secondary-color);
margin-bottom: 25px;
line-height: 1.2;
}
.cta-section p {
font-size: 1.2em;
max-width: 700px;
margin: 0 auto 40px auto;
color: rgba(255, 255, 255, 0.9);
}
.cta-button {
background-color: var(--accent-color);
color: var(--light-text);
border: none;
padding: 18px 30px;
border-radius: 5px;
text-decoration: none;
font-weight: 700;
font-size: 1.2em;
transition: background-color 0.3s ease, color 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.cta-button:hover {
background-color: var(--secondary-color);
color: var(--primary-color);
}
/* Footer */
footer {
background-color: #111b2b;
color: rgba(255, 255, 255, 0.7);
padding: 60px 0 20px 0;
font-size: 0.95em;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px;
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-col h3 {
font-size: 1.4em;
color: var(--secondary-color);
margin-bottom: 20px;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-col ul li a:hover {
color: var(--secondary-color);
}
.footer-info p {
margin-bottom: 10px;
}
.footer-info p ion-icon {
font-size: 1.3em;
}
.footer-social-icons {
margin-top: 20px;
}
.footer-social-icons a {
color: rgba(255, 255, 255, 0.7);
margin-right: 15px;
font-size: 1.3em;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-social-icons a:hover {
color: var(--secondary-color);
}
.footer-bottom {
text-align: center;
padding-top: 20px;
}
.footer-bottom p {
margin: 0;
color: rgba(255, 255, 255, 0.6);
}
.footer-bottom p a {
color: var(--accent-color);
}
/* Tablet Styles (<= 992px) */
@media (max-width: 992px) {
.nav-links {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
background-color: var(--primary-color);
flex-direction: column;
align-items: center;
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.nav-links.active {
display: flex;
}
.nav-links li {
margin: 10px 0;
}
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-button {
display: none;
}
.hero-section {
flex-direction: column;
text-align: center;
min-height: auto;
padding: 60px 0 0 0;
}
.hero-content {
padding-right: 0;
margin-bottom: 40px;
order: 2;
}
.hero-content p {
max-width: 100%;
}
.hero-image {
position: relative;
width: 100%;
height: 400px;
order: 1;
}
.hero-image img {
border-bottom-left-radius: 0;
border-top-left-radius: 150px;
border-top-right-radius: 150px;
}
.feedback-grid {
grid-template-columns: 1fr;
}
.google-review-card {
max-width: none;
flex-basis: calc(50% - 20px);
}
}
/* Mobile Styles (<= 768px) */
@media (max-width: 768px) {
.top-bar {
flex-direction: column;
text-align: center;
gap: 10px;
}
.top-contact-info span {
display: block;
margin: 5px 0;
}
.hero-content h1 {
font-size: 2.8em;
}
.about-section h2,
.why-choose-us h2,
.feedback-section h2,
.certifications-section h2,
.cta-section h2 {
font-size: 2em;
}
.choose-us-item {
max-width: 100%;
}
.google-review-card {
flex-basis: 100%;
}
.footer-grid {
text-align: center;
}
}
/* Small Mobile Styles (<= 480px) */
@media (max-width: 480px) {
.top-bar {
display: none;
}
.hero-content h1 {
font-size: 2.2em;
}
.hero-content p {
font-size: 1em;
}
.hero-button {
font-size: 1em;
padding: 12px 25px;
}
.hero-image {
height: 300px;
}
.hero-image img {
border-top-left-radius: 80px;
border-top-right-radius: 80px;
}
.about-section h2,
.why-choose-us h2,
.feedback-section h2,
.certifications-section h2,
.cta-section h2 {
font-size: 1.8em;
}
}
Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.
JAVASCRIPT
const hamburger = document.getElementById("hamburger-menu");
const navLinks = document.querySelector(".nav-links");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navLinks.classList.toggle("active");
});
// GSAP
document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(SplitText);
// Header Container
gsap.from(".header-container", {
duration: 1.5,
y: -150,
opacity: 0,
});
// Hero Heading
let heroHeading = SplitText.create(".hero-content > h1", {
type: "words, chars",
});
gsap.from(heroHeading.chars, {
duration: 1,
y: 100,
autoAlpha: 0,
stagger: 0.05,
});
// Hero Paragraph
let heroParagraph = SplitText.create(".hero-content > p", {
type: "words, chars",
});
gsap.from(heroParagraph.chars, {
duration: 0.5,
y: 100,
autoAlpha: 0,
stagger: 0.03,
delay: 1.5,
});
// Hero Image
gsap.from(".hero-image > img", {
duration: 1.5,
x: 200,
opacity: 0,
delay: 0.2,
});
});
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 create a "Responsive Construction Website Using HTML CSS & JavaScript". 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.