In CSS code:
The purpose of this assignment is to familiarize you with the use of forms. You will develop an html document which contains a form to sell something (yo choice) and must have the following layout properties. You may use your own images and options labels but the geometry/layout of the page, the borders ar colors must be the same as shown below. The colors do not need to be exact but they must be close. Put a Page Title Here Place some text here It has to be centered and span the whole width. Try to put it in a frame just like this with a red border and a light purple background. Make it something general about your website. Item name Item description goes here... Price: $$ Option 1 Option2 Option3 Add this item to cart Shipping Information: Should we put you on our mailing list? Yes No Message or any particular instructions: Notes: (not part of the document; what you must recreate is what is contained in the blue-bordered box with the blue border included) Use comment tags to insert your name in the html document. Also, use other comments as needed in the document. You must use a "hidden" input with attributes 'name=lastname' and 'value=-your-actual-name' Try to recreate the above layout as closely as you can. The form should submit to the handler: action = "http://ck.csit.selu.edu/ ck/cgi-bin/formhandler.pl" This handler will simply tell you what you have submitted to the server. try it to make sure it works There are three items and each is within a box and has options (you need at least two options for each). The first implements options with Radio buttons, the second with a drop-down list and the third with checkboxes. Text and textboxes should maintain their relative positions when the user changes the default font of the browser. If you do not use tables or CSS for positioning, and the default font size becomes large, the textboxes will wrap to the next line; so make sure to prevent that. The shipping information section is centered but the message section below that is left justified. The textboxes within the shipping info block are aligned in a specific way. The text is aligned right and the textboxes are stacked precisely. This should not change as the browser window varies. At the bottom of the page, the message textarea with its text label and the submit button are left justified, not centered. In all of the product blocks, the elements to the right of the picture are centered as a whole within the block, and any options are stacked and justified precisely. For the first product block in particular, the second radio is pre-selected (although the user should be able to change the selection). The white background of the radio buttons is an artifact of making this arrangement so ignore it. The text of the options should be vertically aligned with the radios. Fonts and colors of fonts (not backgrounds) do not need to be any particular ones; you can pick your own, however, what is bold or italics must be recreated as bold and italics, and any colors different than standard black must also be some colors of your choice (but not necessarily the same as above). Background colors for the various areas must be close to what is shown here. The images are provided along with the assignment narrative. You may use your own images if you like (as long as they are appropriate for public use and viewing - works may be viewed by reviewers or used as examples). Make sure that the images can be accessed correctly even if your html file is moved to different directories. So, place them on the class server or any other server you may have access to, and use absolute URLs so that they are still visible even if your html file is moved. Or, you may include them with your html file in a zipped archive. If you would like to add anything of your own for artistic style feel free to do so (as long as it is ok for reviewer or public viewing). You may use straight HTML or you may use CSS as you like, this is up to you. But I need you to achieve the layout/geometry shown above and include the info shown
