API tools faq
paste
foundcas

Page 04 (All in One): 하루의 끝

foundcas
Jul 26th, 2016
152
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6.  
  7. <link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two|News+Cycle' rel='stylesheet' type='text/css'>
  8.  
  9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  10.  
  11.  
  12.  
  13. <script>
  14. $(document).ready(function(){
  15. $('.button').click(function(){
  16. $('.info').addClass('is');
  17. $('.one,.two,.three,.four').addClass('iis');
  18. });
  19. });
  20. </script>
  21.  
  22. <script>
  23. $(document).ready(function(){
  24. $('.close').click(function(){
  25. $('.info').removeClass('is');
  26. $('.one,.two,.three,.four').removeClass('iis');
  27. });
  28. });
  29. </script>
  30.  
  31. <script>
  32. $(document).ready(function(){
  33. $('.i').click(function(){
  34. $('.one').show('slow');
  35. $('.two,.three,.four').hide('slow');
  36. });
  37. });
  38. </script>
  39.  
  40. <script>
  41. $(document).ready(function(){
  42. $('.ii').click(function(){
  43. $('.two').show('slow');
  44. $('.one,.three,.four').hide('slow');
  45. });
  46. });
  47. </script>
  48.  
  49. <script>
  50. $(document).ready(function(){
  51. $('.iii').click(function(){
  52. $('.three').show('slow');
  53. $('.one,.two,.four').hide('slow');
  54. });
  55. });
  56. </script>
  57.  
  58. <script>
  59. $(document).ready(function(){
  60. $('.iv').click(function(){
  61. $('.four').show('slow');
  62. $('.one,.two,.three').hide('slow');
  63. });
  64. });
  65. </script>
  66.  
  67. <style type="text/css">
  68.  
  69. ::-webkit-scrollbar{
  70. width:4px;
  71. height:auto;
  72. }
  73.  
  74. ::-webkit-scrollbar-thumb{
  75. width:4px;
  76. height:auto;
  77. background:#475d62; /*scrollbar background color*/
  78. }
  79.  
  80. ::selection{
  81. background:#b3eaf7;/*selection background color*/
  82. color:#475d62; /*selection color*/
  83. }
  84.  
  85. a{
  86. text-decoration:none;
  87. color:#333; /*link color*/
  88. -moz-transition:.8s ease;
  89. -webkit-transition:.8s ease;
  90. -o-transition:.8s ease;
  91. }
  92.  
  93. body{
  94. font-family: 'News Cycle', sans-serif; /*page font, more fonts can be downloaded from Google Fonts and added here*/
  95. color:#333;
  96. background:#f2f2f2; /*page background color*/
  97. line-height:100%;
  98. word-wrap:break-word;
  99. }
  100.  
  101. .info{
  102. position:absolute;
  103. z-index:9;
  104. margin-top:-192px;
  105. top:50%;
  106. margin-left:-175px;
  107. left:50%;
  108. height:384px;
  109. width:350px;
  110. border:1px solid #999; /*border color of the main box you see when you open the page*/
  111. -moz-transition:.8s ease;
  112. -webkit-transition:.8s ease;
  113. -o-transition:.8s ease;
  114. }
  115.  
  116. .info div{
  117. cursor:help;
  118. text-align:center;
  119. padding:30.05px;
  120. background:#ddd; /*background color of the main box you see when you open the page*/
  121. border-bottom:1px solid #999; /*interior border color of the main box you see when you open the page*/
  122. -moz-transition:.8s ease;
  123. -webkit-transition:.8s ease;
  124. -o-transition:.8s ease;
  125.  
  126. }
  127.  
  128. .is{
  129. margin-left:-175px;
  130. left:30%;
  131. }
  132.  
  133. .v{
  134. border-bottom:none !important;
  135. }
  136.  
  137. .one, .two, .three, .four{
  138. position:absolute;
  139. margin-top:-192px;
  140. top:50%;
  141. margin-left:-175px;
  142. left:50%;
  143. background:#fff;
  144. height:374px;
  145. width:340px;
  146. padding:5px;
  147. border:1px solid #999; /*border color of the slide boxes*/
  148. overflow:hidden;
  149. overflow-y:auto;
  150. display:none;
  151. -moz-transition:.8s ease;
  152. -webkit-transition:.8s ease;
  153. -o-transition:.8s ease;
  154. }
  155.  
  156. .two iframe{
  157. margin:15px 0px;
  158. }
  159.  
  160. .three a{
  161. margin:0px 15px;
  162. line-height:30px;
  163. font-style:italic;
  164. }
  165.  
  166. .three a:hover{
  167. text-decoration:underline;
  168. }
  169.  
  170. .iis{
  171. margin-left:-175px;
  172. left:70%;
  173. }
  174.  
  175. .as{
  176. border:1px solid #999; /*this changes the border color of the boxes in slide 1*/
  177. margin:10px 0px;
  178. padding:10px;
  179. line-height:25px;
  180. }
  181.  
  182. .sh{
  183. font-weight:bold;
  184. text-transform:uppercase;
  185. }
  186.  
  187. .blogroll img{
  188. margin:2.25px;
  189. }
  190.  
  191. .close{
  192. position:absolute;
  193. text-align:center;
  194. font-size:30px;
  195. width:50px;
  196. height:50px;
  197. top:50%;
  198. margin-top:-25px;
  199. left:50%;
  200. margin-left:-25px;
  201. }
  202.  
  203. </style>
  204. </head>
  205. <body>
  206.  
  207. <div class="close" title="close">x</div>
  208.  
  209. <!--These are the box titles, just change the 1/2/3/4 if you want differnt titles-->
  210.  
  211. <div class="info">
  212. <div class="i button" title="about">1</div>
  213. <div class="ii button" title="contact">2</div>
  214. <div class="iii button" title="links">3</div>
  215. <div class="iv button" title="following">4</div>
  216. <a href="http://capecoding.tumblr.com"><div class="v" title="credit">5</div></a>
  217. </div>
  218.  
  219.  
  220. <div class="one">
  221. <div class="as"><span class="sh">name: Jonghyun</span></div><!--BOX 1: Name-->
  222. <div class="as"><span class="sh">age: 26</span></div><!--BOX 2: Age-->
  223. <div class="as"><span class="sh">location: Moon</span></div><!--BOX 3: Location-->
  224. <div class="as"><span class="sh">bio:</span>
  225. <!--You can write something about yourelf or your blog here-->
  226. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex nisl, lobortis sit amet nisl ut, malesuada dictum ex. Morbi leo mi, vehicula nec sollicitudin quis, varius ornare turpis. Suspendisse ut nisl dapibus, molestie augue non, viverra justo. Curabitur viverra placerat velit, nec finibus metus rutrum nec. Maecenas ornare venenatis ornare. Quisque placerat leo vel arcu tristique malesuada. Praesent sollicitudin, sem in placerat suscipit, turpis quam viverra nulla, in pellentesque lacus massa ut justo. Praesent purus quam, bibendum eget tempus a, suscipit in augue. Duis ac sem auctor, aliquam erat nec, condimentum orci. Nullam et ipsum et sapien viverra scelerisque. Curabitur feugiat maximus nunc fringilla faucibus. Maecenas tristique et lorem vel ultrices. Donec aliquet lorem sed libero auctor, eu gravida sem tempus. Integer porta, ipsum in facilisis posuere, quam lacus aliquam mauris, ac accumsan nisi enim eu sapien. Nunc vel dictum tortor, vitae bibendum ante. Praesent fermentum nisl et turpis venenatis, a aliquam urna cursus. Pellentesque viverra varius enim, ac mollis augue porttitor nec. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse libero tellus, porttitor viverra vestibulum quis, ultricies vel neque. Donec vel tincidunt felis. Sed ullamcorper fringilla lorem, vitae gravida felis egestas a. Vivamus imperdiet, eros eget hendrerit aliquam, quam metus facilisis libero, at vulputate tellus nulla id ex.
  227.  
  228. </div>
  229. </div>
  230.  
  231. <!--This is your links section-->
  232.  
  233. <div class="two">
  234. <center>
  235. <iframe frameborder="0" height="200px" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="300px"></iframe>
  236. <iframe frameborder="0" height="200px" id="submit_form" scrolling="yes" src="http://www.tumblr.com/submit_form/{Name}.tumblr.com" width="300px"></iframe>
  237. </center>
  238. </div>
  239.  
  240. <div class="three">
  241. <!--Copy and paste this to add more section headings-->
  242. <div class="as"><span class="sh">section 1</span></div>
  243.  
  244. <!--Copy and paste this to add more links-->
  245. <a href="http://url-here.com">link title</a>
  246. <a href="http://url-here.com">link title</a>
  247. <a href="http://url-here.com">link title</a>
  248. <a href="http://url-here.com">link title</a>
  249. <a href="http://url-here.com">link title</a>
  250.  
  251. <div class="as"><span class="sh">section 2</span></div>
  252.  
  253. <a href="http://url-here.com">link title</a>
  254. <a href="http://url-here.com">link title</a>
  255. <a href="http://url-here.com">link title</a>
  256. <a href="http://url-here.com">link title</a>
  257. <a href="http://url-here.com">link title</a>
  258.  
  259. <div class="as"><span class="sh">section 3</span></div>
  260.  
  261. <a href="http://url-here.com">link title</a>
  262. <a href="http://url-here.com">link title</a>
  263. <a href="http://url-here.com">link title</a>
  264. <a href="http://url-here.com">link title</a>
  265. <a href="http://url-here.com">link title</a>
  266. </div>
  267.  
  268. <!--This is the blogroll section, as far as I know this will not work on secondary blogs-->
  269.  
  270. <div class="four">
  271. <div class="blogroll">
  272. <center>
  273. {block:Following}
  274. {block:Followed}
  275. <a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}">
  276. {/block:Followed}
  277. {/block:Following}
  278. </center>
  279. </div>
  280. </div>
  281.  
  282.  
  283. </body>
  284. </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!