Scribd
Upload
6 views6 pages

landing page code

The document contains the HTML and CSS code for a company landing page for TechnoHacks Edutech, focusing on empowering education through technology. It includes sections for services, about the company, and contact information, along with styling for a visually appealing layout. The design features a dark color scheme with light cream accents and interactive elements for navigation and calls to action.

Uploaded by

Khan Mansafa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views6 pages

landing page code

The document contains the HTML and CSS code for a company landing page for TechnoHacks Edutech, focusing on empowering education through technology. It includes sections for services, about the company, and contact information, along with styling for a visually appealing layout. The design features a dark color scheme with light cream accents and interactive elements for navigation and calls to action.

Uploaded by

Khan Mansafa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

CODE: Company Landing page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechnoHacks Edutech</title>
<link href="landingPg.css" rel="stylesheet"> <!-- Ensure this file exists -->
</head>
<body>
<header>
<div class="container">
<h1><i class="fas fa-laptop-code"></i> TechnoHacks Edutech</h1>
<nav class="nav__bar">
<ul>
<li><a class="nav__links" href="#services">Services</a></li>
<li><a class="nav__links" href="#about">About Us</a></li>
<li><a class="nav__links" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<h2>Empowering Education Through Technology</h2>
<p>At TechnoHacks Edutech, we provide innovative solutions to enhance learning experiences
and improve educational outcomes.</p>
<a class="cta-button" href="#contact">Get Started</a>
</section>
<section id="services">
<h2><i class="fas fa-cogs"></i> Our Services</h2>
<ul class="services-list">
<li><i class="fas fa-chalkboard-teacher"></i> Online Learning Platforms</li>
<li><i class="fas fa-toolbox"></i> Interactive Educational Tools</li>
<li><i class="fas fa-book-open"></i> Customized Curriculum Development</li>
<li><i class="fas fa-user-graduate"></i> Teacher Training Programs</li>
</ul>
</section>
<section id="about">
<h2><i class="fas fa-info-circle"></i> About Us</h2>
<p>TechnoHacks Edutech is dedicated to transforming education through technology. Our mission
is to make learning accessible and engaging for everyone, leveraging the latest advancements in
educational technology.</p>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2023 TechnoHacks Edutech | <a class="email-link"
href="mailto:info@technohacks.com">info@technohacks.com</a></p>
<p>Follow us on <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-
facebook"></i></a> <a href="#"><i class="fab fa-linkedin"></i></a></p>
</div>
</footer>

</body>
</html>
CODE: Company Landing page CSS Styling

/* landingPg.css */

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #f5f3f2; /* Light cream */
color: #333; /* Dark color for text */
}

.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}

header {
background: #2c2c2c; /* Dark color */
color: #f5f3f2; /* Light cream */
padding: 20px 0;
}

.nav__bar ul {
list-style: none;
padding: 0;
display: flex;
justify-content: space-around;
}

.nav__links {
color: #f5f3f2; /* Light cream */
text-decoration: none;
padding: 10px;
transition: color 0.3s;
}

.nav__links:hover {
color: #c04000; /* Light maroon */
}

.hero {
text-align: center;
padding: 60px 0;
background: #d9c8b4; /* Light maroon/cream mix */
}

.cta-button {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background: #2c2c2c; /* Dark */
color: #f5f3f2; /* Light cream */
text-decoration: none;
border-radius: 5px;
transition: background 0.3s;
}

.cta-button:hover {
background: #c04000; /* Light maroon */
}

section {
margin: 40px 0;
}

footer {
background: #2c2c2c; /* Dark */
color: #f5f3f2; /* Light cream */
text-align: center;
padding: 10px 0;
position: relative;
}

footer a {
color: #c04000; /* Light maroon */
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}
.services-list li {
margin: 10px 0;
display: flex;
align-items: center;
}

.services-list li i {
margin-right: 10px;
color: #c04000; /* Light maroon */
}

You might also like