Study the EASYMODE Layouts provided located inside the easymode/ directory of this project. Be sure you are viewing the images at Actual Size (100%) e.g. not zoomed in (> 100%) or out (<100%).
After forking and cloning this repository, navigate to it in your Command-Line and run a server with the http-server command.
Commit often, you may create additional feature branches and use them for practice but it's not mandatory. Do commit often!
- Write the Markup for the layout in index.html. A file has been provided to you with copy-text, look inside the
unformatted_text.txtfile for the text. - Create an external stylesheet in the styles directory. Link to the stylesheet in your index.html
- Add a CSS Reset and CSS Clearfix to your styles.
- Import the Google fonts used in the layout: Oswald Regular, Lato Regular
- Add the viewport meta tag to the head of your markup to make sure your styles are preserved for all media sizes:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Style the responsive layouts, keeping in mind each media query range:
- 769px and up
- 481px to 768px
- 480px and down
- Don't forget to style 'hover' styles.
- Add fancy animations with CSS3 properties
- http://css3.bradshawenterprises.com/transitions/
- http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ (click 'view demo' for the demo!)
- http://tympanus.net/codrops/2013/08/06/creative-link-effects/ (click 'view demo' for the demo!)
- add a dropdown nav as a child element of one of the main nag items. Style it at different media queries (you need non-hover versions for tablet and mobile sizes)
to do layout version 2. (make this a new branch).