API tools faq
paste
Advertisement
nemurou

4AM

nemurou
Sep 21st, 2017
8,190
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.85 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. tumblr page by kenshinuesugi / nemurou
  4.  
  5. september 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. <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700|PT+Serif:400,400i,700" rel="stylesheet">
  18.  
  19.  
  20. <style type="text/css">
  21.  
  22. /*tumblr controls by cyantists*/
  23. iframe.tmblr-iframe {
  24. z-index: 99999999999999!important;
  25. top: 0!important;
  26. right: 0!important;
  27. opacity: 0.4;
  28. /*i moved the controls off the page lol but if you want them back just delete the line right below*/
  29. margin-top:-200px!important;
  30. filter: invert(1) contrast(150%);
  31. -webkit-filter: invert(1) contrast(150%);
  32. -o-filter: invert(1) contrast(150%);
  33. -moz-filter: invert(1) contrast(150%);
  34. -ms-filter: invert(1) contrast(150%);
  35. transform: scale(0.5);
  36. transform-origin: 100% 0;
  37. -webkit-transform: scale(.7);
  38. -webkit-transform-origin: 100% 0;
  39. -o-transform: scale(.7);
  40. -o-transform-origin: 100% 0;
  41. -moz-transform: scale(.7);
  42. -moz-transform-origin: 100% 0;
  43. -ms-transform: scale(.7);
  44. -ms-transform-origin: 100% 0;
  45. }
  46.  
  47. /*NOTICE: I WOULD NOT RECOMMEND CHANGING ANY WIDTHS IF YOU ARE NOT FAMILIAR WITH HTML AND CSS.*/
  48.  
  49. ::-webkit-scrollbar {
  50. width:17px;
  51. height:17px;
  52. background-color:#fff;/*make sure this is the same color as your bg*/
  53. }
  54.  
  55. ::-webkit-scrollbar-thumb {
  56. border:8px solid #fff;/*make sure this is the same color as your bg*/
  57. background-color:#c6c6c6;/*color of your scrollbar*/
  58. min-width:26px;
  59. min-height:26px;
  60. }
  61.  
  62. body {
  63. background:#fff;/*background color*/
  64. font-family: 'PT Sans', sans-serif;
  65. font-size:15px;
  66. line-height:160%;
  67. color:#3a3a3a;/*text color*/
  68. margin:0;
  69. -moz-osx-font-smoothing:grayscale;
  70. -webkit-font-smoothing:antialiased;
  71. font-smoothing:antialiased;
  72. }
  73.  
  74. a {
  75. text-decoration:none;
  76. color:#3a3a3a;/*color of your links*/
  77. }
  78.  
  79. #contain {
  80. margin:150px auto 0px auto;
  81. width:650px;
  82. }
  83.  
  84. #title, #title a{
  85. font-family: 'PT Serif', serif;
  86. font-size:25px;/*title font size*/
  87. display:block;
  88. color:#3a3a3a;/*color of title*/
  89. margin-bottom:25px;
  90. }
  91.  
  92. #tagline {
  93. margin-bottom:25px;
  94. line-height:180%;
  95. font-size:15px;/*tagline font size*/
  96. /*delete the line below if you do not want your tagline to be in italic*/
  97. font-style:italic;
  98. }
  99.  
  100. /*this is the tiny border you see between the tagline and links + below your basic info title*/
  101. .line {
  102. width:30px;
  103. height:1px;
  104. background:#ccc;/*border color*/
  105. margin-bottom:25px;
  106. }
  107.  
  108. #links a {
  109. display:inline;
  110. font-family: 'PT Serif', serif;
  111. font-size:15px;/*links font size*/
  112. padding-right:15px;/*spacing between links*/
  113. color:#161616;/*change the color of your links*/
  114. }
  115.  
  116. #links a:after {
  117. content:'.';/*you can change the period to whatever you like. if you don't want anything proceeding your links just delete the period*/
  118. }
  119.  
  120. /*the container for your about text and image (the one on the right)*/
  121. #first {
  122. position:relative;
  123. margin-top:55px;
  124. padding-bottom:55px;
  125. border-bottom:1px solid #ccc;/*#ccc is the color of the long border*/
  126. }
  127.  
  128. #about {
  129. width:300px;
  130. position:absolute;
  131. font-size:15px;/*about text font size*/
  132. line-height:180%;
  133. left:0;
  134. /*about text looks a lot neater if the text align is set to justify imo but if the spacing looks wonky just delete the line below*/
  135. text-align:justify;
  136. }
  137.  
  138. #rightimg {
  139. margin-left:350px;
  140. width:300px;
  141. border:8px solid #eee;/*border around iamge*/
  142. box-sizing:border-box;
  143. -webkit-box-sizing: border-box;
  144. -moz-box-sizing: border-box;
  145. }
  146.  
  147. /*the container for your basic info section*/
  148. #second {
  149. margin-top:55px;
  150. position:relative;
  151. }
  152.  
  153. #leftimg {
  154. width:300px;
  155. position:absolute;
  156. line-height:180%;
  157. left:0;
  158. border:8px solid #eee;/*border around image*/
  159. box-sizing:border-box;
  160. -webkit-box-sizing: border-box;
  161. -moz-box-sizing: border-box;
  162. margin-bottom:150px;
  163. }
  164.  
  165. #info {
  166. margin:0px 0px 150px 350px;
  167. line-height:180%;
  168. }
  169.  
  170. #label {
  171. font-family: 'PT Serif', serif;
  172. font-size:20px;/*basic info title font size*/
  173. margin-bottom:25px;
  174. }
  175.  
  176. .info {
  177. margin-bottom:10px;
  178. }
  179.  
  180. /*categories, i guess. (it's the text in bold)*/
  181. .category {
  182. font-weight:700;
  183. display:inline;
  184. margin-right:8px;
  185. /*color of categories. if you want this to be the same color as the text proceeding it, just delete the line below*/
  186. color:#161616;
  187. }
  188.  
  189.  
  190. /*DO NOT TOUCH THE THEME CREDIT*/
  191. .saeyoung a{
  192. background:#fff;
  193. position:fixed;
  194. left:20px;
  195. bottom:15px;
  196. opacity:.7;
  197. color:#000;
  198. font-size:10px;
  199. z-index:999;
  200. border-radius:4px;
  201. -moz-border-radius:4px;
  202. -webkit-border-radius:4px;
  203. padding:3px 8px 4px 8px;
  204. }
  205.  
  206.  
  207. </style> </head> <body>
  208.  
  209. <div id="contain">
  210.  
  211. <div id="title">Maps of the Universe</div>
  212.  
  213. <div id="tagline">Unfortunately, the clock is ticking, the hours are going by. The past increases, the future recedes. Possibilities decreasing, regrets mounting.</div>
  214.  
  215. <div class="line"></div>
  216.  
  217. <div id="links">
  218. <!--these are your links. add/delete as you please-->
  219. <a href="/">return</a>
  220. <a href="/ask">message</a>
  221. <a href="/archive">archive</a>
  222. <!--copy the line below to add another link-->
  223. <a href="/">link one</a>
  224. <!--end code snippet-->
  225. <a href="/">link two</a>
  226. <a href="/">link three</a>
  227. <a href="/">link four</a>
  228. </div>
  229.  
  230. <!--start of about section-->
  231. <div id="first">
  232. <div id="about">
  233. Lost opportunities, lost possibilities, feelings we can never get back. That's part of what it means to be alive. But inside our heads - at least that's where I imagine it - there's a little room where we store those memories. A room like the stacks in this library. And to understand the workings of our own heart we have to keep on making new reference cards. We have to dust things off every once in awhile, let in fresh air, change the water in the flower vases. In other words, you'll live forever in your own private library.
  234. </div>
  235.  
  236. <!--replace https://static.tumblr.com/wegwsdb/vGAowm95f/c-fgdatvyayvzxv.png with your image url-->
  237. <img id="rightimg" src="https://static.tumblr.com/wegwsdb/vGAowm95f/c-fgdatvyayvzxv.png">
  238. </div>
  239. <!--end of about section-->
  240.  
  241. <!--start basic info section-->
  242. <div id="second">
  243.  
  244. <!--replace https://static.tumblr.com/wegwsdb/xhTowm9sy/c-fgolhuiaatfrb.jpg with your image url-->
  245. <img id="leftimg" src="https://static.tumblr.com/wegwsdb/xhTowm9sy/c-fgolhuiaatfrb.jpg">
  246.  
  247. <div id="info">
  248.  
  249. <!--replace basic info with whatever you want-->
  250. <div id="label">Basic Info</div>
  251.  
  252. <div class="line"></div>
  253.  
  254. <!--copy code below to add more sections-->
  255. <div class="info">
  256. <div class="category">Name:</div>Velvet
  257. </div>
  258. <!--end of code snippet-->
  259.  
  260. <div class="info">
  261. <div class="category">MBTI:</div>ISTJ
  262. </div>
  263.  
  264. <div class="info">
  265. <div class="category">Birthday:</div>December 5th
  266. </div>
  267.  
  268. <div class="info">
  269. <div class="category">Age:</div>19
  270. </div>
  271.  
  272. <div class="info">
  273. <div class="category">Location:</div>New York City
  274. </div>
  275.  
  276. <div class="info">
  277. <div class="category">Occupation:</div>Student
  278. </div>
  279.  
  280. <div class="info">
  281. <div class="category">Hobbies:</div>Piano, baking sweets, knitting, archery, and developing games
  282. </div>
  283.  
  284.  
  285.  
  286.  
  287.  
  288.  
  289. <!--paste your info sections above this comment-->
  290.  
  291. </div>
  292.  
  293. </div>
  294. <!--end of basic info section-->
  295.  
  296. </div>
  297.  
  298.  
  299.  
  300.  
  301. </body>
  302.  
  303.  
  304.  
  305. </html>
  306.  
  307. <!----PLEASE DO NOT REMOVE THE THEME CREDIT--->
  308. <span class="saeyoung"><a href="https://nemurou.tumblr.com/">CREDIT</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!