06 - CSS : box model

Download Raw Clone


  1. index2.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Find the precious!</title>
  7. <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. <nav>
  11. <ul>
  12. <li>FindThePrecious.com</li>
  13. <li>Fellows</li>
  14. <li>Contact us</li>
  15. </ul>
  16. </nav>
  17. <section>
  18. <div class="carousel"></div>
  19. </section>
  20. <section>
  21. <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
  22. </section>
  23. <section>
  24. <article></article>
  25. <article></article>
  26. <article></article>
  27. </section>
  28. <form>
  29. <h2>Contact us</h2>
  30. <input type="email" placeholder="@">
  31. <input type="text" placeholder="&#8962;">
  32. <input type="text" placeholder="I have seen one of them">
  33. <textarea placeholder="Your message"></textarea>
  34. </form>
  35. </body>
  36. </html>
  37. style2.css
  38. body{
  39. font-family: 'Verdana', sans-serif;
  40. color: #5d5d5d;
  41. }
  42. nav{
  43. background-color: #5d5d5d;
  44. color: #f7f7f7;
  45. }
  46. ul{
  47. padding: 0 5px;
  48. margin: 0;
  49. }
  50. article{
  51. background-color: #f7f7f7;
  52. display: inline-block;
  53. height: 200px;
  54. width: 200px;
  55. margin: 5px;
  56. }
  57. hr{
  58. color: #5d5d5d;
  59. }
  60. input, textarea{
  61. display: inline-block;
  62. margin: 5px 10%;
  63. width: 75%;
  64. }
  65. /*classes*/
  66. .ul-title, .ul-fellows, .ul-contact{
  67. display: inline-block;
  68. padding: 5px;
  69. margin: 0;
  70. vertical-align: middle;
  71. }
  72. .ul-fellows{
  73. background-color: #f7f7f7;
  74. color: #5d5d5d;
  75. }
  76. .carousel{
  77. background-color: #f7f7f7;
  78. height: 200px;
  79. margin: 0;
  80. }
  81. .fellows-title{
  82. text-align: center;
  83. padding: 40px 0;
  84. }
  85. .fellows{
  86. margin-bottom: 100px;
  87. text-align: center;
  88. }

Raw paste data: