API tools faq
paste
jaesoonie

OTP PAGE #3

jaesoonie
Jan 3rd, 2015
3,829
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.03 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------------------------------
  2.  
  3.  
  4. ᴏᴛᴘ ᴘᴀɢᴇ;
  5. © ᴍᴀᴅᴇ ʙʏ ᴄʜʟᴏᴇ
  6. [ ʏ-ᴏɴɢɪɴ.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ] & [ ᴄʜsᴏ.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ]
  7.  
  8. ᴛʜᴇᴍᴇs ᴄᴀɴ ʙᴇ ғᴏᴜɴᴅ ᴀᴛ:
  9. [ ᴄʜᴄᴏᴅᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ]
  10.  
  11.  
  12. - ᴅᴏɴ'ᴛ sᴛᴇᴀʟ ɪᴛ.
  13. - ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ ᴏɴ ᴛʜᴇ ᴘᴀɢᴇ.
  14.  
  15.  
  16. ---------------------------------------------------------------------------->
  17. <!DOCTYPE html>
  18. <head>
  19. <title>{Title}</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23.  
  24. <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900,700italic' rel='stylesheet' type='text/css'>
  25.  
  26.  
  27.  
  28. <script type="text/javascript"
  29. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  30. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  31. <script>
  32. (function($){
  33. $(document).ready(function(){
  34. $("[title]").style_my_tooltips();
  35. });
  36. })(jQuery);
  37. </script>
  38.  
  39.  
  40. <!---------------------------------------------------------------------------
  41.  
  42.  
  43.  
  44.  
  45. ɴᴏᴛᴇ: ғᴏʀ sᴏᴍᴇ ʀᴇᴀsᴏɴ ᴡʜᴀᴛ ᴅɪsᴘʟᴀʏs ᴏɴ ᴛʜᴇ ᴘʀᴇᴠɪᴇᴡ
  46. ᴏɴ ᴛʜᴇ ʀɪɢʜᴛ ɪs ᴍᴏsᴛ ʟɪᴋᴇʟʏ ɴᴏᴛ ᴛʜᴇ ᴇxᴀᴄᴛ sᴀᴍᴇ ᴀs
  47. ᴛʜᴇ ʟᴀʏᴏᴜᴛ ʙᴜɪʟᴛ (ғᴏʀ ᴇxᴀᴍᴘʟᴇ ғᴏɴᴛs). sᴀᴠᴇ ᴀɴᴅ sᴇᴇ
  48. ᴀʟᴛᴇʀᴀᴛɪᴏɴs ᴏɴ ᴛʜᴇ ᴀᴄᴛᴜᴀʟ ʙʟᴏɢ.
  49.  
  50. ʙᴇsᴛ ᴠɪᴇᴡᴇᴅ ᴏɴ ɢᴏᴏɢʟᴇ ᴄʜʀᴏᴍᴇ!
  51.  
  52.  
  53.  
  54.  
  55. ---------------------------------------------------------------------------->
  56.  
  57.  
  58. <style type="text/css">
  59.  
  60. #s-m-t-tooltip {
  61. display: block;
  62. background: #111;
  63. font: 9px calibri;
  64. letter-spacing: 1px;
  65. text-transform: uppercase;
  66. color: #fff;
  67. text-align: center;
  68. margin-left: 20px;
  69. padding: 10px;
  70. min-width: 40px;
  71. z-index: 999999999;}
  72.  
  73.  
  74.  
  75. body { background-color:#fff;}
  76.  
  77.  
  78.  
  79. a {
  80. text-decoration:none;
  81. color:#888;}
  82.  
  83. a:hover
  84. {text-decoration:none;}
  85.  
  86.  
  87. ::-webkit-scrollbar-thumb{background-color: #111;}
  88. ::-webkit-scrollbar {width: 4px; height:4px;background-color:#ebf1ed;}
  89.  
  90.  
  91. #title{
  92. position:fixed;
  93. color:#fff;
  94. font:900 30px 'Source Sans Pro';
  95. text-transform:uppercase;
  96. letter-spacing: 2px;
  97. text-align:left;
  98. width:942px;
  99. background:#111;
  100. padding:10px 30px;
  101. border-bottom:1px solid #fff;
  102. top:0px;
  103. left:0px;
  104. right:0px;
  105. margin:auto;
  106. z-index:99999;}
  107.  
  108.  
  109.  
  110. #box{
  111. margin:auto;
  112. margin-top:59px;
  113. width:1002px;}
  114.  
  115.  
  116.  
  117. .square_pic{
  118. position:relative;
  119. overflow: hidden;
  120. width:334px;
  121. height: 249px;
  122. float: left;}
  123.  
  124.  
  125.  
  126. .square_pic img{
  127. width:334px;
  128. -webkit-transition: all 0.3s ease-in-out;
  129. -moz-transition: all 0.3s ease-in-out;
  130. -o-transition: all 0.3s ease-in-out;
  131. -ms-transition: all 0.7s ease-in-out;
  132. transition: all 0.7s ease-in-out;}
  133.  
  134.  
  135. .square_pic img:hover {opacity:0.8;}
  136.  
  137.  
  138. .square_text{
  139. position:relative;
  140. overflow: hidden;
  141. width:334px;
  142. height: 249px;
  143. float: left;
  144. background:#111;}
  145.  
  146.  
  147. .text {
  148. z-index:999;
  149. overflow-y: auto;
  150. overflow-x: hidden;
  151. top: 50%;
  152. -webkit-transform: translateY(-50%);
  153. -moz-transform: translateY(-50%);
  154. position:relative;
  155. -webkit-transition: all 0.3s ease-in-out;
  156. -moz-transition: all 0.3s ease-in-out;
  157. -o-transition: all 0.3s ease-in-out;
  158. -ms-transition: all 0.7s ease-in-out;
  159. transition: all 0.7s ease-in-out;}
  160.  
  161.  
  162. .square_text:hover .text {opacity:0.5;}
  163.  
  164.  
  165. .name {
  166. position:relative;
  167. color:#fff;
  168. opacity:1;
  169. font:900 30px 'Source Sans Pro';
  170. text-transform:uppercase;
  171. letter-spacing: 0px;
  172. text-align:center;
  173. z-index:99;}
  174.  
  175.  
  176. .description {
  177. margin:auto;
  178. color:#fff;
  179. width:267px;
  180. overflow:auto;
  181. padding:0px 35px;
  182. opacity:1;
  183. z-index:9999;
  184. text-align:justify;
  185. font:9px calibri;
  186. text-transform:uppercase;
  187. letter-spacing:1px;}
  188.  
  189.  
  190. #link {
  191. margin:auto;
  192. position:absolute;
  193. bottom:-35px;
  194. text-align:center;
  195. background:#fff;
  196. width:335px;
  197. padding:6px 0px 10px;
  198. -webkit-transition: all 0.7s ease-in-out;
  199. -moz-transition: all 0.7s ease-in-out;
  200. -o-transition: all 0.7s ease-in-out;
  201. -ms-transition: all 0.7s ease-in-out;
  202. transition: all 0.7s ease-in-out;}
  203.  
  204.  
  205. .square_text:hover #link {bottom:0px;}
  206.  
  207.  
  208. #link a {
  209. padding:10px 15px 11px;
  210. background:#fff;
  211. color:#555;
  212. font: 10px 'Source Sans Pro';
  213. text-transform:uppercase;
  214. letter-spacing:1px;
  215. margin:1px;}
  216.  
  217.  
  218. #arrow_top {
  219. margin:auto;
  220. position:absolute;
  221. top:-35px;
  222. text-align:center;
  223. background:#fff;
  224. width:335px;
  225. padding:6px 0px;
  226. -webkit-transition: all 0.7s ease-in-out;
  227. -moz-transition: all 0.7s ease-in-out;
  228. -o-transition: all 0.7s ease-in-out;
  229. -ms-transition: all 0.7s ease-in-out;
  230. transition: all 0.7s ease-in-out;}
  231.  
  232. #arrow_bottom {
  233. margin:auto;
  234. position:absolute;
  235. bottom:-35px;
  236. text-align:center;
  237. background:#fff;
  238. width:335px;
  239. padding:6px 0px;
  240. -webkit-transition: all 0.7s ease-in-out;
  241. -moz-transition: all 0.7s ease-in-out;
  242. -o-transition: all 0.7s ease-in-out;
  243. -ms-transition: all 0.7s ease-in-out;
  244. transition: all 0.7s ease-in-out;}
  245.  
  246. #arrow_left {
  247. margin:auto;
  248. position:absolute;
  249. top:0px;
  250. left:-35px;
  251. text-align:center;
  252. background:#fff;
  253. height:249px;
  254. padding:114px 10px;
  255. -webkit-transition: all 0.7s ease-in-out;
  256. -moz-transition: all 0.7s ease-in-out;
  257. -o-transition: all 0.7s ease-in-out;
  258. -ms-transition: all 0.7s ease-in-out;
  259. transition: all 0.7s ease-in-out;}
  260.  
  261. #arrow_right {
  262. position:absolute;
  263. top:0px;
  264. right:-35px;
  265. text-align:center;
  266. background:#fff;
  267. height:249px;
  268. padding:114px 10px;
  269. -webkit-transition: all 0.7s ease-in-out;
  270. -moz-transition: all 0.7s ease-in-out;
  271. -o-transition: all 0.7s ease-in-out;
  272. -ms-transition: all 0.7s ease-in-out;
  273. transition: all 0.7s ease-in-out;}
  274.  
  275.  
  276. .square_pic:hover #arrow_top {top:0px;}
  277.  
  278. .square_pic:hover #arrow_bottom {bottom:0px;}
  279.  
  280. .square_pic:hover #arrow_left {left:0px;}
  281.  
  282. .square_pic:hover #arrow_right {right:0px;}
  283.  
  284.  
  285. .credits{
  286. position:fixed;
  287. letter-spacing:1px;
  288. right:10px;
  289. bottom:5px;
  290. z-index:9999999;}
  291.  
  292.  
  293. .credits a{
  294. background:#00f9c1;
  295. text-transform:uppercase;
  296. color:#fff;
  297. display:block;
  298. width:60px;
  299. font: 8px calibri;
  300. margin-bottom:5px;
  301. padding:2px;
  302. text-align:center;}
  303.  
  304.  
  305. </style>
  306. </head>
  307.  
  308.  
  309. <!----------------------------------------------------------------------------
  310.  
  311. > READ:
  312.  
  313. the pictures/descriptions are displayed in rows, so if you want to place the name/description under the first picture it has to come in fourth (after the code of picture number two, the description of picture number three comes in second right after the code of the first picture, and so on...
  314.  
  315. to add the arrows you need to use the correspondent code right after the image's code.
  316.  
  317. top: <div id="arrow_top">▲</div>
  318. bottom: <div id="arrow_bottom">▼</div>
  319. right: <div id="arrow_right">▶</div>
  320. left:<div id="arrow_left">◀</div>
  321.  
  322.  
  323. ----------------------------------------------------------------------------->
  324. <body>
  325.  
  326. <!-- TITLE --->
  327. <div id="title">TITLE</div>
  328.  
  329.  
  330. <div id="box">
  331.  
  332.  
  333. <!-- FIRST PICTURE--->
  334. <div class="square_pic">
  335. <img src="IMAGE URL"/>
  336.  
  337. <!-- ARROW--->
  338. <div id="arrow_bottom">▼</div>
  339. </div>
  340. <!-- /FIRST PICTURE--->
  341.  
  342.  
  343.  
  344. <!-- FIRST DESCRIPTION--->
  345. <div class="square_text">
  346. <div class="text">
  347.  
  348. <div class="name">NAME</div>
  349.  
  350. <div class="description">
  351. DESCRIPTION
  352. </div>
  353. </div>
  354.  
  355. <!-- LINKS --->
  356. <div id="link"><a href="/">LINK 1</a><a href="/">LINK 2</a><a href="/">LINK 3</a></div>
  357. </div>
  358. <!-- /FIRST DESCRIPTION--->
  359.  
  360.  
  361.  
  362. <!-- SECOND PICTURE--->
  363. <div class="square_pic">
  364. <img src="IMAGE URL"/>
  365.  
  366. <!-- ARROW--->
  367. <div id="arrow_bottom">▼</div>
  368. </div>
  369. <!-- /SECOND PICTURE--->
  370.  
  371.  
  372.  
  373. <!-- SECOND DESCRIPTION--->
  374. <div class="square_text">
  375. <div class="text">
  376.  
  377. <div class="name">NAME</div>
  378.  
  379. <div class="description">
  380. DESCRIPTION
  381. </div>
  382. </div>
  383.  
  384. <!-- LINKS --->
  385. <div id="link"><a href="/">LINK 1</a><a href="/">LINK 2</a><a href="/">LINK 3</a></div>
  386. </div>
  387. <!-- /SECOND DESCRIPTION--->
  388.  
  389.  
  390.  
  391. <!-- THIRD PICTURE--->
  392. <div class="square_pic">
  393. <img src="IMAGE URL"/>
  394.  
  395. <!-- ARROW--->
  396. <div id="arrow_bottom">▼</div>
  397. </div>
  398. <!-- /THIRD PICTURE--->
  399.  
  400.  
  401.  
  402. <!-- THIRD DESCRIPTION--->
  403. <div class="square_text">
  404. <div class="text">
  405.  
  406. <div class="name">NAME</div>
  407.  
  408. <div class="description">
  409. DESCRIPTION
  410. </div>
  411. </div>
  412.  
  413. <!-- LINKS --->
  414. <div id="link"><a href="/">LINK 1</a><a href="/">LINK 2</a><a href="/">LINK 3</a></div>
  415. </div>
  416. <!-- /THIRD DESCRIPTION--->
  417.  
  418.  
  419.  
  420. </div>
  421.  
  422.  
  423.  
  424. <div class="credits">
  425. <a href="/">home</a>
  426. <a href="/ask">message</a>
  427. <a href="http://chcodes.tumblr.com/" title="coded by chloe">chso</a>
  428. </div>
  429.  
  430.  
  431.  
  432. </body>
  433. </html>
  434.  
  435.  
  436.  
  437. </body></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!