Fastenate

fastenate

<h1>Fastenate</h1>

<ul>
  <li>Study the EASYMODE Layouts provided. Be sure you are viewing them at Actual Size.</li>
  <li>Start up a server for your project.</li>
  <li>Write the Markup for the layout in index.html. unformatted_text.txt has been provided for you so you don't have to type it in.</li>
  <li>Create an external stylesheet in the styles directory. Link to the stylesheet in your index.html</li>
  <li>Add a CSS Reset and CSS Clearfix to your styles.</li>
  <li>Import the Google fonts used in the layout:
  <br /><b>Oswald Regular, Lato Regular</b></li>
  <li>Add the viewport meta tag to the head of your markup to make sure your styles are preserved for all media sizes:
  <br />
<pre>
<meta name="viewport" content="width=device-width, initial-scale=1"></li>
</pre>
  <li>Style the responsive layouts, keeping in mind each media query range:
    <br />769px and up
    <br />481px to 768px
    <br />480px and down</li>
  <li>Don't forget to style 'hover' styles.</li>
  <li>Advanced Mode:
    <ul>
      <li>add fancy animations</li>
      <li>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)</li>
      <li>ask for HARDMODE to do layout version 2. (make this a new branch).</li>
    </ul>
  </li>
</ul>