UCI 201: Internet and WWW
Individual Assignment
PRACTICAL ASSIGNMENT
Develop a web site using HTML code for a business firm selling goods. In the site
developed, it should detailed the following;
Name of the company and its contacts
Company profiles
Areas of services offered
Personnel profile.
Note: Use colors, graphics, video, text to enhance the appearance of your site.
Submision:
Print list of group members, HTML codes used, the screen shot for various
windows
Group Members:
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Whitestar Trade & Supplies</title>
<style>
/* Basic styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
color: #333;
header {
background-color: #164b60;
color: white;
text-align: center;
padding: 20px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #164b60;
text-align: center;
nav ul li {
display: inline;
padding: 10px 15px;
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
section {
padding: 20px;
}
footer {
background-color: #164b60;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
.profile-photo,
.video-content {
display: block;
margin: 0 auto;
width: 100%;
height: 480px;
h2 {
color: #164b60;
/* Container layout */
.container {
max-width: 1000px;
margin: auto;
</style>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Whitestar Trade & Supplies</h1>
<p>Your Trusted Partner in Quality Goods</p>
</header>
<!-- Navigation Menu -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#company-profile">Company Profile</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#team">Our Team</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
<!-- Home Section -->
<section id="home" class="container">
<h2>Welcome to Whitestar Trade & Supplies</h2>
<p>
At Whitestar Trade & Supplies, we are committed to providing
high-quality products to meet your needs. With a wide range of goods and
a dedicated team, we ensure that our customers receive only the best in
quality and service.
</p>
<img
src="company.jpg"
alt="Company Building"
class="profile-photo"
width="600"
height="300"
/>
</section>
<!-- Company Profile Section -->
<section id="company-profile" class="container">
<h2>Company Profile</h2>
<p>
Whitestar Trade & Supplies was established in 2005 with the aim of
bridging the gap between quality products and accessibility in the
market. Over the years, we have expanded our product range and built a
network that ensures timely and efficient distribution across the
region.
</p>
<p>
Our core values include integrity, quality, and customer satisfaction,
which have been the pillars of our success and growth in the industry.
</p>
</section>
<!-- Services Section -->
<section id="services" class="container">
<h2>Our Services</h2>
<ul>
<li>Product Sourcing and Distribution</li>
<li>Wholesale and Retail Sales</li>
<li>Logistics and Supply Chain Management</li>
<li>After-sales Support and Customer Service</li>
</ul>
<video class="video-content" width="600" height="400" controls>
<source src="companyVid.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</section>
<!-- Personnel Profile Section -->
<section id="team" class="container">
<h2>Our Team</h2>
<p>
Our team consists of experienced professionals who are dedicated to
ensuring that Whitestar Trade & Supplies delivers top-notch service and
products.
</p>
<!-- Individual Team Member Profiles -->
<div>
<h3>John Doe - CEO</h3>
<p>
John has over 20 years of experience in the industry and has been
instrumental in guiding the company to its current position.
</p>
<img
src="2jpg.jpg"
alt="John Doe"
class="profile-photo"
width="150"
height="150"
/>
</div>
<div>
<h3>Jane Smith - Head of Sales</h3>
<p>
Jane leads our sales department with a focus on client satisfaction
and expanding our customer base.
</p>
<img
src="1.jpg"
alt="Jane Smith"
class="profile-photo"
width="150"
height="150"
/>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="container">
<h2>Contact Us</h2>
<p>
If you have any questions or would like to know more about our products
and services, feel free to reach out to us:
</p>
<p>Address: 123 Business Street, Nairobi, Kenya</p>
<p>Email: [email protected]</p>
<p>Phone: +254-700-123-456</p>
<form action="submit_contact_form.php" method="POST">
<label for="name">Name:</label><br />
<input type="text" id="name" name="name" required /><br />
<label for="email">Email:</label><br />
<input type="email" id="email" name="email" required /><br />
<label for="message">Message:</label><br />
<textarea id="message" name="message" required></textarea><br />
<button type="submit">Submit</button>
</form>
</section>
<!-- Footer -->
<footer>
<p>© 2024 Whitestar Trade & Supplies. All rights reserved.</p>
</footer>
</body>
</html>
Website Link:
SCREENSHOTS:
1. Name of the company and its contacts
2. Company profiles
3. Areas of services offered
4. Personnel profile.
