API tools faq
paste
stardating

FIEND DER HYDRA: STEVE ROGERS

stardating
Jun 8th, 2014
307
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.23 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: STEVE ROGERS (FIEND DER HYDRA)
  15. MAKER: STARDATING @ TUMBLR.COM
  16. BASE CODE: ODINSSON.CO.VU
  17. RESOURCES: http://fiendderhydra.tumblr.com/post/88189009400/resources
  18. THEME PACK: http://stardating.tumblr.com/post/88239253712
  19.  
  20. DO NOT TAKE OUT THESE CREDITS
  21. FEEL FREE TO TWEAK & MODIFY ALL YOU WANT
  22. BUT DO NOT REDISTRIBUTE OR CLAIM AS YOUR OWN
  23.  
  24. --->
  25.  
  26.  
  27.  
  28. <!--- CSS BEGINS --->
  29.  
  30. <style type="text/css">
  31.  
  32. /*--- CUSTOM FONTS ---*/
  33.  
  34. @import url(http://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext);
  35.  
  36. /*--- SCROLLBAR ---*/
  37.  
  38. ::-webkit-scrollbar {width:5px;
  39. height:auto;
  40. background:#F8F8F8;}
  41.  
  42. ::-webkit-scrollbar-corner {background: #F8F8F8;}
  43.  
  44. ::-webkit-scrollbar-thumb:vertical {background: #2E4859;}
  45.  
  46. ::-webkit-scrollbar-thumb:horizontal {background: #2E4859;}
  47.  
  48. /*--- BODY ---*/
  49.  
  50. body {margin-bottom: 30px;
  51. background: #F8F8F8;
  52. color: #000000;
  53. font-family: Helvetica;
  54. font-size: 11px;
  55. line-height: 150%;
  56. text-align: justify;}
  57.  
  58. a {text-decoration: none;
  59. color: #000000;
  60. -webkit-transition: all .5s ease-in-out;
  61. -moz-transition: all .5s ease-in-out;
  62. transition: all .5s ease-in-out;}
  63.  
  64. a:hover {color: #2E4859;
  65. -webkit-transition: all .5s ease-in-out;
  66. -moz-transition: all .5s ease-in-out;
  67. transition: all .5s ease-in-out;}
  68.  
  69. b, strong {color: #2E4859;}
  70.  
  71. i, em {color: #2E4859;}
  72.  
  73. small {font-size: 10px;}
  74.  
  75. /*--- COLUMNS ---*/
  76.  
  77. #columns {width: 210px;
  78. height: 500px;
  79. margin-top: 50px;
  80. position: fixed;
  81. border-top: 1px solid black;
  82. overflow-y: scroll;}
  83.  
  84. #columni {margin-left: 350px;}
  85.  
  86. #columnii {margin-left: 580px;}
  87.  
  88. #columniii {margin-left: 810px;}
  89.  
  90. /*--- SIDEBAR GENERAL ---*/
  91.  
  92. #sidebar {width: 180px;
  93. height: 300px;
  94. margin-left: 70px;
  95. margin-top: 70px;
  96. position: fixed;
  97. background-color: #F8F8F8;}
  98.  
  99. #desc {width: 100%;
  100. height: 200px;
  101. margin-top: 15px;
  102. font-family: Helvetica;
  103. color: #444444;
  104. font-size: 11px;
  105. text-align: justify;
  106. line-height: 150%;
  107. background-color: #f8f8f8;
  108. overflow-y: scroll;
  109. padding: 5px 10px 5px 5px;}
  110.  
  111. #sidecont {position: fixed;
  112. width: 180px;
  113. margin-left: 70px;
  114. margin-top: 70px;}
  115.  
  116. /*--- SIDEBAR TITLE, LINKS ---*/
  117.  
  118. #title {width: 180px;
  119. margin-top: 10px;
  120. margin-bottom: 25px;
  121. font-family: Oswald;
  122. font-size: 18px;
  123. color: #000000;
  124. text-align: center;
  125. letter-spacing: 5px;
  126. text-transform:uppercase;
  127. line-height: 150%;
  128. -webkit-transition: all 0.5s ease-in-out;
  129. -moz-transition: all 0.5s ease-in-out;
  130. -o-transition: all 0.5s ease-in-out;
  131. -ms-transition-duration: .5s;}
  132.  
  133. #title a {color: #000000;}
  134.  
  135. #title a:hover {color: #2e4859;
  136. text-decoration: none;}
  137.  
  138. #sidebar_links a {width: 100%;
  139. font-family: Helvetica;
  140. text-align: center;
  141. font-size: 10px;
  142. margin-top: 10px;
  143. letter-spacing: 3px;
  144. text-transform: uppercase;
  145. color: #000000;
  146. text-decoration: none;
  147. background-color: #FFFFFF;
  148. display: block;
  149. padding: 3px;
  150. -webkit-transition: all 0.5s ease-in-out;
  151. -moz-transition: all 0.5s ease-in-out;
  152. -o-transition: all 0.5s ease-in-out;
  153. -ms-transition-duration: .5s;}
  154.  
  155. #sidebar_links a:hover {color: #FFFFFF;
  156. text-decoration: none;
  157. background-color: #2e4859;
  158. display: block;
  159. -webkit-transition: all 0.5s ease-in-out;
  160. -moz-transition: all 0.5s ease-in-out;
  161. -o-transition: all 0.5s ease-in-out;
  162. -ms-transition-duration: .5s;}
  163.  
  164. /*--- SIDEBAR IMAGES & IMAGE HOVER EFFECT ---*/
  165.  
  166. #sidebarimage {width: 180px;}
  167.  
  168. #sidebar .dropmenu {margin-top:-45px;
  169. filter: alpha(opacity = 0);
  170. opacity:0;
  171. -webkit-transition: all 0.5s ease-in-out;
  172. -moz-transition: all 0.5s ease-in-out;
  173. -o-transition: all 0.5s ease-in-out;
  174. -ms-transition-duration: .5s;}
  175.  
  176. #sidebar:hover .dropmenu {margin-top: 0px;
  177. -webkit-transition: all 0.5s ease-in-out;
  178. -moz-transition: all 0.5s ease-in-out;
  179. -o-transition: all 0.5s ease-in-out;
  180. -ms-transition-duration: .5s;
  181. filter: alpha(opacity = 100);
  182. filter: alpha(opacity = 100);
  183. opacity:100;}
  184.  
  185. #swapper img {width: 180px;
  186. height: 98px;
  187. -webkit-transition: all 0.5s ease-in-out;
  188. -moz-transition: all 0.5s ease-in-out;
  189. -o-transition: all 0.5s ease-in-out;
  190. -ms-transition-duration: .5s;}
  191.  
  192. #swapper img:hover {opacity: 3;
  193. -webkit-transition: all 0.5s ease-in-out;
  194. -moz-transition: all 0.5s ease-in-out;
  195. -o-transition: all 0.5s ease-in-out;
  196. -ms-transition-duration: .5s;}
  197.  
  198. .swappee img {width: 180px;
  199. height: 98px;
  200. opacity: 0;
  201. -webkit-transition: all 0.5s ease-in-out;
  202. -moz-transition: all 0.5s ease-in-out;
  203. -o-transition: all 0.5s ease-in-out;
  204. -ms-transition-duration: .5s;}
  205.  
  206. .swappee:hover {opacity: 3;
  207. -webkit-transition: all 0.5s ease-in-out;
  208. -moz-transition: all 0.5s ease-in-out;
  209. -o-transition: all 0.5s ease-in-out;
  210. -ms-transition-duration: .5s;}
  211.  
  212. .swappee {opacity: 0;
  213. position: fixed;
  214. -webkit-transition: all 0.5s ease-in-out;
  215. -moz-transition: all 0.5s ease-in-out;
  216. -o-transition: all 0.5s ease-in-out;
  217. -ms-transition-duration: .5s;}
  218.  
  219. /*--- TAGS ---*/
  220.  
  221. #linkage {width: 630px;
  222. height: 100px;
  223. overflow-y: scroll;
  224. margin: 40px 0px 20px 350px;
  225. padding: 10px;
  226. background-color: #FFFFFF;
  227. border: 1px solid #444444;
  228. color: #000000;
  229. font-family: Helvetica;
  230. font-size: 11px;
  231. line-height: 150%;}
  232.  
  233. .linkage {margin: 10px;
  234. padding: 5px 5px 5px 0px;}
  235.  
  236. .linkage:hover {margin: 10px;
  237. padding: 5px 5px 5px 0px;}
  238.  
  239. .linkage a {padding: 5px 70px 5px 70px;
  240. margin: 0px 10px 0px 0px;
  241. background-color: #F8F8F8;
  242. border: 1px solid #2E4859;
  243. text-align: center;
  244. font-family: Helvetica;
  245. font-size: 11px;
  246. color: #444444;
  247. text-transform: uppercase;
  248. -webkit-transition: all .5s ease-in-out;
  249. -moz-transition: all .5s ease-in-out;
  250. transition: all .5s ease-in-out;}
  251.  
  252. .linkage a:hover {padding: 5px 70px 5px 70px;
  253. background-color: #2E4859;
  254. border: 1px solid #2E4859;
  255. text-align: center;
  256. font-family: Helvetica;
  257. font-size: 11px;
  258. color: #FFFFFF;
  259. text-transform: uppercase;
  260. -webkit-transition: all .5s ease-in-out;
  261. -moz-transition: all .5s ease-in-out;
  262. transition: all .5s ease-in-out;}
  263.  
  264. /*--- TITLES ---*/
  265.  
  266. .titles {width: 180px;
  267. margin: 25px 0px 0px 0px;
  268. font-family: Helvetica;
  269. font-size: 16px;
  270. color: #000000;
  271. font-weight: bold;
  272. text-align: center;
  273. letter-spacing: 5px;
  274. text-transform:uppercase;
  275. -webkit-transition-duration:.5s;
  276. -moz-transition-duration:.5s;
  277. -o-transition-duration:.5s;
  278. -ms-transition-duration: .5s;}
  279.  
  280. #title a, .titles a {color: #000000;}
  281.  
  282. #title a:hover, .titles a:hover {color: #2e4859;
  283. text-decoration: none;}
  284.  
  285. /*--- MISC ---*/
  286.  
  287. ::selection {background-color: #2E4859;
  288. color: #FFFFFF;}
  289.  
  290. </style>
  291.  
  292. </head>
  293.  
  294. <!--- CSS ENDS --->
  295.  
  296.  
  297.  
  298. <!--- BODY/POSTS BEGINS --->
  299.  
  300. <body>
  301.  
  302. <div id="sidebar">
  303. <div id="sidebarimage">
  304. <div id="swapper">
  305.  
  306. <!--- REPLACE THE IMAGES WITH YOUR OWN URLS
  307. THE FIRST IMAGE IS THE IMAGE THAT IS REVEALED WHEN YOU HOVER
  308. THE SECOND IMAGE IS THE ONE THAT SHOWS UP WHEN YOU DON'T --->
  309.  
  310. <div class="swappee"><img src="http://i1049.photobucket.com/albums/s393/chesswar/BANNERS/329.png"></div>
  311. <img src="http://i1049.photobucket.com/albums/s393/chesswar/BANNERS/350.png"></div>
  312. </div>
  313.  
  314. <!--- THE TITLE HERE IS ALSO LINK :D
  315. THOUGH IT DOESN'T HAVE TO BE --->
  316.  
  317. <div id="title"><a href="/">we were once young</a></div>
  318.  
  319. <div class="dropmenu">
  320.  
  321. <!--- FEEL FREE TO ADD MORE LINKS; IT WILL OVERFLOW --->
  322.  
  323. <div id="sidebar_links">
  324. <a href="/">Link 1</a>
  325. <a href="/">Link 2</a>
  326. <a href="/">Link 3</a>
  327. <a href="/">Link 4</a>
  328. </div>
  329.  
  330. <!--- PUT YOUR DESCRIPTION HERE --->
  331.  
  332. <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>
  333.  
  334. </div>
  335.  
  336. </div>
  337. </div>
  338.  
  339. <!--FIRST COLUMN STARTS-->
  340.  
  341. <div id="columni">
  342.  
  343. <div id="columns">
  344.  
  345. <!--- JUST REPLACE "title" WITH WHATEVER YOU WANT
  346. AND REPLACE YOURURLHERE WITH YOUR URL
  347. THEN, ADD YOUR TAG AT THE VERY END --->
  348.  
  349. <div class="titles">title</div>
  350.  
  351. <div class="linkage">
  352. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  353. </div>
  354. <div class="linkage">
  355. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  356. </div>
  357. <div class="linkage">
  358. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  359. </div>
  360. <div class="linkage">
  361. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  362. </div>
  363. <div class="linkage">
  364. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  365. </div>
  366.  
  367. <div class="titles">title</div>
  368.  
  369. <div class="linkage">
  370. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  371. </div>
  372. <div class="linkage">
  373. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  374. </div>
  375. <div class="linkage">
  376. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  377. </div>
  378. <div class="linkage">
  379. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  380. </div>
  381. <div class="linkage">
  382. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  383. </div>
  384.  
  385. <div class="titles">title</div>
  386.  
  387. <div class="linkage">
  388. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  389. </div>
  390. <div class="linkage">
  391. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  392. </div>
  393. <div class="linkage">
  394. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  395. </div>
  396. <div class="linkage">
  397. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  398. </div>
  399. <div class="linkage">
  400. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  401. </div>
  402.  
  403. </div>
  404.  
  405. </div>
  406.  
  407. <!--FIRST COLUMN ENDS-->
  408.  
  409.  
  410. <!--SECOND COLUMN STARTS-->
  411.  
  412. <div id="columnii">
  413.  
  414. <div id="columns">
  415.  
  416. <div class="titles">
  417. title
  418. </div>
  419.  
  420. <div class="linkage">
  421. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  422. </div>
  423. <div class="linkage">
  424. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  425. </div>
  426. <div class="linkage">
  427. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  428. </div>
  429. <div class="linkage">
  430. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  431. </div>
  432. <div class="linkage">
  433. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  434. </div>
  435. <div class="linkage">
  436. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  437. </div>
  438. <div class="linkage">
  439. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  440. </div>
  441. <div class="linkage">
  442. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  443. </div>
  444. <div class="linkage">
  445. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  446. </div>
  447. <div class="linkage">
  448. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  449. </div>
  450. <div class="linkage">
  451. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  452. </div>
  453. <div class="linkage">
  454. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  455. </div>
  456. <div class="linkage">
  457. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  458. </div>
  459. <div class="linkage">
  460. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  461. </div>
  462.  
  463. </div>
  464.  
  465. </div>
  466.  
  467. <!--SECOND COLUMN ENDS-->
  468.  
  469.  
  470. <!--THIRD COLUMN STARTS-->
  471.  
  472. <div id="columniii">
  473.  
  474. <div id="columns">
  475.  
  476. <div class="titles">title</div>
  477.  
  478. <div class="linkage">
  479. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  480. </div>
  481. <div class="linkage">
  482. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  483. </div>
  484. <div class="linkage">
  485. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  486. </div>
  487. <div class="linkage">
  488. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  489. </div>
  490. <div class="linkage">
  491. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  492. </div>
  493.  
  494.  
  495. <div class="linkage">
  496. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  497. </div>
  498. <div class="linkage">
  499. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  500. </div>
  501. <div class="linkage">
  502. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  503. </div>
  504. <div class="linkage">
  505. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  506. </div>
  507. <div class="linkage">
  508. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  509. </div>
  510. <div class="linkage">
  511. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  512. </div>
  513. <div class="linkage">
  514. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  515. </div>
  516. <div class="linkage">
  517. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  518. </div>
  519. <div class="linkage">
  520. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  521. </div>
  522.  
  523. <div class="titles">title</div>
  524.  
  525. <div class="linkage">
  526. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  527. </div>
  528. <div class="linkage">
  529. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  530. </div>
  531. <div class="linkage">
  532. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  533. </div>
  534. <div class="linkage">
  535. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  536. </div>
  537. <div class="linkage">
  538. <a href="http://YOURURLHERE.tumblr.com/tagged/">link</a>
  539. </div>
  540.  
  541. </div>
  542.  
  543. </div>
  544.  
  545. <!--THIRD COLUMN ENDS-->
  546.  
  547. </body>
  548.  
  549. </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!