mahuntington
/
css-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '959769eefe'
${ noResults }
css-notes/4. Advanced Inline Layout/student_labs
History
Matt Huntington 0ca1c9fe59
lectures/labs 		9 years ago
..
.gitkeep lectures/labs 9 years ago
README.md lectures/labs 9 years ago
mockup.jpg lectures/labs 9 years ago

README.md

Lab

Create This Mockup With Only display:block; Elements

Mockup

  1. DO NOT USE display:inline-block; OR display:inline; AT ALL. USE ONLY display:block; AND FLOATS. Every element on the page must be have display:block assigned to it.
  2. Use overflow:auto; and clear:left;/clear:right;/clear:both; to clear any unnecessary floating problems.
  3. You do not have to use the exact photography in this mockup. Feel free to find your own
  4. Do not worry about matching the fonts
  5. For the "GET IN TOUCH" section, do not worry about creating form elements for name, email, subject, message, send. Just use standard elements that we've learned about (maybe divs?) and style them appropriately.
  6. You won't get it all done. See how far you can get.

Stretch:

  1. Research form elements and add them in to match the mockup
  2. Research fonts and find something that matches closely to the mockup
  3. Finish the entire mockup!