API tools faq
paste
aeternaphantasia

about page #02: replica

aeternaphantasia
May 29th, 2014
3,778
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <title>where is the proof of our existence?</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5.  
  6. <html>
  7. <head>
  8.  
  9. <!--
  10.  
  11. About Page #02 REVAMP: Replica
  12. coded by kuzuriha
  13.  
  14. As this is a revamp theme, the earlier version of the theme (both the preview and the code) will be removed, and the code won't be updated unless there's a major bug/glitch. The previous version of this page was titled "Original Color".
  15.  
  16. 1. Don't remove the credit.
  17. 2. Don't move the credit. Just leave it there.
  18. 3. Don't use as a base code.
  19. 4. Please enjoy! If you find any bugs, please contact me! c:
  20.  
  21. -->
  22.  
  23. <!--Heads up!-->
  24.  
  25. <!--Please read the code carefully! I've tried my best to make that all I'm talking about here makes sense and to group the codes based on their usage but if you are still having trouble, please drop me an ask! c: -->
  26.  
  27. <script src="//use.edgefonts.net/source-sans-pro.js"></script>
  28.  
  29. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  30.  
  31. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  32.  
  33. <script>
  34.  
  35. (function($){
  36.  
  37. $(document).ready(function(){
  38.  
  39. $("a[title]").style_my_tooltips({
  40.  
  41. tip_follows_cursor:true,
  42.  
  43. tip_delay_time:0,
  44.  
  45. tip_fade_speed:0,
  46.  
  47. attribute:"title"
  48.  
  49. });
  50.  
  51. });
  52.  
  53. })(jQuery);
  54.  
  55. </script>
  56.  
  57. <style type="text/css">
  58. /*webkit scrollbar*/
  59. ::-webkit-scrollbar{
  60. width:2px;
  61. }
  62.  
  63. ::-webkit-scrollbar-thumb:vertical{
  64. background:#F3D6D2;
  65. height:auto;
  66. }
  67.  
  68. /*tooltips*/
  69. #s-m-t-tooltip {
  70. max-width:150px;
  71. padding:5px 10px 5px 10px;
  72. margin:20px 14px 7px 10px;
  73. background-color:#F3D6D2; /* change the background color */
  74. font-family:consolas; /* change the font */
  75. font-style: normal;
  76. font-size:10px; /* change the font size */
  77. line-height:11px;
  78. letter-spacing:1px; /* change the letter spacing */
  79. text-transform:lowercase; /* can be uppercase, lowercase, none*/
  80. color:#fff; /* change the text color */
  81. z-index:999;
  82. }
  83.  
  84. body{
  85. margin:0;
  86. padding:0;
  87. color:#454545;
  88. font-family:source-sans-pro;
  89. font-size:11px;
  90. background:#C7C7C7 url('http://static.tumblr.com/wdp3vza/FiSoad6e0/tumblr_lzju29vxir1r9g6hvo4_250.png') fixed; /*change the url inside the brackets to change the background or delete it if you don't want to use background image.*/
  91. }
  92.  
  93. a{
  94. text-decoration:none;
  95. color:#F3D6D2;
  96. }
  97.  
  98. #maincont{
  99. position:relative;
  100. margin-top:120px;
  101. margin:0 auto;
  102. width:620px;
  103. }
  104.  
  105. #icon{
  106. width:120px;
  107. height:120px;
  108. position:relative;
  109. top:20px;
  110. padding:10px;
  111. margin:0 auto;
  112. background:#fff;
  113. border-radius:300px; /*if you want square icon, delete this line.*/
  114. }
  115.  
  116. #icon img{
  117. width:120px;
  118. height:120px;
  119. border-radius:300px; /*if you want square icon, delete this line.*/
  120. }
  121.  
  122. #cont{
  123. width:600px;
  124. height:430px;
  125. padding:10px;
  126. background:#fff;
  127. position:absolute;
  128. top:90px;
  129. z-index:-1;
  130. }
  131.  
  132. #title{
  133. display:block;
  134. font-family:source-sans-pro;
  135. font-size:16px;
  136. padding:10px;
  137. text-align:center;
  138. font-weight:700;
  139. text-transform:uppercase;
  140. margin-top:60px;
  141. }
  142.  
  143. #navbar{
  144. width:400px;
  145. margin-top:10px;
  146. margin:0 auto;
  147. margin-left:85px;
  148. }
  149.  
  150. #infofield{
  151. width:400px;
  152. margin:0 auto;
  153. margin-top:5px;
  154. padding:10px;
  155. }
  156.  
  157. .infofield{
  158. min-width:60px;
  159. padding:6px;
  160. background:#EF6A99;
  161. color:#fff;
  162. font:10px consolas;
  163. text-align:center;
  164. display:inline-block;
  165. margin:10px;
  166. font-style:italic;
  167. }
  168.  
  169. #about{
  170. width:560px;
  171. padding:10px;
  172. height:170px;
  173. margin:10px;
  174. max-height:170px;
  175. overflow:scroll;
  176. }
  177.  
  178. #about:first-letter{
  179. width:20px;
  180. height:10px;
  181. line-height:100%;
  182. float:left;
  183. background-color:#EF6A99;
  184. color:#fff;
  185. margin-right:8px;
  186. padding:8px;
  187. font-size:30px;
  188. }
  189.  
  190. #about b, strong{
  191. color:#F3D6D2;
  192. font-weight:400; /*delete this line if you want the usual bold*/
  193. }
  194.  
  195. #about i, em{
  196. color:#F3D6D2;
  197. }
  198. /*svg icons*/
  199. .svg-icon {
  200. width: 20px;
  201. height: 20px;
  202. background-color:#F3D6D2;
  203. margin-left:15px;
  204. display:inline-block;
  205. line-height:100%;
  206. padding:10px;
  207. }
  208.  
  209. .svg-icon path,
  210. .svg-icon polygon,
  211. .svg-icon rect {
  212. fill: #fff;
  213. font-size:20px;
  214. }
  215.  
  216. .svg-icon circle {
  217. stroke: #4691f6;
  218. stroke-width: 1;
  219.  
  220. }
  221.  
  222. </style>
  223. </head>
  224.  
  225. <body>
  226. <div id="maincont">
  227. <div id="icon"><img src="http://static.tumblr.com/wdp3vza/KI6oad7d9/tumblr_oa1wu6vuvo1qla6e4o1_12801.jpg"/><!--replace the url between the quotes to change the icon.--></div>
  228.  
  229. <div id="cont">
  230. <div id="title">am I the original, or am I a replica?</div>
  231. <div id="navbar">
  232. <div class="navlink">
  233. <a href="/" title="return"><svg class="svg-icon" viewBox="0 0 20 20">
  234. <path d="M18.121,9.88l-7.832-7.836c-0.155-0.158-0.428-0.155-0.584,0L1.842,9.913c-0.262,0.263-0.073,0.705,0.292,0.705h2.069v7.042c0,0.227,0.187,0.414,0.414,0.414h3.725c0.228,0,0.414-0.188,0.414-0.414v-3.313h2.483v3.313c0,0.227,0.187,0.414,0.413,0.414h3.726c0.229,0,0.414-0.188,0.414-0.414v-7.042h2.068h0.004C18.331,10.617,18.389,10.146,18.121,9.88 M14.963,17.245h-2.896v-3.313c0-0.229-0.186-0.415-0.414-0.415H8.342c-0.228,0-0.414,0.187-0.414,0.415v3.313H5.032v-6.628h9.931V17.245z M3.133,9.79l6.864-6.868l6.867,6.868H3.133z"></path>
  235. </svg></a>
  236. <a href="/ask" title="ask"><svg class="svg-icon" viewBox="0 0 20 20">
  237. <path d="M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z"></path>
  238. </svg></a>
  239.  
  240. <a href="/archive" title="archive"><svg class="svg-icon" viewBox="0 0 20 20">
  241. <path d="M17.896,12.706v-0.005v-0.003L15.855,2.507c-0.046-0.24-0.255-0.413-0.5-0.413H4.899c-0.24,0-0.447,0.166-0.498,0.4L2.106,12.696c-0.008,0.035-0.013,0.071-0.013,0.107v4.593c0,0.28,0.229,0.51,0.51,0.51h14.792c0.28,0,0.51-0.229,0.51-0.51v-4.593C17.906,12.77,17.904,12.737,17.896,12.706 M5.31,3.114h9.625l1.842,9.179h-4.481c-0.28,0-0.51,0.229-0.51,0.511c0,0.703-1.081,1.546-1.785,1.546c-0.704,0-1.785-0.843-1.785-1.546c0-0.281-0.229-0.511-0.51-0.511H3.239L5.31,3.114zM16.886,16.886H3.114v-3.572H7.25c0.235,1.021,1.658,2.032,2.75,2.032c1.092,0,2.515-1.012,2.749-2.032h4.137V16.886z"></path>
  242. </svg></a>
  243.  
  244.  
  245. <a href="http://kuzuriha.tumblr.com" title="theme by kuzuriha"><svg class="svg-icon" viewBox="0 0 20 20">
  246. <path d="M17.064,4.656l-2.05-2.035C14.936,2.544,14.831,2.5,14.721,2.5H3.854c-0.229,0-0.417,0.188-0.417,0.417v14.167c0,0.229,0.188,0.417,0.417,0.417h12.917c0.229,0,0.416-0.188,0.416-0.417V4.952C17.188,4.84,17.144,4.733,17.064,4.656M6.354,3.333h7.917V10H6.354V3.333z M16.354,16.667H4.271V3.333h1.25v7.083c0,0.229,0.188,0.417,0.417,0.417h8.75c0.229,0,0.416-0.188,0.416-0.417V3.886l1.25,1.239V16.667z M13.402,4.688v3.958c0,0.229-0.186,0.417-0.417,0.417c-0.229,0-0.417-0.188-0.417-0.417V4.688c0-0.229,0.188-0.417,0.417-0.417C13.217,4.271,13.402,4.458,13.402,4.688"></path>
  247. </svg></a>
  248.  
  249. <a href="" title="link 1"><svg class="svg-icon" viewBox="0 0 20 20">
  250. <path d="M16.899,3.05c-0.085-0.068-0.192-0.095-0.299-0.074L7.947,4.779c-0.17,0.034-0.291,0.182-0.291,0.353v7.364c-0.494-0.536-1.199-0.873-1.983-0.873c-1.491,0-2.704,1.213-2.704,2.704s1.213,2.704,2.704,2.704c1.491,0,2.705-1.213,2.705-2.704V7.952l7.933-1.659v4.399c-0.494-0.535-1.199-0.873-1.983-0.873c-1.491,0-2.704,1.213-2.704,2.704c0,1.492,1.213,2.705,2.704,2.705c1.49,0,2.704-1.213,2.704-2.705V3.33C17.031,3.221,16.982,3.119,16.899,3.05 M5.673,16.311c-1.094,0-1.983-0.889-1.983-1.983s0.889-1.983,1.983-1.983c1.095,0,1.983,0.889,1.983,1.983S6.768,16.311,5.673,16.311 M14.327,14.508c-1.095,0-1.983-0.889-1.983-1.984c0-1.094,0.889-1.982,1.983-1.982c1.094,0,1.983,0.889,1.983,1.982C16.311,13.619,15.421,14.508,14.327,14.508 M16.311,5.558L8.377,7.217V5.428l7.933-1.659V5.558z"></path>
  251. </svg></a>
  252. <!--Enter your URL inside the a href="" and the title you want to appear when people hover over your link inside title="". Please don't change anything else.-->
  253. <a href="" title="link 2"><svg class="svg-icon" viewBox="0 0 20 20">
  254. <path d="M17.218,2.268L2.477,8.388C2.13,8.535,2.164,9.05,2.542,9.134L9.33,10.67l1.535,6.787c0.083,0.377,0.602,0.415,0.745,0.065l6.123-14.74C17.866,2.46,17.539,2.134,17.218,2.268 M3.92,8.641l11.772-4.89L9.535,9.909L3.92,8.641z M11.358,16.078l-1.268-5.613l6.157-6.157L11.358,16.078z"></path>
  255. </svg></a>
  256.  
  257. <a href="" title="link 3"><svg class="svg-icon" viewBox="0 0 20 20">
  258. <path d="M17.684,7.925l-5.131-0.67L10.329,2.57c-0.131-0.275-0.527-0.275-0.658,0L7.447,7.255l-5.131,0.67C2.014,7.964,1.892,8.333,2.113,8.54l3.76,3.568L4.924,17.21c-0.056,0.297,0.261,0.525,0.533,0.379L10,15.109l4.543,2.479c0.273,0.153,0.587-0.089,0.533-0.379l-0.949-5.103l3.76-3.568C18.108,8.333,17.986,7.964,17.684,7.925 M13.481,11.723c-0.089,0.083-0.129,0.205-0.105,0.324l0.848,4.547l-4.047-2.208c-0.055-0.03-0.116-0.045-0.176-0.045s-0.122,0.015-0.176,0.045l-4.047,2.208l0.847-4.547c0.023-0.119-0.016-0.241-0.105-0.324L3.162,8.54L7.74,7.941c0.124-0.016,0.229-0.093,0.282-0.203L10,3.568l1.978,4.17c0.053,0.11,0.158,0.187,0.282,0.203l4.578,0.598L13.481,11.723z"></path>
  259. </svg></a>
  260. </div><!--end navlink-->
  261.  
  262. </div><!--end navbar-->
  263.  
  264. <div id="infofield">
  265. <div class="infofield">rizu</div><!--you can write anything you want here! Make sure it's not too long though, or else it would ruin the entire layout.-->
  266. <div class="infofield">xix</div>
  267. <div class="infofield">intj</div>
  268. <div class="infofield">s.e asia</div>
  269.  
  270. </div><!--end infofield-->
  271.  
  272. <div id="about">
  273. <!--write anything you want inside this div.-->
  274. Hello! This is the preview of <a href="http://kuzuriha.tumblr.com">kuzuriha</a>'s revamp of her second about page, originally titled <b>Original Color</b>, now named <b>Replica</b>. You can write anything you want here, and if you write too much a scrollbar will appear which make things even more convenient as you can write as long as you want.
  275. <br>
  276. <br>
  277. This page is inspired by <b>Sakamoto Maaya</b>'s song by the same title which was used for the ED of an anime titled <b>M3: Sono Kuroki Hagane</b>. The anime itself was aired in 2014 and had the director of <b>Sailor Moon</b> and the scriptwriter of <b>Anohana</b> taking part in producing this anime.
  278. <br>
  279. <br>
  280. The icon at the top courtesy to <a href="http://kuvshinov-ilya.tumblr.com">@kuvshinov-ilya</a>. The font used at this page is <i>Source Sans Pro</i> which is available at the <b>Adobe Edgefont</b> website for free and <i>Consolas</i>. This is also my first attempt at using <b>SVG</b> courtesy of <i><a href="http://svgicons.sparkk.fr/">SVG Icons</a></i> and I still can't decide whether I like SVG or font icons better...
  281. <br>
  282. <br>
  283. I've included notes inside the code to help you edit the page! If there's anything else or you encounter into a problem don't hesitate to drop me an <b>ask</b>. I hope you enjoy this page as much as I enjoyed coding it!
  284. </div>
  285. </div><!--cont end-->
  286.  
  287. </div><!--maincont end-->
  288. </body>
  289. </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!