You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

293 lines
10 KiB

  1. <!DOCTYPE html>
  2. <head>
  3. <!-- Standard Meta -->
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  7. <!-- Site Properities -->
  8. <title>Homepage Example - Semantic</title>
  9. <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
  10. <link rel="stylesheet" type="text/css" href="../packaged/css/semantic.css">
  11. <link rel="stylesheet" type="text/css" href="homepage.css">
  12. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
  13. <script src="../packaged/javascript/semantic.js"></script>
  14. <script src="homepage.js"></script>
  15. </head>
  16. <body id="home">
  17. <div class="ui inverted page grid masthead segment">
  18. <div class="column">
  19. <div class="inverted secondary pointing ui menu">
  20. <div class="header item">Cat University</div>
  21. <div class="right menu">
  22. <div class="ui top right pointing mobile dropdown link item">
  23. Menu
  24. <i class="dropdown icon"></i>
  25. <div class="menu">
  26. <a class="item">Classes</a>
  27. <a class="item">Cocktail Hours</a>
  28. <a class="item">Community</a>
  29. </div>
  30. </div>
  31. <div class="ui dropdown link item">
  32. Courses
  33. <i class="dropdown icon"></i>
  34. <div class="menu">
  35. <a class="item">Petting</a>
  36. <a class="item">Feeding</a>
  37. <a class="item">Mind Reading</a>
  38. </div>
  39. </div>
  40. <a class="item">Library</a>
  41. <a class="item">Community</a>
  42. </div>
  43. </div>
  44. <img src="images/cat.png" class="ui medium image">
  45. <div class="ui hidden transition information">
  46. <h1 class="ui inverted header">
  47. Your Cat is Dumb
  48. </h1>
  49. <p>At least he won't reach his highest potential unless you enroll him in Cat University's 2013 class.</p>
  50. <div class="large basic inverted animated fade ui button">
  51. <div class="visible content">Come to ICU 2013</div>
  52. <div class="hidden content">Register Now</div>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="ui page grid overview segment">
  58. <div class="ui two wide column"></div>
  59. <div class="twelve wide column">
  60. <div class="ui three column center aligned stackable divided grid">
  61. <div class="column">
  62. <div class="ui icon header">
  63. <i class="circular book link icon"></i>
  64. Courses
  65. </div>
  66. <p>Take your kitty to a cat-ducation course and learn how to treat her well.</p>
  67. <p><a class="ui teal right labeled icon button" href="#">Learn <i class="right long arrow icon"></i></a></p>
  68. </div>
  69. <div class="column">
  70. <div class="ui icon header">
  71. <i class="circular code link icon"></i>
  72. Library
  73. </div>
  74. <p>Dig through our cat library to found out amazing things you can do with your kitty.</p>
  75. <p><a class="ui teal right labeled icon button" href="#">Research <i class="right long arrow icon"></i></a></p>
  76. </div>
  77. <div class="column">
  78. <div class="ui icon header">
  79. <i class="circular user link icon"></i>
  80. Community
  81. </div>
  82. <p>Get feedback on your cat from a community of loving pet owners on our online bulletin board system.</p>
  83. <p><a class="ui teal right labeled icon button" href="#">Share <i class="right long arrow icon"></i></a></p>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="ui inverted page grid stackable relaxed feature segment">
  89. <div class="row">
  90. <div class="column">
  91. <h1 class="center aligned ui header">
  92. Cat Tips Right In Your Inbox
  93. </h1>
  94. </div>
  95. </div>
  96. <div class="row">
  97. <div class="ten wide column">
  98. <h2 class="ui header">How to Win Your Cats Attention</h2>
  99. <p>Getting your cat to notice you is a large part of being a pet owner. Although I have a lot of patience for writing things about cats, perhaps this might be enough body copy to make this section of text look filled out.</p>
  100. <p>This and other tips can be found in our newsletter, amazing right?</p>
  101. <div class="ui basic inverted animated button button">
  102. <div class="visible content">Read More</div>
  103. <div class="hidden content"><i class="right arrow icon"></i></div>
  104. </div>
  105. <div class="ui inverted section divider"></div>
  106. <h3 class="ui header">More articles</h3>
  107. <div class="ui inverted animated selection list">
  108. <div class="item">
  109. How to win in a fight with a cat
  110. <div class="right floated">Jan 20, 2023</div>
  111. </div>
  112. <div class="item">
  113. A Supposedly Fun Cat Toy I will Never Buy Again
  114. <div class="right floated">Jan 1, 2023</div>
  115. </div>
  116. <div class="item">
  117. Much ado about yarn
  118. <div class="right floated">Dec 20, 2022</div>
  119. </div>
  120. </div>
  121. </div>
  122. <div class="six wide column">
  123. <div class="ui secondary form segment">
  124. <h3 class="ui header">Get Our Amazing Newsletter Bi-Daily</h3>
  125. <p>Sign up and get spammed with cats everyday. We have no unsubscribe button!</p>
  126. <div class="field">
  127. <div class="ui left icon action input">
  128. <i class="user icon"></i>
  129. <input name="email" type="text" placeholder="name@email.com">
  130. <div class="ui teal submit button">Sign up</div>
  131. </div>
  132. </div>
  133. <div class="ui error message"></div>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. <div class="ui page grid stackable segment">
  139. <div class="row">
  140. <div class="column">
  141. <h1 class="center aligned ui header">
  142. Many Companies Rely on Our Cat Knowledge
  143. </h1>
  144. <div class="ui horizontal divider"><i class="heart icon"></i></div>
  145. </div>
  146. </div>
  147. <div class="center four column aligned row">
  148. <div class="column">
  149. <div class="ui text shape">
  150. <div class="sides">
  151. <div class="active side">
  152. <i class="huge circular github icon"></i>
  153. </div>
  154. <div class="side">
  155. <i class="huge circular facebook icon"></i>
  156. </div>
  157. <div class="side">
  158. <i class="huge circular maxcdn icon"></i>
  159. </div>
  160. <div class="side">
  161. <i class="huge circular pinterest icon"></i>
  162. </div>
  163. <div class="side">
  164. <i class="huge circular weibo icon"></i>
  165. </div>
  166. <div class="side">
  167. <i class="huge circular flickr icon"></i>
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. <div class="column">
  173. <div class="ui text shape">
  174. <div class="sides">
  175. <div class="side">
  176. <i class="huge circular github icon"></i>
  177. </div>
  178. <div class="side">
  179. <i class="huge circular facebook icon"></i>
  180. </div>
  181. <div class="active side">
  182. <i class="huge circular maxcdn icon"></i>
  183. </div>
  184. <div class="side">
  185. <i class="huge circular pinterest icon"></i>
  186. </div>
  187. <div class="side">
  188. <i class="huge circular weibo icon"></i>
  189. </div>
  190. <div class="side">
  191. <i class="huge circular flickr icon"></i>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. <div class="column">
  197. <div class="ui text shape">
  198. <div class="sides">
  199. <div class="side">
  200. <i class="huge circular github icon"></i>
  201. </div>
  202. <div class="side">
  203. <i class="huge circular facebook icon"></i>
  204. </div>
  205. <div class="side">
  206. <i class="huge circular maxcdn icon"></i>
  207. </div>
  208. <div class="side">
  209. <i class="huge circular pinterest icon"></i>
  210. </div>
  211. <div class="active side">
  212. <i class="huge circular weibo icon"></i>
  213. </div>
  214. <div class="side">
  215. <i class="huge circular flickr icon"></i>
  216. </div>
  217. </div>
  218. </div>
  219. </div>
  220. <div class="column">
  221. <div class="ui text shape">
  222. <div class="sides">
  223. <div class="side">
  224. <i class="huge circular github icon"></i>
  225. </div>
  226. <div class="side">
  227. <i class="huge circular facebook icon"></i>
  228. </div>
  229. <div class="side">
  230. <i class="huge circular maxcdn icon"></i>
  231. </div>
  232. <div class="side">
  233. <i class="huge circular pinterest icon"></i>
  234. </div>
  235. <div class="side">
  236. <i class="huge circular weibo icon"></i>
  237. </div>
  238. <div class="active side">
  239. <i class="huge circular flickr icon"></i>
  240. </div>
  241. </div>
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246. <div class="ui inverted teal page grid segment">
  247. <div class="ten wide column">
  248. <div class="ui three column stackable grid">
  249. <div class="column">
  250. <div class="ui header">Courses</div>
  251. <div class="ui inverted link list">
  252. <a class="item">Registration</a>
  253. <a class="item">Course Calendar</a>
  254. <a class="item">Professors</a>
  255. </div>
  256. </div>
  257. <div class="column">
  258. <div class="ui header">Library</div>
  259. <div class="ui inverted link list">
  260. <a class="item">A-Z</a>
  261. <a class="item">Most Popular</a>
  262. <a class="item">Recently Changed</a>
  263. </div>
  264. </div>
  265. <div class="column">
  266. <div class="ui header">Community</div>
  267. <div class="ui inverted link list">
  268. <a class="item">BBS</a>
  269. <a class="item">Careers</a>
  270. <a class="item">Privacy Policy</a>
  271. </div>
  272. </div>
  273. </div>
  274. </div>
  275. <div class="six wide right floated aligned column">
  276. <h3 class="ui header">Contact Us</h3>
  277. <addr>
  278. 237 Catberry Road <br>
  279. Milton Keynes, London <br>
  280. </addr>
  281. <p>(404) 867-5309</p>
  282. </div>
  283. </div>
  284. </body>
  285. </html>