API tools faq
paste
Advertisement
hunterthemes

- Page #12 - All in one page #6

hunterthemes
Sep 13th, 2016
140
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.92 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!----
  4.  
  5. © hunterthemes.tumblr.com | Page #12 - All in one page #6
  6.  
  7. * Do not redistribute this page and claim it as your own.
  8. * Do not remove the credit or move it to another page.
  9. * Minor changes to this page are allowed.
  10.  
  11. ---->
  12.  
  13. <!-- GOOGLE FONTS -->
  14.  
  15. <link href='http://fonts.googleapis.com/css?family=Nova Slim' rel='stylesheet' type='text/css'>
  16.  
  17. <style type="text/css">
  18.  
  19. /* CSS */
  20.  
  21. /*-- GENERAL --*/
  22.  
  23. body {
  24. margin:0;
  25. padding:0;
  26. width:100%;
  27. height:100%;
  28. color:#222;
  29. font-family:Helvetica, Arial, sans-serif;
  30. font-size:11px;
  31. line-height:13px;
  32. background-color: #f6f6f6;
  33. background-attachment: fixed;
  34. background-repeat: repeat;
  35. }
  36.  
  37. h1{
  38. color:;
  39. font-family:Nova Slim;
  40. font-size:22px;
  41. line-height: 27px;
  42. border-bottom:1px solid #eee;
  43. }
  44.  
  45. h2{
  46. font-family:Helvetica, Arial, sans-serif;
  47. font-size:11px;
  48. line-height:13px;
  49. }
  50.  
  51. a {
  52. color:#444444;
  53. text-decoration:none;
  54. }
  55.  
  56. a:hover {
  57. text-decoration:none;
  58. color:#eee;
  59. -webkit-transition: all 0.5s ease-in-out;
  60. -moz-transition: all 0.6s ease-in-out;
  61. -o-transition: all 0.5s ease-in-out;
  62. transition: all 0.6s ease-in-out;
  63. }
  64.  
  65. b, strong {color:#BDC6C8;}
  66.  
  67. i, em {color:#222;}
  68.  
  69. hr {
  70. border: 0;
  71. border-top: 3px double #eee;
  72. }
  73.  
  74. /*-- WEBKIT SCROLLBAR--*/
  75.  
  76. ::-webkit-scrollbar {
  77. width: 9px;
  78. height: 0px;
  79. }
  80.  
  81. ::-webkit-scrollbar-button:start:decrement,
  82. ::-webkit-scrollbar-button:end:increment {
  83. height: 0px;
  84. display: block;
  85. background-color: #fff;
  86. }
  87.  
  88. ::-webkit-scrollbar-track-piece {
  89. background-color: #fff;
  90. }
  91.  
  92. ::-webkit-scrollbar-thumb:vertical {
  93. height: 0px;
  94. background-color: #222;
  95. border:4px solid #fff;
  96. }
  97.  
  98. /*-- TUMBLR CONTROLS --*/
  99.  
  100. .iframe-controls--desktop {
  101. position: fixed !important;
  102. top:10px !important;
  103. right:45px !important;
  104. z-index:10000 !important;
  105. opacity:.7 !important;
  106. filter: invert(1);
  107. -webkit-filter: invert(1);
  108. -moz-filter: invert(1);
  109. -o-filter: invert(1);
  110. -ms-filter: invert(1);
  111. }
  112.  
  113. .iframe-controls--desktop:hover {
  114. opacity: 1;
  115. color:#dccbe7;
  116. background:transparent;
  117. -webkit-transition: opacity 0.7s linear;
  118. -webkit-transition: all 0.5s ease-out;
  119. -moz-transition: all 0.5s ease-out;
  120. transition: all 0.5s ease-out;
  121. }
  122.  
  123.  
  124. /*-- TOOLTIPS --*/
  125.  
  126. #s-m-t-tooltip {
  127. max-width:300px;
  128. z-index:10000000;
  129. margin:24px 14px 7px 12px;
  130. padding:8px;
  131. color:#444444;
  132. background:rgba(255,255,255, 1);
  133. border:1px solid #eee;
  134. font-size:13px;
  135. line-height:16px;
  136. }
  137.  
  138. /*------ CONTAINER -----*/
  139.  
  140. #container{
  141. position:absolute;
  142. width:600px;
  143. height:420px;
  144. left:50%;
  145. top:50%;
  146. background:rgba(255,255,255, .6);
  147. background-image:url(http://static.tumblr.com/f41439d00181e481d2c5d376ae7552fc/6dvmes1/Hu2nnkguz/tumblr_static_b27qhlkp928kc8ogosc4w44cg.png);
  148. background-repeat:repeat;
  149. background-size:cover;
  150. border:1px solid #eee;
  151. z-index:100;
  152. -webkit-transform: translateX(-50%) translateY(-50%);
  153. -moz-transform: translateX(-50%) translateY(-50%);
  154. -ms-transform: translateX(-50%) translateY(-50%);
  155. transform: translateX(-50%) translateY(-50%);
  156. }
  157.  
  158. /*-- LEFT BOX --*/
  159.  
  160. #box1{
  161. position:absolute;
  162. margin-left:0px;
  163. margin-top:0px;
  164. width:280px;
  165. height:400px;
  166. padding:10px;
  167. background:#CCA2A3;
  168. z-index:100;
  169. }
  170.  
  171. /* Avatar */
  172.  
  173. #avatar {
  174. position:absolute;
  175. margin-left:190px;
  176. margin-top:10px;
  177. width:80px;
  178. height:80px;
  179. border-radius:50px;
  180. border:1px #eee solid;
  181. z-index:100000;
  182. }
  183.  
  184. #avatar img {
  185. width:100%;
  186. height:100%;
  187. border-radius:100px;
  188. }
  189.  
  190. /* Titles */
  191.  
  192. #titles{
  193. margin-top:275px;
  194. margin-left:10px;
  195. }
  196.  
  197. #title1, #title2, #title3, #title4{
  198. margin-top:20px;
  199. font-size:16px;
  200. font-family:Nova Slim;
  201. color:#222;
  202. cursor:pointer;
  203. }
  204.  
  205. #title1:hover, #title2:hover, #title3:hover, #title4:hover{
  206. color:#fff;
  207. padding-left:10px;
  208. -webkit-transition: all 0.5s ease-in-out;
  209. -moz-transition: all 0.6s ease-in-out;
  210. -o-transition: all 0.5s ease-in-out;
  211. transition: all 0.6s ease-in-out;
  212. }
  213.  
  214. /*-- BOX 2 --*/
  215.  
  216. #box2{
  217. position:absolute;
  218. margin-left:300px;
  219. margin-top:0px;
  220. width:260px;
  221. height:380px;
  222. padding:20px;
  223. background:#fff;
  224. color:#222;
  225. font-size:12px;
  226. line-height:20px;
  227. overflow-y:auto;
  228. z-index:100;
  229. }
  230.  
  231. #quote{
  232. position:absolute;
  233. width:250px;
  234. left:50%;
  235. top:50%;
  236. font-size:20px;
  237. line-height:30px;
  238. color:#C9D5DA;
  239. font-family:Nova Slim;
  240. text-align:center;
  241. z-index:100;
  242. -webkit-transform: translateX(-50%) translateY(-50%);
  243. -moz-transform: translateX(-50%) translateY(-50%);
  244. -ms-transform: translateX(-50%) translateY(-50%);
  245. transform: translateX(-50%) translateY(-50%);
  246. }
  247.  
  248. #quote i{
  249. color:#CCA2A3;
  250. margin-bottom:10px;
  251. }
  252.  
  253. #source{
  254. font-size:12px;
  255. color:#222;
  256. text-align:right;
  257. }
  258.  
  259. #navigation a{
  260. margin:3px;
  261. display:inline-block;
  262. color:#BDC6C8;
  263. padding:3px 8px;
  264. border:1px solid #CCA2A3;
  265. }
  266.  
  267. #navigation a:hover{
  268. color:#222;
  269. background: #CCA2A3;
  270. }
  271.  
  272. #about, #faq, #navigation, #blogroll{
  273. position:absolute;
  274. margin:0px;
  275. margin-top:10px;
  276. width:260px;
  277. height:370px;
  278. background:red;
  279. overflow-y:auto;
  280. background:#fff;
  281. display:none;
  282. z-index:1000;
  283. }
  284.  
  285. .question{
  286. font-size:20px;
  287. color:#C9D5DA;
  288. }
  289.  
  290. .question b{
  291. color:#D7CBCB;
  292. }
  293.  
  294. #blogroll a img{
  295. max-width:40px;
  296. max-height:40px;
  297. border:1px solid #CCA2A3;
  298. padding:4px;
  299. margin:4px;
  300. }
  301.  
  302. #blogroll a img:hover{
  303. border:1px solid #C9D5DA;
  304. }
  305.  
  306. /* Close buttons */
  307.  
  308. #close1, #close2, #close3, #close4{
  309. position:fixed;
  310. margin-top:-20px;
  311. margin-left:250px;
  312. font-size:20px;
  313. cursor:pointer;
  314. }
  315.  
  316. #close1 i, #close2 i, #close3 i, #close4 i{
  317. color:#222;
  318. }
  319.  
  320. #close1:hover, #close2:hover, #close3:hover, #close4:hover{
  321. color:#CCA2A3;
  322. -webkit-transition: all 0.5s ease-in-out;
  323. -moz-transition: all 0.6s ease-in-out;
  324. -o-transition: all 0.5s ease-in-out;
  325. transition: all 0.6s ease-in-out;
  326. }
  327.  
  328. /*-- Back to blog button --*/
  329.  
  330. #back{
  331. position:fixed;
  332. top:5px;
  333. left:10px;
  334. width:30px;
  335. z-index:10000;
  336. }
  337.  
  338. #back i{
  339. color:#222;
  340. font-size:20px;
  341. }
  342.  
  343. /*-- PAGE CREDIT --*/
  344.  
  345. #credit {
  346. position:fixed;
  347. right:10px;
  348. top:5px;
  349. width:30px;
  350. z-index:10000;
  351. }
  352.  
  353. /* END CSS */
  354.  
  355. {CustomCSS}
  356.  
  357. </style>
  358.  
  359. <script type="text/javascript"
  360. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  361.  
  362. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  363.  
  364. <!-- Font awesome script -->
  365.  
  366. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  367.  
  368. <!-- Style my tooltips script -->
  369.  
  370. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  371. <script src="jquery.style-my-tooltips.js"></script>
  372.  
  373. <script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
  374.  
  375. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  376. <script>
  377. (function($){
  378. $(document).ready(function(){
  379. $("[title]").style_my_tooltips({
  380. tip_follows_cursor:true,
  381. tip_delay_time:200,
  382. tip_fade_speed:300
  383. }
  384. );
  385. });
  386. })(jQuery);
  387. </script>
  388.  
  389. <script>
  390. $(document).ready(function(){
  391. $("#title1").click(function(){
  392. $("#about").slideToggle(1);
  393. });
  394. });
  395.  
  396. $(document).ready(function(){
  397. $("#close1").click(function(){
  398. $("#about").slideToggle(1);
  399. });
  400. });
  401.  
  402. $(document).ready(function(){
  403. $("#title2").click(function(){
  404. $("#faq").slideToggle(1);
  405. });
  406. });
  407.  
  408. $(document).ready(function(){
  409. $("#close2").click(function(){
  410. $("#faq").slideToggle(1);
  411. });
  412. });
  413.  
  414. $(document).ready(function(){
  415. $("#title3").click(function(){
  416. $("#navigation").slideToggle(1);
  417. });
  418. });
  419.  
  420. $(document).ready(function(){
  421. $("#close3").click(function(){
  422. $("#navigation").slideToggle(1);
  423. });
  424. });
  425.  
  426. $(document).ready(function(){
  427. $("#title4").click(function(){
  428. $("#blogroll").slideToggle(1);
  429. });
  430. });
  431.  
  432. $(document).ready(function(){
  433. $("#close4").click(function(){
  434. $("#blogroll").slideToggle(1);
  435. });
  436. });
  437.  
  438. </script>
  439.  
  440.  
  441. </head>
  442.  
  443. <meta charset="utf-8">
  444. <title>{Title}</title>
  445. <link rel="shortcut icon" href="{Favicon}">
  446. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  447. <meta name="viewport" content="width=device-width, initial-scale=1">
  448.  
  449. <!-- HTML -->
  450.  
  451. <body>
  452.  
  453.  
  454. <!-- MAIN CONTAINER -->
  455. <div id="container">
  456.  
  457. <!--LEFT CONTAINER-->
  458. <div id="box1">
  459.  
  460. <!-- AVATAR -->
  461. <div id="avatar"><img src="http://static.tumblr.com/f3686f178d9ab9224142e14269098f77/ta1gtaf/6tzoafgik/tumblr_static_8607r062qc4c4o448c4gwk08o.jpg"></div>
  462.  
  463. <!-- TITLES -->
  464. <div id="titles">
  465. <div id="title1">- About</div>
  466. <div id="title2">- F.A.Q.</div>
  467. <div id="title3">- Navigation</div>
  468. <div id="title4">- Blogroll</div>
  469. </div>
  470.  
  471. </div>
  472. <!--End box1-->
  473.  
  474. <!-- RIGHT CONTAINER -->
  475. <div id="box2">
  476.  
  477. <div id="quote">
  478.  
  479. <center><i class="fa fa-quote-left" aria-hidden="true"></i></center>
  480.  
  481. It doesn't matter how slow you go as long as you don't stop.
  482.  
  483. <div id="source"> Wisdom of Confucius </div>
  484.  
  485. </div>
  486. <!--End quote-->
  487.  
  488. <!--ABOUT-->
  489. <div id="about">
  490.  
  491. <div id="close1"><i class="fa fa-times" aria-hidden="true"></i></div>
  492.  
  493. NAME: <b> Joanna </b> <br>
  494.  
  495. AGE: <b> 22 </b> <br>
  496.  
  497. GENDER: <b> female </b> <br><br>
  498.  
  499. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <i> eiusmod </i> tempor incididunt ut labore et dolore magna aliqua. <br><br>
  500.  
  501. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis <u>aute</u> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br>
  502.  
  503. Excepteur sint <b>occaecat</b> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  504.  
  505. </div>
  506. <!--End about-->
  507.  
  508. <!--FAQ-->
  509. <div id="faq">
  510.  
  511. <div id="close2"><i class="fa fa-times" aria-hidden="true"></i></div>
  512.  
  513. <span class="question">
  514. <b>Q:</b> This is a question? <br><br>
  515. </span>
  516. <i>This is an answer.</i>
  517.  
  518. <!-- Line break-->
  519. <hr><br>
  520.  
  521. <span class="question">
  522. <b>Q:</b> This is a question? <br><br>
  523. </span>
  524. <i>This is an answer.</i>
  525.  
  526. <!-- Line break-->
  527. <hr><br>
  528.  
  529. <span class="question">
  530. <b>Q:</b> This is a question? <br><br>
  531. </span>
  532. <i>This is an answer.</i>
  533.  
  534. <!-- Line break-->
  535. <hr><br>
  536.  
  537. <span class="question">
  538. <b>Q:</b> This is a question? <br><br>
  539. </span>
  540. <i>This is an answer.</i>
  541.  
  542. </label>
  543.  
  544. </div>
  545. <!--End faq-->
  546.  
  547. <!--NAVIGATION-->
  548. <div id="navigation">
  549.  
  550. <div id="close3"><i class="fa fa-times" aria-hidden="true"></i></div>
  551.  
  552. <h1>NAVIGATION</h1>
  553.  
  554. <a href="http://">link</a>
  555. <a href="http://">link</a>
  556. <a href="http://">link</a>
  557. <a href="http://">link</a>
  558. <a href="http://">link</a>
  559. <a href="http://">link</a>
  560. <a href="http://">link</a>
  561. <a href="http://">link</a>
  562. <a href="http://">link</a>
  563. <a href="http://">link</a>
  564. <a href="http://">link</a>
  565. <a href="http://">link</a>
  566. <a href="http://">link</a>
  567. <a href="http://">link</a>
  568. <a href="http://">link</a>
  569.  
  570. <br>
  571.  
  572. <h1>TAGS</h1>
  573.  
  574. <a href="http://">#tag</a>
  575. <a href="http://">#tag</a>
  576. <a href="http://">#tag</a>
  577. <a href="http://">#tag</a>
  578. <a href="http://">#tag</a>
  579. <a href="http://">#tag</a>
  580. <a href="http://">#tag</a>
  581. <a href="http://">#tag</a>
  582. <a href="http://">#tag</a>
  583. <a href="http://">#tag</a>
  584. <a href="http://">#tag</a>
  585. <a href="http://">#tag</a>
  586. <a href="http://">#tag</a>
  587. <a href="http://">#tag</a>
  588. <a href="http://">#tag</a>
  589.  
  590. </div>
  591. <!--End navigation-->
  592.  
  593. <!--BLOGROLL-->
  594. <div id="blogroll">
  595.  
  596. <div id="close4"><i class="fa fa-times" aria-hidden="true"></i></div>
  597.  
  598. {block:Following}
  599. {block:Followed}
  600. <a title="{FollowedName}" href="{FollowedURL}">
  601. <img src="{FollowedPortraitURL-128}"/></a>
  602. {/block:Followed}
  603. {/block:Following}
  604.  
  605. </div>
  606. <!--End blogroll-->
  607.  
  608. </div>
  609. <!--End box2-->
  610.  
  611. </div>
  612. <!--End container-->
  613.  
  614. <!-- BACK BUTTON -->
  615. <div id="back" title="back to blog"><a href="/"><i class="fa fa-reply" aria-hidden="true"></i></div></a>
  616.  
  617. <!-- CREDIT (DO NOT REMOVE) -->
  618. <div id="credit"><a href="http://www.hunterthemes.tumblr.com">
  619. <img src="http://i60.tinypic.com/b5qp0o.png" title="page by hunter themes"></div></a>
  620.  
  621. </body>
  622. </html>
  623.  
  624. <!-- END 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!