index.html 7.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <!DOCTYPE HTML>
  2. <!--
  3. Hyperspace by HTML5 UP
  4. html5up.net | @ajlkn
  5. Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  6. -->
  7. <html>
  8. <head>
  9. <title>Hyperspace by HTML5 UP</title>
  10. <meta charset="utf-8" />
  11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  12. <link rel="stylesheet" href="assets/css/main.css" />
  13. <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
  14. </head>
  15. <body class="is-preload">
  16. <!-- Sidebar -->
  17. <section id="sidebar">
  18. <div class="inner">
  19. <nav>
  20. <ul>
  21. <li><a href="#intro">Welcome</a></li>
  22. <li><a href="#one">Accounts</a></li>
  23. <li><a href="#two">What we do</a></li>
  24. <li><a href="#three">Get in touch</a></li>
  25. </ul>
  26. </nav>
  27. </div>
  28. </section>
  29. <!-- Wrapper -->
  30. <div id="wrapper">
  31. <!-- Intro -->
  32. <section id="intro" class="wrapper style1 fullscreen fade-up">
  33. <div class="inner">
  34. <h1>ODA</h1>
  35. <h2>On Demand Art</h2>
  36. <p>Connecting Art & Artists together in a very simple, but innovative way!<br />
  37. by eliminating the modern day pressures that the industry faces.</a>.</p>
  38. <ul class="actions">
  39. <li><a href="#one" class="button scrolly">Learn more</a></li>
  40. </ul>
  41. </div>
  42. </section>
  43. <!-- One -->
  44. <section id="one" class="wrapper style2 spotlights">
  45. <section>
  46. <a href="#" class="image"><img src="images/pic01.jpg" alt="" data-position="center center" /></a>
  47. <div class="content">
  48. <div class="inner">
  49. <h2>Create Account</h2>
  50. <p>Here we allow both the Artist and our Model/Art clients to create an account stating what brings them to ODA & what they are looking to gain from it..</p>
  51. <ul class="actions">
  52. <li><a href="generic.html" class="button">Learn more</a></li>
  53. </ul>
  54. </div>
  55. </div>
  56. </section>
  57. <section>
  58. <a href="#" class="image"><img src="images/pic02.jpg" alt="" data-position="top center" /></a>
  59. <div class="content">
  60. <div class="inner">
  61. <h2>Artist meet Art</h2>
  62. <p>We realize that a lot of people are eager to get into the industry, but just dont know where to start. We have fixed this problem.</p>
  63. <ul class="actions">
  64. <li><a href="generic.html" class="button">Learn more</a></li>
  65. </ul>
  66. </div>
  67. </div>
  68. </section>
  69. <section>
  70. <a href="#" class="image"><img src="images/pic03.jpg" alt="" data-position="25% 25%" /></a>
  71. <div class="content">
  72. <div class="inner">
  73. <h2>Endless Opportunity</h2>
  74. <p>We promote positive interactions between aspiring artist and the models they work with. </p>
  75. <ul class="actions">
  76. <li><a href="generic.html" class="button">Learn more</a></li>
  77. </ul>
  78. </div>
  79. </div>
  80. </section>
  81. </section>
  82. <!-- Two -->
  83. <section id="two" class="wrapper style3 fade-up">
  84. <div class="inner">
  85. <h2>What we do</h2>
  86. <p>By creating a peer to peer platform offering all, from aspiring photographers to those at the professional level, a medium to express themselves in a "test-safe" environment.</p>
  87. <div class="features">
  88. <section>
  89. <span class="icon major fa-code"></span>
  90. <h3>Peer Based Grading</h3>
  91. <p>We allow all users of ODA to grade those that they work with on their professionalism, creativity, and pure comfortability.</p>
  92. </section>
  93. <section>
  94. <span class="icon major fa-lock"></span>
  95. <h3>Safe Payment System</h3>
  96. <p>We use to next-level encryption to handle all payment processing to keep the Artist and their Art both satisfied.</p>
  97. </section>
  98. <section>
  99. <span class="icon major fa-cog"></span>
  100. <h3>Instant Notifications</h3>
  101. <p>Our Instant Notifications system allows Users to know exactly when they would be needed for any type of event.</p>
  102. </section>
  103. <section>
  104. <span class="icon major fa-desktop"></span>
  105. <h3>Real Life Experiences</h3>
  106. <p>Being able to connect with people in the real world gives you experiences that you could not receive from school or course work.</p>
  107. </section>
  108. <section>
  109. <span class="icon major fa-chain"></span>
  110. <h3>Self Promotion</h3>
  111. <p>We allow our users to promote themselves for free on our app, to help bring new artist into the industry.</p>
  112. </section>
  113. <section>
  114. <span class="icon major fa-diamond"></span>
  115. <h3>Easy to Use</h3>
  116. <p>Very similar to modern day apps, so setting up your account will be a breeze!</p>
  117. </section>
  118. </div>
  119. <ul class="actions">
  120. <li><a href="generic.html" class="button">Learn more</a></li>
  121. </ul>
  122. </div>
  123. </section>
  124. <!-- Three -->
  125. <section id="three" class="wrapper style1 fade-up">
  126. <div class="inner">
  127. <h2>Get in touch</h2>
  128. <p>Feel free to reach out to us with any input you have or any ideas you think would make ODA greater than it already is.</p>
  129. <div class="split style1">
  130. <section>
  131. <form method="post" action="#">
  132. <div class="fields">
  133. <div class="field half">
  134. <label for="name">Name</label>
  135. <input type="text" name="name" id="name" />
  136. </div>
  137. <div class="field half">
  138. <label for="email">Email</label>
  139. <input type="text" name="email" id="email" />
  140. </div>
  141. <div class="field">
  142. <label for="message">Message</label>
  143. <textarea name="message" id="message" rows="5"></textarea>
  144. </div>
  145. </div>
  146. <ul class="actions">
  147. <li><a href="" class="button submit">Send Message</a></li>
  148. </ul>
  149. </form>
  150. </section>
  151. <section>
  152. <ul class="contact">
  153. <li>
  154. <h3>Address</h3>
  155. <span>12345 Somewhere Road #654<br />
  156. Nashville, TN 00000-0000<br />
  157. USA</span>
  158. </li>
  159. <li>
  160. <h3>Email</h3>
  161. <a href="#">user@untitled.tld</a>
  162. </li>
  163. <li>
  164. <h3>Phone</h3>
  165. <span>(000) 000-0000</span>
  166. </li>
  167. <li>
  168. <h3>Social</h3>
  169. <ul class="icons">
  170. <li><a href="#" class="fa-twitter"><span class="label">Twitter</span></a></li>
  171. <li><a href="#" class="fa-facebook"><span class="label">Facebook</span></a></li>
  172. <li><a href="#" class="fa-github"><span class="label">GitHub</span></a></li>
  173. <li><a href="#" class="fa-instagram"><span class="label">Instagram</span></a></li>
  174. <li><a href="#" class="fa-linkedin"><span class="label">LinkedIn</span></a></li>
  175. </ul>
  176. </li>
  177. </ul>
  178. </section>
  179. </div>
  180. </div>
  181. </section>
  182. </div>
  183. <!-- Footer -->
  184. <footer id="footer" class="wrapper style1-alt">
  185. <div class="inner">
  186. <ul class="menu">
  187. <li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
  188. </ul>
  189. </div>
  190. </footer>
  191. <!-- Scripts -->
  192. <script src="assets/js/jquery.min.js"></script>
  193. <script src="assets/js/jquery.scrollex.min.js"></script>
  194. <script src="assets/js/jquery.scrolly.min.js"></script>
  195. <script src="assets/js/browser.min.js"></script>
  196. <script src="assets/js/breakpoints.min.js"></script>
  197. <script src="assets/js/util.js"></script>
  198. <script src="assets/js/main.js"></script>
  199. </body>
  200. </html>