Advertisement
Guest User

Untitled

a guest
Oct 21st, 2014
188
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.67 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3. <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  4. <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
  5. <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  6. <head>
  7. <meta charset="utf-8">
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. <title></title>
  10. <meta name="description" content="">
  11. <meta name="viewport" content="width=device-width, initial-scale=1">
  12.  
  13. <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  14.  
  15. <link rel="stylesheet" href="css/normalize.css">
  16. <link rel="stylesheet" href="css/main.css">
  17. <script src="js/vendor/modernizr-2.6.2.min.js"></script>
  18. <style>
  19. html, body {
  20. width:100%;
  21. height:100%;
  22. padding:0;
  23. margin:0;
  24. font:Arial, Helvetica, sans-serif;
  25. font-size:1em; /* 13px */
  26. }
  27. aside {
  28. position:fixed;
  29. right:0;
  30. top:0;
  31. height:100%;
  32. width:300px;
  33. background:#666;
  34. }
  35.  
  36. #logo_side {
  37. padding-top:10px;
  38. width:100px;
  39. float:left;
  40. }
  41.  
  42. #logo_side img{
  43. padding-left:5px;
  44. display:block;
  45. padding-bottom:50px;
  46. }
  47.  
  48. #nav_side {
  49. height:100%;
  50. background:#333;
  51. width:200px;
  52. float:left;
  53. }
  54.  
  55. nav#nav1 {
  56. padding-top:200px;
  57. }
  58.  
  59. nav#nav1 ul {
  60. padding:5px;
  61. }
  62.  
  63. nav#nav1 li {
  64. list-style:none;
  65. font-size:0.9em;
  66. color:#FFF;
  67. padding-top:5px;
  68. text-transform:uppercase;
  69. }
  70.  
  71. nav#nav1 li:nth-child(7), nav#nav1 li:last-child {
  72. color:#CF0;
  73. font-size:0.8em;
  74. }
  75.  
  76. nav#nav1 li:nth-child(7) {
  77. padding-top:30px;
  78. }
  79.  
  80. header {
  81. width:100%;
  82. height:200px;
  83. background:#C60;
  84. }
  85.  
  86. h1 {
  87. font-size:2em;
  88. font-weight:bold;
  89. margin:0;
  90. padding-top:30px;
  91. padding-left:10px;
  92. height:120px;
  93. }
  94.  
  95. nav#nav2 {
  96. width:100%;
  97. height:50px;
  98. background:#3C6;
  99. }
  100.  
  101. nav#nav2 ul{
  102. padding:0;
  103. width:100%;
  104. }
  105. nav#nav2 li{
  106. list-style:none;
  107. display:inline-block;
  108. padding-right:20px;
  109. padding-left:10px;
  110. padding-top:10px;
  111. }
  112. nav#nav2 li a{
  113. display:block;
  114. color:#FFF;
  115. text-decoration:none;
  116. border:1px #3C6 solid;
  117. padding:5px;
  118. }
  119.  
  120. nav#nav2 li a:hover{
  121. border:1px #C00 solid;
  122. }
  123.  
  124. #wrapper {
  125. width:800px;
  126. height:100%;
  127. border:1px #000000 solid;
  128. margin-left:auto;
  129. margin-right:auto;
  130. }
  131. </style>
  132.  
  133. </head>
  134. <body>
  135. <!--[if lt IE 7]>
  136. <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  137. <![endif]-->
  138.  
  139. <!-- Add your site or application content here -->
  140.  
  141.  
  142. <header>
  143. <h1>TO<br>DISCOVER</h1>
  144. <nav id="nav2">
  145. <ul>
  146. <li><a href="#">CURRICULUM</a></li>
  147. <li>FACILITIES</li>
  148. <li>FEATURED SUBJECTS</li>
  149. </ul>
  150. </nav>
  151. </header>
  152. <section id="section1">
  153. <img src="img/featured_curriculum.jpg">
  154. </section>
  155. <div id="wrapper">
  156. <section id="section2">
  157. <h2> Curriculum</h2>
  158. <p>We train students to be versatile practitioners in our three year programme. You will enjoy a common foundation studies program during the first year, and specialise in one of the four design options from second year onwards.</p>
  159.  
  160. </section>
  161.  
  162. <section id="section3">
  163.  
  164. <article>
  165. <figure><img src="img/featured_curriculum_FoundationStudies.jpg"></figure>
  166. <hgroup>FOUNDATION STUDIES</hgroup>
  167. <p>You do not need prior knowledge in drawing or design to be in Communication Design. You will go through a comprehensive foundation programme in your first year. Foundational studies in visual literacy, layout, typography, graphic stylisation and publication design will be taught. You will also explore the areas of web design, photography as well as image-making.</p>
  168. </article>
  169.  
  170. <article>
  171. <figure><img src="img/featured_curriculum_FoundationStudies.jpg"></figure>
  172. <hgroup>FOUNDATION STUDIES</hgroup>
  173. <p>You do not need prior knowledge in drawing or design to be in Communication Design. You will go through a comprehensive foundation programme in your first year. Foundational studies in visual literacy, layout, typography, graphic stylisation and publication design will be taught. You will also explore the areas of web design, photography as well as image-making.</p>
  174. </article>
  175. <article>
  176. <figure><img src="img/featured_curriculum_FoundationStudies.jpg"></figure>
  177. <hgroup>FOUNDATION STUDIES</hgroup>
  178. <p>You do not need prior knowledge in drawing or design to be in Communication Design. You will go through a comprehensive foundation programme in your first year. Foundational studies in visual literacy, layout, typography, graphic stylisation and publication design will be taught. You will also explore the areas of web design, photography as well as image-making.</p>
  179. </article>
  180. <article>
  181. <figure><img src="img/featured_curriculum_FoundationStudies.jpg"></figure>
  182. <hgroup>FOUNDATION STUDIES</hgroup>
  183. <p>You do not need prior knowledge in drawing or design to be in Communication Design. You will go through a comprehensive foundation programme in your first year. Foundational studies in visual literacy, layout, typography, graphic stylisation and publication design will be taught. You will also explore the areas of web design, photography as well as image-making.</p>
  184. </article>
  185. <article>
  186. <figure><img src="img/featured_curriculum_FoundationStudies.jpg"></figure>
  187. <hgroup>FOUNDATION STUDIES</hgroup>
  188. <p>You do not need prior knowledge in drawing or design to be in Communication Design. You will go through a comprehensive foundation programme in your first year. Foundational studies in visual literacy, layout, typography, graphic stylisation and publication design will be taught. You will also explore the areas of web design, photography as well as image-making.</p>
  189. </article>
  190.  
  191.  
  192.  
  193. </section>
  194.  
  195. </div>
  196.  
  197.  
  198.  
  199.  
  200.  
  201.  
  202.  
  203.  
  204.  
  205. <script src="js/vendor/jquery-1.10.2.min.js"></script>
  206. <script src="js/plugins.js"></script>
  207. <script src="js/main.js"></script>
  208.  
  209. </body>
  210. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement