# Responsive Images and Form

# Directions

• Here is the screenshot of a completed version of the form.
• In your version you will pick your own colour(s) and header image. The Logo image is provided.
• Use a Chrome extension like ColorZilla to extract a two or three colours from your image. Use those colours as the background colour for your button plus the colours for the label and input text. Make sure that the button text and the button background have high contrast.
• Make sure that all inputs, labels, and heading text use the same font.
• Be consistent with your font sizes. Think about the typographic hierarchy.
• Remember to put a text shadow on text that is on top of an image. Use two colours with high contrast. One for the text and one for the shadow.
• You need to complete the form before the end of class.
• Pick an image from this site
• In your CSS add a comment about the source of your image.
• Add a Google font in the @import at the top of the CSS file.
• You can use CSS Grid, or Flexbox for your layout.
• Float should not be used.
• You need to make the form and image responsive. There should be 3 different layouts, just like in the screenshot.
• Due at the end of class.

• SET UP INSTRUCTIONS

  • Start by cloning this repo on to your computer by typing the following in the Terminal (REMEMBER to navigate to where you want the repo created):

  git clone https://github.com/prof3ssorSt3v3/grrbnb.git grrbnb
  

  • Next DELETE the .git folder inside your grrbnb folder either through your file explorer or with the following git commands:

  cd grrbnb
  rm -rf .git
  

  • Then create a Private GitHub Repo called grrbnb on your GitHub account, with NO README.md file.
  • In the GitHub settings for your repo, set your master branch as the gh-pages branch.
  • In your Terminal, you should be inside your grrbnb repo folder and type the following:

  git init
  git add -A
  git commit -m "first files"
  git remote add origin https://github.com/[YOUR USERNAME GOES HERE]/grrbnb.git
  git push -u origin master
  

  • Every time you want to save your changes locally and then upload, use these commands

  git status
  git add -A
  git commit -m "description of your changes"
  git push -u origin master
  

# Submission

• On the Assignment page in BS LMS, submit both the github.io URL and the github.com URL.
• You will need to test the page through GitHub Pages on GitHub.io to see if your CSS works.
• Be sure to invite me to your repo via my Algonquin College Github account (garrarj), otherwise I will not be able to view and mark your repo.

Back to Assignment List