API tools faq
paste
jaesoonie

ALL IN ONE PAGE

jaesoonie
Jan 21st, 2015
5,844
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.47 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!---------------------------------------------------------------------------
  3.  
  4. ᴀʟʟ ɪɴ ᴏɴᴇ ᴘᴀɢᴇ
  5. © ᴍᴀᴅᴇ ʙʏ ᴄʜʟᴏᴇ
  6. [ ʜʏ89.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ] & [ ᴄʜsᴏ.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ]
  7.  
  8. ᴛʜᴇᴍᴇs ᴄᴀɴ ʙᴇ ғᴏᴜɴᴅ ᴀᴛ:
  9. [ ᴄʜᴄᴏᴅᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ]
  10.  
  11. ---------------------------------------------------------------------------->
  12.  
  13. <html>
  14. <head>
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  18.  
  19. <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  20.  
  21. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  22. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  23. <script>
  24. (function($){
  25. $(document).ready(function(){
  26. $("[title]").style_my_tooltips();
  27. });
  28. })(jQuery);
  29. </script>
  30.  
  31.  
  32. <!---------------------------------------------------------------------------
  33.  
  34.  
  35.  
  36.  
  37. ɴᴏᴛᴇ: ғᴏʀ sᴏᴍᴇ ʀᴇᴀsᴏɴ ᴡʜᴀᴛ ᴅɪsᴘʟᴀʏs ᴏɴ ᴛʜᴇ ᴘʀᴇᴠɪᴇᴡ
  38. ᴏɴ ᴛʜᴇ ʀɪɢʜᴛ ɪs ᴍᴏsᴛ ʟɪᴋᴇʟʏ ɴᴏᴛ ᴛʜᴇ ᴇxᴀᴄᴛ sᴀᴍᴇ ᴀs
  39. ᴛʜᴇ ʟᴀʏᴏᴜᴛ ʙᴜɪʟᴛ (ғᴏʀ ᴇxᴀᴍᴘʟᴇ ғᴏɴᴛs). sᴀᴠᴇ ᴀɴᴅ sᴇᴇ
  40. ᴀʟᴛᴇʀᴀᴛɪᴏɴs ᴏɴ ᴛʜᴇ ᴀᴄᴛᴜᴀʟ ʙʟᴏɢ.
  41.  
  42. ʙᴇsᴛ ᴠɪᴇᴡᴇᴅ ᴏɴ ɢᴏᴏɢʟᴇ ᴄʜʀᴏᴍᴇ!
  43.  
  44.  
  45.  
  46.  
  47. ---------------------------------------------------------------------------->
  48.  
  49. <style type="text/css">
  50.  
  51.  
  52.  
  53. body { background:#f8e6dc url('IMAGE URL') no-repeat;
  54. background-size:800px;
  55. background-position:center;}
  56.  
  57.  
  58. #s-m-t-tooltip { display: block;
  59. background: #9fe3d6;
  60. font:9px 'montserrat';
  61. letter-spacing: 1px;
  62. text-transform: uppercase;
  63. line-height:130%;
  64. color: #fff;
  65. text-align: center;
  66. margin-left: 25px;
  67. padding:8px;
  68. min-width: 40px;
  69. max-width: 150px;
  70. z-index: 9999999999;}
  71.  
  72.  
  73. ::-webkit-scrollbar-track {background-color:#fff;}
  74. ::-webkit-scrollbar-thumb {background-color:#9fe3d6;}
  75. ::-webkit-scrollbar {width:5px;height:5px;}
  76.  
  77. ::selection { color: #fff; background: #9fe3d6; }
  78. ::-moz-selection { color: #fff; background: #9fe3d6; }
  79. ::-webkit-selection { color: #fff; background: #9fe3d6; }
  80.  
  81.  
  82. a { text-decoration:none;
  83. cursor:pointer;
  84. color:#fff;}
  85.  
  86. .tabs {
  87. position: relative;
  88. margin:auto;
  89. margin-top: 150px;
  90. width: 705px;}
  91.  
  92.  
  93. .tabs input {
  94. position: absolute;
  95. z-index: 1000;
  96. width:140px;
  97. height: 35px;
  98. left: 0px;
  99. top: 0px;
  100. opacity: 0;
  101. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  102. filter: alpha(opacity=0);
  103. cursor: pointer;}
  104.  
  105.  
  106. .tabs input#tab-2{ left: 140px;}
  107. .tabs input#tab-3{ left: 280px;}
  108. .tabs input#tab-4{ left: 420px;}
  109. .tabs input#tab-5{ left: 560px;}
  110.  
  111.  
  112. .tabs label {
  113. background: #ff9999;
  114. font: 15px 'montserrat';
  115. line-height: 40px;
  116. height: 40px;
  117. position: relative;
  118. padding: 0 20px;
  119. float: left;
  120. display: inline-block;
  121. width: 100px;
  122. color: #fff;
  123. letter-spacing: 1px;
  124. text-transform: uppercase;
  125. font-weight: bold;
  126. text-align: center;
  127. margin-right:1px;}
  128.  
  129.  
  130.  
  131. .tabs label:after {
  132. content: '';
  133. background: #fff;
  134. position: absolute;
  135. bottom: -2px;
  136. left: 0;
  137. width: 100%;
  138. height: 2px;
  139. display: block;}
  140.  
  141.  
  142. .tabs input:hover + label {background: #9fe3d6;}
  143. .tabs label:first-of-type {z-index: 5;}
  144. .tab-label-2 {z-index: 4;}
  145. .tab-label-3 {z-index: 3;}
  146. .tab-label-4 {z-index: 2;}
  147. .tab-label-5 {z-index: 1;}
  148.  
  149.  
  150. .tabs input:checked + label {
  151. background: #fff;
  152. color:#ff9999;
  153. z-index: 6;
  154. -webkit-animation: page 0.2s linear;
  155. -moz-animation: page 0.2s linear;
  156. -ms-animation: page 0.2s linear;
  157. -o-animation: page 0.2s linear;
  158. animation: page 0.2s linear;}
  159.  
  160. .clear-shadow {clear: both;}
  161.  
  162. .content { background: #fff;
  163. position: relative;
  164. width: 704px;
  165. z-index: 5;
  166. overflow:hidden;}
  167.  
  168. .content div { position: absolute;
  169. top: 0;
  170. padding: 20px 40px;
  171. z-index: 1;
  172. opacity: 0;
  173. -webkit-transition: all linear 0.3s;
  174. -moz-transition: all linear 0.3s;
  175. -o-transition: all linear 0.3s;
  176. -ms-transition: all linear 0.3s;
  177. transition: all linear 0.3s;}
  178.  
  179.  
  180. .content-1, .content-3, .content-5 {-webkit-transform: translateX(-250px);-moz-transform: translateX(-250px);-o-transform: translateX(-250px);-ms-transform: translateX(-250px);transform: translateX(-250px);}
  181. .content-2, .content-4 {-webkit-transform: translateX(250px);-moz-transform: translateX(250px);-o-transform: translateX(250px);-ms-transform: translateX(250px);transform: translateX(250px);}
  182.  
  183.  
  184. .tabs input.tab-selector-1:checked ~ .content .content-1,
  185. .tabs input.tab-selector-2:checked ~ .content .content-2,
  186. .tabs input.tab-selector-3:checked ~ .content .content-3,
  187. .tabs input.tab-selector-4:checked ~ .content .content-4,
  188. .tabs input.tab-selector-5:checked ~ .content .content-5{
  189. position: relative;
  190. overflow-y: auto;
  191. height:350px;
  192. -webkit-transform: translateX(0px);
  193. -moz-transform: translateX(0px);
  194. -o-transform: translateX(0px);
  195. -ms-transform: translateX(0px);
  196. transform: translateX(0px);
  197. z-index: 100;
  198. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  199. filter: alpha(opacity=100);
  200. opacity: 1;
  201. -webkit-transition: all ease-out 0.2s 0.1s;
  202. -moz-transition: all ease-out 0.2s 0.1s;
  203. -o-transition: all ease-out 0.2s 0.1s;
  204. -ms-transition: all ease-out 0.2s 0.1s;
  205. transition: all ease-out 0.2s 0.1s;}
  206.  
  207. .content div h2,
  208. .content div h3{
  209. color: #9fe3d6;
  210. font: 900 16px 'montserrat';
  211. text-transform:uppercase;}
  212.  
  213.  
  214. .content div p{
  215. font-size: 14px cambria;
  216. line-height: 22px;
  217. font-style: italic;
  218. text-align: left;
  219. margin: 0;
  220. color: #777;
  221. padding: 5px 5px 5px 15px;
  222. border-left: 8px solid rgba(159,227,214, 0.2);}
  223.  
  224.  
  225. @keyframes "page" { 0% {left: 0;} 50% {left: 10px;}100% {left: 0;} }
  226. @-moz-keyframes page { 0% {left: 0;} 50% {left: 10px;} 100% {left: 0;}}
  227. @-webkit-keyframes "page" {0% {left: 0;} 50% {left: 10px;} 100% {left: 0;}}
  228. @-ms-keyframes "page" {0% {left: 0;} 50% {left: 10px;} 100% {left: 0;}}
  229. @-o-keyframes "page" {0% {left: 0;} 50% {left: 10px;} 100% {left: 0;}}
  230.  
  231.  
  232. .content-2 p{ font-size: 14px cambria;
  233. line-height: 22px;
  234. font-style: italic;
  235. text-align: left;
  236. margin: 0;
  237. color: #fff !important;;
  238. padding: 5px 5px 5px 5px;
  239. border-left:none !important;
  240. background: rgba(159,227,214, 1);}
  241.  
  242. .content-2 li{
  243. font: 700 13px calibri;
  244. line-height: 22px;
  245. text-align: left;
  246. color: #555;
  247. list-style: none;
  248. padding: 10px;}
  249.  
  250.  
  251. .content-3 {padding-top:40px !important;}
  252.  
  253. .content-3 img{ background:#fff;
  254. border: 1px solid #9fe3d6;
  255. padding: 15px;
  256. width:100px;
  257. height:100px;
  258. display:inline-block;
  259. margin:5px 5px 14px;}
  260.  
  261.  
  262. .content-3 h1 { background:#9fe3d6;
  263. color:#fff;
  264. padding:5px;
  265. width:122px;
  266. font:10px 'montserrat';
  267. text-transform:uppercase;
  268. text-align:center;
  269. margin-left:-137px;
  270. display:inline-block;}
  271.  
  272. .content-4 table { width:550px;}
  273.  
  274. .content-4 span { width:160px;
  275. text-align:center;
  276. margin:0px;
  277. display: inline-block;
  278. position: relative;
  279. margin: auto;}
  280.  
  281.  
  282. .content-4 h1 { background:#9fe3d6;
  283. color:#fff;
  284. padding:10px;
  285. width:140px;
  286. font:15px 'montserrat';
  287. text-transform:uppercase;
  288. text-align:center;
  289. margin-bottom:1px;}
  290.  
  291. .content-4 a{ font: 700 10px calibri;
  292. letter-spacing:2px;
  293. line-height:80%;
  294. text-align: left;
  295. text-transform:uppercase;
  296. color: #fff;
  297. list-style: square;
  298. padding: 10px;
  299. background:#ff9999;
  300. width:140px;
  301. margin-bottom:1px;
  302. display:block;}
  303.  
  304. .content-4 a:hover {background:#fff;
  305. color:#ff9999;}
  306.  
  307.  
  308. .content-5 {padding-top:40px !important;}
  309.  
  310. .content-5 img{ background:#fff;
  311. border: 1px solid #ff9999;
  312. padding: 15px;
  313. width:70px;
  314. height:70px;
  315. opacity:0.9;
  316. margin:5px;
  317. -webkit-transition:all 0.3s ease-in-out;
  318. -moz-transition:all 0.3s ease-in-out;
  319. -o-transition:all 0.3s ease-in-out;
  320. transition:all 0.3s ease-in-out;}
  321.  
  322. .content-5 img:hover{ opacity:1;-moz-transform: scale(1.1);-webkit-transform: scale(1.1);}
  323.  
  324.  
  325. .credits{ position:fixed;
  326. letter-spacing:1px;
  327. right:10px;
  328. bottom:5px;
  329. z-index:9999999;}
  330.  
  331.  
  332. .credits a{ background:#9fe3d6;
  333. text-transform:uppercase;
  334. color:#fff;
  335. display:block;
  336. width:60px;
  337. font: 8px calibri;
  338. margin-bottom:5px;
  339. padding:2px;
  340. text-align:center;}
  341.  
  342.  
  343.  
  344. </style>
  345. </head>
  346. <body>
  347.  
  348.  
  349. <!-------------------- TABS ------------------->
  350. <section class="tabs">
  351. <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
  352. <!-------------------- TAB #1 ------------------->
  353. <label for="tab-1" class="tab-label-1">About</label>
  354.  
  355. <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
  356. <!-------------------- TAB #2 ------------------->
  357. <label for="tab-2" class="tab-label-2">Contact</label>
  358.  
  359. <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
  360. <!-------------------- TAB #3 ------------------->
  361. <label for="tab-3" class="tab-label-3">Biases</label>
  362.  
  363. <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
  364. <!-------------------- TAB #4 ------------------->
  365. <label for="tab-4" class="tab-label-4">Tags</label>
  366.  
  367. <input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" />
  368. <!-------------------- TAB #5 ------------------->
  369. <label for="tab-5" class="tab-label-5">Blogroll</label>
  370.  
  371.  
  372.  
  373. <div class="clear-shadow"></div>
  374. <div class="content">
  375.  
  376.  
  377. <!-------------------- FIRST SECTION/ABOUT ------------------->
  378. <div class="content-1">
  379.  
  380. <h2>TITLE</h2>
  381.  
  382. <p>DESCRIPTION</p>
  383.  
  384. <h2>TITLE</h2>
  385.  
  386. <p>DESCRIPTION</p>
  387.  
  388. </div>
  389.  
  390.  
  391.  
  392.  
  393. <!-------------------- SECOND SECTION/CONTACT ------------------->
  394. <div class="content-2">
  395.  
  396. <h2>TITLE</h2>
  397.  
  398. <p>QUESTION?</p>
  399.  
  400. <li>ANSWER</li>
  401.  
  402. <p>QUESTION?</p>
  403.  
  404. <li>ANSWER</li>
  405.  
  406. <!-------------------- ASK CODE ------------------->
  407. <br><center><iframe frameborder="0" height="190" scrolling="no" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="600" style="line-height: 1.4;"></iframe></center>
  408. <!-------------------- ASK CODE ------------------->
  409.  
  410. </div>
  411.  
  412.  
  413.  
  414.  
  415. <!-------------------- THIRD SECTION/BIASES ------------------->
  416. <div class="content-3">
  417.  
  418. <center>
  419.  
  420. <img src="IMAGE URL" /><h1>NAME</h1>
  421.  
  422. <img src="IMAGE URL" /><h1>NAME</h1>
  423.  
  424. <img src="IMAGE URL" /><h1>NAME</h1>
  425.  
  426. <img src="IMAGE URL" /><h1>NAME</h1>
  427.  
  428. <img src="IMAGE URL" /><h1>NAME</h1>
  429.  
  430. <img src="IMAGE URL" /><h1>NAME</h1>
  431.  
  432. <img src="IMAGE URL" /><h1>NAME</h1>
  433.  
  434. </center>
  435.  
  436.  
  437. </div>
  438.  
  439.  
  440.  
  441.  
  442. <!-------------------- FOURTH SECTION/TAGS ------------------->
  443. <div class="content-4">
  444.  
  445. <center>
  446.  
  447. <table>
  448.  
  449. <td style="vertical-align:top;">
  450.  
  451. <span>
  452. <h1>tag list</h1>
  453. <a href="/">tag one</a>
  454. <a href="/">tag two</a>
  455. <a href="/">tag three</a>
  456. <a href="/">tag four</a>
  457. </span>
  458.  
  459. <span>
  460. <h1>tag list</h1>
  461. <a href="/">tag one</a>
  462. <a href="/">tag two</a>
  463. <a href="/">tag three</a>
  464. <a href="/">tag four</a>
  465. </span>
  466.  
  467. </td>
  468.  
  469. <td style="vertical-align:top;">
  470.  
  471. <span>
  472. <h1>tag list</h1>
  473. <a href="/">tag one</a>
  474. <a href="/">tag two</a>
  475. <a href="/">tag three</a>
  476. <a href="/">tag four</a>
  477. </span>
  478.  
  479. <span>
  480. <h1>tag list</h1>
  481. <a href="/">tag one</a>
  482. <a href="/">tag two</a>
  483. <a href="/">tag three</a>
  484. <a href="/">tag four</a>
  485. </span>
  486.  
  487. </td>
  488.  
  489. <td style="vertical-align:top;">
  490.  
  491. <span>
  492. <h1>tag list</h1>
  493. <a href="/">tag one</a>
  494. <a href="/">tag two</a>
  495. <a href="/">tag three</a>
  496. <a href="/">tag four</a>
  497. </span>
  498.  
  499. </td>
  500.  
  501. </table>
  502.  
  503. </center>
  504.  
  505. </div>
  506.  
  507.  
  508.  
  509.  
  510. <!-------------------- FIFTH SECTION/BLOGROLL ------------------->
  511. <div class="content-5">
  512.  
  513. <center>
  514.  
  515. {block:Following}
  516. {block:Followed}
  517. <a target="_blank" href="{FollowedURL}" title="{FollowedName}">
  518. <img src="{FollowedPortraitURL-96}" />
  519. </a>
  520. {/block:Followed}
  521. {/block:Following}
  522.  
  523. </center>
  524. </div>
  525.  
  526. </div>
  527.  
  528.  
  529.  
  530. </section>
  531.  
  532.  
  533. <div class="credits">
  534. <a href="/">home</a>
  535. <a href="/ask">message</a>
  536. <a href="http://bit.ly/1y3yIGf" title="coded by chloe">chso</a>
  537. </div>
  538.  
  539. </body>
  540. </html>
Advertisement
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!