API tools faq
paste
Advertisement
b0rn-to-be-wild

Blogroll II

b0rn-to-be-wild
Mar 20th, 2014
125
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.67 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <!----
  5.  
  6. © borntobewildthemes.tumblr.com | "Blogroll II"
  7.  
  8. + Please do not redistribute this page or remove credits.
  9. + You are allowed to make changes as long as you keep our credits.
  10. + If you have any questions or concerns, just contact us.
  11. + Thanks for using our page! Hope you enjoy it!
  12.  
  13. ---->
  14.  
  15. <!--Google fonts-->
  16.  
  17. <link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'>
  18.  
  19. <link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
  20.  
  21. <!--Important scripts-->
  22.  
  23. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  24. <script src="jquery.style-my-tooltips.js"></script>
  25.  
  26. <script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
  27.  
  28. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  29. <script>
  30. (function($){
  31. $(document).ready(function(){
  32. $("[title]").style_my_tooltips({
  33. tip_follows_cursor:true,
  34. tip_delay_time:200,
  35. tip_fade_speed:300
  36. }
  37. );
  38. });
  39. })(jQuery);
  40. </script>
  41.  
  42. <style>
  43.  
  44. /* Main */
  45.  
  46. body {
  47. background:#000 url(http://i62.tinypic.com/x2t1rm.jpg);
  48. background-position:fixed;
  49. font-family:Great Vibes;
  50. font-style:italic;
  51. font-size:30px;
  52. color:#333;}
  53.  
  54. a {
  55. color:#A5856C;
  56. text-decoration:none;
  57. border:none;
  58. -webkit-transition-duration: 0.9s;
  59. }
  60.  
  61. a:hover{
  62. color:#000;
  63. }
  64.  
  65. /* Webkit scrollbar */
  66.  
  67. ::-webkit-scrollbar-thumb {
  68. background: #A5856C;
  69. height: auto;
  70. border: 2px solid #000;
  71. }
  72.  
  73. ::-webkit-scrollbar {
  74. height:10px;
  75. width:10px;
  76. background: #A5856C;
  77. height: auto;
  78. border: 4px solid #000;
  79. }
  80.  
  81. /* Container*/
  82.  
  83. #container{
  84. background-color:#000;
  85. border:1px solid #A5856C;
  86. padding:3px;
  87. margin-top:230px;
  88. padding-top:200px;
  89. margin-left:auto;
  90. margin-right:auto;
  91. border-top-left-radius:20px;
  92. border-top-right-radius:20px;
  93. width:780px;
  94. z-index:1;
  95. text-align:center;
  96. max-height:210px;
  97. }
  98.  
  99. #blogroll{
  100. max-height:200px;
  101. overflow-y:auto;
  102. border-top:2px solid #A5856C;
  103. }
  104.  
  105. #container img {
  106. border:5px double #A5856C;
  107. border-radius:5px;
  108. max-width:48px;
  109. padding:5px;
  110. margin:5px;
  111. opacity:0.9;
  112. -webkit-transition-duration: 0.5s;
  113. -moz-transition-duration: 0.5s;
  114. -o-transition-duration: 0.5s;
  115. -ms-transition-duration: 0.5s;
  116. z-index: 2px;
  117. -webkit-transition-duration: 0.9s;
  118. }
  119.  
  120. #container img:hover {
  121. opacity:1;
  122. border:5px solid #A5856C;
  123. border-radius:0px;
  124. -webkit-transition-duration: 0.5s;
  125. -moz-transition-duration: 0.5s;
  126. -o-transition-duration: 0.5s;
  127. -ms-transition-duration: 0.5s;
  128. }
  129.  
  130. /* Header */
  131.  
  132. #header{
  133. margin:auto;
  134. margin-top:-425px;
  135. width:517px;
  136. height:422px;
  137. background:url(http://i44.tinypic.com/qnp56u.jpg);
  138. z-index:1000000;
  139. }
  140.  
  141. #headerimage{
  142. position:absolute;
  143. margin-top:34px;
  144. margin-left:163px;
  145. text-align:center;
  146. border:1px solid gray;
  147. border-radius:100%;
  148. padding:10px;
  149. font-family:Redressed;
  150. font-size:35px;
  151. width:168px;
  152. height:168px;
  153. background:url(http://m.eyemags.com/em/web/images/marilyn_monroe0.jpg);
  154. background-position:center;
  155. }
  156.  
  157. /* Title */
  158.  
  159. #title{
  160. position:absolute;
  161. width:260px;
  162. color:#A5856C;
  163. margin-left:130px;
  164. margin-top:325px;
  165. font-size:40px;
  166. z-index: 100;
  167. text-align:center;
  168. }
  169.  
  170. /* Links */
  171.  
  172. #linkOne{
  173. position:absolute;
  174. width:70px;
  175. background:#000;
  176. font-family:'Great Vibes';
  177. height:30px;
  178. padding:5px;
  179. margin-left:-100px;
  180. margin-top:205px;
  181. font-size:19px;
  182. line-height:30px;
  183. border:1px solid #BAA89C;
  184. border-radius:25px;
  185. }
  186.  
  187. #linkTwo{
  188. position:absolute;
  189. width:70px;
  190. background:#000;
  191. font-family:'Great Vibes';
  192. height:30px;
  193. padding:5px;
  194. margin-left:-150px;
  195. margin-top:255px;
  196. font-size:19px;
  197. line-height:30px;
  198. border:1px solid #BAA89C;
  199. border-radius:25px;
  200. }
  201.  
  202. #linkThree{
  203. position:absolute;
  204. width:70px;
  205. background:#000;
  206. font-family:'Great Vibes';
  207. height:30px;
  208. padding:5px;
  209. margin-left:580px;
  210. margin-top:255px;
  211. font-size:19px;
  212. line-height:30px;
  213. border:1px solid #BAA89C;
  214. border-radius:25px;
  215. }
  216.  
  217. #linkFour{
  218. position:absolute;
  219. width:70px;
  220. background:#000;
  221. font-family:'Great Vibes';
  222. height:30px;
  223. padding:5px;
  224. margin-left:535px;
  225. margin-top:205px;
  226. font-size:19px;
  227. line-height:30px;
  228. border:1px solid #BAA89C;
  229. border-radius:25px;
  230. }
  231.  
  232. #linkOne:hover, #linkTwo:hover, #linkThree:hover, #linkFour:hover{
  233. background:#A5856A;
  234. color:#000;
  235. -webkit-transition: all .7s ease;
  236. -moz-transition: all .7s ease;
  237. -o-transition: all .7s ease;
  238. transition: all .7s ease;
  239. }
  240.  
  241. /* Style of the box that appears when you hover over the links */
  242.  
  243. #s-m-t-tooltip {
  244. font-family:Exo;
  245. max-width:300px;
  246. z-index:10;
  247. margin:24px 14px 7px 12px;
  248. padding:8px;
  249. color:#A5856C;
  250. background:#000;
  251. font-size:12px;
  252. border:1px solid #BAA89C;
  253. line-height:16px;
  254. }
  255.  
  256. /* Credits */
  257.  
  258. #credits {
  259. position:fixed;
  260. right:10px;
  261. top:40px;
  262. z-index:100000;
  263. border:3px solid #A5876D;
  264. }
  265.  
  266. #credts img{
  267. border:3px solid #A5876D;
  268. }
  269.  
  270. </style>
  271.  
  272. <div id="container">
  273.  
  274. <div id="header">
  275.  
  276. <div id="headerimage"></div>
  277.  
  278. <div id="title">Blogroll</div>
  279.  
  280. <div id="linkOne"><a href="/">Home</a></div>
  281. <div id="linkTwo"><a href="/Ask">Ask</a></div>
  282. <div id="linkThree"><a href="/archive">Archive</a></div>
  283. <div id="linkFour"><a href="http://tumblr.com">Dash</a></div>
  284. </div>
  285.  
  286. <div id="blogroll">
  287. {block:Following}{block:Followed}<a title='{FollowedName}' target='_blank' href='{FollowedURL}'><img border='0' src='{FollowedPortraitURL-48}' />{/block:Followed}{/block:Following}
  288. </div>
  289.  
  290. </div>
  291.  
  292. <!--End container-->
  293.  
  294. <a href="http://borntobewildthemes.tumblr.com"><div id="credits">
  295. <img src="http://i57.tinypic.com/301g6eg.jpg"></div></a>
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!