it404 project

The solution must be unique

Please adhere to the instructions mentioned

Also, there should be an introduction to the idea in the Word, PowerPoint, and PowerPoint files :”Motivation ” And to put some of the sites and what they did and explain ,

– Feature for the website

– Data basne using in the website

– output and input for the website

College of Computing and Informatics
Web Design
IT404
Project
Deadline: Thursday 30/11/2023 @ 23:59
[Total Mark is 14]
Student Details:
CRN:
Name:
Name:
Name:
ID:
ID:
ID:
Instructions:
• You must submit two separate copies (one Word file and one PDF file) using the Assignment Template on
Blackboard via the allocated folder. These files must not be in compressed format.
• It is your responsibility to check and make sure that you have uploaded both the correct files.
• Zero mark will be given if you try to bypass the SafeAssign (e.g. misspell words, remove spaces between
words, hide characters, use different character sets, convert text into image or languages other than English
or any kind of manipulation).
• Email submission will not be accepted.
• You are advised to make your work clear and well-presented. This includes filling your information on the cover
page.
• You must use this template, failing which will result in zero mark.
• You MUST show all your work, and text must not be converted into an image, unless specified otherwise by
the question.
• Late submission will result in ZERO mark.
• The work should be your own, copying from students or other resources will result in ZERO mark.
• Use Times New Roman font for all your answers.
Project Instructions
Pg. 01
Project Instructions
•
The work on this project must be performed by a group (minimum 2 and
maximum 3 students).
•
Each group leader must send an email with the team member’s details (name &
id) on 07/10/2023 (midnight).
•
Note each group needs to be approved by your instructor.
•
The work should be your own; copying from students or other resources will
result in ZERO marks.
•
This project is worth 14 marks and will be distributed as in the following:
1. Part 1 – Implementation Part (10 points)
2. Part 2 – Presentation part (4 points)
Project Overview:
For this particular project, your primary objective is to develop a
website that is based on a particular idea of your choice. Your
website must incorporate all the fundamental aspects of the course,
including HTML, CSS, and JavaScript. It is essential to ensure that
your website covers all the crucial elements of these programming
languages to achieve optimal functionality and performance.
Overall, the success of your project depends on how well you can
execute the design and development of your website. It is highly
recommended that you allocate sufficient time to plan and execute
the project to the best of your abilities.
Project Instructions
Pg. 02
Project Requirements:
1. The number of Web pages must be at least 5, inclusive of the main
page.
2. Use the same theme across the website.
3. Use correct HTML syntax.
4. The students must use following HTML elements:
• Paragraph
• Headings
• Figures
• Sections
• Navigation
• Tables
• Headers/Footers
• Inline elements
• Lists
• Links
• Images (Inline and
Background)
• Iframe
• Form
• CSS
• JavaScript
Marking Criteria for the Project
Report Completeness and documentation
The Web pages contain the elements specified in the
project.
Navigation (Links are clear and located in the same
area on each page. All links are functional)
All elements are in the proper syntax with consistent
alignment, proximity, repetition, and contras.
/1
/1
/1.5
/1
All codes are neat and organized in a proper way
/1
The website clearly demonstrates (using CSS) design
principles with consistent alignment, proximity,
repetition, and contras.
/2
Proper use of JavaScript.
User-friendly website: optimized for all devices such
as desktops, tablets, and mobile phones
Project presentation and demonstration
/1
/1.5
/4
Project Instructions
Pg. 03
Total
/14
Project Instructions
Pg. 04
Each group has to prepare and submit
1. IT404_Project.docx:
The group must use the same file
(IT404_Project.docx) to prepare his answer.
2. IT404_Project.pdf
Prepare a PDF version of this file
(IT404_Project.pdf).
3. IT404_Project.zip:
Contains all the files of the project (HTML files, images, sounds,
animations…etc).
Project Instructions
Pg. 05
index.html
Page Title
Home
Price
product
Contact us
About us
History of the store:
Everything store was founded by Amancio Ortega and Rosalía Mera in
1975 as a family business in downtown Galicia in the northern part of
Spain. Its first store featured low-priced lookalike products of
popular, higher-end clothing and fashion. Amancio Ortega named Zara as
such because his preferred name Zorba was already taken.
Project Instructions
Pg. 06
contact.html.
Page Title
Home
Price
product
Contact us
About us
Hi visit this exciting store Fast….
VISIT the store at
Address: H-22,Washington street,New York
Contact to book order:156728900
Project Instructions
Pg. 07
aboutus.html
Page Title
Home
Price
product
Contact us
About us
About Us
This website is about the various items available in the
beautiful shop. The customers can check the list of items present in
the store along with the price and discount available. It will help
the customers to visualize the product before visiting the store.
Project Instructions
Pg. 08
price.html
Page Title
Home
Price
product
Contact us
About us
Price and products
Items
Type
Price
Shoes
Puma Spikeless Ladies shoes
$39
Sunglasses
Tommy Hilfiger
$50
Wallet
Woodland
$39
Available items
Sunglasses
Wallets
Project Instructions
Pg. 09
Not available items
Long boots
Project Instructions
Pg. 10
products.html
Page Title
Home
Price
product
Contact us
About us
This beautiful sunglasses cost only 50 dollar to you.
It is available in different shades like sky-blue,sunny,lavish
pink.
It is available in small size.
It’s lens made up of polycarbonate material.
This comfortable shoes is the best choice for any women and cost
only 39 dollars.
It provides great comfort and stylish look.
Best choice for everyday uses
It is made up of light weight material.
Anywhere yo go need the wallet to keep the money safe.
It is easy to carry ,affordable and available in black
,brown,purple colour.
Project Instructions
Pg. 11
Project Instructions
Pg. 12
CSS
Index.html
Page Title
* {
box-sizing: border-box;
}
/* This is used to Style the body section */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.header {
padding: 50px;
text-align: center;
background: #1abc9c;
color: white;
}
/*To icrease the font size of particular heading */
.header h1 {
font-size: 40px;
}
/* It is used to navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
}
/*To Style bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 20px 20px;
text-decoration: none;
}
.navbar a.right {
float: right;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* container */
.row {
display: -ms-flexbox; /* IE10 */
Project Instructions
Pg. 13
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/*To style the Footer */
.footer {
padding: 19px;
text-align: center;
background: #ddd;
}
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Everything Store
It has everything you need.
Home
Price & product
Contact us
Send Message
About Us
Project Instructions
Pg. 14
This website is about the various items available in the
beautiful shop. The customers can check the list of items present in
the store along with the price and discount available. It will help
the customers to visualize the product before visiting the store.
History of the store:
This store was created by beautiful couple John & Julie in 1987 to
provide all the basic accessories of daily use in one place at the
best price.
Connect with us on t..C@twitter.com
Project Instructions
Pg. 15
Java Script
Contact us form validation Using Javascript
function validate(){
var name = document.getElementById(“name”).value;
var subject = document.getElementById(“subject”).value;
var phone = document.getElementById(“phone”).value;
var email = document.getElementById(“email”).value;
var message = document.getElementById(“message”).value;
var error_message = document.getElementById(“error_message”);
error_message.style.padding = “10px”;
var text;
if(name.length < 5){ text = "Please Enter valid Name"; error_message.innerHTML = text; return false; } if(subject.length < 10){ text = "Please Enter Correct Subject"; error_message.innerHTML = text; return false; } if(isNaN(phone) || phone.length != 10){ text = "Please Enter valid Phone Number"; error_message.innerHTML = text; return false; } if(email.indexOf("@") == -1 || email.length < 6){ text = "Please Enter valid Email"; error_message.innerHTML = text; return false; } if(message.length