API tools faq
paste
Advertisement
nemurou

daylight

nemurou
Oct 21st, 2017
1,855
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.66 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. tumblr page by kenshinuesugi / nemurou / welcometotheballroom
  4.  
  5. october 2017
  6.  
  7. --->
  8.  
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12. <title>{Title}</title>
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14. <link rel="shortcut icon" href="{Favicon}">
  15. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  16. <meta name="viewport" content="width=device-width, initial-scale=1">
  17.  
  18. <link href="https://fonts.googleapis.com/css?family=Dancing+Script:700|Source+Sans+Pro|Source+Serif+Pro" rel="stylesheet">
  19.  
  20. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  21. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  22.  
  23. <script>
  24.  
  25. (function($){
  26.  
  27. $(document).ready(function(){
  28.  
  29. $("a[title]").style_my_tooltips({
  30.  
  31. tip_follows_cursor:true,
  32.  
  33. tip_delay_time:90,
  34.  
  35. tip_fade_speed:600,
  36.  
  37. attribute:"title"
  38.  
  39. });
  40.  
  41. });
  42.  
  43. })(jQuery);
  44.  
  45. </script>
  46.  
  47. <style type="text/css">
  48.  
  49. /*tumblr controls by cyantists*/
  50. iframe.tmblr-iframe {
  51. z-index: 99999999999999!important;
  52. top: 0!important;
  53. right: 0!important;
  54. opacity: 0.4;
  55. /*i moved the controls off the page lol but if you want them back just delete the line right below*/
  56. margin-top:-200px!important;
  57. filter: invert(1) contrast(150%);
  58. -webkit-filter: invert(1) contrast(150%);
  59. -o-filter: invert(1) contrast(150%);
  60. -moz-filter: invert(1) contrast(150%);
  61. -ms-filter: invert(1) contrast(150%);
  62. transform: scale(0.5);
  63. transform-origin: 100% 0;
  64. -webkit-transform: scale(.7);
  65. -webkit-transform-origin: 100% 0;
  66. -o-transform: scale(.7);
  67. -o-transform-origin: 100% 0;
  68. -moz-transform: scale(.7);
  69. -moz-transform-origin: 100% 0;
  70. -ms-transform: scale(.7);
  71. -ms-transform-origin: 100% 0;
  72. }
  73.  
  74. #s-m-t-tooltip {
  75. max-width:150px;
  76. background:#eee;
  77. padding:1px 6px 2px 6px;
  78. z-index:999;
  79. margin:20px;
  80. }
  81.  
  82. ::-webkit-scrollbar {
  83. width:1px;
  84. background-color: #ddd;
  85. }
  86.  
  87. ::-webkit-scrollbar-thumb{
  88. background-color:#cfcfcf;
  89. }
  90.  
  91. body {
  92. background:#fff;
  93. font-family: 'Source Sans Pro', sans-serif;
  94. font-size:12px;
  95. line-height:160%;
  96. color:#3a3a3a;
  97. margin:0;
  98. -moz-osx-font-smoothing:grayscale;
  99. -webkit-font-smoothing:antialiased;
  100. font-smoothing:antialiased;
  101. }
  102.  
  103. /*your body (content) links*/
  104. a {
  105. text-decoration:none;
  106. color:#3a3a3a;/*change color here*/
  107. }
  108.  
  109. /*wrapper around the wrapper of the 2 boxes lol*/
  110. #content {
  111. width:800px;
  112. height:500px;
  113. position:absolute;
  114. top:0;
  115. bottom:0;
  116. left:0;
  117. right:0;
  118. margin:auto;
  119. cursor:default;
  120. }
  121.  
  122. #boxes {
  123. position:relative;
  124. }
  125.  
  126. #about, #intro {
  127. background:#fff;
  128. text-align:justify;
  129. width:400px;
  130. height:500px;
  131. line-height:180%;
  132. }
  133.  
  134. #about {
  135. margin-left:400px;
  136. border-left:7px solid #cfcfcf;
  137. overflow:auto;
  138. overflow-x:hidden;
  139. background:#f2f2f2;
  140. }
  141.  
  142. #x {
  143. position: relative;
  144. }
  145.  
  146. #nav {
  147. position: absolute;
  148. left:0px;
  149. width:50px;
  150. height:500px;
  151. background:#cfcfcf;
  152. }
  153.  
  154. #z {
  155. margin-left:50px;
  156. width:350px;
  157. height:500px;
  158. display:flex;
  159. justify-content:center;
  160. align-items:center;
  161. text-align: center;
  162. /*replace side img here*/
  163. background:url(https://static.tumblr.com/grynaut/FG6p1n8fo/image.png);
  164. }
  165.  
  166. #intro {
  167. position:absolute;
  168. left:0;
  169. }
  170.  
  171. .box {
  172. width:20px;
  173. height:20px;
  174. margin:0px 0px 15px 15px;
  175. }
  176.  
  177. .box:first-child {
  178. margin-top:15px;
  179. }
  180.  
  181. #txt {
  182. font-family: 'Dancing Script', cursive;
  183. font-size:45px;
  184. color:#fff;
  185. text-transform:lowercase;
  186. margin-left:-7px;
  187. border:1px solid #fff;
  188. padding:15px 15px 20px 15px;
  189. }
  190.  
  191. #bar {
  192. border-top:1px solid #cfcfcf;
  193. border-right:1px solid #cfcfcf;
  194. border-bottom:1px solid #cfcfcf;
  195. height:60px;
  196. width:400px;
  197. -webkit-box-sizing: border-box;
  198. -moz-box-sizing: border-box;
  199. box-sizing: border-box;
  200. position:fixed;
  201. line-height:60px;
  202. font-family: 'Source Serif Pro', serif;
  203. text-transform:uppercase;
  204. text-align:right;
  205. z-index:999;
  206. background:#f9f9f9;
  207. }
  208.  
  209. #bar a {
  210. display:inline-block;
  211. margin-right:20px;
  212. }
  213.  
  214. .intros {
  215. font-family: 'Source Serif Pro', serif;
  216. font-size:18px;
  217. font-weight:700;
  218. margin-bottom:10px;
  219. }
  220.  
  221. .description {
  222. font-style:italic;
  223. }
  224.  
  225. .pbar {
  226. height:10px;
  227. position:relative;
  228. background:#cfcfcf;
  229. padding:5px;
  230. border-radius:25px;
  231. -moz-border-radius:25px;
  232. -webkit-border-radius:25px;
  233. margin-top:15px;
  234. }
  235.  
  236. .pbar > span {
  237. display:block;
  238. height:100%;
  239. background:#555;
  240. position:relative;
  241. overflow:hidden;
  242. border-radius:25px;
  243. -moz-border-radius:25px;
  244. -webkit-border-radius:25px;
  245. }
  246.  
  247. #abt {
  248. margin:96px 0px 35px 0px;
  249. padding:0px 35px;
  250. box-sizing:border-box;
  251. -webkit-box-sizing: border-box;
  252. -moz-box-sizing: border-box;
  253. }
  254.  
  255. #abt::first-letter {
  256. font-family: 'Source Serif Pro', serif;
  257. font-size:30px;
  258. float:left;
  259. margin-right:5px;
  260. }
  261.  
  262. #abt blockquote {
  263. box-sizing:border-box;
  264. -webkit-box-sizing: border-box;
  265. -moz-box-sizing: border-box;
  266. padding:10px;
  267. margin:0;
  268. border:1px solid #cfcfcf;
  269. background:#f9f9f9;
  270. margin:15px 0px;
  271. font-style:italic;
  272. }
  273.  
  274. .sects {
  275. margin-bottom:35px;
  276. padding:0px 35px;
  277. box-sizing:border-box;
  278. -webkit-box-sizing: border-box;
  279. -moz-box-sizing: border-box;
  280. }
  281.  
  282. .project {
  283. font-family: 'Source Serif Pro', serif;
  284. font-size:15px;
  285. font-weight:700;
  286. margin-bottom:10px;
  287. }
  288.  
  289. .stat {
  290. margin-top:30px;
  291. }
  292.  
  293. table {
  294. margin:auto;
  295. width:365px;
  296. font-size:12px;
  297. font-family: 'Source Sans Pro', sans-serif;
  298. letter-spacing:.25px;
  299. border-collapse: collapse;
  300. -webkit-box-sizing: border-box;
  301. -moz-box-sizing: border-box;
  302. box-sizing: border-box;
  303. }
  304.  
  305. th {
  306. font-weight:600;
  307. padding:0px 10px 15px 0px;
  308. vertical-align:top;
  309. }
  310.  
  311. td {
  312. padding:0px 35px 15px 0px;
  313. }
  314.  
  315. /*DO NOT TOUCH THE THEME CREDIT*/
  316. .saeyoung a{
  317. background:#fff;
  318. position:fixed;
  319. left:30px;
  320. bottom:25px;
  321. font-size:10px;
  322. opacity:.7;
  323. color:#545454;
  324. z-index:999;
  325. border-radius:4px;
  326. -moz-border-radius:4px;
  327. -webkit-border-radius:4px;
  328. padding:3px 8px 4px 8px;
  329. }
  330.  
  331. </style> </head> <body>
  332.  
  333.  
  334. <div id="content">
  335.  
  336. <div id="intro">
  337.  
  338. <div id="x">
  339.  
  340. <div id="nav">
  341.  
  342. <!--- change box link colors here --->
  343.  
  344. <a href="/" title="return"><div class="box" style="background:#f2f2f2;"></div></a>
  345.  
  346. <a href="/ask" title="message"><div class="box" style="background:#f2f2f2"></div></a>
  347.  
  348. <a href="/archive" title="archive"><div class="box" style="background:#f2f2f2;"></div></a>
  349.  
  350. <a href="https://tumblr.com/" title="dashboard"><div class="box" style="background:#f2f2f2;"></div></a>
  351. <!-- end of nav--->
  352. </div>
  353.  
  354. <div id="z">
  355. <div id="txt">
  356. About Amy
  357. </div>
  358. <!--end of bg--->
  359. </div>
  360.  
  361. <!---end of cont-->
  362. </div>
  363.  
  364. <!---end of intro--->
  365. </div>
  366.  
  367.  
  368.  
  369.  
  370.  
  371. <div id="about">
  372. <div id="bar">
  373. <a href="/">one.</a>
  374. <a href="/">two.</a>
  375. <a href="/">three.</a>
  376. <a href="/">four.</a>
  377. <!---end of bar--->
  378. </div>
  379.  
  380. <div id="abt">
  381. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo orci, viverra id elit ut, lobortis rhoncus dui. Fusce eu neque a nibh gravida tincidunt et ac urna. Cras volutpat lectus ut quam congue, et blandit orci ornare. Fusce metus dui, condimentum sit amet risus et, cursus volutpat sem. Suspendisse eget blandit dolor, id pellentesque lectus.
  382.  
  383. <blockquote>Proin bibendum consequat pharetra. Etiam nec justo eros.</blockquote>
  384.  
  385. Nullam commodo aliquam porta. In in ligula consectetur, commodo arcu sit amet, efficitur sem. Donec congue vitae enim vel sodales. Sed non convallis magna, eget scelerisque tortor. Nam purus augue, dictum eget vestibulum sed, dictum at magna. Etiam gravida diam sed dignissim suscipit. Nullam venenatis velit vitae arcu tempus varius.
  386. <!--end of about--->
  387. </div>
  388.  
  389. <div class="sects">
  390. <div class="intros">Profile &mdash;</div>
  391. <table>
  392.  
  393. <tr>
  394. <th>Section</th>
  395. <td>text, text, text</td>
  396. </tr>
  397.  
  398. <tr>
  399. <th>Section</th>
  400. <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in mi vitae urna vestibulum porta ut vitae nisl.</td>
  401. </tr>
  402.  
  403. <tr>
  404. <th>Another Section</th>
  405. <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in mi vitae urna vestibulum porta ut vitae nisl.</td>
  406. </tr>
  407.  
  408. <tr>
  409. <th>Section</th>
  410. <td>Donec est nulla, consectetur ut varius ac, tristique non tellus. Mauris egestas nec nulla scelerisque laoreet. Fusce vel fermentum felis, ut interdum ex. Ut ac elit eget lacus tincidunt finibus.</td>
  411. </tr>
  412.  
  413. </table>
  414. <!--- end of section--->
  415. </div>
  416.  
  417. <div style="margin-top:-15px;" class="sects">
  418. <div class="intros">Current Projects &mdash;</div>
  419. <div class="description">This is where you can add information about the projects you are working on. You can use this as an extra about section to display updates, skills, characteristics, etc. or as a character stat bar. You can manually adjust the progress by changing the percentage marked within the code.</div>
  420.  
  421.  
  422. <div class="stat">
  423. <div class="project">Project Title [Completed]</div>
  424. <div class="description">This is where you will write a description about your project. Donec condimentum magna vel scelerisque posuere. Etiam libero neque, suscipit sit amet facilisis ac, eleifend eu dolor.</div>
  425. <!---replace percentages with ur own--->
  426. <div class="pbar"><span style="width:100%"></span></div>
  427. <!--end of stat section--->
  428. </div>
  429.  
  430.  
  431. <div class="stat">
  432. <div class="project">Project Title [20%]</div>
  433. <div class="description">This is where you will write a description about your project. </div>
  434. <div class="pbar"><span style="width:20%"></span></div>
  435. <!--end of stat section--->
  436. </div>
  437.  
  438. <div class="stat">
  439. <div class="project">Project Title [70%]</div>
  440. <div class="description">This is where you will write a description about your project. </div>
  441. <div class="pbar"><span style="width:70%"></span></div>
  442. <!--end of stat section--->
  443. </div>
  444.  
  445. <div class="stat">
  446. <div class="project">Project Title [10%]</div>
  447. <div class="description">This is where you will write a description about your project. </div>
  448. <div class="pbar"><span style="width:10%"></span></div>
  449. <!--end of stat section--->
  450. </div>
  451.  
  452.  
  453. <!---end of section--->
  454. </div>
  455.  
  456. <!---end of about box--->
  457. </div>
  458.  
  459.  
  460.  
  461.  
  462.  
  463. <!--end of content wrapper-->
  464.  
  465. </div>
  466.  
  467.  
  468.  
  469.  
  470.  
  471.  
  472. </html>
  473.  
  474. <!----PLEASE DO NOT REMOVE THE THEME CREDIT--->
  475. <span class="saeyoung"><a href="https://nemurou.tumblr.com/">THEME</a></span>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!