PageRenderTime 51ms CodeModel.GetById 24ms RepoModel.GetById 1ms app.codeStats 0ms

/html/index.html

https://gitlab.com/kaleado/note-collector
HTML | 170 lines | 156 code | 7 blank | 7 comment | 0 complexity | 835c18bfad0af802fe3cb21e021ce294 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <title>Extrospect - Your Study Made Simple</title>
    6. 

  6.     <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
    7. 

  7.     <!--Import Google Icon Font-->
    8. 

  8.     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    9. 

  9.     <!--Import materialize.css-->
    10. 

  10.     <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    11. 

  11.     <link type="text/css" rel="stylesheet" href="css/main.css"  media="screen,projection"/>
    12. 

  12.     <link type="text/css" rel="stylesheet" href="css/index.css"  media="screen,projection"/>
    13. 

  13.     <base href="/">
    14. 

  14. 

  15.     <!--Import jQuery before materialize.js-->
    16. 

  16.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    17. 

  17.     <script type="text/javascript" src="js/noteCollectorAngular.js"></script>
    18. 

  18.     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    19. 

  19.     <script type="text/javascript" src="js/materialize.min.js"></script>
    20. 

  20.     <script type="text/javascript" src="js/home.js"></script>
    21. 

  21.     <!--<link type="text/css" rel="stylesheet" href="http://s.mlcdn.co/animate.css">-->
    22. 

  22.     <link rel="stylesheet" href="css/font-awesome.min.css">
    23. 

  23. 

  24.     <!--Let browser know website is optimized for mobile-->
    25. 

  25.     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    26. 

  26.   </head>
    27. 

  27.   <body>
    28. 

  28.     <div class="navbar-fixed row" style="margin: 0px">
    29. 

  29.       <nav class="col s12">
    30. 

  30. 	<div class="nav-wrapper">
    31. 

  31.           <a href="#" class="brand-logo">Extrospect</a>
    32. 

  32.           <ul id="nav-mobile" class="right">
    33. 

  33.             <li><a href="new.html">Upload Note</a></li>
    34. 

  34.             <li><a href="search.html">Browse Notes</a></li>
    35. 

  35. 	    <li><a href="#">About Extrospect</a></li>
    36. 

  36.           </ul>
    37. 

  37. 	</div>
    38. 

  38.       </nav>
    39. 

  39.     </div>
    40. 

  40.     <div id="indexBanner"><!-- style="background-image: url('http://placehold.it/468x60'); background-size: cover; background-position: center; position: relative" -->
    41. 

  41.       <div class="" style="">
    42. 

  42. 	<div class="">
    43. 

  43.           <div class="parallax-container" style="height: 400px; width: 100%">
    44. 

  44. 	    <div class="parallax"><img src="img/home-banner.jpg" style="width: 100%"></div>
    45. 

  45.           </div>
    46. 

  46. 	</div>
    47. 

  47.       </div>
    48. 

  48.     </div>
    49. 

  49.     <!-- START MAIN CONTENT -->
    50. 

  50.     <div class="container">
    51. 

  51.       <div class="row">
    52. 

  52. 	<div class="col s12">
    53. 

  53. 	  <h1 class="center card-title">Extrospect: Your study, <span style="color: #6ea5ee">made simple.</span></h1>
    54. 

  54.           <nav>
    55. 

  55.             <div class="nav-wrapper">
    56. 

  56.               <form action="search.html">
    57. 

  57. 		<div class="input-field">
    58. 

  58.                   <input id="search" name="q" type="search" required>
    59. 

  59.                   <label for="search"><i class="material-icons">search</i></label>
    60. 

  60.                   <i class="material-icons">close</i>
    61. 

  61. 		</div>
    62. 

  62.               </form>
    63. 

  63.             </div>
    64. 

  64.           </nav>
    65. 

  65. 	</div>
    66. 

  66.       </div>
    67. 

  67.       <div class="row">
    68. 

  68. 	<div class="col s4">
    69. 

  69.           <div class="card">
    70. 

  70.             <div class="card-content">
    71. 

  71.               <span class="card-title header">Browse Notes</span>
    72. 

  72.               <p>
    73. 

  73. 		Find the best notes for your course: from from physics to philosophy.
    74. 

  74.               </p>
    75. 

  75.               <div class="row center">
    76. 

  76. 		<img class="card-panel" style="margin-top: 20px" src="http://placehold.it/100x100">
    77. 

  77.               </div>
    78. 

  78.             </div>
    79. 

  79.             <div class="card-action center">
    80. 

  80.               <a href="search.html">Start browsing now</a>
    81. 

  81.             </div>
    82. 

  82.           </div>
    83. 

  83. 	</div>
    84. 

  84. 	<div class="col s4">
    85. 

  85.           <div class="card">
    86. 

  86.             <div class="card-content">
    87. 

  87.               <span class="card-title header">Upload Notes</span>
    88. 

  88.               <p>
    89. 

  89. 		Garner feedback on your study notes and share them with others.
    90. 

  90.               </p>
    91. 

  91.               <div class="row center">
    92. 

  92. 		<img class="card-panel" style="margin-top: 20px" src="http://placehold.it/100x100">
    93. 

  93.               </div>
    94. 

  94.             </div>
    95. 

  95.             <div class="card-action center">
    96. 

  96.               <a href="#">Upload your notes now</a>
    97. 

  97.             </div>
    98. 

  98.           </div>
    99. 

  99. 	</div>
    100. 

  100. 	<div class="col s4">
    101. 

  101.           <div class="card">
    102. 

  102.             <div class="card-content">
    103. 

  103.               <span class="card-title header">Share Notes</span>
    104. 

  104.               <p>
    105. 

  105. 		Exchange notes with other students just like you, across the globe!
    106. 

  106.               </p>
    107. 

  107.               <div class="row center">
    108. 

  108. 		<img class="card-panel" style="margin-top: 20px" src="http://placehold.it/100x100">
    109. 

  109.               </div>
    110. 

  110.             </div>
    111. 

  111.             <div class="card-action center">
    112. 

  112.               <a href="#">Start sharing</a>
    113. 

  113.             </div>
    114. 

  114.           </div>
    115. 

  115. 	</div>
    116. 

  116.       </div>
    117. 

  117.     </div>
    118. 

  118.     <div id="halfBanner" class="parallax-container" style="height: 400px; width: 100%">
    119. 

  119.       <div class="parallax"><img style="width: 100%" src="img/home-half-banner.jpg"></div>
    120. 

  120.     </div>
    121. 

  121.     <div class="container">
    122. 

  122.       <!-- intro panel start -->
    123. 

  123.       <div class="row">
    124. 

  124. 	<div class="col s12">
    125. 

  125. 	  <h1 style="opacity: 0.5" class="center card-title">What is Extrospect?</h1>
    126. 

  126. 	  
    127. 

  127. 	  <div class="card">
    128. 

  128. 	    <div class="card-content">
    129. 

  129. 	      <div class="card-title header">What is Extrospect?</div>
    130. 

  130. 	      <p>
    131. 

  131. 		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor imperdiet dui, eu mollis enim blandit eget. Ut blandit tincidunt placerat. In hac habitasse platea dictumst. Suspendisse non leo eget libero lacinia commodo. In hac habitasse platea dictumst. Proin dignissim varius tempor. Pellentesque lobortis lacinia faucibus. Maecenas ac mauris ac urna vulputate tristique. Vestibulum tempus suscipit ex sit amet facilisis. Nulla molestie in lectus id commodo.
    132. 

  132. 

  133. 		Donec molestie metus sed justo cursus, sit amet vestibulum elit luctus. Sed finibus enim consequat, volutpat nunc in, commodo nibh. Curabitur efficitur sapien nec ipsum sagittis tincidunt. Aenean congue ipsum nec convallis volutpat. Nam interdum diam a tortor vestibulum, eget finibus erat vulputate. Nam maximus tortor efficitur, euismod massa at, maximus augue. Nam cursus ipsum vel arcu dictum scelerisque. Nullam sit amet elementum lacus. In in lacinia sem.
    134. 

  134. 

  135. 		Nam a nisi ut dolor pellentesque pretium. Praesent sodales mauris finibus, tempor turpis id, vehicula ipsum. Integer viverra imperdiet eros non luctus. Etiam luctus ultrices consectetur. Proin a tristique est, quis tempor felis. Curabitur sit amet dolor ac turpis accumsan posuere eget sed diam. Mauris condimentum consectetur lorem, nec porttitor nibh dictum at.
    136. 

  136. 

  137. 		Cras sed velit a elit rhoncus semper id in purus. Donec ac arcu eget libero cursus tincidunt. Donec euismod nunc et odio mattis ornare in quis ligula. Mauris a odio vitae leo bibendum molestie. Quisque eu vehicula nulla. Proin libero nisl, dignissim et mattis nec, ultrices pellentesque leo. Mauris interdum leo faucibus enim pulvinar, nec bibendum eros ornare. Etiam rutrum et risus ut imperdiet.
    138. 

  138. 

  139. 		Aliquam tellus metus, lacinia a neque id, egestas commodo orci. Fusce molestie at dolor sed commodo. Fusce pretium dictum purus ut tincidunt. Sed aliquam sodales varius. Maecenas ac tempus metus, non hendrerit ex. Vivamus semper risus sit amet viverra sollicitudin. Maecenas arcu lacus, dictum vitae ex a, congue volutpat mi. Cras fermentum arcu a magna commodo, non tempor lacus congue. Sed maximus ex in metus porttitor, tincidunt auctor mauris tincidunt. Vestibulum porttitor, mauris eu congue scelerisque, metus nunc condimentum leo, ut posuere enim sem at risus. Fusce suscipit ligula et dui aliquet, vel varius sapien semper. Etiam ut iaculis purus. Donec rutrum orci eros, vitae porta metus rutrum eu. Nulla vitae semper sapien. Donec at mi vel diam dignissim porttitor. 
    140. 

  140. 	      </p>
    141. 

  141. 	    </div>
    142. 

  142. 	  </div>
    143. 

  143. 	  <div class="center" style=""><a href="search.html" class="orange btn-large waves-effect waves-light">Start browsing now</a></div>
    144. 

  144. 	</div>
    145. 

  145.       </div>
    146. 

  146.     </div>
    147. 

  147.     <footer class="page-footer">
    148. 

  148.       <div class="container">
    149. 

  149. 	<div class="row">
    150. 

  150.           <div class="col l6 s12">
    151. 

  151.             <h5 class="white-text">About Extrospect</h5>
    152. 

  152.             <p class="grey-text text-lighten-4">Extrospect is a free service for sharing and organising study notes.</p>
    153. 

  153.           </div>
    154. 

  154.           <div class="col l4 offset-l2 s12">
    155. 

  155.             <h5 class="white-text">Contact</h5>
    156. 

  156.             <ul>
    157. 

  157.               <li><a class="grey-text text-lighten-3" href="mailto: nick.malecki@hotmail.com">Email</a></li>
    158. 

  158.               <li><a class="grey-text text-lighten-3" href="https://au.linkedin.com/in/nick-malecki-95747a119">Linkedin</a></li>
    159. 

  159.             </ul>
    160. 

  160.           </div>
    161. 

  161. 	</div>
    162. 

  162.       </div>
    163. 

  163.       <div class="footer-copyright">
    164. 

  164. 	<div class="container center">
    165. 

  165.           © 2016 Nicholas Malecki
    166. 

  166. 	</div>
    167. 

  167.       </div>
    168. 

  168.     </footer>
    169. 

  169.   </body>
    170. 

  170. </html>
    171. 

  171.