API tools faq
paste
Advertisement
b0rn-to-be-wild

Page: AUTUMNAL (dark)

b0rn-to-be-wild
Mar 5th, 2018
335
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!----
  4.  
  5. ©borntobewildcodes.tumblr.com | AUTUMNAL (dark)
  6.  
  7. + Do not redistribute this page or remove the credits.
  8. + Edit as long as you keep the credits intact
  9. + Contact us if you have any questions or concerns.
  10. + If you want a custom theme you can commission us.
  11. + Thanks for using our page, we hope that you enjoy it.
  12.  
  13.  
  14. Other credits:
  15.  
  16. - Google fonts
  17. - Saturn icons
  18. - Jquery
  19.  
  20. ---->
  21.  
  22. <html>
  23. <head>
  24.  
  25. <title>{Title}</title>
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28.  
  29. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  30. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  31.  
  32. <style type="text/css">
  33.  
  34. /* ---------------------------- GENERAL ----------------------------- */
  35.  
  36. /* -------- BASICS ------- */
  37.  
  38. body {
  39. margin: 0;
  40. padding: 0;
  41. width: 100%;
  42. height: 100%;
  43. font-family: Helvetica;
  44. font-size: 12px;
  45. line-height: 17px;
  46. color: #777777;
  47. /* Background */
  48. background-color: #111111;
  49. background-image: URL('https://78.media.tumblr.com/0f76c98c126545b3f57b2d0516ab0828/tumblr_oyuukixYVJ1w4d880o3_250.png');
  50. background-attachment: fixed;
  51. background-repeat: repeat;
  52. }
  53.  
  54. /* Webkit scrollbar */
  55.  
  56. ::-webkit-scrollbar {
  57. width: 8px;
  58. height: 0px;
  59. }
  60.  
  61. ::-webkit-scrollbar-thumb:vertical {
  62. height: 0px;
  63. background-color: #eeeeee;
  64. border:3px solid #000000;
  65. }
  66.  
  67. ::-webkit-scrollbar-button:start:decrement,
  68. ::-webkit-scrollbar-button:end:increment {
  69. height: 0px;
  70. display: block;
  71. background-color: #000000;
  72. }
  73.  
  74. ::-webkit-scrollbar-track-piece {
  75. background-color: #000000;
  76. }
  77.  
  78. /* Tumblr controls */
  79.  
  80. iframe.tmblr-iframe {
  81. top:0px!important;
  82. right:33px!important;
  83. opacity:0.8;
  84. transform:scale(0.6);
  85. transform-origin:100% 0;
  86. -webkit-transform:scale(0.8);
  87. -webkit-transform-origin:100% 0;
  88. -moz-transform:scale(0.8);
  89. -moz-transform-origin:100% 0;
  90. -ms-transform:scale(0.8);
  91. -ms-transform-origin:100% 0;
  92. -o-transform:scale(0.8);
  93. -o-transform-origin:100% 0;
  94. z-index:100000!important;
  95. }
  96.  
  97. iframe.tmblr-iframe:hover {
  98. opacity:1!important;
  99. }
  100.  
  101. /* Tooltips */
  102.  
  103. .ui-tooltip {
  104. position:absolute;
  105. z-index:9999;
  106. padding-top:10px;
  107. }
  108.  
  109. .ui-tooltip-content {
  110. background:#000000;
  111. padding:0 4px;
  112. font-style:italic;
  113. color:#eeeeee;
  114. text-transform:lowercase;
  115. border:1px solid #111111;
  116. }
  117.  
  118. img {
  119. opacity:1;
  120. border:0;
  121. text-decoration:none;
  122. max-width:100%;
  123. height:auto;
  124. display:block;
  125. }
  126.  
  127. pre {
  128. padding:0;
  129. margin:0;
  130. line-height:inherit!important;
  131. background:transparent;
  132. font-family:inherit!Important;
  133. font-size:inherit!important;
  134. white-space:pre-wrap;
  135. white-space:-moz-pre-wrap;
  136. white-space:-pre-wrap;
  137. white-space:-o-pre-wrap;
  138. word-wrap:break-word;
  139. }
  140.  
  141. /* Fix */
  142.  
  143. iframe, img, embed, object, video {
  144. max-width: 100%;
  145. border: none;
  146. }
  147.  
  148. input, textarea, select, a { outline: none; }
  149.  
  150. /* Headings */
  151.  
  152. h1, h2, h3, h4 {
  153. margin:1.5em;
  154. font-size:1.5em;
  155. padding:0;
  156. font-weight:bold;
  157. }
  158.  
  159. /* Paragraph */
  160.  
  161. p { margin:5px 0px;}
  162.  
  163. p:first-of-type { margin-top:0;}
  164.  
  165. p:last-of-type { margin-bottom:0;}
  166.  
  167. small, big, sub, pre {
  168. font-size:1em!important;
  169. line-height:1.4em!important;
  170. vertical-align:baseline!important;
  171. }
  172.  
  173. /* Bold and italic */
  174.  
  175. b, strong, b a, strong a {
  176. font-weight:bold!important;
  177. color:#bbbbbb;
  178. }
  179.  
  180. i, em {
  181. color: #555555;
  182. }
  183.  
  184. /* Links */
  185.  
  186. a {
  187. color:#333333;
  188. text-decoration:none;
  189. -webkit-transition: all 0.4s ease-in-out;
  190. -moz-transition: all 0.4s ease-in-out;
  191. -ms-transition: all 0.4s ease-in-out;
  192. -o-transition: all 0.4s ease-in-out;
  193. transition: all 0.4s ease-in-out;
  194. }
  195.  
  196. a, a img {cursor:pointer;}
  197.  
  198. a:hover {
  199. color:#D88552!important;
  200. text-decoration:none;
  201. }
  202.  
  203. ul, ol, li {
  204. margin: 5px 10px;
  205. padding: 0px;
  206. }
  207.  
  208. /* Line break */
  209.  
  210. hr {
  211. border:none;
  212. box-shadow:0px;
  213. margin-top:0px;
  214. margin-bottom:15px;
  215. margin-left:0px;
  216. width:40px;
  217. padding:0px;
  218. border-top:1px solid #D88552;
  219. }
  220.  
  221. /*------------ CONTAINER ------------*/
  222.  
  223. #container {
  224. position:fixed;
  225. top:50%;
  226. left:50%;
  227. width:600px;
  228. height:450px;
  229. z-index:100;
  230. overflow:hidden;
  231. -webkit-transform:translateX(-50%) translateY(-50%);
  232. -moz-transform:translateX(-50%) translateY(-50%);
  233. -ms-transform:translateX(-50%) translateY(-50%);
  234. -o-transform:translateX(-50%) translateY(-50%);
  235. transform:translateX(-50%) translateY(-50%);
  236. /* Container background */
  237. background:#000000;
  238. border:1px solid #111111;
  239. }
  240.  
  241. /*-- SIDEBAR, I don't recommend changing anything but background, especially if you're not experienced --*/
  242.  
  243. #sidebar {
  244. position:absolute;
  245. top:0px;
  246. left:300px;
  247. width:300px;
  248. height:450px;
  249. /* Sidebar background */
  250. background-color:#111111;
  251. background-image: URL('https://78.media.tumblr.com/325d96e4c240edb78c943a13f39bc0f6/tumblr_oyuuxlK4ax1w4d880o1_500.jpg');
  252. background-repeat:no-repeat;
  253. background-size:cover;
  254. z-index:1000;
  255. -webkit-transition: all 0.5s ease;
  256. -moz-transition: all 0.5s ease;
  257. -ms-transition: all 0.5s ease;
  258. -o-transition: all 0.5s ease;
  259. transition: all 0.5s ease;
  260. }
  261.  
  262. #sidebar.pushed{
  263. -webkit-transform: translateX(-300px);
  264. -moz-transform: translateX(-300px);
  265. -ms-transform: translateX(-300px);
  266. -o-transform: translateX(-300px);
  267. transform: translateX(-300px);
  268. }
  269.  
  270. /* Click icon */
  271.  
  272. #click {
  273. position:absolute;
  274. top:50%;
  275. left:50%;
  276. width:40px;
  277. height:40px;
  278. padding:5px;
  279. line-height:45px;
  280. border:1px solid #111111;
  281. background:rgba(0,0,0,1);
  282. border-radius:100%;
  283. text-align:center;
  284. cursor:pointer;
  285. z-index:1000;
  286. -webkit-transform:translateX(-50%) translateY(-50%);
  287. -moz-transform:translateX(-50%) translateY(-50%);
  288. -ms-transform:translateX(-50%) translateY(-50%);
  289. -o-transform:translateX(-50%) translateY(-50%);
  290. transform:translateX(-50%) translateY(-50%);
  291. }
  292.  
  293. /* Click icon left */
  294.  
  295. .clicon span{
  296. color:#eeeeee;
  297. font-size:20px;
  298. }
  299.  
  300. /* Click icon left, on hover */
  301.  
  302. .clicon:hover span{
  303. color:#D88552;
  304. }
  305.  
  306. /* Click icon right */
  307.  
  308. .cricon {
  309. display:none;
  310. margin-top:-10px;
  311. -webkit-transform: rotate(180deg);
  312. -moz-transform: rotate(180deg);
  313. -ms-transform: rotate(180deg);
  314. -o-transform: rotate(180deg);
  315. transform: rotate(180deg);
  316. }
  317.  
  318. .cricon span{
  319. color:#D88552;
  320. font-size:20px;
  321. }
  322.  
  323. /* Click icon right, on hover */
  324.  
  325. .cricon:hover span{
  326. color:#eeeeee;
  327. }
  328.  
  329. /*-- PANEL ONE --*/
  330.  
  331. #panelone{
  332. position:fixed;
  333. top:0px;
  334. left:0px;
  335. height:450px;
  336. width:300px;
  337. background-color:#000000;
  338. -webkit-transition: all 0.5s ease;
  339. -moz-transition: all 0.5s ease;
  340. -ms-transition: all 0.5s ease;
  341. -o-transition: all 0.5s ease;
  342. transition: all 0.5s ease;
  343. z-index:1000!important;
  344. }
  345.  
  346. /* I don't recommend editing */
  347.  
  348. .panelin{
  349. position:absolute;
  350. top:50%;
  351. left:50%;
  352. width:330px;
  353. height:auto;
  354. -webkit-transform:translateX(-50%) translateY(-50%);
  355. -moz-transform:translateX(-50%) translateY(-50%);
  356. -ms-transform:translateX(-50%) translateY(-50%);
  357. -o-transform:translateX(-50%) translateY(-50%);
  358. transform:translateX(-50%) translateY(-50%);
  359. }
  360.  
  361. /* Avatar */
  362.  
  363. #avatar {
  364. margin:15px auto;
  365. width:90px;
  366. height:90px;
  367. border-radius:100px;
  368. -webkit-transition: all 0.5s ease;
  369. -moz-transition: all 0.5s ease;
  370. -ms-transition: all 0.5s ease;
  371. -o-transition: all 0.5s ease;
  372. transition: all 0.5s ease;
  373. }
  374.  
  375. #avatar img{
  376. margin:0;
  377. width:100%;
  378. height:100%;
  379. border:1px solid #bbbbbb;
  380. border-radius:100px;
  381. }
  382.  
  383. /* Avatar on hover */
  384.  
  385. #avatar:hover {
  386. -webkit-transform: rotate(360deg);
  387. -moz-transform: rotate(360deg);
  388. -ms-transform: rotate(360deg);
  389. -o-transform: rotate(360deg);
  390. transform: rotate(360deg);
  391. }
  392.  
  393. /* Blog title */
  394.  
  395. #blogtitle {
  396. margin:10px auto;
  397. width:285px;
  398. height:31px;
  399. font-size:27px;
  400. line-height:30px;
  401. color:#eeeeee;
  402. background: transparent;
  403. font-family:'Brutal Type', sans-serif;
  404. text-align:center;
  405. }
  406.  
  407. /* Description */
  408.  
  409. #description {
  410. margin:0px auto;
  411. width:265px;
  412. height:auto;
  413. font-size:12px;
  414. line-height:20px;
  415. color:#eeeeee;
  416. background: transparent;
  417. font-family:'Brutal Type', sans-serif;
  418. text-align:center;
  419. }
  420.  
  421. /* Main icons */
  422.  
  423. #icons {
  424. margin:0px auto;
  425. width:240px;
  426. height:51px;
  427. background: transparent;
  428. text-align:center;
  429. overflow:hidden;
  430. }
  431.  
  432. #icons span {
  433. display:inline-block;
  434. height:40px;
  435. margin:0px;
  436. margin-left:-2px;
  437. margin-right:-1px;
  438. padding:7px 10px;
  439. /* Main icons style */
  440. color: #dddddd;
  441. font-size:16px;
  442. line-height:40px;
  443. text-align:center;
  444. -webkit-transition: all 0.4s ease-in-out;
  445. -moz-transition: all 0.4s ease-in-out;
  446. -ms-transition: all 0.4s ease-in-out;
  447. -o-transition: all 0.4s ease-in-out;
  448. transition: all 0.4s ease-in-out;
  449. }
  450.  
  451. /* Main icons style on hover */
  452.  
  453. #icons span:hover {
  454. color:#D88552;
  455. }
  456.  
  457. /*-- PANEL TWO --*/
  458.  
  459. #paneltwo{
  460. position:fixed;
  461. top:0px;
  462. left:0px;
  463. height:450px;
  464. width:300px;
  465. background-color:#000000;
  466. -webkit-transition: ease 0.5s;
  467. -moz-transition: ease 0.5s;
  468. -o-transition: ease 0.5s;
  469. transition: ease 0.5s;
  470. z-index:100!imnportant;
  471. }
  472.  
  473. #paneltwo.pushedtwo{
  474. -webkit-transform: translateX(300px);
  475. -moz-transform: translateX(300px);
  476. -ms-transform: translateX(300px);
  477. -o-transform: translateX(300px);
  478. transform: translateX(300px);
  479. }
  480.  
  481. /* Big icons style, I don't recommend changing anything but color, especially if you're not experienced */
  482.  
  483. #paneltwo a{
  484. display:inline-block;
  485. margin:10px 10px 10px 32px;
  486. width:110px;
  487. height:85px;
  488. padding-top:25px;
  489. line-height:30px;
  490. font-size:13px;
  491. text-align:center;
  492. cursor:pointer;
  493. /* Big icon link color */
  494. color:#eeeeee;
  495. }
  496.  
  497. .aicon:before, .licon:before, .ticon:before, .ficon:before, .bicon:before, .eicon:before{
  498. display:block;
  499. margin-bottom:10px;
  500. font-family:'saturnicons';
  501. font-size:32px;
  502. }
  503.  
  504. /* About icon */
  505.  
  506. .aicon:before{
  507. /* Icon code */
  508. content:'\e275';
  509. /* Icon color */
  510. color:#eeeeee;
  511. }
  512.  
  513. .aicon:after{
  514. /* Section title */
  515. content:'ABOUT';
  516. }
  517.  
  518. /* Links icon */
  519.  
  520. .licon:before{
  521. /* Icon code */
  522. content:'\e190';
  523. /* Icon color */
  524. color:#eeeeee;
  525. }
  526.  
  527. .licon:after{
  528. /* Section title */
  529. content:'LINKS';
  530. }
  531.  
  532. /* Tags icon */
  533.  
  534. .ticon:before{
  535. /* Icon code */
  536. content:'\e24b';
  537. /* Icon color */
  538. color:#eeeeee;
  539. }
  540.  
  541. .ticon:after{
  542. /* Section title */
  543. content:'TAGS';
  544. }
  545.  
  546. /* F.A.Q. icon */
  547.  
  548. .ficon:before{
  549. /* Icon code */
  550. content:'\e080';
  551. /* Icon color */
  552. color:#eeeeee;
  553. }
  554.  
  555. .ficon:after{
  556. /* Section title */
  557. content:'F.A.Q.';
  558. }
  559.  
  560. /* Blogroll icon */
  561.  
  562. .bicon:before{
  563. /* Icon code */
  564. content:'\e123';
  565. /* Icon color */
  566. color:#eeeeee;
  567. }
  568.  
  569. .bicon:after{
  570. /* Section title */
  571. content:'BLOGROLL';
  572. }
  573.  
  574. /* Extra icon */
  575.  
  576. .eicon:before{
  577. /* Icon code */
  578. content:'\e183';
  579. /* Icon color */
  580. color:#eeeeee;
  581. }
  582.  
  583. .eicon:after{
  584. /* Section title */
  585. content:'EXTRA';
  586. }
  587.  
  588. .aicon:hover:before, .licon:hover:before, .ticon:hover:before, .ficon:hover:before, .bicon:hover:before, .eicon:hover:before {
  589. /* Big icon color on hover */
  590. color:#D88552;
  591. }
  592.  
  593. /* Close icon */
  594.  
  595. .close{
  596. width:110px;
  597. height:60px;
  598. }
  599.  
  600. .close:before{
  601. display:block;
  602. margin-bottom:10px;
  603. /* Icon code */
  604. content:'\e0c4';
  605. font-family:'saturnicons';
  606. font-size:30px;
  607. color:#D88552;
  608. }
  609.  
  610. .close:after{
  611. content:'CLOSE';
  612. }
  613.  
  614. .close:hover:before {
  615. /* Icon on hover */
  616. color:#bbbbbb;
  617. }
  618.  
  619. /*-- CONTENT BOXES, I don't recommend changing anything but color, especially if you're not experienced */
  620.  
  621. #about, #links, #tags, #faq, #blogroll, #extra{
  622. position:fixed;
  623. top:0px;
  624. left:0px;
  625. height:450px;
  626. width:300px;
  627. background-color:#000000;
  628. border:1px solid #111111;
  629. -webkit-transition: ease 0.5s;
  630. -moz-transition: ease 0.5s;
  631. -o-transition: ease 0.5s;
  632. transition: ease 0.5s;
  633. z-index:1000!important;
  634. /* do not remove this line */
  635. display:none;
  636. }
  637.  
  638. .box{
  639. position:absolute;
  640. top:50%;
  641. left:50%;
  642. width:255px;
  643. height:auto;
  644. max-height:430px;
  645. /* Content font style */
  646. font-size:12px;
  647. line-height:20px;
  648. overflow:hidden;
  649. -webkit-transform:translateX(-50%) translateY(-50%);
  650. -moz-transform:translateX(-50%) translateY(-50%);
  651. -ms-transform:translateX(-50%) translateY(-50%);
  652. -o-transform:translateX(-50%) translateY(-50%);
  653. transform:translateX(-50%) translateY(-50%);
  654. }
  655.  
  656. .boxin{
  657. margin-left:0px;
  658. width:255px;
  659. height:352px;
  660. overflow-y:auto!important;
  661. }
  662.  
  663. /* Box titles, style of headings */
  664.  
  665. .box h1{
  666. margin:0px;
  667. margin-bottom:15px;
  668. color:#eeeeee;
  669. font-weight:700;
  670. font-size:25px;
  671. font-family:Poiret One;
  672. }
  673.  
  674. /* Questions etc. */
  675.  
  676. .box big{
  677. color:#bbbbbb;
  678. font-size:15px!important;
  679. font-weight:600;
  680. }
  681.  
  682. /*-- Links --*/
  683.  
  684. #links a{
  685. display:block;
  686. padding:5px;
  687. padding-left:0px;
  688. font-size:14px;
  689. color:#eeeeee;
  690. border-bottom:1px solid #111111;
  691. }
  692.  
  693. #links span{
  694. margin-right:10px;
  695. color:#D88552;
  696. }
  697.  
  698. #links a:hover{
  699. color:#D88552;
  700. }
  701.  
  702. /*-- Tag links --*/
  703.  
  704. #tags a{
  705. display:inline-block;
  706. margin:4px;
  707. padding:4px 6px;
  708. color:#eeeeee;
  709. border:1px solid #111111;
  710. }
  711.  
  712. #tags span{
  713. margin-right:5px;
  714. color:#D88552;
  715. }
  716.  
  717. #tags a:hover{
  718. color:#D88552;
  719. background:#555555;
  720. }
  721.  
  722. /*-- Blogroll --*/
  723.  
  724. .person{
  725. display: inline-block;
  726. margin-top:5px;
  727. margin-left:2px;
  728. width:230px;
  729. height:50px;
  730. padding-bottom:10px;
  731. border-bottom:1px solid #111111;
  732. overflow:hidden;
  733. }
  734.  
  735. /* Followed person avatar */
  736.  
  737. .person img {
  738. float:left;
  739. margin:0px;
  740. width:48px;
  741. height:48px;
  742. border:1px solid #eeeeee;
  743. border-radius:100%;
  744. }
  745.  
  746. /* Followed person url */
  747.  
  748. .personurl {
  749. margin-top:0px;
  750. margin-left:15px;
  751. width:150px;
  752. padding:5px;
  753. height:40px;
  754. line-height:20px;
  755. color:#eeeeee;
  756. text-align:center;
  757. overflow:hidden;
  758. }
  759.  
  760. .personurl a {
  761. font-size:12px;
  762. color:#eeeeee;
  763. }
  764.  
  765. /*-- CREDIT --*/
  766.  
  767. #credit {
  768. position:fixed;
  769. top: 10px;
  770. right: 10px;
  771. width:25px;
  772. height:25px;
  773. z-index: 100000;
  774. }
  775.  
  776. #credit img{
  777. border: 1px solid #111111;
  778. }
  779.  
  780. #credit img:hover{
  781. border: 1px solid #eeeeee;
  782. }
  783.  
  784. /* --------------------------- Custom CSS -------------------------- */
  785.  
  786. {CustomCSS}
  787.  
  788. </style>
  789.  
  790. </head>
  791.  
  792. <body>
  793.  
  794. <div id="container">
  795.  
  796. <div id="panelone">
  797.  
  798. <div class="panelin">
  799.  
  800. <!-- Avatar image -->
  801. <div id="avatar"><img src="https://i.pinimg.com/736x/75/6b/1d/756b1da5a75da7e6cb77d487b0718e84--autumn-day-autumn-leaves.jpg"></div>
  802.  
  803. <div id="blogtitle"> Autumnal </div>
  804.  
  805. <div id="description">
  806.  
  807. Lorem ipsum dolor <i>sit</i> amet adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, <b>vehicula</b> et, mauris.
  808.  
  809. </div>
  810. <!--End description-->
  811.  
  812. <div id="icons">
  813. <a href="/" Title="Index"><span class="sf sf-home"></span></a>
  814. <a href="/ask" Title="Message"><span class="sf sf-chat"></span></a>
  815. <a href="/submit" Title="Submit"><span class="sf sf-paperclip"></span></a>
  816. <a href="/archive" Title="Archive"><span class="sf sf-clock-3"></span></a>
  817. <a href="httpss://www.tumblr.com/dashboard" Title="Dashboard"><span class="sf sf-tumblr"></span></a>
  818. </div>
  819. <!--End icons-->
  820.  
  821. </div>
  822. <!--End panelin-->
  823. </div>
  824. <!--End panelone-->
  825.  
  826.  
  827. <div id="paneltwo">
  828. <div class="panelin">
  829.  
  830. <a><div id="aclick"><div class="aicon"></div></div></a>
  831. <a><div id="lclick"><div class="licon"></div></div></a>
  832. <a><div id="tclick"><div class="ticon"></div></div></a>
  833. <a><div id="fclick"><div class="ficon"></div></div></a>
  834. <a><div id="bclick"><div class="bicon"></div></div></a>
  835. <a><div id="eclick"><div class="eicon"></div></div></a>
  836.  
  837. </div>
  838. <!--End panelin-->
  839. </div>
  840. <!--End paneltwo-->
  841.  
  842. <div id="sidebar">
  843.  
  844. <div id="click">
  845. <div class="clicon"><span class="sf sf-aero-cursor"></span></div>
  846. <div class="cricon"><span class="sf sf-aero-cursor"></span></div></div>
  847.  
  848. </div>
  849. <!--End sidebar-->
  850.  
  851.  
  852. <div id="about">
  853.  
  854. <div class="box">
  855.  
  856. <h1> ABOUT </h1> <hr>
  857.  
  858. <justify>
  859. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <u>magna</u> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </b>reprehenderit</b> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia <i>deserunt</i> mollit anim id est laborum.
  860. </justify>
  861.  
  862. </div>
  863. <!--End box-->
  864. </div>
  865. <!--End about-->
  866.  
  867.  
  868. <div id="links">
  869.  
  870. <div class="box">
  871.  
  872. <h1> LINKS </h1> <hr>
  873.  
  874. <a href="https://"><span class="sf sf-leaf-2"></span> Link one </a>
  875. <a href="https://"><span class="sf sf-leaf-2"></span> Link two </a>
  876. <a href="https://"><span class="sf sf-leaf-2"></span> Link three </a>
  877. <a href="https://"><span class="sf sf-leaf-2"></span> Link four </a>
  878. <a href="https://"><span class="sf sf-leaf-2"></span> Link five </a>
  879.  
  880. </div>
  881. <!--End box-->
  882. </div>
  883. <!--End links-->
  884.  
  885.  
  886. <div id="tags">
  887.  
  888. <div class="box">
  889.  
  890. <h1> TAGS </h1> <hr>
  891.  
  892. <a href="https://"><span class="sf sf-tag"></span> tagone </a>
  893. <a href="https://"><span class="sf sf-tag"></span> tagtwo </a>
  894. <a href="https://"><span class="sf sf-tag"></span> tagthree </a>
  895. <a href="https://"><span class="sf sf-tag"></span> tagfour </a>
  896. <a href="https://"><span class="sf sf-tag"></span> tagfive </a>
  897. <a href="https://"><span class="sf sf-tag"></span> tagsix </a>
  898. <a href="https://"><span class="sf sf-tag"></span> tagseven </a>
  899. <a href="https://"><span class="sf sf-tag"></span> tageight </a>
  900.  
  901. </div>
  902. <!--End box-->
  903. </div>
  904. <!--End tags-->
  905.  
  906.  
  907. <div id="faq">
  908.  
  909. <div class="box">
  910.  
  911. <h1> F.A.Q. </h1> <hr>
  912.  
  913. <div class="boxin">
  914.  
  915. <big> 01. Question one </big><br>
  916. - Answer one <br><br>
  917.  
  918. <big> 02. Question two </big><br>
  919. - Answer two <br><br>
  920.  
  921. <big> 03. Question three </big><br>
  922. - Answer three <br><br>
  923.  
  924. <big> 04. Question four </big><br>
  925. - Answer four <br><br>
  926.  
  927. <big> 05. Question five </big><br>
  928. - Answer five <br><br>
  929.  
  930. <big> 06. Question six </big><br>
  931. - Answer six <br>
  932.  
  933. </div>
  934. <!--End boxin-->
  935. </div>
  936. <!--End box-->
  937. </div>
  938. <!--End faq-->
  939.  
  940.  
  941. <div id="blogroll">
  942.  
  943. <div class="box">
  944.  
  945. <h1> BLOGROLL </h1> <hr>
  946.  
  947. <div class="boxin">
  948. {block:Following}
  949. {block:Followed}
  950. <div class="person">
  951. <img src="{FollowedPortraitURL-64}">
  952. <div class="personurl">
  953. <a href="{FollowedURL}">
  954. <big>{FollowedName}</big><br>
  955. {FollowedTitle}
  956. </a></div>
  957. </div>
  958. <!--End person-->
  959. {/block:Followed}
  960. {/block:Following}
  961. </div>
  962. <!--End boxin-->
  963.  
  964. </div>
  965. <!--End box-->
  966. </div>
  967. <!--End blogroll-->
  968.  
  969. <div id="extra">
  970.  
  971. <div class="box">
  972.  
  973. <h1> EXTRA </h1> <hr>
  974.  
  975. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <u>magna</u> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </b>reprehenderit</b> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  976.  
  977. </div>
  978. <!--End box-->
  979. </div>
  980. <!--End extra-->
  981.  
  982. </div>
  983. <!--End container-->
  984.  
  985.  
  986. <!-------------------------------- SCRIPTS -------------------------------->
  987.  
  988. <!--Hide/show on click-->
  989.  
  990. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  991.  
  992. <script>
  993. $(document).ready(function(){
  994.  
  995. $( "#click" ).click(function() {
  996. $( '#sidebar' ).toggleClass('pushed');
  997. $( '#paneltwo' ).toggleClass('pushedtwo');
  998. $( '.clicon' ).toggle(0);
  999. $( '.cricon' ).toggle(0);
  1000. });
  1001.  
  1002. $( "#aclick" ).click(function(){
  1003. $( "#about" ).toggle(0);
  1004. $( "#aclick" ).toggleClass("close");
  1005. $('.aicon').toggle(0);
  1006. });
  1007.  
  1008. $( "#lclick" ).click(function(){
  1009. $( "#links" ).toggle(0);
  1010. $( "#lclick" ).toggleClass("close");
  1011. $('.licon').toggle(0);
  1012. });
  1013.  
  1014. $( "#tclick" ).click(function(){
  1015. $( "#tags" ).toggle(0);
  1016. $( "#tclick" ).toggleClass("close");
  1017. $('.ticon').toggle(0);
  1018. });
  1019.  
  1020. $( "#fclick" ).click(function(){
  1021. $( "#faq" ).toggle(0);
  1022. $( "#fclick" ).toggleClass("close");
  1023. $('.ficon').toggle(0);
  1024. });
  1025.  
  1026. $( "#bclick" ).click(function(){
  1027. $( "#blogroll" ).toggle(0);
  1028. $( "#bclick" ).toggleClass("close");
  1029. $('.bicon').toggle(0);
  1030. });
  1031.  
  1032. $( "#eclick" ).click(function(){
  1033. $( "#extra" ).toggle(0);
  1034. $( "#eclick" ).toggleClass("close");
  1035. $('.eicon').toggle(0);
  1036. });
  1037.  
  1038. });
  1039. </script>
  1040.  
  1041. <!--Google fonts-->
  1042.  
  1043. <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Exo|Poiret+One|Montez|Exo" rel="stylesheet">
  1044.  
  1045. <!-- Saturn icons -->
  1046.  
  1047. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  1048.  
  1049. <!--Jquery-->
  1050.  
  1051. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  1052.  
  1053. <!-- CREDIT (do not remove) -->
  1054.  
  1055. <div id="credit"><a href="http://borntobewildcodes.tumblr.com" title="page ALL IN ONE PAGE AUTUMNAL by @borntobewildcodes"><img src="http://i57.tinypic.com/301g6eg.jpg"></a></div>
  1056.  
  1057. </body>
  1058. </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!