API tools faq
paste
Advertisement
heavenlydoctor

degrasse by eurhipides

heavenlydoctor
Feb 8th, 2015
4,342
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--all in one page: degrassé by eurhipides. basic rules apply, enjoy!---->
  5.  
  6. <title>navigation</title>
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9.  
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  11.  
  12. <script>
  13. $(document).ready(function(){
  14. $(".t").click(function(){
  15. $('#side').find('.selected').removeClass('selected');
  16. $(this).addClass('selected');
  17. $('#con').animate({
  18. scrollLeft: 0
  19. }, 650);
  20. });
  21. });
  22. </script>
  23.  
  24. <script>
  25. $(document).ready(function(){
  26. $(".onet").click(function(){
  27. $('#side').find('.selected').removeClass('selected');
  28. $(this).addClass('selected');
  29. $('#con').animate({
  30. scrollLeft: 450
  31. }, 650);
  32. });
  33. });
  34. </script>
  35.  
  36. <script>
  37. $(document).ready(function(){
  38. $(".twot").click(function(){
  39. $('#side').find('.selected').removeClass('selected');
  40. $(this).addClass('selected');
  41. $('#con').animate({
  42. scrollLeft: 900
  43. }, 650);
  44. });
  45. });
  46. </script>
  47.  
  48. <script>
  49. $(document).ready(function(){
  50. $(".threet").click(function(){
  51. $('#side').find('.selected').removeClass('selected');
  52. $(this).addClass('selected');
  53. $('#con').animate({
  54. scrollLeft: 1350
  55. }, 650);
  56. });
  57. });
  58. </script>
  59.  
  60. <script>
  61. $(document).ready(function(){
  62. $(".fourt").click(function(){
  63. $('#side').find('.selected').removeClass('selected');
  64. $(this).addClass('selected');
  65. $('#con').animate({
  66. scrollLeft: 1800
  67. }, 650);
  68. });
  69. });
  70. </script>
  71.  
  72. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  73.  
  74. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  75.  
  76. <script>
  77.  
  78. (function($){
  79.  
  80. $(document).ready(function(){
  81.  
  82. $("a[title]").style_my_tooltips({
  83.  
  84. tip_follows_cursor:true,
  85.  
  86. tip_delay_time:100,
  87.  
  88. tip_fade_speed:300,
  89.  
  90. attribute:"title"
  91.  
  92. });
  93.  
  94. });
  95.  
  96. })(jQuery);
  97.  
  98. </script>
  99.  
  100. <link href='http://fonts.googleapis.com/css?family=Raleway:200,400' rel='stylesheet' type='text/css'>
  101.  
  102. <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
  103.  
  104. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  105.  
  106. <style type="text/css">
  107.  
  108. #s-m-t-tooltip {
  109. max-width:150px;
  110. padding:5px 8px;
  111. margin:20px 14px 7px 10px;
  112. background-color:#fff;
  113. font-family:Calibri;
  114. font-size:10px;
  115. line-height:11px;
  116. letter-spacing:1px;
  117. text-transform:uppercase;
  118. color:{color:link};
  119. z-index:99999999;
  120. }
  121.  
  122. ::-webkit-scrollbar {
  123. height:3px;
  124. width:3px;
  125. background-color: transparent;
  126. }
  127.  
  128. #con::-webkit-scrollbar {
  129. height:0px;
  130. width:0px;
  131. }
  132.  
  133. ::-webkit-scrollbar-thumb {
  134. background-color: #aaa; /*change scrollbar color*/
  135. }
  136.  
  137. ::selection {
  138. background-color: #000;
  139. color: #fff;
  140. }
  141.  
  142. body {
  143. background-color: #e5e5e5; /*change background color*/
  144. font-family:arial;
  145. font-size:11px;
  146. }
  147.  
  148.  
  149. a {
  150. text-decoration: none;
  151. -webkit-transition: 0.5s;
  152. -moz-transition: 0.5s;
  153. transition: 0.5s;
  154. color: #000;
  155. }
  156.  
  157. a:hover {
  158. text-decoration: none;
  159. -webkit-transition: 0.5s;
  160. -moz-transition: 0.5s;
  161. transition: 0.5s;
  162. color: white;
  163. }
  164.  
  165. .con {
  166. top:0;
  167. bottom:0;
  168. left:0;
  169. position:fixed;
  170. width:700px;
  171. border-radius:3px;
  172. height:550px;
  173. right:0;
  174. margin:auto;
  175. background:#fff; /*change sidebar color*/
  176. }
  177.  
  178. #side {
  179. position:absolute;
  180. left:0;
  181. line-height:30px;
  182. top:0;
  183. bottom:0;
  184. }
  185.  
  186. #side a, .title {
  187. display:block;
  188. font-family:'Lato', sans-serif;
  189. font-size:12px;
  190. font-weight:700;
  191. text-transform:uppercase;
  192. letter-spacing:2px;
  193. color:#bbb; /*change sidebar links color*/
  194. }
  195.  
  196. #side a:hover {
  197. color:#777; /*change sidebar links hover color*/
  198. }
  199.  
  200. #side a.selected {
  201. color:#555; /*change sidebar selected links color*/
  202. }
  203.  
  204. #con {
  205. position:absolute;
  206. height:550px;
  207. overflow-x:scroll;
  208. overflow-y:hidden;
  209. white-space:nowrap;
  210. box-sizing:border-box;
  211. width:450px;
  212. right:0;
  213. }
  214.  
  215. #one, #two, #three, #four, #five {
  216. width:450px;
  217. height:550px;
  218. position:absolute;
  219. color:#b4b4b4; /*change tabs text color*/
  220. line-height:17px;
  221. white-space:normal;
  222. overflow:auto;
  223. padding:50px;
  224. font-family:'Lato', sans-serif;
  225. letter-spacing:1px;
  226. box-sizing:border-box;
  227. background:#fafafa; /*change tabs background color*/
  228. display:inline-block;
  229. }
  230.  
  231. #one {
  232. background:url(https://36.media.tumblr.com/0028517e0c8da52ebdd3993f769cfd9e/tumblr_njgpuavAv41rrcm6ho1_1280.jpg) no-repeat; /*change first tab image*/
  233. background-size:cover;
  234. }
  235.  
  236. #two {
  237. left:450px;
  238. }
  239.  
  240. #two p {
  241. padding:15px;
  242. }
  243.  
  244. #two a {
  245. color:#ccc;
  246. }
  247.  
  248. #two a:hover {
  249. color:#777;
  250. }
  251.  
  252. .title {
  253. color:#666; /*change tabs title color*/
  254. font-weight:900;
  255. font-size:13px;
  256. position:relative;
  257. margin-bottom:40px;
  258. }
  259.  
  260. .title:after {
  261. content:' ';
  262. height:2px;
  263. position:absolute;
  264. bottom:-7px;
  265. background:#666; /*change tabs title border-bottom color*/
  266. left:-3px;
  267. width:25px;
  268. }
  269.  
  270. .tags {
  271. width:100%;
  272. margin:15px 0px;
  273. padding:15px;
  274. box-sizing:border-box;
  275. position:relative;
  276. display:block;
  277. }
  278.  
  279. .tagt {
  280. font-weight:bold;
  281. text-transform:uppercase;
  282. font-size:12px;
  283. margin-bottom:5px;
  284. color:#666; /*change tags title color*/
  285. }
  286.  
  287. .tags a {
  288. padding-left:10px;
  289. color:#bbb; /*change tags color*/
  290. line-height:180%;
  291. text-transform:uppercase;
  292. }
  293.  
  294. .tags a:hover, #four b {
  295. color:#777; /*change tags hover and faq question color*/
  296. }
  297.  
  298. #three {
  299. left:900px;
  300. }
  301.  
  302. #four {
  303. left:1350px;
  304. }
  305.  
  306. #five {
  307. left:1800px;
  308. }
  309.  
  310. </style>
  311. </head>
  312. <body>
  313.  
  314. <div class="con">
  315.  
  316. <div id="side">
  317. <div style="display:table;height:100%;width:100px;margin-left:65px">
  318. <div style="display:table-cell;height:100%;vertical-align:middle">
  319.  
  320. <a href="javascript:;" class="t selected">navigation</a>
  321. <a href="javascript:;" class="onet">about</a>
  322. <a href="javascript:;" class="twot">tags</a>
  323. <a href="javascript:;" class="threet">faq</a>
  324. <a href="javascript:;" class="fourt">blogroll</a>
  325. <a href="http://astraeus.co.vu">credit</a>
  326.  
  327. </div>
  328. </div>
  329. </div>
  330.  
  331. <div id="con">
  332.  
  333. <div id="one"></div>
  334.  
  335. <div id="two">
  336. <div style="display:table;width:350px;height:450px;">
  337. <div style="display:table-cell;height:100%;vertical-align:middle">
  338.  
  339. <div class="title">01. about</div>
  340.  
  341. <!--description--->
  342. <p><a href="/">Link</a>, <b>bolded</b>, <u>underlined</u>, <i>italicized.</i> Make sure to wrap each paragraph in < p > and < / p > tags.</p>
  343.  
  344. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id orci est. Ut sagittis lectus sed velit eleifend, sed bibendum mauris efficitur. Vivamus a faucibus nulla. In sollicitudin mi vel erat tristique elementum. Morbi rhoncus, mi eget pharetra interdum, ex justo feugiat magna, non imperdiet massa ex sit amet lectus.</p>
  345.  
  346. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id orci est. Ut sagittis lectus sed velit eleifend, sed bibendum mauris efficitur. Vivamus a faucibus nulla.</p>
  347. <!---end description--->
  348.  
  349. </div>
  350. </div>
  351. </div>
  352.  
  353.  
  354. <div id="three">
  355. <div style="display:table;width:350px;height:450px;">
  356. <div style="display:table-cell;height:100%;vertical-align:middle">
  357.  
  358. <div class="title">02. tags</div>
  359.  
  360. <!---to add new tags copy and paste from here-->
  361. <div class="tags">
  362. <div class="tagt">tag title</div>
  363. <a href="/">link</a>
  364. <a href="/">link</a>
  365. <a href="/">link</a>
  366. <a href="/">link</a>
  367. <a href="/">link</a>
  368. </div>
  369. <!---to here--->
  370.  
  371. <div class="tags">
  372. <div class="tagt">tag title</div>
  373. <a href="/">link</a>
  374. <a href="/">link</a>
  375. <a href="/">link</a>
  376. <a href="/">link</a>
  377. </div>
  378.  
  379. <div class="tags">
  380. <div class="tagt">tag title</div>
  381. <a href="/">link</a>
  382. <a href="/">link</a>
  383. <a href="/">link</a>
  384. </div>
  385.  
  386. </div>
  387. </div>
  388. </div>
  389.  
  390.  
  391.  
  392. <div id="four">
  393. <div style="display:table;width:350px;height:450px;">
  394. <div style="display:table-cell;height:100%;vertical-align:middle">
  395.  
  396. <div class="title">03. frequently asked questions</div>
  397.  
  398. <!---to add new question copy and paste from here--->
  399. <p><b>here is a question?</b> here is your answer.</p>
  400. <!--to here---->
  401.  
  402. <p><b>here is a question?</b> here is your answer.</p>
  403.  
  404. <p><b>here is a question?</b> here is your answer.</p>
  405.  
  406. <iframe frameborder="0" scrolling="no" width="100%" height="260" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="overflow:auto; margin-top:10px" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  407.  
  408.  
  409. </div>
  410. </div>
  411. </div>
  412.  
  413.  
  414. <div id="five">
  415. <div style="display:table;width:350px;height:450px;">
  416. <div style="display:table-cell;height:100%;vertical-align:middle">
  417.  
  418. <div class="title">04. blogroll</div>
  419.  
  420. {block:Following}{block:Followed}
  421. <div style="display:inline-block; margin:7px" class="following">
  422. <a target="_blank" href='{FollowedURL}' title='{FollowedName}'><img src='{FollowedPortraitURL-40}'></a>
  423. </div>
  424. {block:Followed}{/block:Following}
  425.  
  426.  
  427. </div>
  428. </div>
  429. </div>
  430.  
  431.  
  432. </div><!---id con--->
  433.  
  434. </div><!--class con--->
  435.  
  436. </body>
  437. </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!