API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 18th, 2018
167
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.54 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <!--
  3. Strongly Typed 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>Left Sidebar - Strongly Typed by HTML5 UP</title>
  10. <meta charset="utf-8" />
  11. <meta name="viewport" content="width=device-width, initial-scale=1" />
  12. <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
  13. <link rel="stylesheet" href="assets/css/main.css" />
  14. <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
  15. </head>
  16. <body class="left-sidebar">
  17. <!-- ###DOCUMENT_BODY### -->
  18. <div id="page-wrapper">
  19.  
  20. <!-- Header -->
  21. <div id="header-wrapper">
  22. <div id="header" class="container">
  23.  
  24. <!-- Logo -->
  25. <h1 id="logo"><a href="index.php">Unterwegs im Ruhrgebiet</a></h1>
  26. <p>Kreuz und Quer durch den Ruhrpott.</p>
  27.  
  28. <!-- Nav -->
  29. <nav id="nav">
  30. <!-- ###NAVIGATION### -->
  31. <ul>
  32. <li><a class="icon fa-home" href="index.html"><span>Introduction</span></a></li>
  33. <li>
  34. <a href="#" class="icon fa-bar-chart-o"><span>Dropdown</span></a>
  35. <ul>
  36. <li><a href="#">Lorem ipsum dolor</a></li>
  37. <li><a href="#">Magna phasellus</a></li>
  38. <li><a href="#">Etiam dolore nisl</a></li>
  39. <li>
  40. <a href="#">Phasellus consequat</a>
  41. <ul>
  42. <li><a href="#">Magna phasellus</a></li>
  43. <li><a href="#">Etiam dolore nisl</a></li>
  44. <li><a href="#">Phasellus consequat</a></li>
  45. </ul>
  46. </li>
  47. <li><a href="#">Veroeros feugiat</a></li>
  48. </ul>
  49. </li>
  50. <li><a class="icon fa-cog" href="left-sidebar.html"><span>Left Sidebar</span></a></li>
  51. <li><a class="icon fa-retweet" href="right-sidebar.html"><span>Right Sidebar</span></a></li>
  52. <li><a class="icon fa-sitemap" href="no-sidebar.html"><span>No Sidebar</span></a></li>
  53. </ul>
  54. <!-- ###NAVIGATION### -->
  55. </nav>
  56.  
  57. </div>
  58. </div>
  59.  
  60. <!-- Main -->
  61. <div id="main-wrapper">
  62. <div id="main" class="container">
  63. <div class="row">
  64.  
  65. <!-- Sidebar -->
  66. <div id="sidebar" class="4u 12u(mobile)">
  67. <!-- ###CONTENT_2_2### -->
  68. <!-- Excerpts -->
  69. <section>
  70. <ul class="divided">
  71. <li>
  72.  
  73. <!-- Excerpt -->
  74. <article class="box excerpt">
  75. <header>
  76. <span class="date">July 30</span>
  77. <h3><a href="#">Just another post</a></h3>
  78. </header>
  79. <p>Lorem ipsum dolor odio facilisis convallis. Etiam non nunc vel est
  80. suscipit convallis non id orci lorem ipsum sed magna consequat feugiat lorem dolore.</p>
  81. </article>
  82.  
  83. </li>
  84. <li>
  85.  
  86. <!-- Excerpt -->
  87. <article class="box excerpt">
  88. <header>
  89. <span class="date">July 28</span>
  90. <h3><a href="#">And another post</a></h3>
  91. </header>
  92. <p>Lorem ipsum dolor odio facilisis convallis. Etiam non nunc vel est
  93. suscipit convallis non id orci lorem ipsum sed magna consequat feugiat lorem dolore.</p>
  94. </article>
  95.  
  96. </li>
  97. <li>
  98.  
  99. <!-- Excerpt -->
  100. <article class="box excerpt">
  101. <header>
  102. <span class="date">July 24</span>
  103. <h3><a href="#">One more post</a></h3>
  104. </header>
  105. <p>Lorem ipsum dolor odio facilisis convallis. Etiam non nunc vel est
  106. suscipit convallis non id orci lorem ipsum sed magna consequat feugiat lorem dolore.</p>
  107. </article>
  108.  
  109. </li>
  110. </ul>
  111. </section>
  112.  
  113. <!-- Highlights -->
  114. <section>
  115. <ul class="divided">
  116. <li>
  117.  
  118. <!-- Highlight -->
  119. <article class="box highlight">
  120. <header>
  121. <h3><a href="#">Something of note</a></h3>
  122. </header>
  123. <a href="#" class="image left"><img src="images/pic06.jpg" alt="" /></a>
  124. <p>Phasellus sed laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam
  125. viverra sit amet mollis tortor congue magna lorem ipsum dolor et quisque ut odio facilisis
  126. convallis. Etiam non nunc vel est suscipit convallis non id orci. Ut interdum tempus
  127. facilisis convallis. Etiam non nunc vel est suscipit convallis non id orci.</p>
  128. <ul class="actions">
  129. <li><a href="#" class="button icon fa-file">Learn More</a></li>
  130. </ul>
  131. </article>
  132.  
  133. </li>
  134. <li>
  135.  
  136. <!-- Highlight -->
  137. <article class="box highlight">
  138. <header>
  139. <h3><a href="#">Something of less note</a></h3>
  140. </header>
  141. <a href="#" class="image left"><img src="images/pic07.jpg" alt="" /></a>
  142. <p>Phasellus sed laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam
  143. viverra sit amet mollis tortor congue magna lorem ipsum dolor et quisque ut odio facilisis
  144. convallis. Etiam non nunc vel est suscipit convallis non id orci. Ut interdum tempus
  145. facilisis convallis. Etiam non nunc vel est suscipit convallis non id orci.</p>
  146. <ul class="actions">
  147. <li><a href="#" class="button icon fa-file">Learn More</a></li>
  148. </ul>
  149. </article>
  150.  
  151. </li>
  152. </ul>
  153. </section>
  154. <!-- ###CONTENT_2_2### -->
  155. </div>
  156.  
  157. <!-- Content -->
  158. <div id="content" class="8u 12u(mobile) important(mobile)">
  159. <!-- ###CONTENT_2_1### -->
  160. <!-- Post -->
  161. <article class="box post">
  162. <header>
  163. <h2>Behold! This is the <strong>left sidebar</strong> layout<br />
  164. with a sidebar on the left!</h2>
  165. </header>
  166. <span class="image featured"><img src="images/pic04.jpg" alt="" /></span>
  167. <h3>Left is the opposite of right</h3>
  168. <p>Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit
  169. ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris
  170. sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada
  171. in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
  172. magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros
  173. consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
  174. justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
  175. mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique.
  176. Curabitur leo nibh, rutrum eu malesuada in, tristique at erat.</p>
  177. <p>Erat lorem ipsum veroeros consequat magna tempus lorem ipsum consequat
  178. Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula
  179. vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet
  180. magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada in,
  181. tristique at erat. Curabitur leo nibh, rutrum eu malesuada in, tristique
  182. at erat lorem ipsum dolor sit amet lorem ipsum sed consequat magna
  183. tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros consequat
  184. magna tempus</p>
  185. <p>Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit
  186. ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris
  187. sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada
  188. in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
  189. consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
  190. in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
  191. magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros
  192. consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
  193. justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
  194. mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique.
  195. Curabitur leo nibh, rutrum eu malesuada in, tristique at erat.</p>
  196. <h3>Accumsan lorem ipsum veroeros</h3>
  197. <p>Consequat Phasellus laoreet massa id in, tristique at erat lorem
  198. ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros
  199. consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
  200. justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
  201. mollis tortor congue. Sed quis mauris sit amet magna.</p>
  202. <p>Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit
  203. ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris
  204. sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada
  205. in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
  206. consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
  207. in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
  208. magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros
  209. consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
  210. justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
  211. mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique.
  212. Curabitur leo nibh, rutrum eu malesuada in, tristique at erat.</p>
  213. <h3>Ligula suspcipit fusce veroeros</h3>
  214. <p>Nullam dolore etiam sed massa id in, tristique at erat lorem
  215. ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros
  216. consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
  217. justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
  218. mollis tortor congue. Sed quis mauris sit amet magna.</p>
  219. <p>Sed massa id justo mattis pharetra. Fusce suscipit
  220. ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris
  221. sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada
  222. in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
  223. consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
  224. in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
  225. magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros
  226. consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
  227. justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
  228. mollis tortor congue. Sed quis mauris sit amet magna accumsan.</p>
  229. </article>
  230. <!-- ###CONTENT_2_1### -->
  231. </div>
  232.  
  233. </div>
  234. </div>
  235. </div>
  236.  
  237. <!-- Footer -->
  238. <div id="footer-wrapper">
  239. <div id="footer" class="container">
  240. <header>
  241. <h2>Fragen oder Kommentare? <strong>Nimm Kontakt zu mir auf</strong></h2>
  242. </header>
  243. <div class="row">
  244. <div class="6u 12u(mobile)">
  245. <!-- ###FOOTER_FORM### -->
  246. <section>
  247. <form method="post" action="#">
  248. <div class="row 50%">
  249. <div class="6u 12u(mobile)">
  250. <input name="name" placeholder="Name" type="text" />
  251. </div>
  252. <div class="6u 12u(mobile)">
  253. <input name="email" placeholder="Email" type="text" />
  254. </div>
  255. </div>
  256. <div class="row 50%">
  257. <div class="12u">
  258. <textarea name="message" placeholder="Message"></textarea>
  259. </div>
  260. </div>
  261. <div class="row 50%">
  262. <div class="12u">
  263. <a href="#" class="form-button-submit button icon fa-envelope">Send Message</a>
  264. </div>
  265. </div>
  266. </form>
  267. </section>
  268. <!-- ###FOOTER_FORM### -->
  269. </div>
  270. <div class="6u 12u(mobile)">
  271. <!-- ###FOOTER_SOCIAL### -->
  272. <section>
  273. <p>Erat lorem ipsum veroeros consequat magna tempus lorem ipsum consequat Phaselamet
  274. mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique. Curabitur
  275. leo nibh, rutrum eu malesuada.</p>
  276. <div class="row">
  277. <div class="6u 12u(mobile)">
  278. <ul class="icons">
  279. <li class="icon fa-home">
  280. 1234 Somewhere Road<br />
  281. Nashville, TN 00000<br />
  282. USA
  283. </li>
  284. <li class="icon fa-phone">
  285. (000) 000-0000
  286. </li>
  287. <li class="icon fa-envelope">
  288. <a href="#">info@untitled.tld</a>
  289. </li>
  290. </ul>
  291. </div>
  292. <div class="6u 12u(mobile)">
  293. <ul class="icons">
  294. <li class="icon fa-twitter">
  295. <a href="#">@untitled-tld</a>
  296. </li>
  297. <li class="icon fa-instagram">
  298. <a href="#">instagram.com/untitled-tld</a>
  299. </li>
  300. <li class="icon fa-dribbble">
  301. <a href="#">dribbble.com/untitled-tld</a>
  302. </li>
  303. <li class="icon fa-facebook">
  304. <a href="#">facebook.com/untitled-tld</a>
  305. </li>
  306. </ul>
  307. </div>
  308. </div>
  309. </section>
  310. <!-- ###FOOTER_SOCIAL### -->
  311. </div>
  312. </div>
  313. </div>
  314. <div id="copyright" class="container">
  315. <ul class="links">
  316. <li>&copy; 2018 by Dominic.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
  317. </ul>
  318. </div>
  319. </div>
  320.  
  321. </div>
  322. <!-- ###DOCUMENT_BODY### -->
  323. <!-- Scripts -->
  324. <script src="assets/js/jquery.min.js"></script>
  325. <script src="assets/js/jquery.dropotron.min.js"></script>
  326. <script src="assets/js/skel.min.js"></script>
  327. <script src="assets/js/skel-viewport.min.js"></script>
  328. <script src="assets/js/util.js"></script>
  329. <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
  330. <script src="assets/js/main.js"></script>
  331.  
  332. </body>
  333. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!