Advertisement
mugendia

Redirect Page: Doors

Feb 26th, 2015 (edited)
4,617
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.13 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <head><title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  6.  
  7. <!--
  8.  
  9. DOORS REDIRECT PAGE THEME BY COCORINI (https://cocorini.tumblr.com).
  10. PLEASE DON'T REMOVE THE CREDITS. THANK YOU!
  11.  
  12. Edit your content under '<body>' (Use the CTRL + F [Windows] or Command + F [Mac] to find it).
  13.  
  14. PATTERNS: https://www.cocorini.tumblr.com
  15. IMAGES: https://www.san-x.co.jp
  16.  
  17. -->
  18.  
  19. <style type="text/css">
  20.  
  21. /* BACKGROUND */
  22.  
  23. body {
  24. background-image: url('https://31.media.tumblr.com/40f9eb4aacdf99b169dc56d53ef1f0ca/tumblr_inline_nke2v5jru21rnjuep.png');
  25. background-attachment: fixed;
  26. }
  27.  
  28. ::-webkit-scrollbar-thumb:vertical {
  29. background-color: #eed7bd;
  30. height: auto;
  31. }
  32.  
  33. ::-webkit-scrollbar-thumb:horizontal {
  34. background-color: #eed7bd;
  35. height: auto;
  36. }
  37.  
  38. ::-webkit-scrollbar {
  39. height: 3px;
  40. width: 3px;
  41. background-color: #fff;
  42. }
  43.  
  44. #bottom {
  45. position: fixed;
  46. bottom: 0px;
  47. left: 0px;
  48. background-color: #eee;
  49. width: 100%;
  50. height: 380px;
  51. border-top: 15px solid #ded0c9;
  52. background-image: url('https://31.media.tumblr.com/ec60827356322436d0d52849e76a780e/tumblr_inline_nke2x9vgCd1rnjuep.png');
  53. }
  54.  
  55. /* MAIN CONTENT */
  56.  
  57. #content {
  58. margin: auto;
  59. bottom: 235px;
  60. width: 465px;
  61. height: 220px;
  62. position: relative;
  63. }
  64.  
  65. #trees {
  66. position: absolute;
  67. left: -100px;
  68. margin-top: 120px;
  69. }
  70.  
  71. #trees img {
  72. max-width: 100px;
  73. }
  74.  
  75. #rabbit {
  76. position: absolute;
  77. right: -60px;
  78. margin-top: 160px;
  79. }
  80.  
  81. /* 1ST DOOR */
  82.  
  83. #door1 {
  84. position: absolute;
  85. margin-left: 20px;
  86. width: 140px;
  87. height: 215px;
  88. background-color: #fff;
  89. border-left: 5px solid #e3e3e3;
  90. border-top: 5px solid #e3e3e3;
  91. border-right: 5px solid #e3e3e3;
  92. background-image: url('https://31.media.tumblr.com/818ed3e33430bd4b3028f4d506fdc347/tumblr_inline_nkaskdIULQ1rnjuep.png');
  93. }
  94.  
  95. #door1window {
  96. margin-top: 20px;
  97. margin-left: 20px;
  98. width: 94px;
  99. height: 74px;
  100. background-color: #fff;
  101. border: 3px solid #e3e3e3;
  102. }
  103.  
  104. #door1round {
  105. border-radius: 20px;
  106. width: 14px;
  107. height: 15px;
  108. background-color: #cfd8d2;
  109. margin-top: 8px;
  110. margin-left: 115px;
  111. padding: 2px 2px 2px 4px;
  112. color: #fff;
  113. }
  114.  
  115. #door1name {
  116. position: absolute;
  117. width: 150px;
  118. padding: 10px;
  119. background-color: #eee;
  120. color: #888;
  121. margin-top: 50px;
  122. margin-left: -16px;
  123. text-align: center;
  124. font-family: 'Montserrat', sans-serif;
  125. text-transform: uppercase;
  126. font-size: 10px;
  127. letter-spacing: 2px;
  128. border: 2px solid #fff;
  129. box-shadow: 0px 0px 0px 2px #e3e3e3;
  130. border-radius: 10px;
  131. }
  132.  
  133. #door1circle {
  134. position: absolute;
  135. margin-top: 30px;
  136. margin-left: 65px;
  137. width: 10px;
  138. height: 10px;
  139. border-radius: 10px;
  140. background-color: #e3e3e3;
  141. z-index: 99;
  142. }
  143.  
  144. #door1hang1 {
  145. position: absolute;
  146. width: 3px;
  147. height: 18px;
  148. background-color: #e3e3e3;
  149. margin-top: 35px;
  150. margin-left: 60px;
  151. -webkit-transform: rotate(220deg);
  152. -moz-transform: rotate(220deg);
  153. -o-transform: rotate(220deg);
  154. }
  155.  
  156. #door1hang2 {
  157. position: absolute;
  158. width: 3px;
  159. height: 18px;
  160. background-color: #e3e3e3;
  161. margin-top: 35px;
  162. margin-left: 77px;
  163. -webkit-transform: rotate(140deg);
  164. -moz-transform: rotate(140deg);
  165. -o-transform: rotate(140deg);
  166. }
  167.  
  168. #door1block1 {
  169. margin-top: 8px;
  170. margin-left: 20px;
  171. width: 94px;
  172. height: 60px;
  173. border: 3px solid #e3e3e3;
  174. background-color: #fff;
  175. }
  176.  
  177. #door1block2 {
  178. position: absolute;
  179. width: 70px;
  180. padding: 5px;
  181. background-color: #eee;
  182. margin-top: 20px;
  183. margin-left: 30px;
  184. text-align: center;
  185. font-family: 'Montserrat', sans-serif;
  186. text-transform: uppercase;
  187. font-size: 10px;
  188. letter-spacing: 2px;
  189. color: #aaa;
  190. }
  191.  
  192. /* 2ND DOOR */
  193.  
  194. #door2 {
  195. position: absolute;
  196. margin-left: 290px;
  197. width: 140px;
  198. height: 215px;
  199. background-color: #fff;
  200. border-left: 5px solid #ebd3b0;
  201. border-top: 5px solid #ebd3b0;
  202. border-right: 5px solid #ebd3b0;
  203. background-image: url('https://31.media.tumblr.com/db545611ba9e8a42ef772b940ecd87a1/tumblr_inline_nke1xvyw0E1rnjuep.png');
  204. }
  205.  
  206. #door2window {
  207. margin-top: 20px;
  208. margin-left: 20px;
  209. width: 94px;
  210. height: 74px;
  211. background-color: #fff;
  212. border: 3px solid #ebd3b0;
  213. }
  214.  
  215. #door2round {
  216. width: 14px;
  217. height: 15px;
  218. border-radius: 20px;
  219. background-color: #c8916c;
  220. margin-top: 8px;
  221. margin-left: 115px;
  222. padding: 2px 2px 2px 4px;
  223. color: #fff;
  224. }
  225.  
  226. #door2circle {
  227. position: absolute;
  228. margin-top: 30px;
  229. margin-left: 65px;
  230. width: 10px;
  231. height: 10px;
  232. border-radius: 10px;
  233. background-color: #e5dbb3;
  234. z-index: 99;
  235. }
  236.  
  237. #door2hang1 {
  238. position: absolute;
  239. width: 3px;
  240. height: 18px;
  241. background-color: #e5dbb3;
  242. margin-top: 35px;
  243. margin-left: 60px;
  244. -webkit-transform: rotate(220deg);
  245. -moz-transform: rotate(220deg);
  246. -o-transform: rotate(220deg);
  247. }
  248.  
  249. #door2hang2 {
  250. position: absolute;
  251. width: 3px;
  252. height: 18px;
  253. background-color: #e5dbb3;
  254. margin-top: 35px;
  255. margin-left: 77px;
  256. -webkit-transform: rotate(140deg);
  257. -moz-transform: rotate(140deg);
  258. -o-transform: rotate(140deg);
  259. }
  260.  
  261. #door2name {
  262. position: absolute;
  263. width: 150px;
  264. padding: 10px;
  265. background-color: #f0ead3;
  266. margin-top: 50px;
  267. margin-left: -16px;
  268. text-align: center;
  269. font-family: 'Montserrat', sans-serif;
  270. text-transform: uppercase;
  271. font-size: 10px;
  272. letter-spacing: 2px;
  273. border: 2px solid #fff;
  274. box-shadow: 0px 0px 0px 2px #e5dbb3;
  275. z-index: 99999;
  276. color: #ae874e;
  277. border-radius: 10px;
  278. }
  279.  
  280. #door2block1 {
  281. margin-top: 8px;
  282. margin-left: 20px;
  283. width: 94px;
  284. height: 60px;
  285. border: 3px solid #ebd3b0;
  286. background-color: #fff;
  287. }
  288.  
  289. #door2block2 {
  290. position: absolute;
  291. width: 70px;
  292. padding: 5px;
  293. background-color: #bad07e;
  294. color: #fff;
  295. margin-top: 20px;
  296. margin-left: 30px;
  297. text-align: center;
  298. font-family: 'Montserrat', sans-serif;
  299. text-transform: uppercase;
  300. font-size: 10px;
  301. letter-spacing: 2px;
  302. text-shadow: 1px 1px 1px #888;
  303. }
  304.  
  305. #door2open {
  306. opacity: 0;
  307. position: absolute;
  308. width: 140px;
  309. height: 215px;
  310. margin-top: -5px;
  311. margin-left: -5px;
  312. background-color: #fff;
  313. border-left: 5px solid #ecdcd7;
  314. border-top: 5px solid #ecdcd7;
  315. border-right: 5px solid #ecdcd7;
  316. -webkit-transition: all 0.5s ease-in-out;
  317. -moz-transition: all 0.5s ease-in-out;
  318. -o-transition: all 0.5s ease-in-out;
  319. -ms-transition: all 0.5s ease-in-out;
  320. transition: all 0.5s ease-in-out;
  321. }
  322.  
  323. #door2:hover #door2open {
  324. opacity: 1;
  325. z-index: 9999;
  326. }
  327.  
  328. #door2link {
  329. display: inline-block;
  330. opacity: 0;
  331. position: absolute;
  332. width: 70px;
  333. padding: 5px;
  334. background-color: #bad07e;
  335. margin-top: 20px;
  336. margin-left: 30px;
  337. text-align: center;
  338. font-family: 'Montserrat', sans-serif;
  339. text-transform: uppercase;
  340. font-size: 10px;
  341. letter-spacing: 2px;
  342. -webkit-transition: all 0.5s ease-in-out;
  343. -moz-transition: all 0.5s ease-in-out;
  344. -o-transition: all 0.5s ease-in-out;
  345. -ms-transition: all 0.5s ease-in-out;
  346. transition: all 0.5s ease-in-out;
  347. }
  348.  
  349. #door2link a {
  350. color: #fff;
  351. text-shadow: 1px 1px 1px #888;
  352. text-decoration: none;
  353. }
  354.  
  355. #door2:hover #door2link {
  356. opacity: 1;
  357. z-index: 9999;
  358. }
  359.  
  360. /* MIDDLE SIGN */
  361.  
  362. #sign {
  363. position: absolute;
  364. padding: 5px;
  365. line-height: 12px;
  366. width: 60px;
  367. margin-top: 130px;
  368. margin-left: 195px;
  369. background-color: #e1b7a4;
  370. color: #fff;
  371. font-size: 9px;
  372. font-family: 'Montserrat', sans-serif;
  373. text-align: center;
  374. text-transform: uppercase;
  375. letter-spacing: 1px;
  376. }
  377.  
  378. #signblock {
  379. position: absolute;
  380. background-color: #e1b7a4;
  381. width: 15px;
  382. height: 60px;
  383. margin-left: 222px;
  384. margin-top: 160px;
  385. }
  386.  
  387. #bird {
  388. position: absolute;
  389. margin-top: 92px;
  390. margin-left: 205px;
  391. }
  392.  
  393. #credit a {
  394. position: fixed;
  395. bottom: 8px;
  396. right: 10px;
  397. font-size: 10px;
  398. color: #9d856e;
  399. z-index: 9999;
  400. text-shadow: 1px 1px 1px #fff;
  401. text-decoration: none;
  402. }
  403.  
  404. </style>
  405.  
  406. </head>
  407.  
  408. <body>
  409.  
  410. <div id="bottom">
  411. <div id="content">
  412. <div id="trees"><img src="https://31.media.tumblr.com/ac5b03d0716a4b05cc950388c4c18dae/tumblr_inline_nke3xsYgNc1rnjuep.png"></div>
  413. <div id="rabbit"><img src="https://31.media.tumblr.com/58afcf1241a3b622865406437accd313/tumblr_inline_nke4mzZRQh1rnjuep.png"></div>
  414.  
  415. <div id="door1">
  416. <div id="door1circle"></div><div id="door1hang1"></div><div id="door1hang2"></div>
  417.  
  418.  
  419. <!-- Change this to your previous blog name -->
  420. <div id="door1name">YOUR-OLD-URL-NAME</div>
  421.  
  422.  
  423. <div id="door1window"></div><div id="door1round">❖</div>
  424. <div id="door1block2">CLOSED</div><div id="door1block1"></div>
  425. </div>
  426.  
  427. <div id="bird"><img src="https://31.media.tumblr.com/ce58d6010090a4881bb888115e7f45ad/tumblr_inline_nke441UjZj1rnjuep.png"></div>
  428. <div id="sign">HAS<br>MOVED TO</div><div id="signblock"></div>
  429.  
  430. <div id="door2">
  431. <div id="door2circle"></div><div id="door2hang1"></div><div id="door2hang2"></div>
  432.  
  433.  
  434. <!-- Change this to your new blog name -->
  435. <div id="door2name">YOUR-NEW-URL-NAME</div>
  436.  
  437.  
  438. <div id="door2open"></div>
  439. <div id="door2window"></div><div id="door2round">❖</div>
  440. <div id="door2block2">OPEN</div>
  441.  
  442.  
  443. <!-- Change this to your new blog URL inside the <a href=""> -->
  444. <div id="door2link"><a href="YOUR NEW BLOG URL">ENTER</a></div>
  445.  
  446.  
  447. <div id="door2block1"></div>
  448. </div>
  449.  
  450. </div></div> <!-- PLEASE KEEP THIS HERE -->
  451.  
  452. <div id="credit"><a href="https://cocorini.tumblr.com" target="_blank">☂</a></div> <!-- PLEASE LEAVE THIS HERE. THANK YOU -->
  453.  
  454. </body>
  455. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement