API tools faq
paste
Advertisement
rdjhiddlestons

Tags Page #1 by rdjhiddlestons

rdjhiddlestons
Mar 12th, 2014
2,580
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.07 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <!--
  4. TAGS PAGE #1
  5. by http://thomashiddlestons.co.vu [rdjhiddlestons]
  6.  
  7. ·PLEASE DO NOT REMOVE CREDIT
  8. ·DO NOT CLAIM AS YOUR OWN
  9. ·DO NOT USE AS A BASE CODE
  10. ·Edit as much as you want just don't remove the credit
  11.  
  12. Send me any questions or anything regarding problems with the page so I can fix them
  13. -->
  14.  
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}">
  17.  
  18. <!-----------------------------------FONTS------------------------------->
  19.  
  20. <link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
  21. <link href='http://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
  22.  
  23. <style type="text/css">
  24.  
  25. /*SCROLLBAR*/
  26.  ::-webkit-scrollbar {
  27.      width: 4px;
  28.      height:auto;
  29.      background:#fff;
  30.      }
  31.     ::-webkit-scrollbar-corner {
  32.         padding:2px;
  33.         background:#fff;
  34.         }
  35.     ::-webkit-scrollbar-button:vertical {
  36.         height:3px;
  37.         display: block;
  38.         background:#ddd;
  39.         }
  40.     ::-webkit-scrollbar-button:horizontal {
  41.         width: 3px;
  42.         height: 3px;
  43.         display: block;
  44.         background:#ddd;
  45.         }
  46.     ::-webkit-scrollbar-thumb:vertical {
  47.         background:#ddd;
  48.        
  49.         }
  50.     ::-webkit-scrollbar-thumb:horizontal {
  51.         background:#fff;
  52.         }
  53.     ::-webkit-scrollbar-thumb {
  54.         background: #ddd;
  55.         }
  56.  
  57. body {
  58.         font-family: calibri;
  59.         font-size: 12px;
  60.         color: #999999;
  61.         background-color: #fff;
  62.         margin:0;
  63. }
  64.  
  65. a {
  66.         text-decoration: none;
  67.         color: #666666;
  68. }
  69.  
  70. a:hover {
  71.         color: #666666;
  72. }
  73.  
  74. /*SIDEBAR*/
  75.  
  76. .title {
  77.         display: block;
  78.         width: 300px;
  79.         height: auto;
  80.         font-family: 'Exo 2', sans-serif;
  81.         font-size: 24px;
  82.         color: #990000;/*CHANGE COLOR OF TITLE*/
  83.         text-decoration: none;
  84.         text-align: center;
  85.         margin-top: 10px;
  86. }
  87.  
  88. .sidebar {
  89.         width: 300px;
  90.         position: fixed;
  91.         left: 0;
  92.         top: 0;
  93.         height: 1000%;
  94.         background-color: #f0f0f0;/*CHANGE COLOR OF SIDEBAR*/
  95.         color: #fff;
  96. }
  97.        
  98. .sbimage {
  99.         width: 160px;
  100.         height: auto;
  101. }
  102.  
  103. .sbimage img {
  104.         width: 160px;
  105.         height: auto;
  106.         margin-top: 100px;
  107.         margin-right:70px;
  108.         margin-left:70px;
  109. }
  110.  
  111. /*NAVIGATION LINKS*/
  112.  
  113. nav {
  114.         text-align: center;
  115.         margin-top: 5px;
  116. }
  117.  
  118. nav a {
  119.     margin-left:auto;
  120.     margin-right:auto;
  121.     width:100px;
  122.     display:block;
  123.     color: #666;
  124.     font-size:16px;
  125.     border: 1px solid;
  126.     -webkit-transition: all 0.5s ease-out;
  127.         -moz-transition: all 0.5s ease-out;
  128.         transition: all 0.5s ease-out;
  129. }
  130.  
  131. nav a:hover {
  132.     color: #666;
  133.     letter-spacing:5px;
  134.     -webkit-transition: all 0.5s ease-out;
  135.         -moz-transition: all 0.5s ease-out;
  136.         transition: all 0.5s ease-out;
  137. }
  138.  
  139. .container {
  140.     width:700px;
  141.     height:100%;
  142.     margin-left:360px;
  143.     margin-top:20px;
  144. }
  145.  
  146. /*CREDIT. DO NOT REMOVE*/
  147.  
  148. .credit {
  149.     position:fixed;
  150.     bottom:25px;
  151.     right:25px;
  152.     font-size:10px;
  153.     font-family: 'Calibri';
  154.     background: #fff;
  155.     color:#000;
  156.     text-transform:uppercase;
  157. }
  158.  
  159. .credit a {
  160.     color:#666666;
  161.     padding:4px;
  162.     -webkit-transition: all 0.5s ease-out;
  163.         -moz-transition: all 0.5s ease-out;
  164.         transition: all 0.5s ease-out;
  165. }
  166.  
  167. .credit a:hover {
  168.     color:#666;
  169.     background:#f0f0f0;
  170.     padding:4px;
  171.     -webkit-transition: all 0.5s ease-out;
  172.         -moz-transition: all 0.5s ease-out;
  173.         transition: all 0.5s ease-out;
  174. }
  175.  
  176. /*TAGS*/
  177.  
  178. .box {
  179.     display: inline-block;
  180.     width:200px;
  181.     height:300px;
  182.     margin-top:60px;
  183.     margin-left:20px;
  184. }
  185.  
  186. .tags {
  187.     position:auto;
  188.     width:200px;
  189.     height:315px;
  190.     overflow-y:auto;
  191.     overflow-x:hidden;
  192. }
  193.  
  194. .heading {
  195.     position:absolute;
  196.     width:200px;
  197.     font-family: 'Exo 2', sans-serif;
  198.     text-transform:uppercase;
  199.     font-size:20px;
  200.     text-align:center;
  201.     color: #fff;
  202.     background-color: #000;
  203. }
  204.  
  205. .taglinks {
  206.     display:inline-block;
  207.     width:200px;
  208.     height:250px;
  209.     font-family: 'News Cycle', sans-serif;
  210.     text-transform:uppercase;
  211.     font-size:14px;
  212.     margin-top:27px;
  213.     margin-left:0px;
  214.     text-align:center;
  215. }
  216.  
  217. .taglinks a {
  218.     display:inline-block;
  219.     width:200px;
  220.     height:auto;
  221.     font-family: 'News Cycle', sans-serif;
  222.     text-transform:uppercase;
  223.     text-align:center;
  224.     margin-bottom:5px;
  225.     color:#666;
  226.     background-color:#f0f0f0;
  227.     text-decoration:none;
  228.     -webkit-transition: all 0.3s ease-out;
  229.         -moz-transition: all 0.3s ease-out;
  230.         transition: all 0.3s ease-out;
  231. }
  232.  
  233. .taglinks a:hover {
  234.     color:#666;
  235.     background-color:#fff;
  236.     letter-spacing:2px;
  237.     -webkit-transition: all 0.3s ease-out;
  238.         -moz-transition: all 0.3s ease-out;
  239.         transition: all 0.3s ease-out;
  240. }
  241.  
  242. .bottom {
  243.     margin-bottom:75px;
  244. }
  245.  
  246. </style>
  247. </head>
  248.  
  249. <body>
  250. <div class="sidebar">
  251.         <div class="sbimage">
  252.         <!--SIDEBAR IMAGE-->
  253.       <img src="https://31.media.tumblr.com/f6a4f04f749608981ebb2db4ff81595f/tumblr_inline_n31vtfz3pB1qhfdx8.gif"/><!--ADD URL HERE FOR SIDEBAR IMAGE-->
  254.       </div>      
  255.         <div class="title">Navigation</div><!--YOU CAN CHANGE THE TITLE HERE--><br>
  256.       <nav>
  257.       <!--NAVIGATION LINKS-->
  258.         <a href="/">HOME</a><br>
  259.         <a href="/ask">ASK</a><br>
  260.         <a href="/submit">SUBMIT</a><br>
  261.         <!--DO NOT REMOVE-->
  262.         <a href="http://thomashiddlestons.co.vu">CREDIT</a><br>
  263.         <!--DO NOT REMOVE-->
  264.         </nav>
  265. </div>
  266.  
  267. <div class="container">
  268.  
  269. <!--FIRST ROW BEGINS HERE-->
  270. <!--FIRST BOX-->
  271. <div class="box">
  272.     <div class="heading">
  273.         People
  274.     </div>
  275.     <div class="tags">
  276.         <div class="taglinks">
  277.             <!--LINKS-->
  278.             <a href="/tagged/">LINK</a>
  279.             <a href="/tagged/">LINK</a>
  280.             <a href="/tagged/">LINK</a>
  281.             <a href="/tagged/">LINK</a>
  282.             <a href="/tagged/">LINK</a>
  283.             <a href="/tagged/">LINK</a>
  284.             <a href="/tagged/">LINK</a>
  285.             <a href="/tagged/">LINK</a>
  286.             <a href="/tagged/">LINK</a>
  287.             <a href="/tagged/">LINK</a>
  288.     <!--I recommend for you to put your tags as "/tagged/url" instead of the whole url "http://yourusername.tumblr.com/tagged/url" because when you change blog names you don't have to tweak this again-->
  289.         </div>
  290.     </div>
  291. </div>
  292. <!--END OF FIRST BOX-->
  293.  
  294. <!--SECOND BOX-->
  295. <div class="box">
  296.     <div class="heading">
  297.         People
  298.     </div>
  299.     <div class="tags">
  300.         <div class="taglinks">
  301.             <!--LINKS-->
  302.             <a href="/tagged/">LINK</a>
  303.             <a href="/tagged/">LINK</a>
  304.             <a href="/tagged/">LINK</a>
  305.             <a href="/tagged/">LINK</a>
  306.             <a href="/tagged/">LINK</a>
  307.             <a href="/tagged/">LINK</a>
  308.             <a href="/tagged/">LINK</a>
  309.             <a href="/tagged/">LINK</a>
  310.             <a href="/tagged/">LINK</a>
  311.             <a href="/tagged/">LINK</a>
  312.         </div>
  313.     </div>
  314. </div>
  315. <!--END OF SECOND BOX-->
  316.  
  317. <!--THIRD BOX-->
  318. <div class="box">
  319.     <div class="heading">
  320.         Movies
  321.     </div>
  322.     <div class="tags">
  323.         <div class="taglinks">
  324.             <!--LINKS-->
  325.             <a href="/tagged/">LINK</a>
  326.             <a href="/tagged/">LINK</a>
  327.             <a href="/tagged/">LINK</a>
  328.             <a href="/tagged/">LINK</a>
  329.             <a href="/tagged/">LINK</a>
  330.             <a href="/tagged/">LINK</a>
  331.             <a href="/tagged/">LINK</a>
  332.             <a href="/tagged/">LINK</a>
  333.             <a href="/tagged/">LINK</a>
  334.             <a href="/tagged/">LINK</a>
  335.         </div>
  336.     </div>
  337. </div>
  338. <!--END OF THIRD BOX-->    
  339. <!--END OF FIRST ROW-->
  340.  
  341. <div class="bottom">
  342. <!--SECOND ROW BEGINS HERE-->
  343. <!--FOURTH BOX-->
  344. <div class="box">
  345.     <div class="heading">
  346.         Other
  347.     </div>
  348.     <div class="tags">
  349.         <div class="taglinks">
  350.             <!--LINKS-->
  351.             <a href="/tagged/">LINK</a>
  352.             <a href="/tagged/">LINK</a>
  353.             <a href="/tagged/">LINK</a>
  354.             <a href="/tagged/">LINK</a>
  355.             <a href="/tagged/">LINK</a>
  356.             <a href="/tagged/">LINK</a>
  357.             <a href="/tagged/">LINK</a>
  358.             <a href="/tagged/">LINK</a>
  359.             <a href="/tagged/">LINK</a>
  360.             <a href="/tagged/">LINK</a>
  361.         </div>
  362.     </div>
  363. </div>
  364. <!--END OF FOURTH BOX-->
  365.  
  366. <!--FIFTH BOX-->
  367. <div class="box">
  368.     <div class="heading">
  369.         Heading
  370.     </div>
  371.     <div class="tags">
  372.         <div class="taglinks">
  373.             <!--LINKS-->
  374.             <a href="/tagged/">LINK</a>
  375.             <a href="/tagged/">LINK</a>
  376.             <a href="/tagged/">LINK</a>
  377.             <a href="/tagged/">LINK</a>
  378.             <a href="/tagged/">LINK</a>
  379.             <a href="/tagged/">LINK</a>
  380.             <a href="/tagged/">LINK</a>
  381.             <a href="/tagged/">LINK</a>
  382.             <a href="/tagged/">LINK</a>
  383.             <a href="/tagged/">LINK</a>
  384.         </div>
  385.     </div>
  386. </div>
  387. <!--END OF FIFTH BOX-->
  388.  
  389. <!--SIXTH BOX-->
  390. <div class="box">
  391.     <div class="heading">
  392.         Heading
  393.     </div>
  394.     <div class="tags">
  395.         <div class="taglinks">
  396.             <!--LINKS-->
  397.             <a href="/tagged/">LINK</a>
  398.             <a href="/tagged/">LINK</a>
  399.             <a href="/tagged/">LINK</a>
  400.             <a href="/tagged/">LINK</a>
  401.             <a href="/tagged/">LINK</a>
  402.             <a href="/tagged/">LINK</a>
  403.             <a href="/tagged/">LINK</a>
  404.             <a href="/tagged/">LINK</a>
  405.             <a href="/tagged/">LINK</a>
  406.             <a href="/tagged/">LINK</a>
  407.         </div>
  408.     </div>
  409. </div>
  410. <!--END OF SIXTH BOX-->
  411. <!--END OF SECOND ROW-->
  412. </div>
  413.  
  414.  <!--DO NOT REMOVE CREDIT-->
  415. <div class="credit">
  416.     <a href="http://thomashiddlestons.co.vu" title="themes by daniela">© rdjhiddlestons</a>
  417. </div>
  418. <!--DO NOT REMOVE CREDIT-->
  419.            
  420. </div>
  421.  
  422. </body>
  423. </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!