n today’s Internet-based society, it is imperative that a company have its own W
ID: 3597504 • Letter: N
Question
n today’s Internet-based society, it is imperative that a company have its own Web site. As was noted last week, Week 3 marks the beginning of this module’s group project: the development of a fictitious business’s Web site that includes HTML, JavaScript and PHP. This week also marks your first deliverable for this project, which is centred on HTML and CSS.
Regardless of the fictitious business you have chosen, your Web site must include the following HTML pages:
A home page
An About page
A Products or Services page(s)
A Contact page
As for each page, must include, as a minimum requirement, the following features:
One or more forms that include text boxes and either radio buttons or checkboxes
Menu(s) (not within a form) associated with links to different pages
The use of <div> tags and evidence of the use of the CSS box model
Class selectors
An external CSS file or files containing detailed formatting instructions
Explanation / Answer
Added 5 HTML files and one CSS file. Please find the code for the respective files below. Copy all of them to a folder and open any html file in browser and you can easily navigate through all the html pages.
CSS box model is used in home.html. Form controls are used in contact.html.
assignment_styles.css:
ol {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
home.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assignment_styles.css">
</head>
<body>
<ol>
<li><a class="active" href="#home">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ol>
<h2>Welcome to Home page</h2>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
<p>ABC Car Care Store is a place where technology, people and "car care" converge.
This is where you, a car owner will appreciate the tremendous power of technology and 3M`s great beliefs in human connect.</p><br>
<div>While we pride ourselves in the science that goes into development of each of the products used at a ABC Car Care Store,
it is also our endeavor to ensure that our customers understand our varied range of services with utmost detail.
This could be in the form of what products we use at these stores,
what process we adopt or even the chemistry and the physical science behind what makes 3M products work so well. </div>
</body>
</html>
products.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assignment_styles.css">
</head>
<body>
<ol>
<li><a href="home.html">Home</a></li>
<li><a class="active" href="#products">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ol>
<h2>Products Available:</h2>
<ul>
<li>Audi</li> <br>
<li>BMW</li> <br>
<li>Ford</li> <br>
<li>KIA</li> <br>
<li>Mercedes Benz</li> <br>
</ul>
</body>
</html>
services.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assignment_styles.css">
</head>
<body>
<ol>
<li><a href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a class="active" href="#services">Services</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ol>
<h2>Service offered</h2>
<ul>
<li>Buy a Car</li> <br>
<li>Rent a Car</li> <br>
<li>Car Wash</li> <br>
<li>Car Service</li> <br>
<li>Learn Driving</li> <br>
</ul>
</body>
</html>
contact.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assignment_styles.css">
</head>
<body>
<ol>
<li><a href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a class="active" href="#contact">Contact</a></li>
<li><a href="about.html">About</a></li>
</ol>
<h2>Post your query here..</h2>
<form action="/action_page.php">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="fullname" placeholder="Your full name.."> <br> <br>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your email id.."> <br> <br>
<label for="mobile">Mobile</label>
<input type="phone" id="mobile" name="mobile" placeholder="Your Mobile number.."> <br> <br>
<label for="sex">Gender</label>
<input type="radio" id="sex" name="sex">Male
<input type="radio" id="sex" name="sex">Female <br> <br>
<label for="channel">Perferred Communication channel</label>
<input type="checkbox" name="channel" value="email">Email
<input type="checkbox" name="channel" value="mobile">Mobile<br>
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="india">India</option>
<option value="usa">USA</option>
</select> <br> <br>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write your query here.."></textarea> <br> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>
about.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assignment_styles.css">
</head>
<body>
<ol>
<li><a href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a class="active" href="#about">About</a></li>
</ol>
<h2>Our Offices</h2>
<h4>Kothaguda</h4>
16-8/12, Hitech City Rd, Kothaguda, Hyderabad, Telangana 500081, India
<h4>Nizampet</h4>
Opp. Basham School, Nizampet Rd, Nizampet, Hyderabad, Telangana 500072, India
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.