API tools faq
paste
stardating

FIEND DER HYDRA: S.H.I.E.L.D.

stardating
Jun 8th, 2014
240
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.39 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" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <!--- PUT YOUR TITLE HERE IN THE {} BELOW
  6. IF YOU WANT IT TO BE DIFFERENT THAN THE SIDEBAR TITLE --->
  7.  
  8. <title>{Title}</title>
  9.  
  10. <link rel="shortcut icon" href="{Favicon}">
  11.  
  12. <!---
  13.  
  14. LAYOUT: S.H.I.E.L.D. (FIEND DER HYDRA)
  15. MAKER: STARDATING @ TUMBLR.COM
  16. RESOURCES: http://fiendderhydra.tumblr.com/post/88189009400/resources
  17. THEME PACK: http://stardating.tumblr.com/post/88239253712
  18.  
  19. DO NOT TAKE OUT THESE CREDITS
  20. FEEL FREE TO TWEAK & MODIFY ALL YOU WANT
  21. BUT DO NOT REDISTRIBUTE OR CLAIM AS YOUR OWN
  22.  
  23. --->
  24.  
  25. <!--- CSS BEGINS --->
  26.  
  27. <style type="text/css">
  28.  
  29. /*--- CUSTOM FONTS ---*/
  30.  
  31. @import url(http://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext);
  32.  
  33. /*--- SCROLLBAR ---*/
  34.  
  35. ::-webkit-scrollbar {width:5px;
  36. height:auto;
  37. background:#F8F8F8;}
  38.  
  39. ::-webkit-scrollbar-corner {background: #F8F8F8;}
  40.  
  41. ::-webkit-scrollbar-thumb:vertical {background: #2E4859;}
  42.  
  43. ::-webkit-scrollbar-thumb:horizontal {background: #2E4859;}
  44.  
  45. /*--- BODY ---*/
  46.  
  47. body {margin-bottom: 30px;
  48. background: #F8F8F8;
  49. color: #000000;
  50. font-family: Helvetica;
  51. font-size: 11px;
  52. line-height: 150%;
  53. text-align: justify;}
  54.  
  55. a {text-decoration: none;
  56. color: #000000;
  57. -webkit-transition: all .5s ease-in-out;
  58. -moz-transition: all .5s ease-in-out;
  59. transition: all .5s ease-in-out;}
  60.  
  61. a:hover {color: #2E4859;
  62. -webkit-transition: all .5s ease-in-out;
  63. -moz-transition: all .5s ease-in-out;
  64. transition: all .5s ease-in-out;}
  65.  
  66. small {font-size: 10px;}
  67.  
  68. /*--- MAIN CONTENT ---*/
  69.  
  70. #content {background: #F8F8F8;
  71. width: 600px;
  72. height: 500px;
  73. overflow-y: scroll;
  74. margin-left: 300px;
  75. position: relative;}
  76.  
  77. /*--- ICON HOLDER ---*/
  78.  
  79. .blogroll {margin-top: 45px;
  80. position: relative;
  81. overflow-x: auto;
  82. height: 400px;}
  83.  
  84. #icons {display: inline-block;
  85. width: 70px;
  86. height: 70px;
  87. margin: 10px;
  88. margin-right: 10px;
  89. padding-right: 20px;}
  90.  
  91. /*--- ICONS ---*/
  92.  
  93. .blogroll img {background-color: #FFFFFF;
  94. padding: 9px;
  95. border: 1px solid #FFF;
  96. opacity: 0.6;
  97. float: left;
  98. width: 60px;}
  99.  
  100. #icons:hover img {background-color: #F8F8F8;
  101. padding: 0px;
  102. border: 10px solid #F8F8F8;
  103. opacity: 1;}
  104.  
  105. /*--- SIDEBAR GENERAL ---*/
  106.  
  107. #sidebar {width: 180px;
  108. height: 300px;
  109. margin-left: 70px;
  110. margin-top: 70px;
  111. position: fixed;
  112. background-color: #F8F8F8;}
  113.  
  114. #desc {width: 100%;
  115. height: 200px;
  116. margin-top: 15px;
  117. font-family: Helvetica;
  118. color: #444444;
  119. font-size: 11px;
  120. text-align: justify;
  121. line-height: 150%;
  122. background-color: #f8f8f8;
  123. overflow-y: scroll;
  124. padding: 5px 10px 5px 5px;}
  125.  
  126. #sidecont {position: fixed;
  127. width: 180px;
  128. margin-left: 70px;
  129. margin-top: 70px;}
  130.  
  131. /*--- SIDEBAR TITLE, LINKS ---*/
  132.  
  133. #title {width: 180px;
  134. margin-top: 10px;
  135. margin-bottom: 25px;
  136. font-family: Oswald;
  137. font-size: 18px;
  138. color: #000000;
  139. text-align: center;
  140. letter-spacing: 5px;
  141. text-transform:uppercase;
  142. line-height: 150%;
  143. -webkit-transition: all 0.5s ease-in-out;
  144. -moz-transition: all 0.5s ease-in-out;
  145. -o-transition: all 0.5s ease-in-out;
  146. -ms-transition-duration: .5s;}
  147.  
  148. #title a {color: #000000;}
  149.  
  150. #title a:hover {color: #2e4859;
  151. text-decoration: none;}
  152.  
  153. #sidebar_links a {width: 100%;
  154. font-family: Helvetica;
  155. text-align: center;
  156. font-size: 10px;
  157. margin-top: 10px;
  158. letter-spacing: 3px;
  159. text-transform: uppercase;
  160. color: #000000;
  161. text-decoration: none;
  162. background-color: #FFFFFF;
  163. display: block;
  164. padding: 3px;
  165. -webkit-transition: all 0.5s ease-in-out;
  166. -moz-transition: all 0.5s ease-in-out;
  167. -o-transition: all 0.5s ease-in-out;
  168. -ms-transition-duration: .5s;}
  169.  
  170. #sidebar_links a:hover {color: #FFFFFF;
  171. text-decoration: none;
  172. background-color: #2e4859;
  173. display: block;
  174. -webkit-transition: all 0.5s ease-in-out;
  175. -moz-transition: all 0.5s ease-in-out;
  176. -o-transition: all 0.5s ease-in-out;
  177. -ms-transition-duration: .5s;}
  178.  
  179. /*--- SIDEBAR IMAGES & IMAGE HOVER EFFECT ---*/
  180.  
  181. #sidebarimage {width: 180px;}
  182.  
  183. #sidebar .dropmenu {margin-top:-45px;
  184. filter: alpha(opacity = 0);
  185. opacity:0;
  186. -webkit-transition: all 0.5s ease-in-out;
  187. -moz-transition: all 0.5s ease-in-out;
  188. -o-transition: all 0.5s ease-in-out;
  189. -ms-transition-duration: .5s;}
  190.  
  191. #sidebar:hover .dropmenu {margin-top: 0px;
  192. -webkit-transition: all 0.5s ease-in-out;
  193. -moz-transition: all 0.5s ease-in-out;
  194. -o-transition: all 0.5s ease-in-out;
  195. -ms-transition-duration: .5s;
  196. filter: alpha(opacity = 100);
  197. filter: alpha(opacity = 100);
  198. opacity:100;}
  199.  
  200. #swapper img {width: 180px;
  201. height: 98px;
  202. -webkit-transition: all 0.5s ease-in-out;
  203. -moz-transition: all 0.5s ease-in-out;
  204. -o-transition: all 0.5s ease-in-out;
  205. -ms-transition-duration: .5s;}
  206.  
  207. #swapper img:hover {opacity: 3;
  208. -webkit-transition: all 0.5s ease-in-out;
  209. -moz-transition: all 0.5s ease-in-out;
  210. -o-transition: all 0.5s ease-in-out;
  211. -ms-transition-duration: .5s;}
  212.  
  213. .swappee img {width: 180px;
  214. height: 98px;
  215. opacity: 0;
  216. -webkit-transition: all 0.5s ease-in-out;
  217. -moz-transition: all 0.5s ease-in-out;
  218. -o-transition: all 0.5s ease-in-out;
  219. -ms-transition-duration: .5s;}
  220.  
  221. .swappee:hover {opacity: 3;
  222. -webkit-transition: all 0.5s ease-in-out;
  223. -moz-transition: all 0.5s ease-in-out;
  224. -o-transition: all 0.5s ease-in-out;
  225. -ms-transition-duration: .5s;}
  226.  
  227. .swappee {opacity: 0;
  228. position: fixed;
  229. -webkit-transition: all 0.5s ease-in-out;
  230. -moz-transition: all 0.5s ease-in-out;
  231. -o-transition: all 0.5s ease-in-out;
  232. -ms-transition-duration: .5s;}
  233.  
  234. </style>
  235.  
  236. </head>
  237.  
  238. </head>
  239.  
  240. <!--- CSS ENDS --->
  241.  
  242.  
  243.  
  244. <!--- BODY/POSTS BEGINS --->
  245.  
  246. <body>
  247.  
  248. <div id="sidebar">
  249. <div id="sidebarimage">
  250. <div id="swapper">
  251.  
  252. <!--- REPLACE THE IMAGES WITH YOUR OWN URLS
  253. THE FIRST IMAGE IS THE IMAGE THAT IS REVEALED WHEN YOU HOVER
  254. THE SECOND IMAGE IS THE ONE THAT SHOWS UP WHEN YOU DON'T --->
  255.  
  256. <div class="swappee"><img src="http://i1049.photobucket.com/albums/s393/chesswar/BANNERS/329.png"></div>
  257. <img src="http://i1049.photobucket.com/albums/s393/chesswar/BANNERS/350.png"></div>
  258. </div>
  259.  
  260. <!--- THE TITLE HERE IS ALSO LINK :D
  261. THOUGH IT DOESN'T HAVE TO BE --->
  262.  
  263. <div id="title"><a href="/">we were once young</a></div>
  264.  
  265. <div class="dropmenu">
  266.  
  267. <!--- FEEL FREE TO ADD MORE LINKS; IT WILL OVERFLOW --->
  268.  
  269. <div id="sidebar_links">
  270. <a href="/">Link 1</a>
  271. <a href="/">Link 2</a>
  272. <a href="/">Link 3</a>
  273. <a href="/">Link 4</a>
  274. </div>
  275.  
  276. <!--- PUT YOUR DESCRIPTION HERE --->
  277.  
  278. <div id="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  279.  
  280. </div>
  281.  
  282. </div>
  283. </div>
  284.  
  285. <!--- DON'T MESS WITH THE STUFF BELOW. SON, JUST DON'T. --->
  286.  
  287. <div id="content">
  288.  
  289. <div class="blogroll">
  290. {block:Following}{block:Followed}
  291. <a href="{FollowedURL}" title="{FollowedName}">
  292. <div id="icons">
  293. <img src="{FollowedPortraitURL-128}" class="hh">
  294. </div></a>
  295. {/block:Following}{/block:Followed}
  296. </div>
  297.  
  298. </div>
  299. </body>
  300. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!