API tools faq
paste
altraviolence

page 07 - inkheart (all in one)

altraviolence
Oct 10th, 2017
1,006
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 11.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. INKHEART page (07) by PEACHTHMS | peachthms.tumblr.com
  6. V1.0
  7. V2.0 - added a blogroll section
  8.  
  9. - do not claim this page or any of the code as your own
  10. - do not redistribute this page or any of the code as your own
  11. - do not mix my code with another theme maker's code
  12. - do not remove or edit the credit in anyway; it must remain visible in the code and on the page
  13.  
  14. saturnthms - credit icon
  15. font awesome - icon font
  16.  
  17. HOW TO EDIT
  18.  
  19. To change the navigation or contact icons, visit http://fontawesome.io/icons and change
  20. fa-folder or fa-question to whatever icon name you want to use.
  21.  
  22. E.G.
  23.  
  24. fa-gear - gear icon
  25.  
  26. -->
  27.  
  28. <head>
  29.  
  30. <title>inkheart</title>
  31.  
  32. <meta charset="UTF-8">
  33. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  34.  
  35. <link rel="shortcut icon" href="{Favicon}">
  36.  
  37. <link href="https://fonts.googleapis.com/css?family=Lato|Playfair+Display" rel="stylesheet">
  38. <script src="https://use.fontawesome.com/976063c1b7.js"></script>
  39. <link href="https://dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  40. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  41. <script src="http://static.tumblr.com/cqvi50o/OKsoyihkr/pt-a.js"></script>
  42.  
  43. <script type="text/javascript" src="http://static.tumblr.com/cqvi50o/VSzox2ncv/style-my-tooltips.js"></script>
  44. <script>
  45.     (function($) {
  46.         $(document).ready(function() {
  47.             $("[title]").style_my_tooltips({
  48.                 tip_follows_cursor: true,
  49.                 tip_delay_time: 200,
  50.                 tip_fade_speed: 300
  51.             });
  52.         });
  53.     })(jQuery);
  54. </script>
  55.  
  56. <style type="text/css">
  57.  
  58. * {
  59.     margin: 0;
  60.     padding: 0;
  61. }
  62.  
  63. ::-moz-selection {
  64.     background-color: transparent;
  65.     color: #aaaaaa;
  66. }
  67.  
  68. ::selection {
  69.     background-color: transparent;
  70.     color: #aaaaaa;
  71. }
  72.  
  73. ::-webkit-scrollbar {
  74.     width: 2px;
  75.     height: 2px;
  76. }
  77.  
  78. ::-webkit-scrollbar-thumb {
  79.     background: #f1f1f1;
  80. }
  81.  
  82. ::-webkit-scrollbar-track {
  83.     background: #ffffff;
  84. }
  85.  
  86. #s-m-t-tooltip {
  87.     max-width: 300px;
  88.     z-index: 20;
  89.     margin: 24px 14px 7px 12px;
  90.     padding: 6px 9px;
  91.     background: #c6d8e2;
  92.     color: #ffffff;
  93.     font-size: 10px;
  94.     border-radius: 6px;    
  95. }
  96.  
  97. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  98.     z-index: 99999999999;
  99.     transform: scale(0.7,0.7);
  100.     -webkit-filter: invert(50%);
  101.     filter: invert(50%);
  102. }
  103.  
  104. a {
  105.     color: #686868;
  106.     text-decoration: none;
  107. }
  108.  
  109. a:hover {
  110.     color: #aaaaaa;
  111.     transition: 0.4s ease-in-out;
  112. }
  113.  
  114. body {
  115.     background: #f1f1f1;
  116.     color: #686868;
  117.     font-family: 'Lato', sans-serif;
  118.     font-size: 12px;
  119.     line-height: 1.7em;
  120. }
  121.  
  122. #container {
  123.     width: 100%;
  124.     height: 100%;
  125. }
  126.  
  127. .wrapper {
  128.     display: flex;
  129.     justify-content: space-between;
  130.     position: absolute;
  131.     margin: auto;
  132.     top: 0;
  133.     right: 0;
  134.     bottom: 0;
  135.     left: 0;
  136.     width: 800px;
  137.     height: 500px;
  138.     background: #ffffff;
  139.     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
  140. }
  141.  
  142. #header {
  143.     position: fixed;
  144.     z-index: 2;
  145.     padding: 10px;
  146.     width: 780px;
  147.     background: #ffffff;
  148.     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  149. }
  150.  
  151. #header h1 {
  152.     font-family: 'Playfair Display', sans-serif;
  153. }
  154.  
  155. #left {
  156.     width: 400px;
  157.     background-image: url('https://i.imgur.com/4BEexxK.jpg');
  158.     background-size: cover;
  159. }
  160.  
  161. #right {
  162.     width: 400px;
  163. }
  164.  
  165. #right h1 {
  166.     margin: 100px 50px auto 50px;
  167.     font-family: 'Playfair Display', sans-serif;
  168.     font-size: 2em;
  169.     line-height: 1.3em;
  170. }
  171.  
  172. #right h1:before {
  173.     content: '';
  174.     display: inline-block;
  175.     width: 25px;
  176.     height: 2px;
  177.     vertical-align: middle;
  178.     background: #686868;
  179.     margin-right: 10px;
  180. }
  181.  
  182. #right-square {
  183.     max-height: 270px;
  184.     overflow-y: auto;
  185.     margin: 50px;
  186.     padding-right: 10px;
  187. }
  188.  
  189. #navarrow {
  190.     position: absolute;
  191.     bottom: 13px;
  192.     right: 20px;
  193.     z-index: 3;
  194. }
  195.  
  196. #navarrow:hover, #contactarrow:hover, #blogrollarrow:hover {
  197.     cursor: help;
  198. }
  199.  
  200. #contactarrow {
  201.     position: absolute;
  202.     top: 56px;
  203.     right: 20px;
  204.     z-index: 3;
  205. }
  206.  
  207. #navarrow span, #contactarrow span {
  208.     margin-right: 10px;
  209. }
  210.  
  211. #navarrow span, #contactarrow span, #blogrollarrow span {
  212.     padding: 6px 9px;
  213.     background: #c6d8e2;
  214.     color: #ffffff;
  215.     -moz-border-radius: 6px;
  216.     -webkit-border-radius: 6px;
  217.     border-radius: 6px;
  218.     opacity: 0;
  219.     transition: 0.4s ease-in-out;
  220. }
  221.  
  222. #blogrollarrow span {
  223.     margin-left: 10px;
  224. }
  225.  
  226. #navarrow:hover span, #contactarrow:hover span, #blogrollarrow:hover span {
  227.     opacity: 1;
  228. }
  229.  
  230. #blogrollarrow {
  231.     position: absolute;
  232.     top: 56px;
  233.     left: 420px;
  234.     z-index: 3;
  235. }
  236.  
  237. #blogs {
  238.     max-height: 290px;
  239.     overflow-y: auto;
  240. }
  241.  
  242. #blogs img {
  243.     width: 46px;
  244.     padding: 10px;
  245.     transition: 0.4s ease-in-out;
  246. }
  247.  
  248. #blogs img:hover {
  249.     border-radius: 100%;
  250.     transition: 0.4s ease-in-out;
  251. }
  252.  
  253. .clicked {
  254.     color: #c6d8e2;
  255. }
  256.  
  257. .rotate {
  258.     transform: rotate(180deg);
  259. }
  260.  
  261. .background {
  262.     opacity: 0;
  263.     transition: 0.5s ease-in-out;
  264. }
  265.  
  266. .hide {
  267.     display: none;
  268. }
  269.  
  270. #navigation, #contact, #blogroll {
  271.     display: none;
  272.     position: absolute;
  273.     width: 800px;
  274.     height: 455px;
  275.     left: 0;
  276.     bottom: 0;
  277.     background: #ffffff;
  278. }
  279.  
  280. #navigation-wrapper, #contact-wrapper, #blogroll-wrapper {
  281.     width: 600px;
  282.     max-height: 355px;
  283.     overflow-y: auto;
  284.     margin: 0 auto;
  285.     padding: 50px 100px 20px 100px;
  286. }
  287.  
  288. #navigation-wrapper h1, #contact-wrapper h1, #blogroll-wrapper h1 {
  289.     margin-bottom: 25px;
  290.     font-family: 'Playfair Display', sans-serif;
  291.     font-size: 2em;
  292. }
  293.  
  294. #navigation-wrapper h1:before, #contact-wrapper h1:before, #blogroll-wrapper h1:before {
  295.     content: '';
  296.     display: inline-block;
  297.     width: 25px;
  298.     height: 2px;
  299.     vertical-align: middle;
  300.     background: #686868;
  301.     margin-right: 10px;
  302. }
  303.  
  304. #navigation-list, #contact-faq {
  305.     width: 600px;
  306. }
  307.  
  308. #navigation-list a {
  309.     display: inline-block;
  310.     margin: 5px 0;
  311.     padding: 5px 0 5px 5px;
  312.     width: calc(33.33% - 8px)!important;
  313.     word-break: break-all;
  314.     text-transform: lowercase;
  315.     border-bottom: 1px solid #f1f1f1;
  316. }
  317.  
  318. #navigation-list a:hover {
  319.     background: #f1f1f1;
  320.     color: #686868;
  321. }
  322.  
  323. .navigation-box, .contact-box {
  324.     margin-bottom: 15px;
  325. }
  326.  
  327. .navigation-box:last-of-type, .contact-box:last-of-type {
  328.     margin-bottom: 0!important;
  329. }
  330.  
  331. .contact-box p {
  332.     padding: 5px 10px 5px 15px;
  333.     margin: 15px;
  334.     border-left: 1px solid #f1f1f1;
  335. }
  336.  
  337. .title {
  338.     display: block;
  339.     margin: 3px 0;
  340.     padding: 10px;
  341.     width: 580px!important;
  342.     background: #f1f1f1;
  343. }
  344.  
  345. .title .fa {
  346.     float: right;
  347.     margin-top: 3px;
  348. }
  349.  
  350. .title .fa-question {
  351.     margin-top: 5px;
  352. }
  353.  
  354. .credit {
  355.     position: fixed;
  356.     bottom: 10px;
  357.     left: 17px;
  358.     font-size: 14px;
  359. }
  360.  
  361. .credit a {
  362.     font-weight: normal;
  363. }
  364.  
  365. .credit span {
  366.     font-size: 10px;
  367.     background: #c6d8e2;
  368.     color: #ffffff;
  369.     padding: 6px 9px;
  370.     border-radius: 6px;
  371.     opacity: 0;
  372.     transition-duration: 0.5s;
  373.     -moz-transition-duration: 0.5s;
  374.     -webkit-transition-duration: 0.5s;
  375. }
  376.  
  377. .credit:hover span {
  378.     margin-left: 15px;
  379.     opacity: 1;
  380. }
  381.  
  382. .credit:before {
  383.     content: '\e2b0';
  384.     font-family: 'saturnicons';
  385. }
  386.  
  387. .credit:hover:before {
  388.     color: #c6d8e2;
  389. }
  390.  
  391. </style>
  392.  
  393. </head>
  394.  
  395. <body>
  396.  
  397. <div id="container">
  398.  
  399. <section class="wrapper">
  400.  
  401.     <div id="header">
  402.         <h1><a href="/">inkheart</a></h1>
  403.     </div>
  404.  
  405.     <aside id="left"></aside>
  406.  
  407.     <aside id="right">
  408.         <h1>The sea always filled her with longing, though for what she was never sure.</h1>
  409.  
  410.         <div id="right-square">
  411.             <p>She always did like tales of adventure – stories full of brightness and darkness. She could tell you the names of all King Arthur's knights, and she knew everything about Beowulf and Grendel, the ancient gods and the not-quite-so-ancient heroes. She liked pirate stories, too, but most of all she loved books that had at least a knight or a dragon or a fairy in them.</p>
  412.         </div>
  413.     </aside>
  414.  
  415.     <div id="navarrow">
  416.         <span>navigation</span>
  417.         <i class="fa fa-chevron-up" aria-hidden="true"></i>
  418.     </div>
  419.  
  420.     <div id="navigation">
  421.         <div id="navigation-wrapper">
  422.             <h1>navigation</h1>
  423.  
  424.             <div id="navigation-list">
  425.  
  426.                 <div class="navigation-box">
  427.                     <div class="title"><i class="fa fa-folder"></i> title</div>
  428.                     <a href="#">link</a>
  429.                     <a href="#">link</a>
  430.                     <a href="#">link</a>
  431.                     <a href="#">link</a>
  432.                     <a href="#">link</a>
  433.                     <a href="#">link</a>
  434.                     <a href="#">link</a>
  435.                     <a href="#">link</a>
  436.                     <a href="#">link</a>
  437.                 </div>
  438.  
  439.                 <div class="navigation-box">
  440.                     <div class="title"><i class="fa fa-folder"></i> title</div>
  441.                     <a href="#">link</a>
  442.                     <a href="#">link</a>
  443.                     <a href="#">link</a>
  444.                     <a href="#">link</a>
  445.                     <a href="#">link</a>
  446.                     <a href="#">link</a>
  447.                 </div>
  448.  
  449.             </div>
  450.         </div>
  451.     </div>
  452.  
  453.     <div id="contactarrow">
  454.         <span>contact</span>
  455.         <i class="fa fa-chevron-left" aria-hidden="true"></i>
  456.     </div>
  457.  
  458.     <div id="contact">
  459.         <div id="contact-wrapper">
  460.             <h1>contact</h1>
  461.  
  462.             <div id="contact-faq">
  463.  
  464.                 <div class="contact-box">
  465.                     <div class="title"><i class="fa fa-question"></i> question</div>
  466.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  467.                 </div>
  468.  
  469.                 <div class="contact-box">
  470.                     <div class="title"><i class="fa fa-question"></i> question</div>
  471.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  472.                 </div>
  473.  
  474.                 <div class="contact-box">
  475.                     <iframe frameborder="0" scrolling="no" width="600px" height="190" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--><!-- change {Name} to your tumblr username -->
  476.                 </div>
  477.  
  478.             </div>
  479.         </div>
  480.     </div>
  481.  
  482.     <div id="blogrollarrow">
  483.         <i class="fa fa-chevron-down" aria-hidden="true"></i>
  484.         <span>blogroll</span>
  485.     </div>
  486.  
  487.     <div id="blogroll">
  488.         <div id="blogroll-wrapper">
  489.             <h1>blogroll</h1>
  490.  
  491.             <div id="blogs">
  492.                 {block:Following}{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-64}">{/block:Followed}{/block:Following}
  493.             </div>
  494.  
  495.         </div>
  496.     </div>
  497.  
  498. </section>
  499.  
  500. </div>
  501.  
  502. <div class="credit"><a href="http://peachthms.tumblr.com"><span>page by peachthms</span></a></div>
  503.  
  504. </body>
  505.  
  506. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!