API tools faq
paste
stardating

FIEND DER HYDRA: AGENT ROMANOV

stardating
Jun 8th, 2014
241
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.60 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: AGENT ROMANOV (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.  
  26.  
  27. <!--- CSS BEGINS --->
  28.  
  29. <style type="text/css">
  30.  
  31. /*--- CUSTOM FONTS ---*/
  32.  
  33. @import url(http://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext);
  34.  
  35. /*--- SCROLLBAR ---*/
  36.  
  37. ::-webkit-scrollbar {width:5px;
  38. height:auto;
  39. background:#F8F8F8;}
  40.  
  41. ::-webkit-scrollbar-corner {background: #F8F8F8;}
  42.  
  43. ::-webkit-scrollbar-thumb:vertical {background: #2E4859;}
  44.  
  45. ::-webkit-scrollbar-thumb:horizontal {background: #2E4859;}
  46.  
  47. /*--- BODY ---*/
  48.  
  49. body {margin-bottom: 30px;
  50. background: #F8F8F8;
  51. color: #000000;
  52. font-family: Helvetica;
  53. font-size: 11px;
  54. line-height: 150%;
  55. text-align: justify;}
  56.  
  57. a {text-decoration: none;
  58. color: #000000;
  59. -webkit-transition: all .5s ease-in-out;
  60. -moz-transition: all .5s ease-in-out;
  61. transition: all .5s ease-in-out;}
  62.  
  63. a:hover {color: #2E4859;
  64. -webkit-transition: all .5s ease-in-out;
  65. -moz-transition: all .5s ease-in-out;
  66. transition: all .5s ease-in-out;}
  67.  
  68. b, strong {color: #2E4859;}
  69.  
  70. i, em {color: #2E4859;}
  71.  
  72. small {font-size: 10px;}
  73.  
  74. /*--- ASK BOX ---*/
  75.  
  76. #askbox {width: 500px;
  77. left: 350px;
  78. top: 220px;
  79. position: fixed;}
  80.  
  81. /*--- BLURB ---*/
  82.  
  83. #blurb {width: 480px;
  84. height: 150px;
  85. left: 340px;
  86. top: 50px;
  87. position: fixed;
  88. padding: 10px 15px 10px 20px;
  89. margin-bottom: 10px;
  90. overflow-y: scroll;}
  91.  
  92. /*--- SIDEBAR GENERAL ---*/
  93.  
  94. #sidebar {width: 180px;
  95. height: 300px;
  96. margin-left: 70px;
  97. margin-top: 70px;
  98. position: fixed;
  99. background-color: #F8F8F8;}
  100.  
  101. #desc {width: 100%;
  102. height: 200px;
  103. margin-top: 15px;
  104. font-family: Helvetica;
  105. color: #444444;
  106. font-size: 11px;
  107. text-align: justify;
  108. line-height: 150%;
  109. background-color: #f8f8f8;
  110. overflow-y: scroll;
  111. padding: 5px 10px 5px 5px;}
  112.  
  113. #sidecont {position: fixed;
  114. width: 180px;
  115. margin-left: 70px;
  116. margin-top: 70px;}
  117.  
  118. /*--- SIDEBAR TITLE, LINKS ---*/
  119.  
  120. #title {width: 180px;
  121. margin-top: 10px;
  122. margin-bottom: 25px;
  123. font-family: Oswald;
  124. font-size: 18px;
  125. color: #000000;
  126. text-align: center;
  127. letter-spacing: 5px;
  128. text-transform:uppercase;
  129. line-height: 150%;
  130. -webkit-transition: all 0.5s ease-in-out;
  131. -moz-transition: all 0.5s ease-in-out;
  132. -o-transition: all 0.5s ease-in-out;
  133. -ms-transition-duration: .5s;}
  134.  
  135. #title a {color: #000000;}
  136.  
  137. #title a:hover {color: #2e4859;
  138. text-decoration: none;}
  139.  
  140. #sidebar_links a {width: 100%;
  141. font-family: Helvetica;
  142. text-align: center;
  143. font-size: 10px;
  144. margin-top: 10px;
  145. letter-spacing: 3px;
  146. text-transform: uppercase;
  147. color: #000000;
  148. text-decoration: none;
  149. background-color: #FFFFFF;
  150. display: block;
  151. padding: 3px;
  152. -webkit-transition: all 0.5s ease-in-out;
  153. -moz-transition: all 0.5s ease-in-out;
  154. -o-transition: all 0.5s ease-in-out;
  155. -ms-transition-duration: .5s;}
  156.  
  157. #sidebar_links a:hover {color: #FFFFFF;
  158. text-decoration: none;
  159. background-color: #2e4859;
  160. display: block;
  161. -webkit-transition: all 0.5s ease-in-out;
  162. -moz-transition: all 0.5s ease-in-out;
  163. -o-transition: all 0.5s ease-in-out;
  164. -ms-transition-duration: .5s;}
  165.  
  166. /*--- SIDEBAR IMAGES & IMAGE HOVER EFFECT ---*/
  167.  
  168. #sidebarimage {width: 180px;}
  169.  
  170. #sidebar .dropmenu {margin-top:-45px;
  171. filter: alpha(opacity = 0);
  172. opacity:0;
  173. -webkit-transition: all 0.5s ease-in-out;
  174. -moz-transition: all 0.5s ease-in-out;
  175. -o-transition: all 0.5s ease-in-out;
  176. -ms-transition-duration: .5s;}
  177.  
  178. #sidebar:hover .dropmenu {margin-top: 0px;
  179. -webkit-transition: all 0.5s ease-in-out;
  180. -moz-transition: all 0.5s ease-in-out;
  181. -o-transition: all 0.5s ease-in-out;
  182. -ms-transition-duration: .5s;
  183. filter: alpha(opacity = 100);
  184. filter: alpha(opacity = 100);
  185. opacity:100;}
  186.  
  187. #swapper img {width: 180px;
  188. height: 98px;
  189. -webkit-transition: all 0.5s ease-in-out;
  190. -moz-transition: all 0.5s ease-in-out;
  191. -o-transition: all 0.5s ease-in-out;
  192. -ms-transition-duration: .5s;}
  193.  
  194. #swapper img:hover {opacity: 3;
  195. -webkit-transition: all 0.5s ease-in-out;
  196. -moz-transition: all 0.5s ease-in-out;
  197. -o-transition: all 0.5s ease-in-out;
  198. -ms-transition-duration: .5s;}
  199.  
  200. .swappee img {width: 180px;
  201. height: 98px;
  202. opacity: 0;
  203. -webkit-transition: all 0.5s ease-in-out;
  204. -moz-transition: all 0.5s ease-in-out;
  205. -o-transition: all 0.5s ease-in-out;
  206. -ms-transition-duration: .5s;}
  207.  
  208. .swappee:hover {opacity: 3;
  209. -webkit-transition: all 0.5s ease-in-out;
  210. -moz-transition: all 0.5s ease-in-out;
  211. -o-transition: all 0.5s ease-in-out;
  212. -ms-transition-duration: .5s;}
  213.  
  214. .swappee {opacity: 0;
  215. position: fixed;
  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. /*--- MISC ---*/
  222.  
  223. ::selection {background-color: #2E4859;
  224. color: #FFFFFF;}
  225.  
  226. </style>
  227.  
  228. </head>
  229.  
  230. <!--- CSS ENDS --->
  231.  
  232.  
  233.  
  234. <!--- BODY/CONTENT BEGINS --->
  235.  
  236. <body>
  237.  
  238. <div id="sidebar">
  239. <div id="sidebarimage">
  240. <div id="swapper">
  241.  
  242. <!--- REPLACE THE IMAGES WITH YOUR OWN URLS
  243. THE FIRST IMAGE IS THE IMAGE THAT IS REVEALED WHEN YOU HOVER
  244. THE SECOND IMAGE IS THE ONE THAT SHOWS UP WHEN YOU DON'T --->
  245.  
  246. <div class="swappee"><img src="http://i1049.photobucket.com/albums/s393/chesswar/BANNERS/329.png"></div>
  247. <img src="http://i1049.photobucket.com/albums/s393/chesswar/BANNERS/350.png"></div>
  248. </div>
  249.  
  250. <!--- THE TITLE HERE IS ALSO LINK :D
  251. THOUGH IT DOESN'T HAVE TO BE --->
  252.  
  253. <div id="title"><a href="/">we were once young</a></div>
  254.  
  255. <div class="dropmenu">
  256.  
  257. <!--- FEEL FREE TO ADD MORE LINKS; IT WILL OVERFLOW --->
  258.  
  259. <div id="sidebar_links">
  260. <a href="/">Link 1</a>
  261. <a href="/">Link 2</a>
  262. <a href="/">Link 3</a>
  263. <a href="/">Link 4</a>
  264. </div>
  265.  
  266. <!--- PUT YOUR DESCRIPTION HERE --->
  267.  
  268. <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>
  269.  
  270. </div>
  271.  
  272. </div>
  273. </div>
  274.  
  275. <!--FIRST COLUMN STARTS-->
  276.  
  277. <div id="blurb">
  278.  
  279. 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. 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.
  280.  
  281. </div>
  282.  
  283. <div id="askbox">
  284.  
  285. <p><iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/PUTYOURURLHERE.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  286.  
  287. </div>
  288.  
  289. <!--THIRD COLUMN ENDS-->
  290.  
  291. </body>
  292.  
  293. </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!