index.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <title>Document</title>
  8. <link rel="stylesheet" href="./fontawesome-free-5.15.1-web/css/all.min.css">
  9. <link rel="stylesheet" href="css/main.css" />
  10. </head>
  11. <body>
  12. <header class="header">
  13. <div class="header-wrapper wrapper">
  14. <div class="logo-container">
  15. <object type="image/svg+xml" data="./img/logo.svg" class="logo-icon">
  16. </object>
  17. <a href="#"><span class="logo-text"><b>open</b>logic</span></a>
  18. </div>
  19. <nav class="navigation">
  20. <ul class="navigation-list">
  21. <li class="nav-item"><a href="#">Home</a></li>
  22. <li class="nav-item"><a href="#">News</a></li>
  23. <li class="nav-item"><a href="#">Gallery</a></li>
  24. <li class="nav-item"><a href="#">Pages</a></li>
  25. <li class="nav-item dropdown-item"><a href="#">Layouts</a>
  26. <ul class="dropdown-list">
  27. <li class="dropdown-item"><a href="#">Headers</a>
  28. <ul class=" dropdown-list dropdown-list-inner">
  29. <li class="item-inner"><a href="#">No header</a></li>
  30. <li class="item-inner"><a href="#">Only bread crumbs</a></li>
  31. <li class="item-inner"><a href="#">Automatic</a></li>
  32. <li class="item-inner"><a href="#">Custom Text/HTML</a></li>
  33. <li class="item-inner"><a href="#">Twitter feed</a></li>
  34. <li class="item-inner"><a href="#">Slider</a></li>
  35. </ul>
  36. </li>
  37. <li class="dropdown-item"><a href="#">Sidebars</a></li>
  38. <li class="dropdown-item"><a href="#">Columns</a></li>
  39. </ul>
  40. </li>
  41. <li class="nav-item"><a href="#">Features</a></li>
  42. <li class="nav-item"><a href="#">Blog</a></li>
  43. <li class="nav-item"><a href="#">Contact</a></li>
  44. </ul>
  45. </nav>
  46. </div>
  47. </header>
  48. <section class="banner">
  49. <div class="banner-wrapper wrapper">
  50. <picture class="banner-picture">
  51. <img src="./img/news_img.png" alt="news_img">
  52. </picture>
  53. <div class="featured-news-wrapper">
  54. <h2 class="header-featured-news">About To Lead Huge Spotify Funding</h2>
  55. <div class="featured-news-desc">
  56. <p>European streaming music startup Spotify is in the process of closing a very large financing, say multiple sources. DST, the venture firm that has backed Facebook, Groupon and Zynga, is said to be leading the deal, which values Spotify.</p>
  57. </div>
  58. </div>
  59. <div class="arrows">
  60. <a href=""><i class="fas fa-angle-left"></i></a>
  61. <a href=""><i class="fas fa-angle-right"></i></a>
  62. </div>
  63. </div>
  64. </section>
  65. <main class="main">
  66. <div class="wrapper">
  67. <section class="sidebar">
  68. <div class="sidebar-wrapper">
  69. <h3>Custom menu</h3>
  70. <nav>
  71. <ul class="sidebar-list">
  72. <li class="custom-item"><a href="#">Product Overview</a></li>
  73. <li class="custom-item"><a href="#">Content Managment</a></li>
  74. <li class="custom-item active"><a href="#">Online Store</a>
  75. </li>
  76. <li class="custom-item dropdown-input">
  77. <input class= "custom-checkbox" id="menu-item-marketing" type="checkbox">
  78. <label for="menu-item-marketing"><a>Email Marketing</a></label>
  79. </li>
  80. <li class="custom-item"><a href="#">Powerful Modules</a></li>
  81. <li class="custom-item dropdown-input">
  82. <input class= "custom-checkbox" id="menu-item" type="checkbox">
  83. <label for="menu-item"><a>CRM & Web Form Builder</a></label>
  84. <ul class="dropdown-input-list">
  85. <li class="custom-item">
  86. <li class="custom-item dropdown-input">
  87. <input class= "custom-checkbox" id="menu-item-features" type="checkbox">
  88. <label for="menu-item-features"><a>Full Features</a></label>
  89. </li>
  90. </li>
  91. <li class="custom-item"><a href="#">Extensebility</a></li>
  92. <li class="custom-item dropdown-input-inner">
  93. <input class="custom-checkbox" id="menu-item-inner" type="checkbox">
  94. <label for="menu-item-inner"><a>Email, Hosting & Simple DNS</a></label>
  95. <ul class="dropdown-input-list-inner">
  96. <li class="custom-item"><a href="#">Content Managment</a></li>
  97. <li class="custom-item"><a href="#">Online store</a></li>
  98. <li class="custom-item"><a href="#">Email Marketing</a></li>
  99. <li class="custom-item"><a>Powerful Modules</a></li>
  100. </ul>
  101. </li>
  102. <li class="custom-item"><a href="#">Shipping Providers</a></li>
  103. </ul>
  104. </li>
  105. <li class="custom-item"><a href="#">Reporting & Analytics</a></li>
  106. <li class="custom-item"><a href="#">Design & Customization</a></li>
  107. </ul>
  108. </nav>
  109. </div>
  110. </section>
  111. <div class="article-container">
  112. <article class="article">
  113. <div class="news-header">
  114. <h2 class="article-header">Is The First Official Chrome OS Device A Monitor Or All-In-One PC? Nope.</h2>
  115. <time class = "news-date" datetime="2011-03-19">
  116. <span class="date"><b>19</b></span>
  117. <span>MAR <br/>2011</span>
  118. </time>
  119. </div>
  120. <div class="news-desc">
  121. <p>AudioBoo, the social sound sharing startup, has developed an iPhone framework that gives drag and drop audio recording functionality to any iPhone app. That means any app developer can now add Audioboo recording functionality to their app, thus adding a new kind of social functionality.</p>
  122. </div>
  123. <section class="main-content-article">
  124. <h4 class="main-content-header">Deployment tools</h4>
  125. <p>But that’s probably not what will immediately kick off a new wave of users. Audioboo plans to officially launch this with a number of high profile media partners “in a couple of weeks” including the BBC, ABC Australia, Guardian, Aljazeera, Sky News and more all trialling the beta versions of the new platform that works with the plugin. A revamp of the Android version of the app will bring it up to par with the iPhone and have a similar plugin environment.</p>
  126. <figure class="figure">
  127. <img src="./img/img-caption.png" alt="img-caption" class="img-caption">
  128. <figcaption class="figcaption">Image caption from alt</figcaption>
  129. </figure>
  130. <p>To keep it simple, I’d recogher average scores or for deciding betmmend a total of four to five principles; but as with everything, tailor it to your own business. One effective method I have found is to set your principles in a spreadsheet, rank them, and then decide on a cut-off average for qualification. This is a great tool for identifying deals with highe average scores or for deciding between two potential deals. We’ve prepared an example of such a spreadsheet ber of high profile mdentifying deals with hiedia partners “in a couple of weeks” including the BBC, ABC Australia, Guardian, Aljazeera, Sky News and more all trialling the beta
  131. <img class="float-img" src="./img/work_img.png" alt="work_img">
  132. To keep it simple, I’d recogher average scores or for deciding betmmend a total of four to five principles; but as with everything, tailor it to your own business. One effective method I have found is to set your principles in a spreadsheet, rank them, and then decide on a cut-off average for qualification.</p>
  133. <br/>
  134. <p>This is a great tool for identifying deals with higher average scores or for deciding between two potential deals. We’ve prepared an example of such a spreadsheet. But that’s probably not what will immediately kick off a new wave of users. Audioboo plans to officially launch this with a number of high profile media partners “in a couple of weeks” including the BBC, ABC Australia, Guardian, Aljadentifying deals with hizeera, Sky News and more all trialling the beta versions of the new platform th A revamp of the Android version of the app will bring it up to par with the iPhone and have a similar plugin environment. Audoboo CEO and founder Mark Rock believes this will “fundamentally change the nature of how audio is captured and then distributed on the Internet.” Clearly this will give audioboo a lot of potential for scale compared to competitors like SoundCloud and Cinch who continue to rely on user-generated growth.</p>
  135. </section>
  136. <section class="main-content-article">
  137. <h4 class="main-content-header">Deployment tools</h4>
  138. <p>But that’s probably not what will immediately kick off a new wave of users. Audioboo plans to officially launch this with a number of high profile media partneraClearly this will give audioboo a lot of potential for scale compared to competitors like SoundCloud and Cinch who continue to rely on user-generated growth.</p>
  139. <br/>
  140. <p>SoundCloud recently entered into the spoken word space, technically the “patch” of Audioboo. Audioboo was technically the first in 2009 to make voice “social” but it’s been joined by others like Broadcastr, Cinch and also iPadio, though iPadio is more enterprise focused. However, Soundcloud’s music focus has given it an impressive range of features in manipulating sound, while Audioboo has concentrated on dealing with broadcasters and media martners.s “in a couple of weeks” including the BBC, ABC Australia, Guardian, Aljazeera, Sky News and more all trialling the beta versions of the new platform that works with the plugin. A revamp of the Android version of the app will bring it up to par with the iPhone and have a similar plugin.</p>
  141. </section>
  142. </article>
  143. <div class="controls-container">
  144. <a><span class="prev-btn">Previous news</span></a>
  145. <a><span class="next-btn">Next news</span></a>
  146. </div>
  147. </div>
  148. </div>
  149. </main>
  150. <section class="clients">
  151. <div class="clients-wrapper wrapper">
  152. <h4 class="clients-header">Our clients</h4>
  153. <ul class="client-list">
  154. <li class="client-item-logo"><a href=""><img src="./img/creative-studio.png" alt="client-logo"></a></li>
  155. <li class="client-item-logo"><a href=""><img src="./img/kreatif.png" alt="client-logo" ></a></a></li>
  156. <li class="client-item-logo"><a href=""><img src="./img/avstudio.png" alt="client-logo"></a></a></li>
  157. <li class="client-item-logo"><a href=""><img src="./img/gofx.png" alt="client-logo" ></a></a></li>
  158. <li class="client-item-logo"><a href=""><img src="./img/leaftech.png" alt="client-logo"></a></li>
  159. </ul>
  160. </div>
  161. </section>
  162. <footer class="footer">
  163. <div class="footer-wrapper wrapper">
  164. <div class="footer-links">
  165. <h4 class="footer-links-header">Quick links</h4>
  166. <div class="footer-links-wrapper">
  167. <ul>
  168. <li><a href="#">Your custom</a></li>
  169. <li><a href="#">Additional menu</a></li>
  170. <li><a href="#">Features</a></li>
  171. <li><a href="#">Pricing</a></li>
  172. <li><a href="#">Cusomers</a></li>
  173. </ul>
  174. <ul>
  175. <li><a href="#">Additional menu</a></li>
  176. <li><a href="#">Features</a></li>
  177. <li><a href="#">Pricing</a></li>
  178. <li><a href="#">Cusomers</a></li>
  179. </ul>
  180. <ul>
  181. <li><a href="#">Features</a></li>
  182. <li><a href="#">Pricing</a></li>
  183. <li><a href="#">Cusomers</a></li>
  184. </ul>
  185. </div>
  186. </div>
  187. <div class="security-container">
  188. <h4 class="footer-links-header">Security & Privacy</h4>
  189. <ul>
  190. <li><a href="#">Security</a></li>
  191. <li><a href="#">Privacy Policy</a></li>
  192. <li><a href="#">Terms of Service</a></li>
  193. </ul>
  194. </div>
  195. <div class="socials-container">
  196. <h4 class="footer-links-header">Stay in touch</h4>
  197. <ul class="socials-list">
  198. <li><a class="socials-twitter"><i class="fab fa-twitter"></i></a></li>
  199. <li><a class="socials-facebook"><i class="fab fa-facebook-f"></i></a></li>
  200. <li><a class="socials-linkedin"><i class="fab fa-linkedin-in"></i></a></li>
  201. <li><a class="socials-rss"><i class="fas fa-rss"></i></a></li>
  202. </ul>
  203. <p class="copyright"> Copyright (C) 2011 Company Inc.</p>
  204. </div>
  205. </div>
  206. </footer>
  207. </body>
  208. </html>