ToneyGi/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kiithya Enterprises</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-x6V8ZCw8MTlczbItthq9roMOKjFGx9L+UcU7bVwqDjXvyafPmGuXBMvsxq2QZI95qY3NCl/DgeXNhVV2+jHW1Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <img src="https://i.postimg.cc/28gS279L/Vintage-Retro-Construction-Industry-Badge-Logo-1.png" alt="Kiithya Enterprises">
            </div>
            <nav>
                <ul>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#contact">Contact Us</a></li>
                </ul>
            </nav>
            <div class="menu-toggle"><i class="fas fa-bars"></i></div>
        </div>
    </header>

    <section class="hero">
        <div class="overlay"></div>
        <div class="container">
            <h1>Building Better Futures, One Project at a Time</h1>
            <a href="#about" class="cta-btn">Learn More</a>
        </div>
    </section>

    <section id="about" class="about">
        <div class="container">
            <h2>About Us</h2>
            <p>Kiithya Enterprises is committed to delivering high-quality road works, construction, supply, and delivery services. With a focus on quality, reliability, and innovation, we strive to exceed client expectations in every project.</p>
            <div class="testimonials">
                <h3>Testimonials</h3>
                <div class="testimonial">
                    <p>"Kiithya Enterprises provided exceptional service and attention to detail. We are highly satisfied with the results of our project."</p>
                    <p>- John Doe, CEO</p>
                </div>
            </div>
        </div>
    </section>

    <section id="services" class="services">
        <div class="container">
            <h2>Our Services</h2>
            <div class="service">
                <img src="https://i.postimg.cc/28n7TRps/roadworks.jpg" alt="Road Works">
                <h3>Road Works</h3>
                <p>We specialize in road construction and maintenance, ensuring safe and reliable transportation infrastructure.</p>
            </div>
            <div class="service">
                <img src="https://i.postimg.cc/NMWR7bdG/construction.jpg" alt="Construction">
                <h3>Construction</h3>
                <p>From residential buildings to commercial complexes, we offer comprehensive construction services for all types of projects.</p>
            </div>
            <div class="service">
                <img src="https://i.postimg.cc/tTVxTWpK/supply-delivery.jpg" alt="Supply and Delivery">
                <h3>Supply and Delivery</h3>
                <p>We provide high-quality materials and efficient delivery services to support construction projects of any scale.</p>
            </div>
        </div>
    </section>

    <section id="portfolio" class="portfolio">
        <div class="container">
            <h2>Our Portfolio</h2>
            <div class="project">
                <img src="https://i.postimg.cc/qByKHsmn/project1.jpg" alt="Project 1">
                <h3>Urban Town Development Projects</h3>
                <p>In our "Urban Town" project, we specialize in the development of dynamic and sustainable urban communities that enrich the lives of residents and contribute to the vibrancy of cities. With a focus on innovative urban planning and design, we offer a diverse portfolio of projects ranging from residential complexes and mixed-use developments to commercial districts and urban renewal initiatives. Our team is dedicated to creating inclusive spaces that prioritize pedestrian-friendly environments, green infrastructure, and access to essential services and amenities. By integrating smart growth principles, environmental sustainability, and community engagement into every project, we strive to build thriving urban environments that foster social cohesion, economic prosperity, and a high quality of life for all residents. Explore our past projects to see how we're shaping the future of urban living.</p>
            </div>
            <div class="project">
                <img src="https://i.postimg.cc/R02WjhKX/project2.jpg" alt="Project 2">
                <h3> 100km World Bank Road Works Project</h3>
                <p>In our "Road Work" project, we pride ourselves on being a premier provider of comprehensive road infrastructure solutions. With a dedicated focus on excellence and efficiency, we specialize in a wide range of road construction projects, including highways, bridges, urban roads, and rural infrastructure development. Our team of experienced professionals excels in every phase of road work, from meticulous planning and innovative design to precise engineering and meticulous construction. Utilizing state-of-the-art equipment, cutting-edge technology, and sustainable practices, we ensure that every project is completed to the highest standards of quality, safety, and environmental responsibility. Whether it's building new roads, repairing existing infrastructure, or maintaining thoroughfares, we are committed to delivering superior results that enhance connectivity, mobility, and prosperity for communities across the region.</p>
            </div>
            <div class="project">
                <img src="https://i.postimg.cc/zBmfxMYQ/project3.jpg" alt="Project 3">
                <h3>Supply Chain</h3>
                <p>Our company,Kiithya Enterprises, is a leading provider of supply chain solutions dedicated to streamlining operations and maximizing efficiency for our clients. With a focus on innovation and reliability, we offer a comprehensive suite of services encompassing sourcing, procurement, production, logistics, distribution, and technology integration. Leveraging cutting-edge technologies and industry expertise, we tailor solutions to meet the unique needs of each client, driving down costs, reducing lead times, and enhancing overall performance. Our commitment to excellence is underscored by our track record of delivering tangible results and our dedication to continuous improvement. Partner with us to optimize your supply chain and unlock new opportunities for growth and success..</p>
            </div>
        </div>
    </section>

    <section id="contact" class="contact">
        <div class="container">
            <h2>Contact Us</h2>
            <div class="contact-info">
                <p><strong>Address:</strong> P.O Box 01100-529 Kajiado Kenya, Kajiado County, Kajiado Town, Nairobi KE</p>
                <p><strong>Phone:</strong> +254 722525316</p>
                <p><strong>Email:</strong> kelvinmwanzia15@gmail.com</p>
            </div>
            <form action="#" method="POST">
                <input type="text" name="name" placeholder="Your Name" required>
                <input type="email" name="email" placeholder="Your Email" required>
                <textarea name="message" placeholder="Your Message" required></textarea>
                <button type="submit" class="submit-btn">Send Message</button>
            </form>
        </div>
    </section>

 <footer>
        <div class="container">
            <div class="footer-content">
                <div class="logo">
                    <img src="https://i.postimg.cc/28gS279L/Vintage-Retro-Construction-Industry-Badge-Logo-1.png" alt="Kiithya Enterprises">
                </div>
                <div class="social-links">
                    <a href="#" class="social-link"><i class="fab fa-facebook"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
            <div class="footer-info">
                <p>&copy; 2020 Kiithya Enterprises. All rights reserved.</p>
                <ul>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms of Service</a></li>
                </ul>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>


## kiithya-enterprises-website.markdown

      
    Raw
  

              kiithya-enterprises-website.markdown
            
          
    Kiithya Enterprises Website

A Pen by antony wamunyu on CodePen.
License.

  
## script.js
document.addEventListener('DOMContentLoaded', function() {
    // Smooth scrolling
    const scrollLinks = document.querySelectorAll('a[href^="#"]');
    scrollLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId) {
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            }
        });
    });

    // Responsive navigation toggle
    const menuToggle = document.querySelector('.menu-toggle');
    const nav = document.querySelector('nav ul');

    menuToggle.addEventListener('click', function() {
        nav.classList.toggle('active');
    });
});


## style.css
/* Reset styles */
body, h1, h2, h3, p, ul, li, form, input, textarea, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* General styles */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header styles */
header {
    background-color: #0000FF;
    color: #ffffff;
    padding: 20px 0;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    width: 100px;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li:last-child {
    margin-right: 0;
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1em;
}

/* Hero section styles */
.hero {
    background-image: url('https://i.postimg.cc/SxKPRG1v/Green-Road-Motivation-Quote-Facebook-Post-1.png');
    background-size: cover;
    background-position: center;
    color: #ffffff;
    text-align: center;
    padding: 200px 0;
}

.hero .container {
    position: relative;
}

.hero h1 {
    font-size: 3em;
    margin-bottom: 20px;
}

.cta-btn {
    padding: 15px 30px;
    background-color: #ffd700;
    color: #121212;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
    text-decoration: none;
}

/* About section styles */
.about {
    background-color: #FFA500;
    padding: 100px 0;
}

.about h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
}

.testimonials {
    margin-top: 30px;
}

.testimonial p {
    font-style: italic;
}

/* Services section styles */
.services {
    background-color: #00FF00;
    padding: 100px 0;
}

.services h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
}

.service {
    text-align: center;
    margin-bottom: 30px;
}

.service img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Portfolio section styles */
.portfolio {
    background-color: #FFA500;
    padding: 100px 0;
}

.portfolio h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
}

.project {
    text-align: center;
    margin-bottom: 30px;
}

.project img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Contact section styles */
.contact {
    background-color: #121212;
    color: #ffffff;
    padding: 100px 0;
}

.contact h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
}

.contact-info p {
    margin-bottom: 20px;
}

.contact form input,
.contact form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px;
}

.contact form textarea {
    height: 150px;
}

.contact form .submit-btn {
    padding: 15px 30px;
    background-color: #ffd700;
    color: #121212;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
    cursor: pointer;
}

/* Footer section styles */
footer {
    background-color: #FFFF00;
    color: #121212;
    padding: 50px 0;
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-content {
    display: flex;
    align-items: center;
}

.social-link {
    color: #ffffff;
    font-size: 1.5em;
    margin-right: 10px;
    text-decoration: none;
}

.footer-info ul {
    list-style-type: none;
}

.footer-info ul li {
    display: inline;
    margin-right: 20px;
}

.footer-info ul li:last-child {
    margin-right: 0;
}
.menu-toggle {
    display: none;
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    nav ul {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .menu-toggle i {
        font-size: 1.5em;
    }

    nav ul.active {
        display: block;
    }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Kiithya Enterprises</title>
	<link rel="stylesheet" href="styles.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-x6V8ZCw8MTlczbItthq9roMOKjFGx9L+UcU7bVwqDjXvyafPmGuXBMvsxq2QZI95qY3NCl/DgeXNhVV2+jHW1Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	</head>
	<body>
	<header>
	<div class="container">
	<div class="logo">
	<img src="https://i.postimg.cc/28gS279L/Vintage-Retro-Construction-Industry-Badge-Logo-1.png" alt="Kiithya Enterprises">
	</div>
	<nav>
	<ul>
	<li><a href="#about">About Us</a></li>
	<li><a href="#services">Services</a></li>
	<li><a href="#portfolio">Portfolio</a></li>
	<li><a href="#contact">Contact Us</a></li>
	</ul>
	</nav>
	<div class="menu-toggle"><i class="fas fa-bars"></i></div>
	</div>
	</header>

	<section class="hero">
	<div class="overlay"></div>
	<div class="container">
	<h1>Building Better Futures, One Project at a Time</h1>
	<a href="#about" class="cta-btn">Learn More</a>
	</div>
	</section>

	<section id="about" class="about">
	<div class="container">
	<h2>About Us</h2>
	<p>Kiithya Enterprises is committed to delivering high-quality road works, construction, supply, and delivery services. With a focus on quality, reliability, and innovation, we strive to exceed client expectations in every project.</p>
	<div class="testimonials">
	<h3>Testimonials</h3>
	<div class="testimonial">
	<p>"Kiithya Enterprises provided exceptional service and attention to detail. We are highly satisfied with the results of our project."</p>
	<p>- John Doe, CEO</p>
	</div>
	</div>
	</div>
	</section>

	<section id="services" class="services">
	<div class="container">
	<h2>Our Services</h2>
	<div class="service">
	<img src="https://i.postimg.cc/28n7TRps/roadworks.jpg" alt="Road Works">
	<h3>Road Works</h3>
	<p>We specialize in road construction and maintenance, ensuring safe and reliable transportation infrastructure.</p>
	</div>
	<div class="service">
	<img src="https://i.postimg.cc/NMWR7bdG/construction.jpg" alt="Construction">
	<h3>Construction</h3>
	<p>From residential buildings to commercial complexes, we offer comprehensive construction services for all types of projects.</p>
	</div>
	<div class="service">
	<img src="https://i.postimg.cc/tTVxTWpK/supply-delivery.jpg" alt="Supply and Delivery">
	<h3>Supply and Delivery</h3>
	<p>We provide high-quality materials and efficient delivery services to support construction projects of any scale.</p>
	</div>
	</div>
	</section>

	<section id="portfolio" class="portfolio">
	<div class="container">
	<h2>Our Portfolio</h2>
	<div class="project">
	<img src="https://i.postimg.cc/qByKHsmn/project1.jpg" alt="Project 1">
	<h3>Urban Town Development Projects</h3>
	<p>In our "Urban Town" project, we specialize in the development of dynamic and sustainable urban communities that enrich the lives of residents and contribute to the vibrancy of cities. With a focus on innovative urban planning and design, we offer a diverse portfolio of projects ranging from residential complexes and mixed-use developments to commercial districts and urban renewal initiatives. Our team is dedicated to creating inclusive spaces that prioritize pedestrian-friendly environments, green infrastructure, and access to essential services and amenities. By integrating smart growth principles, environmental sustainability, and community engagement into every project, we strive to build thriving urban environments that foster social cohesion, economic prosperity, and a high quality of life for all residents. Explore our past projects to see how we're shaping the future of urban living.</p>
	</div>
	<div class="project">
	<img src="https://i.postimg.cc/R02WjhKX/project2.jpg" alt="Project 2">
	<h3> 100km World Bank Road Works Project</h3>
	<p>In our "Road Work" project, we pride ourselves on being a premier provider of comprehensive road infrastructure solutions. With a dedicated focus on excellence and efficiency, we specialize in a wide range of road construction projects, including highways, bridges, urban roads, and rural infrastructure development. Our team of experienced professionals excels in every phase of road work, from meticulous planning and innovative design to precise engineering and meticulous construction. Utilizing state-of-the-art equipment, cutting-edge technology, and sustainable practices, we ensure that every project is completed to the highest standards of quality, safety, and environmental responsibility. Whether it's building new roads, repairing existing infrastructure, or maintaining thoroughfares, we are committed to delivering superior results that enhance connectivity, mobility, and prosperity for communities across the region.</p>
	</div>
	<div class="project">
	<img src="https://i.postimg.cc/zBmfxMYQ/project3.jpg" alt="Project 3">
	<h3>Supply Chain</h3>
	<p>Our company,Kiithya Enterprises, is a leading provider of supply chain solutions dedicated to streamlining operations and maximizing efficiency for our clients. With a focus on innovation and reliability, we offer a comprehensive suite of services encompassing sourcing, procurement, production, logistics, distribution, and technology integration. Leveraging cutting-edge technologies and industry expertise, we tailor solutions to meet the unique needs of each client, driving down costs, reducing lead times, and enhancing overall performance. Our commitment to excellence is underscored by our track record of delivering tangible results and our dedication to continuous improvement. Partner with us to optimize your supply chain and unlock new opportunities for growth and success..</p>
	</div>
	</div>
	</section>

	<section id="contact" class="contact">
	<div class="container">
	<h2>Contact Us</h2>
	<div class="contact-info">
	<p><strong>Address:</strong> P.O Box 01100-529 Kajiado Kenya, Kajiado County, Kajiado Town, Nairobi KE</p>
	<p><strong>Phone:</strong> +254 722525316</p>
	<p><strong>Email:</strong> kelvinmwanzia15@gmail.com</p>
	</div>
	<form action="#" method="POST">
	<input type="text" name="name" placeholder="Your Name" required>
	<input type="email" name="email" placeholder="Your Email" required>
	<textarea name="message" placeholder="Your Message" required></textarea>
	<button type="submit" class="submit-btn">Send Message</button>
	</form>
	</div>
	</section>

	<footer>
	<div class="container">
	<div class="footer-content">
	<div class="logo">
	<img src="https://i.postimg.cc/28gS279L/Vintage-Retro-Construction-Industry-Badge-Logo-1.png" alt="Kiithya Enterprises">
	</div>
	<div class="social-links">
	<a href="#" class="social-link"><i class="fab fa-facebook"></i></a>
	<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
	<a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
	</div>
	</div>
	<div class="footer-info">
	<p>© 2020 Kiithya Enterprises. All rights reserved.</p>
	<ul>
	<li><a href="#">Privacy Policy</a></li>
	<li><a href="#">Terms of Service</a></li>
	</ul>
	</div>
	</div>
	</footer>

	<script src="script.js"></script>
	</body>
	</html>
	document.addEventListener('DOMContentLoaded', function() {
	// Smooth scrolling
	const scrollLinks = document.querySelectorAll('a[href^="#"]');
	scrollLinks.forEach(link => {
	link.addEventListener('click', function(e) {
	e.preventDefault();
	const targetId = this.getAttribute('href');
	if (targetId) {
	const targetElement = document.querySelector(targetId);
	if (targetElement) {
	targetElement.scrollIntoView({
	behavior: 'smooth',
	block: 'start'
	});
	}
	}
	});
	});

	// Responsive navigation toggle
	const menuToggle = document.querySelector('.menu-toggle');
	const nav = document.querySelector('nav ul');

	menuToggle.addEventListener('click', function() {
	nav.classList.toggle('active');
	});
	});
	/* Reset styles */
	body, h1, h2, h3, p, ul, li, form, input, textarea, button {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: Arial, sans-serif;
	}

	/* General styles */
	.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	}

	/* Header styles */
	header {
	background-color: #0000FF;
	color: #ffffff;
	padding: 20px 0;
	}

	header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.logo img {
	width: 100px;
	}

	nav ul {
	list-style-type: none;
	}

	nav ul li {
	display: inline;
	margin-right: 20px;
	}

	nav ul li:last-child {
	margin-right: 0;
	}

	nav ul li a {
	color: #ffffff;
	text-decoration: none;
	font-size: 1.1em;
	}

	/* Hero section styles */
	.hero {
	background-image: url('https://i.postimg.cc/SxKPRG1v/Green-Road-Motivation-Quote-Facebook-Post-1.png');
	background-size: cover;
	background-position: center;
	color: #ffffff;
	text-align: center;
	padding: 200px 0;
	}

	.hero .container {
	position: relative;
	}

	.hero h1 {
	font-size: 3em;
	margin-bottom: 20px;
	}

	.cta-btn {
	padding: 15px 30px;
	background-color: #ffd700;
	color: #121212;
	border: none;
	border-radius: 5px;
	font-size: 1.2em;
	text-decoration: none;
	}

	/* About section styles */
	.about {
	background-color: #FFA500;
	padding: 100px 0;
	}

	.about h2 {
	font-size: 2.5em;
	margin-bottom: 30px;
	}

	.testimonials {
	margin-top: 30px;
	}

	.testimonial p {
	font-style: italic;
	}

	/* Services section styles */
	.services {
	background-color: #00FF00;
	padding: 100px 0;
	}

	.services h2 {
	font-size: 2.5em;
	margin-bottom: 30px;
	}

	.service {
	text-align: center;
	margin-bottom: 30px;
	}

	.service img {
	width: 100%;
	border-radius: 5px;
	margin-bottom: 20px;
	}

	/* Portfolio section styles */
	.portfolio {
	background-color: #FFA500;
	padding: 100px 0;
	}

	.portfolio h2 {
	font-size: 2.5em;
	margin-bottom: 30px;
	}

	.project {
	text-align: center;
	margin-bottom: 30px;
	}

	.project img {
	width: 100%;
	border-radius: 5px;
	margin-bottom: 20px;
	}

	/* Contact section styles */
	.contact {
	background-color: #121212;
	color: #ffffff;
	padding: 100px 0;
	}

	.contact h2 {
	font-size: 2.5em;
	margin-bottom: 30px;
	}

	.contact-info p {
	margin-bottom: 20px;
	}

	.contact form input,
	.contact form textarea {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: none;
	border-radius: 5px;
	}

	.contact form textarea {
	height: 150px;
	}

	.contact form .submit-btn {
	padding: 15px 30px;
	background-color: #ffd700;
	color: #121212;
	border: none;
	border-radius: 5px;
	font-size: 1.2em;
	cursor: pointer;
	}

	/* Footer section styles */
	footer {
	background-color: #FFFF00;
	color: #121212;
	padding: 50px 0;
	}

	footer .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.footer-content {
	display: flex;
	align-items: center;
	}

	.social-link {
	color: #ffffff;
	font-size: 1.5em;
	margin-right: 10px;
	text-decoration: none;
	}

	.footer-info ul {
	list-style-type: none;
	}

	.footer-info ul li {
	display: inline;
	margin-right: 20px;
	}

	.footer-info ul li:last-child {
	margin-right: 0;
	}
	.menu-toggle {
	display: none;
	cursor: pointer;
	}

	@media only screen and (max-width: 768px) {
	nav ul {
	display: none;
	}

	.menu-toggle {
	display: block;
	}

	.menu-toggle i {
	font-size: 1.5em;
	}

	nav ul.active {
	display: block;
	}
	}