Advertisement
hunterthemes

- Page #7 - All in one #5 v.1

Mar 30th, 2016
870
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.64 KB | None | 0 0
  1. <html>
  2.  
  3. <!----
  4.  
  5. © hunterthemes.tumblr.com | Page #7 - All in one #5 v.1
  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=Tulpen+One' rel='stylesheet' type='text/css'>
  16. <link href='http://fonts.googleapis.com/css?family=Overlock' rel='stylesheet' type='text/css'>
  17. <link href='http://fonts.googleapis.com/css?family=Baumans' rel='stylesheet' type='text/css'>
  18. <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  19. <link href='http://fonts.googleapis.com/css?family=Nova+Slim' rel='stylesheet' type='text/css'>
  20.  
  21. <style type="text/css">
  22.  
  23. /* CSS */
  24.  
  25. /*-- GENERAL --*/
  26.  
  27. body {
  28. margin:0;
  29. padding:0;
  30. width:100%;
  31. height:100%;
  32. color:#C5E7D8;
  33. font-family:Helvetica;
  34. font-size:12px;
  35. line-height:15px;
  36. background-color: #fff;
  37. background-image:url(http://static.tumblr.com/4d2740af35f762d5e936f6564e96df7f/6dvmes1/pIOo1tlyu/tumblr_static_47rr9hfnwog0o44kko0wwk4kw.png);
  38. background-attachment: fixed;
  39. background-repeat: repeat;
  40. overflow-y:hidden;
  41. }
  42.  
  43. h1{
  44. color:#E5C8D8;
  45. font-family:Baumans;
  46. font-size:20px;
  47. line-height: -moz-calc(20px + 3px);
  48. line-height: -webkit-calc(20px + 3px);
  49. line-height: -o-calc(20px + 3px);
  50. line-height: calc(20px + 3px);
  51. border-bottom:1px solid #eee;
  52. }
  53.  
  54. h2{
  55. font-family:Helvetica, Arial, sans-serif;
  56. font-size:11px;
  57. line-height: -moz-calc(11px + 3px);
  58. line-height: -webkit-calc(11px + 3px);
  59. line-height: -o-calc(11px + 3px);
  60. line-height: calc(11px + 3px);
  61. }
  62.  
  63. a {
  64. color:#bad8eb;
  65. text-decoration:none;
  66. }
  67.  
  68. a:hover {
  69. text-decoration:none;
  70. color:;
  71. -webkit-transition: all 0.5s ease-in-out;
  72. -moz-transition: all 0.6s ease-in-out;
  73. -o-transition: all 0.5s ease-in-out;
  74. transition: all 0.6s ease-in-out;
  75. }
  76.  
  77. b, strong {color:#E5C8D8;}
  78.  
  79. i, em {color:#BDCBD2;}
  80.  
  81. /*-- TUMBLR CONTROLS --*/
  82.  
  83. .iframe-controls--desktop {
  84. position: fixed !important;
  85. top:10px !important;
  86. left:50px !important;
  87. z-index:10000000 !important;
  88. opacity:.7 !important;
  89. filter: invert(1);
  90. -webkit-filter: invert(1);
  91. -moz-filter: invert(1);
  92. -o-filter: invert(1);
  93. -ms-filter: invert(1);
  94. }
  95.  
  96. .iframe-controls--desktop:hover {
  97. opacity: 1;
  98. color:#CCCCCC;
  99. background:transparent;
  100. -webkit-transition: opacity 0.7s linear;
  101. -webkit-transition: all 0.5s ease-out;
  102. -moz-transition: all 0.5s ease-out;
  103. transition: all 0.5s ease-out;
  104. }
  105.  
  106. /*-- WEBKIT SCROLLBAR--*/
  107.  
  108. ::-webkit-scrollbar {
  109. width: 10px;
  110. height: 0px;
  111. }
  112.  
  113. ::-webkit-scrollbar-button:start:decrement,
  114. ::-webkit-scrollbar-button:end:increment {
  115. height: 0px;
  116. display: block;
  117. background-color: #000;
  118. }
  119.  
  120. ::-webkit-scrollbar-track-piece {
  121. background-color: #000;
  122. }
  123.  
  124. ::-webkit-scrollbar-thumb:vertical {
  125. height: 0px;
  126. background-color: #fff;
  127. border:4px solid #000;
  128. }
  129.  
  130. /*-- TOOLTIPS --*/
  131.  
  132. #s-m-t-tooltip {
  133. max-width:300px;
  134. z-index:10000000;
  135. margin:24px 14px 7px 12px;
  136. padding:8px;
  137. color:#bad8eb;
  138. background:rgba(0,0,0, .9);
  139. border:1px solid #222222;
  140. font-size:13px;
  141. line-height:16px;
  142. }
  143.  
  144.  
  145. /*----- MAIN CONTAINER -----*/
  146.  
  147. #container{
  148. margin:auto;
  149. margin-top:50px;
  150. margin-bottom:70px;
  151. min-height:500px;
  152. width:100%;
  153. z-index:10;
  154. }
  155.  
  156. #containerin{
  157. position:absolute;
  158. top:50%;
  159. left:50%;
  160. width:830px;
  161. height:400px;
  162. -webkit-transform: translateX(-50%) translateY(-50%);
  163. -moz-transform: translateX(-50%) translateY(-50%);
  164. -ms-transform: translateX(-50%) translateY(-50%);
  165. transform: translateX(-50%) translateY(-50%);
  166. }
  167.  
  168. /* About */
  169.  
  170. #about{
  171. position:absolute;
  172. margin-top:20px;
  173. margin-left:20px;
  174. width:230px;
  175. padding:10px;
  176. height:230px;
  177. background:#000;
  178. color:#BDCBD2;
  179. font-size:12px;
  180. line-height:15px;
  181. overflow-y:auto;
  182. }
  183.  
  184. /* Social links */
  185.  
  186. #social{
  187. position:absolute;
  188. margin-top:290px;
  189. margin-left:20px;
  190. width:230px;
  191. padding:10px;
  192. height:70px;
  193. background:#000;
  194. overflow:hidden;
  195. }
  196.  
  197. #social i{
  198. color:#BDCBD2;
  199. font-size:15px;
  200. margin:5px 10px;
  201. }
  202.  
  203. #social i:hover{
  204. color:#bbb;
  205. }
  206.  
  207. /* FAQ */
  208.  
  209. #faq{
  210. position:absolute;
  211. margin-top:20px;
  212. margin-left:290px;
  213. width:230px;
  214. padding:10px;
  215. height:340px;
  216. background:#000;
  217. color:#C5E7D8;
  218. font-size:12px;
  219. line-height:19px;
  220. overflow-y:auto;
  221. }
  222.  
  223. /* QUOTE */
  224.  
  225. #quote{
  226. position:absolute;
  227. margin-top:20px;
  228. margin-left:560px;
  229. width:230px;
  230. padding:10px;
  231. height:70px;
  232. background:#000;
  233. color:#BDCBD2;
  234. font-size:20px;
  235. line-height:35px;
  236. font-family:Baumans;
  237. overflow:hidden;
  238. }
  239.  
  240. /* Blogroll */
  241.  
  242. #blogroll{
  243. position:absolute;
  244. margin-top:130px;
  245. margin-left:560px;
  246. width:230px;
  247. padding:10px;
  248. height:230px;
  249. background:#000;
  250. line-height:25px;
  251. font-family:Baumans;
  252. overflow-y:auto;
  253. }
  254.  
  255. #blogroll a img{
  256. max-width:35px;
  257. max-height:35px;
  258. border:2px solid #eee;
  259. padding:3px;
  260. margin:3px;
  261. }
  262.  
  263. #blogroll a img:hover{
  264. border-radius:100%;
  265. -webkit-transition: all .7s ease;
  266. -moz-transition: all .7s ease;
  267. -o-transition: all .7s ease;
  268. transition: all .7s ease;
  269. }
  270.  
  271. /*------ MENU -----*/
  272.  
  273. #menu{
  274. position:fixed;
  275. top:0;
  276. left:0;
  277. width:100%;
  278. height:50px;
  279. background:#000;
  280. z-index:10000;
  281. }
  282.  
  283. /* Blog title */
  284.  
  285. .blogtitle{
  286. position:fixed;
  287. display:inline-block;
  288. right:50px;
  289. font-family:Baumans;
  290. font-size:20px;
  291. color:#bbe4d0;
  292. margin-top:0px;
  293. letter-spacing:2px;
  294. line-height:30px;
  295. padding:10px;
  296. z-index:10000;
  297. border-left:1px solid #222222;
  298. border-right:1px solid #222222;
  299.  
  300. }
  301.  
  302. .blogtitle:hover{
  303. color:#EEEEEE;
  304. background:#222222;
  305. }
  306.  
  307. /*------ FRAMES -----*/
  308.  
  309. #left-frame{
  310. position:fixed;
  311. top:0px;
  312. left:0;
  313. width:50px;
  314. height:100%;
  315. background:#000;
  316. z-index:10000;
  317. }
  318.  
  319. #right-frame{
  320. position:fixed;
  321. top:0px;
  322. right:0;
  323. width:50px;
  324. height:100%;
  325. background:#000;
  326. z-index:10000;
  327. }
  328.  
  329. #bottomframe{
  330. position:fixed;
  331. bottom:0;
  332. left:0;
  333. width:100%;
  334. height:50px;
  335. background:#000;
  336. z-index:10000;
  337. }
  338.  
  339. /* PROFILE */
  340.  
  341. .profile{
  342. position:fixed;
  343. bottom:0;
  344. left:0;
  345. width:240px;
  346. height:240px;
  347. background:#fff;
  348. border-top:1px solid #222222;
  349. border-right:1px solid #222222;
  350. border-top-right-radius:240px;
  351. z-index:1000;
  352. }
  353.  
  354. /* Avatar */
  355.  
  356. .avatarimage {
  357. position:absolute;
  358. left:50px;
  359. bottom:60px;
  360. width:130px;
  361. height:130px;
  362. border-top-right-radius:130px;
  363. border:2px solid #000;
  364. z-index:10;
  365.  
  366. }
  367.  
  368. .avatarimage img {
  369. width:100%;
  370. height:100%;
  371. border-top-right-radius:130px;
  372.  
  373. }
  374.  
  375. /* Main icons */
  376.  
  377. .mainicons{
  378. position:fixed;
  379. bottom:47px;
  380. left:5px;
  381. width:30px;
  382. height:auto;
  383.  
  384. text-align:center;
  385. z-index:10000;
  386. }
  387.  
  388. .mainicons i{
  389. display:block;
  390. margin-top:0;
  391. margin-left:-3px;
  392. height:30px;
  393. width:30px;
  394. padding:5px;
  395. color:#000;
  396. text-transform:uppercase;
  397. font-size:15px;
  398. line-height:30px;
  399. }
  400.  
  401. .mainicons i:hover{
  402. color:#CCCCCC;
  403. -webkit-transition: all .7s ease;
  404. -moz-transition: all .7s ease;
  405. -o-transition: all .7s ease;
  406. transition: all .7s ease;
  407. }
  408.  
  409. /* Search box */
  410.  
  411. #search{
  412. position:fixed;
  413. bottom:10px;
  414. left:30px;
  415. width:180px;
  416. height:30px;
  417. line-height:30px;
  418. overflow:hidden;
  419. border-bottom:1px solid #000;
  420. z-index:100000;
  421. }
  422.  
  423. #search i{
  424. position:absolute;
  425. margin-left:160px;
  426. margin-top:10px;
  427. color:#000;
  428. font-size:12px;
  429. }
  430.  
  431. /*-- CREDIT --*/
  432.  
  433. #credit{
  434. position:fixed;
  435. right:10px;
  436. bottom:10px;
  437. width:30px;
  438. z-index:10000;
  439. }
  440.  
  441. /* END CSS */
  442.  
  443. {CustomCSS}
  444.  
  445. </style>
  446.  
  447. <script type="text/javascript"
  448. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  449.  
  450. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  451.  
  452. <!-- Fort awesome script -->
  453.  
  454. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  455.  
  456. <!-- Style my tooltips script -->
  457.  
  458. <script src="jquery.style-my-tooltips.js"></script>
  459.  
  460. <script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
  461.  
  462. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  463. <script>
  464. (function($){
  465. $(document).ready(function(){
  466. $("[title]").style_my_tooltips({
  467. tip_follows_cursor:true,
  468. tip_delay_time:200,
  469. tip_fade_speed:300
  470. }
  471. );
  472. });
  473. })(jQuery);
  474. </script>
  475.  
  476. <meta charset="utf-8">
  477. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  478. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  479. <link rel="shortcut icon" href="{Favicon}">
  480. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  481. <meta name="viewport" content="width=device-width, initial-scale=1">
  482.  
  483. <!-- HTML -->
  484.  
  485. <body>
  486.  
  487. <div id="menu">
  488.  
  489. <div class="blogtitle">{Title}</div>
  490.  
  491.  
  492. </div>
  493. <!--End menu-->
  494.  
  495. <div id="left-frame"></div>
  496. <div id="right-frame"></div>
  497.  
  498. <div id="bottomframe">
  499.  
  500. <div class="profile">
  501.  
  502. <div class="avatarimage"><img src="http://static.tumblr.com/f13871c690646ad4e0cafbe32d653729/6dvmes1/Umeo1tmgg/tumblr_static_ey2vjvm98dw880ow0w4wkss04.png"></div>
  503.  
  504. <div class="mainicons">
  505. <a href="/"><i class="fa fa-home"></i></a>
  506. <a href="/ask"><i class="fa fa-envelope"></i></a>
  507. <a href="/submit"><i class="fa fa-pencil "></i></a>
  508. <a href="/archive"><i class="fa fa-clock-o"></i></a>
  509. </div>
  510.  
  511. <div id="search">
  512. <form action="/search" method="get"><i class="fa fa-search"></i>
  513. <input type="text" name="q" value="SEARCH..." style="width:150px; height:30px; font-family:Helvetica; background:transparent; border:1px solid transparent; color:#000; font-size: 11px; margin-left:10px;"/></form>
  514. </div>
  515.  
  516. </div>
  517. <!--End profile-->
  518.  
  519. </div>
  520. <!--End bottomframe-->
  521.  
  522. <div id="container">
  523.  
  524. <div id="containerin">
  525.  
  526. <div id="about">
  527.  
  528. <h1>ABOUT</h1>
  529. <justify>
  530.  
  531. Lorem ipsum dolor sit amet, consectetur adipiscing 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.
  532.  
  533. </justify>
  534. </div>
  535. <!--End about-->
  536.  
  537. <div id="social">
  538.  
  539. <h1>SOCIAL LINKS</h1>
  540.  
  541. <center>
  542. <a href="http://"><i class="fa fa-facebook"></i></a>
  543. <a href="http://"><i class="fa fa-twitter"></i></a>
  544. <a href="http://"><i class="fa fa-flickr"></i></a>
  545. <a href="http://"><i class="fa fa-pinterest"></i></a>
  546. <a href="http://"><i class="fa fa-instagram"></i></a>
  547. </center>
  548. </div>
  549. <!--End social-->
  550.  
  551. <div id="faq">
  552.  
  553. <h1>FAQ</h1>
  554.  
  555. <b>Q:</b> QUESTION <br>
  556. <b>A:</b> <i>Answer</i><br><br>
  557.  
  558. <b>Q:</b> QUESTION <br>
  559. <b>A:</b> <i>Answer</i><br><br>
  560.  
  561. <b>Q:</b> QUESTION <br>
  562. <b>A:</b> <i>Answer</i><br><br>
  563.  
  564. <b>Q:</b> QUESTION <br>
  565. <b>A:</b> <i>Answer</i><br><br>
  566.  
  567. <b>Q:</b> QUESTION <br>
  568. <b>A:</b> <i>Answer</i><br><br>
  569.  
  570. </div>
  571. <!--End faq-->
  572.  
  573. <div id="quote">
  574.  
  575. <center>
  576.  
  577. "Lorem ipsum dolor<br>
  578. sit amet"
  579.  
  580. </center>
  581. </div>
  582. <!--End quote-->
  583.  
  584. <div id="blogroll">
  585.  
  586. <center>
  587. {block:Following}
  588. {block:Followed}
  589. <a title="{FollowedName}" href="{FollowedURL}">
  590. <img src="{FollowedPortraitURL-128}" /></a>
  591. {/block:Followed}
  592. {/block:Following}
  593. </center>
  594. </div>
  595. <!--End blogroll-->
  596.  
  597. </div>
  598. <!--End containerin-->
  599. </div>
  600. <!-- End container -->
  601.  
  602. <!-- CREDIT (DO NOT REMOVE) -->
  603. <div id="credit"><a href="https://www.hunterthemes.tumblr.com">
  604. <img src="https://66.media.tumblr.com/b29d8873c09628252057b9408a7c4a88/tumblr_plbuq65td51uo5urho1_100.png" title="theme by hunter themes"></a></div>
  605.  
  606. </body>
  607. </html>
  608.  
  609. <!-- END HTML -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement