Advertisement
hunterthemes

- Page #5 - All in one #3, vol.2 (v.2)

Jun 28th, 2015
601
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.69 KB | None | 0 0
  1. <html>
  2.  
  3. <!----
  4.  
  5. ยฉhunterthemes.tumblr.com | Page #5 - All in one #3 vol.2 (v.2)
  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=Poiret+One' rel='stylesheet' type='text/css'>
  16. <link href='http://fonts.googleapis.com/css?family=Nova+Slim' rel='stylesheet' type='text/css'>
  17. <link href="https://fonts.googleapis.com/css?family=Rozha+One" rel="stylesheet">
  18. <link href="https://fonts.googleapis.com/css?family=Almendra" rel="stylesheet">
  19. <link href='http://fonts.googleapis.com/css?family=Baumans' 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: #eeeeee;
  33. font-family:Helvetica, Arial, sans-serif;
  34. font-size: 11px;
  35. line-height: 13px;
  36. background-color: #ffffff;
  37. background-image:url();
  38. background-attachment: fixed;
  39. background-repeat: repeat;
  40. }
  41.  
  42. /* Style of the headings (titles) */
  43.  
  44. h1{
  45. color: #4A5A37;
  46. max-width:100px;
  47. font-family: Baumans;
  48. font-size: 20px;
  49. line-height: 30px;
  50. padding:5px 10px;
  51. border-bottom: 1px solid #4A5A37;
  52. text-align:right;
  53. }
  54.  
  55. h2{
  56. font-family:Helvetica, Arial, sans-serif;
  57. font-size: 11px;
  58. line-height: 13px;
  59. }
  60.  
  61. a {
  62. color: #444444;
  63. text-decoration: none;
  64. }
  65.  
  66. a:hover {
  67. text-decoration: none;
  68. color: #eee;
  69. -webkit-transition: all 0.5s ease-in-out;
  70. -moz-transition: all 0.6s ease-in-out;
  71. -o-transition: all 0.5s ease-in-out;
  72. transition: all 0.6s ease-in-out;
  73. }
  74.  
  75.  
  76. b, strong {color: #fff;}
  77.  
  78. i, em {color: #ddd;}
  79.  
  80. /* Tumblr controls */
  81.  
  82. iframe.tmblr-iframe {
  83. top:0px!important;
  84. right:10px!important;
  85. opacity:0.8;
  86. transform:scale(0.6);
  87. transform-origin:100% 0;
  88. -webkit-transform:scale(0.8);
  89. -webkit-transform-origin:100% 0;
  90. -o-transform:scale(0.8);
  91. -o-transform-origin:100% 0;
  92. -moz-transform:scale(0.8);
  93. -moz-transform-origin:100% 0;
  94. -ms-transform:scale(0.8);
  95. -ms-transform-origin:100% 0;
  96. z-index:100000!important;
  97. filter:invert(1);
  98. -webkit-filter:invert(1);
  99. -o-filter:invert(1);
  100. -moz-filter:invert(1);
  101. -ms-filter:invert(1);
  102. }
  103.  
  104. iframe.tmblr-iframe:hover {
  105. opacity:1!important;}
  106.  
  107. /*-- Webkit scrollbar --*/
  108.  
  109. ::-webkit-scrollbar {
  110. width: 9px;
  111. height: 0px;
  112. }
  113.  
  114. ::-webkit-scrollbar-button:start:decrement,
  115. ::-webkit-scrollbar-button:end:increment {
  116. height: 0px;
  117. display: block;
  118. background-color: #eeeeee;
  119. }
  120.  
  121. ::-webkit-scrollbar-track-piece {
  122. background-color: #eeeeee;
  123. }
  124.  
  125. ::-webkit-scrollbar-thumb:vertical {
  126. height: 0px;
  127. background-color: #4A5A37;
  128. border: 4px solid #eeeeee;
  129. }
  130.  
  131. /*-- TOOLTIPS --*/
  132.  
  133. #s-m-t-tooltip {
  134. margin:24px 14px 7px 12px;
  135. padding: 5px;
  136. max-width: 250px;
  137. color: #eeeeee;
  138. background: #bbbbbb;
  139. border: 1px solid #eeeeee;
  140. font-size: 12px;
  141. line-height: 15px;
  142. z-index: 100000;
  143. }
  144.  
  145. /* Fix */
  146.  
  147. iframe, img, embed, object, video {
  148. max-width: 100%;
  149. border: none;
  150. }
  151.  
  152. input, textarea, select, a { outline: none; }
  153.  
  154. /*------ CONTAINER -----*/
  155.  
  156. #container{
  157. position:fixed;
  158. width:100%;
  159. height:100%;
  160. background:rgba(255,255,255, .6);
  161. background-image:url( );
  162. background-repeat:repeat;
  163. background-size:cover;
  164. z-index:100;
  165. }
  166.  
  167. /*----- LEFT SIDE -----*/
  168.  
  169. #leftside{
  170. position:fixed;
  171. margin:0;
  172. width:50%;
  173. height:100%;
  174. background-image:url(https://68.media.tumblr.com/a11403b516f72ca70d832824cfdcd23b/tumblr_olqgft1fLa1uo5urho1_1280.jpg);
  175. background-size:cover;
  176. }
  177.  
  178. #quotation{
  179. position:absolute;
  180. width:60%;
  181. padding:5px;
  182. top:50%;
  183. left:50%;
  184. font-family:Poiret One;
  185. font-size:25px;
  186. line-height:40px;
  187. color:#bbbbbb;
  188. opacity:0.7;
  189. text-align:center;
  190. border-top:1px solid #fff;
  191. border-bottom:1px solid #fff;
  192. -webkit-transform: translateX(-50%) translateY(-50%);
  193. -moz-transform: translateX(-50%) translateY(-50%);
  194. -ms-transform: translateX(-50%) translateY(-50%);
  195. transform: translateX(-50%) translateY(-50%);
  196. }
  197.  
  198. /*----- RIGHT SIDE -----*/
  199.  
  200. #rightside{
  201. position:fixed;
  202. top:0;
  203. right:0;
  204. width:50%;
  205. height:100%;
  206. padding-bottom:50px;
  207. overflow-y:auto;
  208. }
  209.  
  210. /*-- MENU --*/
  211.  
  212. #menu{
  213. position:fixed;
  214. width:50%;
  215. min-width:300px;
  216. height:50px;
  217. top:0;
  218. background:#eeeeee;
  219. margin-left:0px;
  220. text-align:right;
  221. border-bottom:1px solid #eeeeee;
  222. }
  223.  
  224. /* Blog title */
  225.  
  226. #blogtitle{
  227. float:left;
  228. margin-left:20px;
  229. font-family:Poiret One;
  230. font-size:30px;
  231. line-height: 50px;
  232. color:#4A5A37;
  233. letter-spacing:1px;
  234. text-align:center;
  235. z-index:10000;
  236. }
  237.  
  238. #menu i{
  239. position:relative;
  240. margin-top:10px;
  241. margin-left:0px;
  242. margin-right:15px;
  243. width:20px;
  244. height:30px;
  245. padding:5px;
  246. font-size:20px;
  247. line-height:20px;
  248. text-align:center;
  249. border-bottom:1px solid #eeeeee;
  250. color:#4A5A37;
  251. }
  252.  
  253. #menu i:hover{
  254. color:#fff;
  255. -webkit-transition: all .7s ease;
  256. -moz-transition: all .7s ease;
  257. -o-transition: all .7s ease;
  258. transition: all .7s ease;
  259. }
  260.  
  261. /*-- HEADER --*/
  262.  
  263. #header {
  264. margin:0px;
  265. padding:15px 0px;
  266. width:100%;
  267. height:auto;
  268. border-bottom:1px solid #eeeeee;
  269. }
  270.  
  271. /* Avatar */
  272.  
  273. #avatar {
  274. margin-top:60px;
  275. margin-left:auto;
  276. margin-right:auto;
  277. width:80px;
  278. height:80px;
  279. border-radius:50px;
  280. border:2px #eeeeee solid;
  281. z-index:10000;
  282. }
  283.  
  284. #avatar img {
  285. width:100%;
  286. height:100%;
  287. border-radius:100px;
  288. }
  289.  
  290. /* Description */
  291.  
  292. #description{
  293. margin-left:20px;
  294. margin-top:10px;
  295. padding:10px 20px;
  296. width: calc(100% - 70px);
  297. color:#222222;
  298. font-size:12px;
  299. line-height:20px;
  300. text-align:justify;
  301. }
  302.  
  303. /* Extra links */
  304.  
  305. #navigation{
  306. margin-top:0px;
  307. margin-left:auto;
  308. margin-right:auto;
  309. width:90%;
  310. }
  311.  
  312. #links, #tags{
  313. width:100%
  314. margin-top:0px;
  315. margin-left:auto;
  316. margin-right:auto;
  317. }
  318.  
  319. /* Style of the links */
  320.  
  321. #links a{
  322. display:inline-block;
  323. margin:5px;
  324. font-size:12px;
  325. max-width:200px;
  326. overflow:hidden;
  327. color:#222222;
  328. border:1px solid #eeeeee;
  329. padding:10px;
  330. }
  331.  
  332. #links a:hover{
  333. box-shadow: inset 200px 0 0 0 #eeeeee;
  334. color:#4A5A37;
  335. }
  336.  
  337. /* Style of the tags */
  338.  
  339. #tags a{
  340. display:inline-block;
  341. margin:5px;
  342. font-size:12px;
  343. max-width:200px;
  344. overflow:hidden;
  345. color:#222222;
  346. border:1px solid #eeeeee;
  347. background:#eeeeee;
  348. padding:10px;
  349. }
  350.  
  351. #tags a:hover{
  352. box-shadow: inset 200px 0 0 0 #fff;
  353. color:#4A5A37;
  354. }
  355.  
  356. /*-- BLOGROLL --*/
  357.  
  358. #blogroll{
  359. max-height:200px;
  360. overflow-y:auto;
  361. margin-bottom:30px;
  362. }
  363.  
  364. /* Style of the blogroll images */
  365.  
  366. #blogroll img{
  367. margin:6px;
  368. max-width:40px;
  369. max-height:40px;
  370. border:2px solid #eeeeee;
  371. }
  372.  
  373. #blogroll img:hover {
  374. border:2px solid #4A5A37;
  375. }
  376.  
  377. /*-- PAGE CREDIT --*/
  378.  
  379. #credit {
  380. position:fixed;
  381. left:10px;
  382. bottom:10px;
  383. width:30px;
  384. z-index:10000;
  385. }
  386.  
  387.  
  388. /* END CSS */
  389.  
  390. {CustomCSS}
  391.  
  392. </style>
  393.  
  394. <script type="text/javascript"
  395. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  396.  
  397. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  398.  
  399. <!-- Font awesome script -->
  400.  
  401. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  402.  
  403. <!-- Style my tooltips script -->
  404.  
  405. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  406. <script src="jquery.style-my-tooltips.js"></script>
  407.  
  408. <script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
  409.  
  410. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  411. <script>
  412. (function($){
  413. $(document).ready(function(){
  414. $("[title]").style_my_tooltips({
  415. tip_follows_cursor:true,
  416. tip_delay_time:200,
  417. tip_fade_speed: 300
  418. }
  419. );
  420. });
  421. })(jQuery);
  422. </script>
  423. </head>
  424.  
  425. <meta charset="utf-8">
  426. <title>{Title}</title>
  427. <link rel="shortcut icon" href="{Favicon}">
  428. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  429. <meta name="viewport" content="width=device-width, initial-scale=1">
  430.  
  431. <!-- HTML -->
  432.  
  433. <body>
  434.  
  435. <!-- MAIN CONTAINER -->
  436. <div id="container">
  437.  
  438. <div id="leftside">
  439. <div id="quotation">
  440.  
  441. "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
  442.  
  443. </div>
  444. <!--End quotation-->
  445. </div>
  446. <!--End leftside-->
  447.  
  448. <div id="rightside">
  449.  
  450. <!-- MAIN ICONS -->
  451. <div id="menu">
  452. <!-- BLOG TITLE -->
  453. <div id="blogtitle">All in one page #3</div>
  454.  
  455. <a href="/" title="Index"><i class="fa fa-home"></i></a>
  456. <a href="/ask" title="Ask"><i class="fa fa-envelope"></i></a>
  457. <a href="/submit" title="Submit"><i class="fa fa-pencil"></i></a>
  458. <a href="/archive" title="Archive"><i class="fa fa-clock-o"></i></a>
  459. </div>
  460. <!--End Menu-->
  461.  
  462. <div id="header">
  463.  
  464. <!-- AVATAR -->
  465. <div id="avatar"><img src="http://static.tumblr.com/a134320be8c640fa109d305c337700f6/6dvmes1/ptfog6jrs/tumblr_static_5j14xh84r1wcoow0co4gc8ooo.jpg"></div>
  466. <!--End avatar-->
  467.  
  468. <!-- DESCRIPTION -->
  469. <div id="description">
  470. Lorem ipsum dolor sit <b>amet</b>, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, <i>mauris</i>. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  471. </div>
  472. <!--End description-->
  473.  
  474. </div>
  475. <!--End header-->
  476.  
  477. <!-- NAVIGATION -->
  478. <div id="navigation">
  479.  
  480. <div id="links">
  481.  
  482. <!-- LINKS -->
  483. <h1>Links</h1>
  484.  
  485. <center>
  486. <a href="http://">Link One </a>
  487. <a href="http://">Link Two </a>
  488. <a href="http://">Link Three </a>
  489. <a href="http://">Link Four </a>
  490. <a href="http://">Link Five </a>
  491. <a href="http://">Link Six </a>
  492. <a href="http://">Link Seven </a>
  493. <a href="http://">Link Eight </a>
  494. <a href="http://">Link Nine </a>
  495. <a href="http://">Link Ten </a><br>
  496. </center>
  497.  
  498. </div>
  499. <!--End links-->
  500.  
  501. <div id="tags">
  502.  
  503. <!-- TAGS -->
  504. <h1>Tags</h1>
  505.  
  506. <center>
  507. <a href="http://">#tagOne </a>
  508. <a href="http://">#tagTwo </a>
  509. <a href="http://">#tagThree </a>
  510. <a href="http://">#tagFour </a>
  511. <a href="http://">#tagFive </a>
  512. <a href="http://">#tagSix </a>
  513. <a href="http://">#tagSeven </a>
  514. <a href="http://">#tagEight </a>
  515. <a href="http://">#tagNine </a>
  516. <a href="http://">#tagTen </a>
  517. </center>
  518.  
  519. </div>
  520. <!--End tags-->
  521.  
  522. <!-- BLOGROLL-->
  523. <h1>Following</h1>
  524. <div id="blogroll">
  525. {block:Following}
  526. {block:Followed}
  527. <a title="{FollowedName}" href="{FollowedURL}">
  528. <img src="{FollowedPortraitURL-128}" /></a>
  529. {/block:Followed}
  530. {/block:Following}
  531. </div>
  532. <!--End blogroll-->
  533. </div>
  534.  
  535. </div>
  536. <!--End navigation-->
  537.  
  538. </div>
  539. <!--End rightside-->
  540.  
  541. </div>
  542. <!--End container-->
  543.  
  544. <!-- CREDIT (DO NOT REMOVE) -->
  545. <div id="credit"><a href="https://www.hunterthemes.tumblr.com">
  546. <img src="https://66.media.tumblr.com/b29d8873c09628252057b9408a7c4a88/tumblr_plbuq65td51uo5urho1_100.png" title="theme by hunter themes"></a></div>
  547.  
  548. </body>
  549. </html>
  550.  
  551. <!-- END HTML -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement