Dimah-Aldossari / W01D05-HW

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Online Store

Create online store withe following requirements:

HTML

  • Create a homepage for your store.
  • Create at least 2 other pages (this could include pages such as “about us”, “meet the team”, “shipping details”, etc).
  • Additionally, your site must have a catalogue page which lists the items which are for sale.
  • Your catalogue page should have at least 5 items for sale (include some details of the item).
  • Within the entirety of your site, you should have the following elements:
    • At least 5 images.
    • At least 3 font sizes (to help differentiate sections).
    • At least 2 external links (maybe to a shipping company, or an email address).
    • At least 1 table.
    • At least 1 list (ordered or unordered, you can choose).
    • At least one submit button form (possibly to simulate a login - don’t worry about the functionality of this yet).
    • At least one radio button form (you could select different kinds of shipping methods to your location).
    • At least one quote/testimonial (this could be from a previous customer or a review).

CSS

  • Within the entirety of your site, you should have the following styling:
    • Use either Grid OR flex or both of them to organize your products
    • At least 3 font styles with different colouring effects.
    • Padding for all images and buttons.
    • Borders for all images and tables.
    • Background colours/images for all pages.
    • All tables must have customised formatting (colours, layout, etc).
    • Center all content, with the exception of multiple row items being equally padded around the centre.
    • All lists must be customised.
    • Apply a colour filter to at least 2 images.

Bonus

  • Clicking on an item should allow the user to see more details about the item, such as a brief description,.specifications and price
  • Animate background colours to change between different variants of colours (a bit of Googling here will help you).
  • Animate item images to expand when hovered over (or clicked on if you prefer).
  • The website should be responsive.

Note: Feel free to reuse any HTML that you have created earlier in this Bootcamp.

About