1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>FRSH Studio</title>
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="container">
  11.  
  12. <header>
  13. <div id="status">
  14. <a href="#"><img src="img/status.png" alt="Currently available for work" /></a>
  15. </div><!-- end status -->
  16. <nav>
  17. <ul>
  18. <li><a href="#">Work</a></li>
  19. <li><a href="#">Blog</a></li>
  20. <li><a href="#">Services</a></li>
  21. <li><a href="#">About</a></li>
  22. <li><a href="#">Contact</a></li>
  23. </ul>
  24. </nav>
  25. <div id="banner">
  26. <h1><a href="#"><img src="img/banner.png" alt="Return to the homepage" /></a></h1>
  27. </div><!-- end banner -->
  28. <div id="blurb">
  29. <p><span>FRSH</span> is a multidisciplinary creative studio dedicated to making the world a better place one design at a time.</p>
  30. </div><!-- end blurb -->
  31. </header>
  32.  
  33. <div id="services">
  34. <p><span>Services</span></p>
  35. <ul>
  36. <li><h2>Identity and Logo Design</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
  37. <li><h2>Branding</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
  38. <li><h2>Web Design and Development</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
  39. <li><h2>Social Media</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
  40. </ul>
  41. <div class="next">
  42. <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
  43. </div><!-- end next -->
  44. </div><!-- end services -->
  45.  
  46. <div id="recent">
  47. <div id="recent-work">
  48. <p><span>Recent Work</span></p>
  49.  
  50. <div class="next">
  51. <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
  52. </div><!-- end next -->
  53. </div><!-- end recent-work -->
  54. <div id="recent-blog">
  55. <p><span>Recent Blog</span></p>
  56.  
  57. <div class="next">
  58. <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
  59. </div><!-- end next -->
  60. </div><!-- end recent-blog -->
  61. </div><!-- end recent -->
  62.  
  63.  
  64.  
  65. </div><!-- end container -->
  66. </body>
  67. </html>