HTML/CSS Mini Project 1 - 404Market

404Market was a short-lived startup that allowed people to purchase things that didn't exist yet.

Your goal for this exercise is to implement the landing page in HTML and CSS based on an image of the page from the designer.

You should use SASS for your CSS and try to make your stylesheets DRY and organized. Don't use bootstrap for this project, and try to limit how often you copy and paste styles from other places on the Internet. Code as much as you can on your own!

Here's the landing page:

Here are some specifications:

  • The page should look as close to the designer's image as possible.
  • The $5, $10, etc. links (<a>) should be styled with background gradients that invert when the link is pressed.
  • The "..other" field should be a text input that submits when the user clicks on the (->) arrow button.
  • "Software" and "Phone Apps" should both be links.
  • Don't create the gradient effect on the blue/gray "slab". Just use the image below as a tiled background.
  • Don't worry about the gradient effects on the "Make your own" button or the "sign up/log in" buttons.
  • Use Font Awesome for the arrows/circles.
  • For the page background image, use the image below tiled as the background and use a gradient to fade it out. Look here for an example.
  • The list on the right hand side should be an unordered list with custom bullet images using the image below.
  • Don't worry about responsive design. Your only goal is to make it look correct in a full-size browser.

Since we are just mocking up the design, all <a> tags should have href="#".

Here are the images you'll need. To download them, right-click and choose "Save Link As...".

We put together some guides for participants in our workshops. Feel free to use them. If you see any errors, please submit an issue on our github repository.