In this module, we will create a simple website for a fictional company called "Green Earth Landscaping" that provides landscaping services to homeowners and businesses. We will use HTML, CSS, and JavaScript to build a visually appealing and functional website.
Project Structure
Our website will have the following pages:
- Home (index.html)
- About (about.html)
- Services (services.html)
- Contact (contact.html)
We will also create a separate folder for our CSS styles (styles.css) and JavaScript code (script.js).
Home Page (index.html)
The home page will feature a hero image, a brief introduction to the company, and a call-to-action to encourage visitors to learn more.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>saifosys</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h1>Welcome to Saifosys.com</h1>
<p>We provide beautiful themes, templates, softwares, audio and video footages, books and guides and many more.</p>
<button>Learn More</button>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
About Page (about.html)
The about page will feature a brief history of the company, a mission statement, and a team photo.
<!-- about.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h1>About Us</h1>
<p>We have been providing services for over 10 years.</p>
<p>Our mission is to provide complete IT related products.</p>
<img src="team.jpg" alt="Team Photo">
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Services Page (services.html)
The services page will feature a list of services provided by the company, including lawn care, planting, and hardscaping.
<!-- services.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="services">
<h1>Services</h1>
<ul>
<li>Audio and video</li>
<li>Books and Guides</li>
<li>Softwares and projects</li>
</ul>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Contact Page (contact.html)
The contact page will feature a contact form, address, phone number, and email address.
<!-- contact.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="contact">
<h1>Contact Us</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Send">
</form>
<p>Address: 123 Main St, Anytown, USA</p>
<p>Phone: 555-555-5555</p>
<p>Email: [saifosys@gmail.com](mailto:saifosys@gmail.com)</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Styles.css
Our CSS file will contain styles for our website, including layout, typography, and colors.
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 2em;
}
section {
background-color: #f7f7f7;
padding: 2em;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
margin-bottom: 10px;
}
p {
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-bottom: 10px;
}
input[type="text"], input[type="email"], input[type="tel"] {
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
textarea {
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #555;
}
Script.js
Our JavaScript file will contain code for our website, including functionality for our contact form.
// script.js
const form = document.getElementById('contact-form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
const message = document.getElementById('message').value;
// Form validation
if (name === '' || email === '' || message === '') {
alert('Please fill in all required fields');
return;
}
// Send form data to server
fetch('/contact', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name,
email,
phone,
message
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Reset form fields
form.reset();
});
Conclusion
In this module, we have built a simple website for Green Earth Landscaping using HTML, CSS, and JavaScript. We have created four pages: home, about, services, and contact. We have also added styles and functionality to our website using CSS and JavaScript. Our contact form sends data to a server using the Fetch API.
Note: This is a basic example and you should consider security and validation when building a real-world application.
Welcome to Saifosys.com a place where you can find Books, softwares, themes, templates, and many more..
Features
- Overview
- Design
- Code
- Collaborate
- Sletch Plugin
Get Started
- Forum
- Jobs
- Guides
- Examples
- Docs