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.

124 lines
5.0 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="inverted fixed ui menu">
  18. <div class="borderless item"><b>The Cat Foundation</b></div>
  19. <div class="right menu">
  20. <a class="item">Courses</a>
  21. <a class="item">Library</a>
  22. <a class="item">BBS</a>
  23. </div>
  24. </div>
  25. <div class="ui inverted orange page grid masthead segment">
  26. <div class="column">
  27. <img src="images/cat.png" class="ui medium image">
  28. <div class="information">
  29. <h1 class="ui inverted header">
  30. Learn more about your Cat
  31. </h1>
  32. <p>An introduction to living with cats. The most interesting species on earth!</p>
  33. <div class="large black animated fade ui button">
  34. <div class="visible content">Seminar November 15th</div>
  35. <div class="hidden content">Buy Tickets</div>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. <div class="ui page grid overview segment">
  41. <div class="twelve wide column">
  42. <div class="ui three column center aligned stackable divided grid">
  43. <div class="column">
  44. <div class="ui icon header">
  45. <i class="circular book icon"></i>
  46. Courses
  47. </div>
  48. <p>Get you and your team up and running with our online training courses. We think they’re pretty awesome.</p>
  49. <p><a class="ui right labeled icon button" href="#">Archive<i class="right icon"></i></a></p>
  50. </div>
  51. <div class="column">
  52. <div class="ui icon header">
  53. <i class="circular code icon"></i>
  54. Library
  55. </div>
  56. <p>Dig through our cat library to found out amazing things you can do with your kitty.
  57. <p><a class="ui right labeled icon button" href="#">Cat library<i class="right icon"></i></a></p>
  58. </div>
  59. <div class="column">
  60. <div class="ui icon header">
  61. <i class="circular user icon"></i>
  62. Community
  63. </div>
  64. <p>Get feedback on your cat from a community of loving pet owners on our online bulletin board system.</p>
  65. <p><a class="ui right labeled icon button" href="#">BBS<i class="right icon"></i></a></p>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="ui four wide column">
  70. <h4 class="ui top attached header">Things Cats Like</h4>
  71. <div class="ui bottom attached segment">
  72. <div class="ui relaxed divided list">
  73. <div class="item">
  74. <div class="header">Yarn</div>
  75. <div class="description">This one is a bit self explanatory, you've seen cartoons right?</div>
  76. </div>
  77. <div class="item">
  78. <div class="header">Other Cats</div>
  79. <div class="description">Cats are social creatures, right? I'm pretty sure. At least I think i saw cats play together once before.</div>
  80. </div>
  81. <div class="item">
  82. <div class="header">Cat Food</div>
  83. <div class="description">A cats got to eat. Some cats eat more than others. Everybody loves a good fat cat.</div>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="ui page grid feature segment">
  90. <div class="row">
  91. <div class="column">
  92. <h1 class="center aligned ui header">
  93. Cat Tips Right In Your Inbox
  94. </h1>
  95. </div>
  96. </div>
  97. <div class="row">
  98. <div class="ten wide column">
  99. <h2 class="ui header">How to Win Your Cats Attention</h2>
  100. <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>
  101. <p>This and other tips can be found in our newsletter, amazing right?</p>
  102. <div class="ui fluid basic button">Read More</div>
  103. </div>
  104. <div class="six wide column">
  105. <div class="ui secondary segment">
  106. <h3 class="ui header">Sign up for Our Newsletter</h3>
  107. <div class="ui form">
  108. <div class="field">
  109. <div class="ui icon input">
  110. <i class="user icon"></i>
  111. <input type="text" placeholder="name@email.com">
  112. </div>
  113. </div>
  114. <div class="ui primary button">Sign up</div>
  115. </div>
  116. </div>
  117. </div>
  118. </body>
  119. </html>