Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

Assignment 1: Second-Hand Store

DDL: Sunday 17 March 11:59 pm, right before midnight.  No late submission is accepted.

Create a website for a second-hand store using HTML, CSS and Forms, the stuff we covered in class or can be looked up in the W3 Schools site on these three topics.  You cannot use other tools such as frames, Coffee Cup, Vue.js, Dreamweaver, etc.  You are to do this assignment only with your partner and not the help from anyone else.

Requirements

(1) The website contains these pages. The “Second-Hand Store” is home.html.  There are pages for clothes.html, sports.html and squares.html.

(2) At the top of each page, below the black banner is an orange navigation bar.  Clicking on “Home” will go to the home (Second-Hand Store) page. Clicking on “Clothes” will go to the clothes page, etc.

(3) The left side of Home, Clothes and Sports pages contains the link icons.  Clicking on the store icon will go to the home page, and clicking on the clothes icon will go to the clothes page, etc.

Please use a table (2 rows and 2 columns) to hold these link icons.

(4) The right side on the pages contains various text and input controls.  Use the correct input control for the specified inputs.

The right side of home page contains some text and a list.

The right side of the Sports page contains a control to allow the user to select one or more sports equipment and enter the user’s email.  When the Submit button is clicked, the values entered are cleared.  When the “Get info” button is clicked, a pop-up window appears saying, “You bought sports equipment.”

(5) Use HTML and CSS to create the bottom part of UIC Squares page.  The color and location of the squares, and the letters on each square must match that in the figure.  Which square appears in front of other squares must be as indicated in the figure.

You must only use HTML and CSS to create this stack of squares, and not use any image editing tools.  Replace “Jefferson” with your own name.

(6) The style for all the pages should be consistent.  So use a CSS file correctly.  (If there is a change in the common style, we should not need to change the html files individually.)

In all the pages, the banners have the same color and size.  The link icons are the same. The navigation bar is the same. The background color and size of the right side are the same for the Home, Clothes and Sports pages.

(7) The individual images for this assignment is in the images.zip file given in the submission link.

Remarks:

We are only concerned with your website working properly, i.e. all the links are working correctly and all the requirements are satisfied.  We are not concerned with how pretty your website looks.

It is your responsibility to make sure all your files are placed in the correct location.  When viewed from a browser, your webpages should function properly.

Remarks:

Put all your HTML, CSS and image files into one folder.  Rename the folder A1XXXXXX, where XXXXXX contains three random digits and three random letters (each digit and letter can be repeated).  For example, you might choose something like A1N53Z1Z.

It is your responsibility to not let other students know these random digits and letters.  If some other student steals you work and submit it, it will be up to you to prove you didn’t steal their work and you didn’t let the other students copy your work.  Otherwise, both your team and the other team will receive zero points for this assignment.

1. Submit to stuweb:

Put the folder A1XXXXXX in public_html.  Your second-hand store home page should appear in a browser with the submission link stated in the online text in iSpace, e.g.

http://stuweb.uic.edu.cn/yourID/A1XXXXXX/home.html

Of course, replace “yourID” with your actual UIC ID beginning with a letter, and “XXXXXX” be replaced by the 3 random letters and 3 random digits of your chosing.

2. Submit to iSpace:

Zip the folder A1XXXXXX and submit it to the iSpace link for Assignment 1.  In the Online text, enter the correct IP address for this assignment’s home page in stuweb.  Also write down your partner’s name and his or her ID number. See the red arrow below.