Advertisement
extasisthemes

Rainy Days

Jun 8th, 2017
723
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.46 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <!----- Rainy Days by extasisthemes ----->
  6.  
  7. <head>
  8.  
  9. <title>{Title}</title>
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12.  
  13. <meta name="color:Asker" content="#555555"/>
  14. <meta name="color:Background" content="#f5f5f5"/>
  15. <meta name="color:Blockquote" content="#eeeeee"/>
  16. <meta name="color:Blog Title" content="#ffffff"/>
  17. <meta name="color:Blog Title Background" content="#eeddee"/>
  18. <meta name="color:Border" content="#eeeeee"/>
  19. <meta name="color:Caption Background" content="#f2f2f2"/>
  20. <meta name="color:Caption Border" content="#eeeeee"/>
  21. <meta name="color:Credit" content="#000000"/>
  22. <meta name="color:Credit Background" content="#ffffff"/>
  23. <meta name="color:Hover" content="#cfcfcf"/>
  24. <meta name="color:Link" content="#000000"/>
  25. <meta name="color:Link Border" content="#eeeeee"/>
  26. <meta name="color:List" content="#eeeeee"/>
  27. <meta name="color:Post Background" content="#ffffff"/>
  28. <meta name="color:Post Title" content="#555555"/>
  29. <meta name="color:Push Background" content="#f5f5f5"/>
  30. <meta name="color:Scrollbar" content="#000000"/>
  31. <meta name="color:Tabs Background" content="#ffffff"/>
  32. <meta name="color:Text" content="#555555"/>
  33. <meta name="color:Tooltip Background" content="#ffffff"/>
  34.  
  35. <meta name="text:Link 1" content="/"/>
  36. <meta name="text:Link 1 Title" content="Link One"/>
  37. <meta name="text:Link 2" content="/"/>
  38. <meta name="text:Link 2 Title" content="Link Two"/>
  39.  
  40. <meta name="text:Title" content="Rainy Days"/>
  41.  
  42. <meta name="image:Image" content="http://i.imgur.com/EuNPZzG.png"/>
  43. <meta name="image:Background" content="http://i.imgur.com/g0hE4jY.png"/>
  44. <meta name="image:Tabs Image" content="http://i.imgur.com/Fet7354.png"/>
  45. <meta name="image:Icon Image" content="http://i.imgur.com/fNH5e2R.png"/>
  46.  
  47. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  48. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  49. <script>
  50. (function($){
  51. $(document).ready(function(){
  52. $("a[title]").style_my_tooltips({
  53. tip_follows_cursor:true,
  54. tip_delay_time:90,
  55. tip_fade_speed:600,
  56. attribute:"title"
  57. });
  58. });
  59. })(jQuery);
  60. </script>
  61.  
  62. <script>
  63. function openNav() {
  64. document.getElementById("mySidenav").style.width = "100%";
  65. }
  66. function closeNav() {
  67. document.getElementById("mySidenav").style.width = "0";
  68. }
  69. </script>
  70.  
  71. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  72.  
  73. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  74.  
  75. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  76.  
  77. <script src="https://use.fontawesome.com/b01aac9904.js"></script>
  78.  
  79. <style type="text/css">
  80.  
  81. @import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');
  82. @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,600italic,400italic);
  83.  
  84. ::-webkit-scrollbar-thumb:vertical {
  85. background:{color:Scrollbar};
  86. height:25px;
  87. }
  88.  
  89. ::-webkit-scrollbar {
  90. width:3px;
  91. }
  92.  
  93. #s-m-t-tooltip {
  94. background:{color:Tooltip Background};
  95. border:1px solid {color:Border};
  96. color:{color:Text};
  97. font-family:'Inconsolata', monospace;
  98. font-size:13px;
  99. font-style:normal;
  100. font-weight:normal;
  101. letter-spacing:0.1em;
  102. line-height:120%;
  103. margin-top:20px;
  104. padding:10px;
  105. text-align:center;
  106. text-decoration:none;
  107. text-transform:uppercase;
  108. z-index:999999999999999999999999999999999999;
  109. }
  110.  
  111. body {
  112. background:{color:Background};
  113. color:{color:Text};
  114. cursor:url(http://i.imgur.com/lhPqll6.png), progress;
  115. font-family:'Inconsolata', monospace;
  116. font-size:13px;
  117. font-style:normal;
  118. font-weight:normal;
  119. letter-spacing:0.1em;
  120. line-height:120%;
  121. margin:0px;
  122. text-align:justify;
  123. text-decoration:none;
  124. text-transform:none;
  125. word-break:break-word;
  126. }
  127.  
  128. a {
  129. border-bottom:1px solid {color:Link Border};
  130. color:{color:Link};
  131. text-decoration:none;
  132. -webkit-transition: all 0.5s ease;
  133. -moz-transition: all 0.5s ease;
  134. -o-transition: all 0.5s ease;
  135. }
  136.  
  137. a:hover {
  138. color:{color:Hover};
  139. }
  140.  
  141. h1 {
  142. color:{color:Post Title};
  143. font-family:'Inconsolata', monospace;
  144. font-size:16px;
  145. font-style:normal;
  146. font-weight:600;
  147. letter-spacing:0.1em;
  148. text-align:left;
  149. text-decoration:none;
  150. text-transform:none;
  151. }
  152.  
  153. blockquote {
  154. border-left:1px solid {color:Blockquote};
  155. margin:5px;
  156. padding-left:5px;
  157. }
  158.  
  159. blockquote img {
  160. height:auto;
  161. max-width:200px;
  162. }
  163.  
  164. blockquote blockquote {
  165. border-left:1px solid {color:Blockquote};
  166. padding-left:5px;
  167. }
  168.  
  169. img {
  170. height:auto;
  171. max-width:100%;
  172. }
  173.  
  174. #container {
  175. margin-bottom:100px;
  176. margin-left:auto;
  177. margin-right:auto;
  178. margin-top:100px;
  179. width:834px;
  180. }
  181.  
  182. #sidebar {
  183. height:100%;
  184. margin-left:590px;
  185. position:fixed;
  186. width:200px;
  187. }
  188.  
  189. .image {
  190. height:175px;
  191. width:200px;
  192. }
  193.  
  194. .image img {
  195. height:175px;
  196. width:200px;
  197. }
  198.  
  199. .title {
  200. background:{color:Blog Title Background};
  201. color:{color:Blog Title};
  202. font-family:'Inconsolata', monospace;
  203. font-size:16px;
  204. font-style:normal;
  205. font-weight:900;
  206. letter-spacing:0.1em;
  207. padding:20px;
  208. text-decoration:none;
  209. text-align:justify;
  210. text-transform:lowercase;
  211. }
  212.  
  213. .description {
  214. background:{color:Post Background};
  215. color:{color:Text};
  216. font-family:'Inconsolata', monospace;
  217. font-size:13px;
  218. font-style:normal;
  219. font-weight:normal;
  220. letter-spacing:0.1em;
  221. margin-bottom:20px;
  222. padding:20px;
  223. text-decoration:none;
  224. text-align:justify;
  225. text-transform:none;
  226. }
  227.  
  228. .links {
  229. color:{color:Blog Title};
  230. font-family:'Inconsolata', monospace;
  231. font-size:13px;
  232. font-style:normal;
  233. font-weight:normal;
  234. letter-spacing:0.1em;
  235. margin-left:210px;
  236. position:fixed;
  237. text-decoration:none;
  238. text-align:center;
  239. text-transform:lowercase;
  240. }
  241.  
  242. .links a {
  243. background:{color:Blog Title Background};
  244. border-bottom:none;
  245. color:{color:Blog Title};
  246. display:block;
  247. margin-bottom:10px;
  248. padding:10px;
  249. }
  250.  
  251. .links a:hover {
  252. color:{color:Hover};
  253. }
  254.  
  255. .push {
  256. background-color:{color:Push Background};
  257. height:100%;
  258. left:0;
  259. overflow-x:hidden;
  260. position:fixed;
  261. top:0;
  262. transition:0.5s;
  263. width:0;
  264. z-index:1;
  265. }
  266.  
  267. .push-content {
  268. color:{color:Text};
  269. font-family:'Inconsolata', monospace;
  270. font-size:13px;
  271. font-style:normal;
  272. font-weight:normal;
  273. letter-spacing:0.1em;
  274. margin-bottom:100px;
  275. margin-left:auto;
  276. margin-right:auto;
  277. margin-top:100px;
  278. text-align:justify;
  279. text-decoration:none;
  280. text-transform:none;
  281. transition:0.3s;
  282. width:500px;
  283. }
  284.  
  285. .push .closebtn {
  286. border-right:1px solid {color:Border};
  287. color:{color:Blog Title};
  288. font-family:'Inconsolata', monospace;
  289. font-size:16px;
  290. font-style:normal;
  291. font-weight:600;
  292. letter-spacing:0.1em;
  293. padding:10px;
  294. padding-left:0px;
  295. text-align:center;
  296. text-decoration:none;
  297. text-transform:uppercase;
  298. }
  299.  
  300. #tabs-image {
  301. height:100px;
  302. width:400px;
  303. }
  304.  
  305. #tabs-image img {
  306. height:100px;
  307. width:400px;
  308. }
  309.  
  310. .tabs {
  311. margin-bottom:100px;
  312. margin-left:auto;
  313. margin-right:auto;
  314. width:400px;
  315. }
  316.  
  317. .tab-links {
  318. background:{color:Blog Title Background};
  319. color:{color:Blog Title};
  320. padding:10px;
  321. }
  322.  
  323. .tab-links li {
  324. display:inline-block;
  325. font-family:'Inconsolata', monospace;
  326. font-size:13px;
  327. font-style:normal;
  328. font-weight:normal;
  329. letter-spacing:0.1em;
  330. text-decoration:none;
  331. text-align:left;
  332. text-transform:uppercase;
  333. }
  334.  
  335. .tab-links a {
  336. border-bottom:none;
  337. color:{color:Blog Title};
  338. }
  339.  
  340. .tab-links a:hover {
  341. color:{color:Hover};
  342. }
  343.  
  344. li.active a, li.active a:hover {
  345. color:{color:Hover};
  346. -webkit-transition: all .3s;
  347. -moz-transition: all .3s;
  348. -o-transition: all .3s;
  349. -ms-transition: all .3s;
  350. transition: all .3s;
  351. }
  352.  
  353. .tab-content {
  354. background:{color:Tabs Background};
  355. padding:20px;
  356. }
  357.  
  358. .tab {
  359. display:none;
  360. }
  361.  
  362. .tab.active {
  363. display:block;
  364. }
  365.  
  366. .about-links {
  367. border-top:1px solid {color:Border};
  368. color:{color:Text};
  369. font-family:'Inconsolata', monospace;
  370. font-size:13px;
  371. font-style:normal;
  372. font-weight:normal;
  373. letter-spacing:0.1em;
  374. margin-left:auto;
  375. margin-right:auto;
  376. margin-top:20px;
  377. padding-top:20px;
  378. text-align:justify;
  379. text-decoration:none;
  380. text-transform:none;
  381. }
  382.  
  383. .about-links a {
  384. border-bottom:none;
  385. color:{color:Link};
  386. display:inline-block;
  387. margin-right:10px;
  388. }
  389.  
  390. .about-links a:hover {
  391. color:{color:Hover};
  392. }
  393.  
  394. #faq {
  395. width:360px;
  396. }
  397.  
  398. .faq-question {
  399. color:{color:Text};
  400. font-family:'Inconsolata', monospace;
  401. font-size:13px;
  402. font-style:normal;
  403. font-weight:normal;
  404. letter-spacing:0.1em;
  405. text-decoration:none;
  406. text-align:justify;
  407. text-transform:none;
  408. }
  409.  
  410. .faq-answer {
  411. color:{color:Text};
  412. border-left:1px solid {color:Border};
  413. font-family:'Inconsolata', monospace;
  414. font-size:13px;
  415. font-style:normal;
  416. font-weight:normal;
  417. letter-spacing:0.1em;
  418. margin-left:20px;
  419. margin-top:10px;
  420. padding-left:10px;
  421. text-decoration:none;
  422. text-align:justify;
  423. text-transform:none;
  424. }
  425.  
  426. .navigation {
  427. width:360px;
  428. }
  429.  
  430. .navigation-title {
  431. color:{color:Text};
  432. font-family:'Inconsolata', monospace;
  433. font-size:13px;
  434. font-style:normal;
  435. font-weight:normal;
  436. letter-spacing:0.1em;
  437. margin-top:10px;
  438. padding-left:10px;
  439. text-decoration:none;
  440. text-align:left;
  441. text-transform:none;
  442. }
  443.  
  444. .navigation-links {
  445. color:{color:Link};
  446. font-family:'Inconsolata', monospace;
  447. font-size:13px;
  448. font-style:normal;
  449. font-weight:normal;
  450. letter-spacing:0.1em;
  451. text-decoration:none;
  452. text-align:left;
  453. text-transform:none;
  454. width:380px;
  455. }
  456.  
  457. .navigation-links a {
  458. border-bottom:none;
  459. color:{color:Link};
  460. display:inline-block;
  461. padding:10px;
  462. width:101px;
  463. }
  464.  
  465. .navigation-links a:hover {
  466. color:{color:Hover};
  467. }
  468.  
  469. #posts {
  470. margin-bottom:100px;
  471. margin-top:100px;
  472. width:400px;
  473. }
  474.  
  475. .entries {
  476. background:{color:Post Background};
  477. padding:20px;
  478. width:400px;
  479. }
  480.  
  481. .entries img {
  482. width:400px;
  483. }
  484.  
  485. .caption {
  486. font-size:11px;
  487. margin-top:5px;
  488. background:{color:Caption Background};
  489. border:1px solid {color:Border};
  490. padding:10px;
  491. text-transform:uppercase;
  492. }
  493.  
  494. #quote {
  495. color:{color:Text};
  496. font-family:'Inconsolata', monospace;
  497. font-size:16px;
  498. font-style:normal;
  499. font-weight:normal;
  500. letter-spacing:0.1em;
  501. text-align:justify;
  502. text-decoration:none;
  503. text-transform:none;
  504. }
  505.  
  506. #chat {
  507. color:{color:Text};
  508. font-family:'Inconsolata', monospace;
  509. font-size:13px;
  510. font-style:normal;
  511. font-weight:normal;
  512. letter-spacing:0.1em;
  513. text-align:justify;
  514. text-decoration:none;
  515. text-transform:uppercase;
  516. }
  517.  
  518. #website {
  519. color:{color:Text};
  520. font-family:'Inconsolata', monospace;
  521. font-size:13px;
  522. font-style:normal;
  523. font-weight:normal;
  524. letter-spacing:0.1em;
  525. text-align:justify;
  526. text-decoration:none;
  527. text-transform:none;
  528. }
  529.  
  530. .question {
  531. border:1px solid {color:Border};
  532. color:{color:Text};
  533. font-family:'Inconsolata', monospace;
  534. font-size:12px;
  535. font-style:normal;
  536. font-weight:normal;
  537. letter-spacing:0.1em;
  538. margin-bottom:10px;
  539. padding:20px;
  540. text-align:justify;
  541. text-decoration:none;
  542. text-transform:none;
  543. }
  544.  
  545. .asker {
  546. color:{color:Asker};
  547. font-family:'Inconsolata', monospace;
  548. font-size:13px;
  549. font-style:normal;
  550. font-weight:normal;
  551. letter-spacing:0.1em;
  552. text-align:justify;
  553. text-decoration:none;
  554. text-transform:uppercase;
  555. }
  556.  
  557. .asker a {
  558. border-bottom:1px solid {color:Border};
  559. color:{color:Asker};
  560. }
  561.  
  562. .asker a:hover {
  563. color:{color:Hover};
  564. }
  565.  
  566. .album {
  567. font-size:10px;
  568. height:65px;
  569. position:absolute;
  570. width:65px;
  571. }
  572.  
  573. .album img {
  574. height:65px;
  575. width:65px;
  576. }
  577.  
  578. #info {
  579. background:{color:Blog Title Background};
  580. color:{color:Blog Title};
  581. font-family:'Inconsolata', monospace;
  582. font-size:13px;
  583. font-style:normal;
  584. font-weight:normal;
  585. letter-spacing:0.1em;
  586. padding:20px;
  587. margin-bottom:50px;
  588. text-align:left;
  589. text-decoration:none;
  590. text-transform:uppercase;
  591. width:400px;
  592. }
  593.  
  594. #info a {
  595. color:{color:Blog Title};
  596. }
  597.  
  598. #info a:hover {
  599. color:{color:Hover};
  600. }
  601.  
  602. #tags {
  603. color:{color:Blog Title};
  604. font-family:'Inconsolata', monospace;
  605. font-size:13px;
  606. font-style:normal;
  607. font-weight:normal;
  608. letter-spacing:0.1em;
  609. text-align:left;
  610. text-decoration:none;
  611. text-transform:uppercase;
  612. }
  613.  
  614. #tags a {
  615. color:{color:Blog Title};
  616. }
  617.  
  618. #tags a:hover {
  619. color:{color:Hover};
  620. }
  621.  
  622. #notes {
  623. color:{color:Blog Title};
  624. font-family:'Inconsolata', monospace;
  625. font-size:13px;
  626. font-style:normal;
  627. font-weight:normal;
  628. letter-spacing:0.1em;
  629. text-align:left;
  630. text-decoration:none;
  631. text-transform:uppercase;
  632. }
  633.  
  634. #notes a {
  635. color:{color:Blog Title};
  636. }
  637.  
  638. #notes a:hover {
  639. color:{color:Hover};
  640. }
  641.  
  642. #notes img {
  643. display:none;
  644. }
  645.  
  646. .pagination {
  647. color:{color:Text};
  648. font-family:'Inconsolata', monospace;
  649. font-size:13px;
  650. font-style:normal;
  651. font-weight:normal;
  652. letter-spacing:0.1em;
  653. margin-bottom:100px;
  654. text-align:center;
  655. text-decoration:none;
  656. text-transform:uppercase;
  657. width:440px;
  658. }
  659.  
  660. .pagination a {
  661. color:{color:Link};
  662. }
  663.  
  664. .pagination a:hover {
  665. color:{color:Hover};
  666. }
  667.  
  668. #credit {
  669. background:{color:Credit Background};
  670. border:1px solid {color:Border};
  671. bottom:15px;
  672. color:{color:Credit};
  673. float:right;
  674. font-family:'Open Sans', sans-serif;
  675. font-size:10px;
  676. font-style:normal;
  677. font-weight:normal;
  678. letter-spacing:0px;
  679. padding:5px;
  680. position:fixed;
  681. right:15px;
  682. text-align:justify;
  683. text-decoration:none;
  684. text-transform:uppercase;
  685. }
  686.  
  687. #credit a {
  688. border-bottom:none;
  689. color:{color:Credit};
  690. }
  691.  
  692. #credit a:hover {
  693. color:{color:Hover};
  694. }
  695.  
  696. {CustomCSS}</style></head><body>
  697.  
  698. <div id="mySidenav" class="push">
  699.  
  700. <div class="push-content">
  701.  
  702. <div class="tabs">
  703.  
  704. <div id="tabs-image"><img src="{image:Tabs Image}"/></div>
  705.  
  706. <div class="tab-links">
  707. <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><i class="fa fa-times" aria-hidden="true"></i></a>
  708. <li class="active" style="margin-left:10px;"><a href="#tab1"><font style="margin-right:5px;"><i class="fa fa-user" aria-hidden="true"></i></font>About Me</a></li>
  709. <li style="margin-left:2px;"><a href="#tab2"><font style="margin-right:5px;"><i class="fa fa-question" aria-hidden="true"></i></font>Message</a></li>
  710. <li style="margin-left:2px;"><a href="#tab3"><font style="margin-right:5px;"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></font>Navigation</a></li>
  711. </div>
  712.  
  713. </div>
  714.  
  715. </div>
  716.  
  717. <div class="tabs" style="margin-top:-100px;">
  718.  
  719. <div class="tab-content">
  720.  
  721. <div id="tab1" class="tab active">
  722.  
  723. <h1>About Me</h1>
  724.  
  725. <img src="{image:Icon Image}" align="left" style="background:{color:Icon Background};border:1px solid {color:Border};height:55px;margin-right:11px;padding:2px;width:55px;">Lorem ipsum dolor sit amet, vivendum quaerendum necessitatibus cu per, velit integre ad eam. Doctus tincidunt intellegam his ut. Nihil commune in duo, agam everti accommodare an qui. Pri an nibh ridens meliore, ne graeco contentiones definitionem qui.Brute everti dissentias nam ea, labores interesset interpretaris in eum.
  726.  
  727. <div class="about-links">
  728. <a href="/">Link One</a>
  729. <a href="/">Link Two</a>
  730. <a href="/">Link Three</a>
  731. </div>
  732.  
  733. </div>
  734.  
  735. <div id="tab2" class="tab">
  736.  
  737. <h1>Message</h1>
  738.  
  739. <div id="faq">
  740.  
  741. <div class="faq-question">What is Lorem Ipsum?</div>
  742.  
  743. <div class="faq-answer">
  744. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  745. </div>
  746.  
  747. </div>
  748.  
  749. <div id="faq">
  750.  
  751. <div class="faq-question">Why do we use it?</div>
  752.  
  753. <div class="faq-answer">
  754. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
  755. </div>
  756.  
  757. </div>
  758.  
  759. <div id="faq">
  760.  
  761. <div class="faq-question">Where does it come from?</div>
  762.  
  763. <div class="faq-answer">
  764. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
  765. </div>
  766.  
  767. </div>
  768.  
  769. <p><iframe id="ask_form" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com "frameborder="0" scrolling="no" width="100%" height="260"></iframe></p>
  770.  
  771. </div>
  772.  
  773. <div id="tab3" class="tab" style="margin-left:-10px;width:420px;">
  774.  
  775. <div id="navigation" style="padding-top:0px;">
  776.  
  777. <h1 style="padding-left:10px;">Navigation</h1>
  778.  
  779. <div class="navigation-title">Category One</div>
  780.  
  781. <div class="navigation-links">
  782. <a href="/">Link One</a>
  783. <a href="/">Link Two</a>
  784. <a href="/">Link Three</a>
  785. <a href="/">Link Four</a>
  786. <a href="/">Link Five</a>
  787. <a href="/">Link Six</a>
  788. <a href="/">Link Seven</a>
  789. </div>
  790.  
  791. <div class="navigation-title">Category Two</div>
  792.  
  793. <div class="navigation-links">
  794. <a href="/">Link One</a>
  795. <a href="/">Link Two</a>
  796. <a href="/">Link Three</a>
  797. <a href="/">Link Four</a>
  798. <a href="/">Link Five</a>
  799. <a href="/">Link Six</a>
  800. <a href="/">Link Seven</a>
  801. <a href="/">Link Eight</a>
  802. <a href="/">Link Nine</a>
  803. <a href="/">Link Ten</a>
  804. <a href="/">Link Eleven</a>
  805. </div>
  806.  
  807. <div class="navigation-title">Category Three</div>
  808.  
  809. <div class="navigation-links">
  810. <a href="/">Link One</a>
  811. <a href="/">Link Two</a>
  812. <a href="/">Link Three</a>
  813. <a href="/">Link Four</a>
  814. <a href="/">Link Five</a>
  815. <a href="/">Link Six</a>
  816. <a href="/">Link Seven</a>
  817. </div>
  818.  
  819. </div>
  820.  
  821. </div>
  822.  
  823. </div>
  824.  
  825. </div>
  826.  
  827. </div>
  828.  
  829. </div>
  830.  
  831. <div id="container">
  832.  
  833. <div id="sidebar">
  834.  
  835. <div class="links">
  836. <a href="/" title="Home"><i class="fa fa-home" aria-hidden="true"></i></a>
  837. <span onclick="openNav()" style="background:{color:Blog Title Background};border-bottom:none;color:{color:Blog Title};display:block;margin-bottom:10px;padding:10px;" title="Links"><i class="fa fa-list-ul" aria-hidden="true"></i></span>
  838. {block:ifLink1}<a href="{text:Link 1}" title="{text:Link 1 Title}"><i class="fa fa-link" aria-hidden="true"></i></a>{/block:ifLink1}
  839. {block:ifLink2}<a href="{text:Link 2}" title="{text:Link 2 Title}"><i class="fa fa-link" aria-hidden="true"></i></a>{/block:ifLink2}
  840. <a href="/archive" title="Archive"><i class="fa fa-calendar" aria-hidden="true"></i></a>
  841. </div>
  842.  
  843. <div class="image"><img src="{image:Image}"/></div>
  844.  
  845. <div class="title">{text:Title}</div>
  846.  
  847. <div class="description">{Description}</div>
  848.  
  849. </div>
  850.  
  851. <div id="posts">
  852. {block:Posts}
  853. <div class="entries" >
  854.  
  855. {block:Photo}<img src="{PhotoURL-400}">
  856. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  857. {/block:Photo}
  858.  
  859. {block:Photoset}{Photoset}
  860. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  861. {/block:Photoset}
  862.  
  863. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  864.  
  865. {block:Quote}<div id="quote">"{Quote}"{block:Source} — {Source}</div>{/block:Source}{/block:Quote}
  866.  
  867. {block:Link}<div id="website"><a href="{URL}" {Target}>{Name}</a></div>{block:Description}{Description}{/block:Description}{/block:Link}
  868.  
  869. <div id="chat">
  870. {block:Chat}
  871. {block:Title}
  872. <h1>{Title}</h1>
  873. {/block:Title}
  874. {block:Lines}
  875. {block:Label}<b>{Label}</b>{/block:Label}
  876. {Line}
  877. <br>
  878. {/block:Lines}{/block:Chat}
  879. </div>
  880.  
  881. {block:Audio}
  882. {block:AlbumArt}<div class="album"><img src="{AlbumArtURL}"/></div>{/block:AlbumArt}
  883. <div style="margin-left:70px;">
  884. <div style="background:{color:Caption Background};border:1px solid {color:Border};">{AudioPlayerWhite}</div>
  885. <div class="caption">
  886. {block:TrackName}<b>Track:</b> {TrackName}<br>{/block:TrackName}
  887. {block:Artist}<b>Artist:</b> {Artist}<br>{/block:Artist}
  888. {block:Album}<b>Album:</b> {Album}<br>{/block:Album}
  889. {block:PlayCount}<b>Played:</b> {PlayCount}{/block:PlayCount}
  890. </div>
  891. </div>
  892. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  893. {/block:Audio}
  894.  
  895. {block:Video}
  896. {Video-400}
  897. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  898. {/block:Video}
  899.  
  900. {block:Answer}
  901. <div class="question">
  902. <span class="asker"><a href="{AskerURL}">{Asker}</a></span> {Question}</div>
  903. {Answer}
  904. {/block:Answer}
  905. </div>
  906.  
  907. {block:Date}<div id="info"><span style="
  908. border:1px solid {color:Border};display:inline-block;margin-bottom:3px;padding:3px;">{Month} {DayOfMonth}, {Year}</span> <font style="margin-left:10px;"><a href="{Permalink}">{NoteCount}</a> notes</font> {/block:Date} <font style="float:right;">{block:RebloggedFrom} <a href="{ReblogParentURL}">Via</a> / {/block:RebloggedFrom} {block:ContentSource} <a href="{SourceURL}">Source</a> / {/block:ContentSource} <a href="{ReblogURL}" target="_blank">Reblog</a>{/block:RebloggedFrom}</font>
  909.  
  910. {block:HasTags}<div id="tags">{block:Tags} #<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}
  911. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}</div>
  912.  
  913. {/block:Posts}
  914.  
  915. {block:IndexPage}
  916. <div class="pagination">
  917. {block:PreviousPage}
  918. <a href="{PreviousPage}">previous</a>
  919. {/block:PreviousPage}
  920. {CurrentPage} out of {TotalPages}
  921. {block:NextPage}
  922. <a href="{NextPage}">next</a>
  923. {/block:NextPage}
  924. </div>
  925. {/block:IndexPage}
  926.  
  927. </div>
  928.  
  929. <script>
  930. $(document).ready(function() {
  931. $('.tab-links a').on('click', function(e) {
  932. var currentAttrValue = $(this).attr('href');
  933. $('' + currentAttrValue).fadeIn(600).siblings().hide();
  934. $(this).parent('li').addClass('active').siblings().removeClass('active');
  935. e.preventDefault();
  936. });
  937. });
  938. </script>
  939.  
  940. <script>
  941. $(document).ready(function() {
  942. $('#filterOptions li a').click(function() {
  943. var ourClass = $(this).attr('class');
  944. $('#filterOptions li').removeClass('active');
  945. $(this).parent().addClass('active');
  946. if(ourClass == 'all') {
  947. $('#ourHolder').children('div.item').show();
  948. }
  949. else {
  950. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  951. $('#ourHolder').children('div.' + ourClass).show();
  952. }
  953. return false;
  954. });
  955. });
  956. </script>
  957.  
  958. <div id="credit">
  959. <a href="http://extasisthemes.tumblr.com/">ET</a>
  960. </div>
  961.  
  962. </body>
  963. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement