API tools faq
paste
Advertisement
mogimochi

About Page [04] Ebullience

mogimochi
Dec 27th, 2014
17,969
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.64 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. About Page [04] Ebullience
  8. by yukoki/s-ekki
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim theme as your own.
  14. 5. Do not redistribute.
  15.  
  16. --------------------------------------------------------------------------
  17.  
  18. Please look out for notes throughout the code
  19. to help you in customizing the page!!
  20.  
  21. --------------------------------------------------------------------------
  22.  
  23. --------------------------------------------------- UPDATE VER 271214 -->
  24.  
  25. <title>{title} - about</title>
  26. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  27. <link rel="shortcut icon" href="{Favicon}" />
  28.  
  29. <style type="text/css">
  30.  
  31. @font-face {
  32. font-family: saniretro;
  33. src: url(https://dl.dropboxusercontent.com/s/mcaqu9nnehiwi18/Saniretro.ttf);
  34. }
  35.  
  36. ::-webkit-scrollbar { width: 3px; }
  37. ::-webkit-scrollbar-track-piece { background-color: transparent; }
  38. ::-webkit-scrollbar-thumb:vertical {
  39. width: 3px;
  40. background-color: #dfc7f0; /**biography scrollbar**/
  41. padding-left: 20px;
  42. }
  43.  
  44. body {
  45. background-color: #fff;
  46. background-image: url(http://media.tumblr.com/bfac635d5a893649fb77fe3c0024f23c/tumblr_mom6ylcPvT1svhlqqo7_1280.jpg); /**background image url**/
  47. background-attachment: fixed;
  48. margin: 0;
  49. word-wrap: break-word;
  50.  
  51. /**if you don't use a background that takes up the whole screen,delete the following two lines: **/
  52. background-size: cover;
  53. background-position: 20% 70%;
  54. /** and add this instead (make sure it's not surrounded by the slash and asterisks!):**/
  55. /** background-repeat: repeat; **/
  56. }
  57.  
  58. a { text-decoration:none; }
  59.  
  60. #content1 {
  61. position: fixed;
  62. width: 100%;
  63. }
  64.  
  65. #content {
  66. width: 640px;
  67. margin-top: 100px;
  68. }
  69.  
  70. #main1 {
  71. float: left;
  72. width: 320px;
  73. height: 420px;
  74. overflow: hidden;
  75. }
  76.  
  77. #panel1, #panel2 {
  78. transition: 0.8s;
  79. -moz-transition: 0.8s;
  80. -webkit-transition: 0.8s;
  81. -o-transition: 0.8s;
  82. }
  83.  
  84. .mainimg, .mainimg2 {
  85. width: 320px;
  86. height: 420px;
  87. }
  88.  
  89. .infopanel {
  90. margin-left: -320px;
  91. float: left;
  92. width: 270px;
  93. height: 360px;
  94. padding: 30px 20px 30px 30px;
  95. background-color: rgba(255,255,255,0.9);
  96. }
  97.  
  98. .basicinfo { width: 400px; }
  99.  
  100. .infos {
  101. padding: 5px 10px 5px 0;
  102. width: 125px;
  103. background-color: rgba(255,255,255,0.4);
  104. margin-right: 5px;
  105. float: left;
  106. font-family: consolas;
  107. font-size: 10px;
  108. text-align: left;
  109. margin-bottom: 5px;
  110. color: #777; /**basic info text**/
  111. }
  112.  
  113. .infos b,strong {
  114. font-weight: 400;
  115. padding: 5px;
  116. background-color: #ffcfcc; /**basic info list bg**/
  117. color: #fff; /**basic info list text**/
  118. }
  119.  
  120. .infor {
  121. font-family: consolas;
  122. font-size: 10px;
  123. text-align: justify;
  124. overflow: auto;
  125. margin-top: 60px;
  126. height: 300px;
  127. padding-right: 10px;
  128. color: #9a9a9a; /**biography text**/
  129. }
  130.  
  131. .infor b,strong {
  132. color: #d69e9b; /**biography bolded**/
  133. font-weight: 400; /**delete this line if you want normal boldness**/
  134. }
  135.  
  136. .infor i,em {
  137. color: #95c1ed; /**biography italic**/
  138. }
  139.  
  140. .infor a {
  141. color: #ba99b3; /**biography links**/
  142. }
  143.  
  144. .infor a:hover {
  145. color: #9a9a9a; /**biography links hovered**/
  146. }
  147.  
  148. .infor:first-letter {
  149. font-size: 38px;
  150. float: left;
  151. font-family: saniretro;
  152. font-weight: 900;
  153. line-height: 46px;
  154. padding: 0 14px;
  155. margin-right: 5px;
  156. background-color: #efd4ff; /**biography first letter bg**/
  157. color: #ffffff; /**biography first letter colour**/
  158. }
  159.  
  160. .infor blockquote {
  161. margin: 5px 10px;
  162. padding: 0 10px;
  163. border-left: 1px solid #aaa;
  164. text-align: left;
  165. }
  166.  
  167. #content:hover #panel1 { margin-left: 320px; }
  168. #content:hover .mainimg2 { margin-left: 0; }
  169.  
  170. #panel2 {width: 640px;}
  171.  
  172. #main2 {
  173. float: left;
  174. width: 320px;
  175. height: 420px;
  176. overflow: hidden;
  177. }
  178.  
  179. .mainimg2 {
  180. margin-left: -320px;
  181. float: left;
  182. transition: 0.8s;
  183. -moz-transition: 0.8s;
  184. -webkit-transition: 0.8s;
  185. -o-transition: 0.8s;
  186. }
  187.  
  188. .basicpanel {
  189. float: left;
  190. width: 260px;
  191. height: 360px;
  192. padding: 30px;
  193. background-color: rgba(255,255,255,0.6);
  194. }
  195.  
  196. .quote {
  197. font-size: 38px;
  198. font-family: saniretro;
  199. padding: 40px 14px;
  200. margin-top: 10px;
  201. text-align: left;
  202. color: #fff; /**quote colour**/
  203. text-shadow: 2px 2px 0 #C98DC7; /**quote shadow**/
  204. }
  205.  
  206. .quom {
  207. float: left;
  208. overflow: hidden;
  209. width: 40px;
  210. height: 50px;
  211. font-size: 90px;
  212. font-family: georgia;
  213. margin: -5px 5px;
  214. }
  215.  
  216. #navigate {
  217. background-color: rgba(255,255,255,0.2);
  218. padding: 10px;
  219. width: 620px;
  220. margin-top: 10px;
  221. float: left;
  222. font-family: consolas;
  223. font-size: 9px;
  224. text-transform: uppercase;
  225. letter-spacing: 2px;
  226. font-style: italic;
  227. color: #ffffff; /**navigation dividers**/
  228. }
  229.  
  230. #navigate a {
  231. margin: 0 5px;
  232. color: #ffffff; /**navigation links**/
  233. text-shadow: 2px 0 0 #D199A2; /**navigation links shadow**/
  234. transition: 0.6s;
  235. }
  236.  
  237. #navigate a:hover {
  238. color: #ffffff; /**hovered navigation links**/
  239. text-shadow: 2px 0 0 #D199A2; /**hovered navigation links shadow**/
  240. }
  241.  
  242. #music {
  243. bottom: 10px;
  244. left: 10px;
  245. width: 16px;
  246. height: 16px;
  247. position: fixed;
  248. padding: 7px;
  249. background-color: rgba(255,255,255,0.4);
  250. transition: 0.8s;
  251. -moz-transition: 0.8s;
  252. -webkit-transition: 0.8s;
  253. -o-transition: 0.8s;
  254. }
  255.  
  256. .musicgif {
  257. float: left;
  258. margin-top: 1px;
  259. transition: 0.8s;
  260. -moz-transition: 0.8s;
  261. -webkit-transition: 0.8s;
  262. -o-transition: 0.8s;
  263. }
  264.  
  265. .mcon {
  266. width: 30px;
  267. height: 20px;
  268. overflow: hidden;
  269. }
  270.  
  271. .mplayer {
  272. margin-left: -23px;
  273. padding-right: 23px;
  274. transition: 0.8s;
  275. opacity: 0;
  276. -moz-transition: 0.8s;
  277. -webkit-transition: 0.8s;
  278. -o-transition: 0.8s;
  279. }
  280.  
  281. #music:hover .musicgif {margin-top: -30px;opacity: 0;}
  282. #music:hover { width: 30px; }
  283. #music:hover .mplayer { margin-top: -5px; opacity: 1; }
  284.  
  285. .songtitle {
  286. position: fixed;
  287. font-family: consolas;
  288. font-size: 10px;
  289. margin: -7px 30px;
  290. line-height: 30px;
  291. padding: 0 12px;
  292. height: 30px;
  293. text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
  294. background-color: rgba(255,255,255,0.4);
  295. opacity: 0;
  296. transition: 0.8s;
  297. -moz-transition: 0.8s;
  298. -webkit-transition: 0.8s;
  299. -o-transition: 0.8s;
  300. }
  301.  
  302. #music:hover .songtitle {
  303. margin: -7px 44px;
  304. opacity: 1;
  305. }
  306.  
  307.  
  308. {CustomCSS}
  309.  
  310. </style></head>
  311. <!----- ユコキ ----->
  312. <body>
  313.  
  314.  
  315.  
  316. <!-- delete until </div><!--music- -> if you do not want to use the built-in music player (at the bottom left of the screen) -->
  317.  
  318. <div id="music">
  319.  
  320. <div class="songtitle">song title</div>
  321.  
  322. <img class="musicgif" src="http://media.tumblr.com/tumblr_m7w0df0jG61r6o8v2.gif">
  323.  
  324. <div class="mcon">
  325. <div class="mplayer">
  326. <!----- billy music code here ----->
  327. </div></div>
  328.  
  329. </div><!--music-->
  330.  
  331.  
  332.  
  333.  
  334. <center>
  335.  
  336. <div id="content1">
  337. <div id="content">
  338.  
  339. <div id="main1">
  340.  
  341. <div id="panel1">
  342. <div class="infopanel">
  343.  
  344. <div class="basicinfo"><!---------------- basic info ------------------------>
  345.  
  346. <div class="infos"><b>name</b> pixel gem</div>
  347. <div class="infos"><b>birthday</b> dd/mm/yy</div>
  348. <div class="infos"><b>location</b> ocean</div>
  349. <div class="infos"><b>personality</b> mbti ?</div>
  350.  
  351. </div><!--basicinfo-->
  352.  
  353. <div class="infor"><!----------------------- biography ---------------------->
  354.  
  355. Normal, default, ordinary text.
  356.  
  357. <b>Bold text!</b>
  358. <i>Italic text.</i>
  359. <a href="">Link</a> to another dimension.
  360. <u>Underline</u> for <i>emphasis</i>.
  361. <strike>I changed my mind.</strike>
  362.  
  363. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida ipsum quam, in euismod est venenatis ut. Integer tempus ut turpis eu maximus. Mauris efficitur em nec mi ultrices venenatis. Vestibulum suscipit velit mauris, quis ullamcorper ex sodales id. Vivamus vel tincidunt massa. Nunc vel tempus arcu. Etiam ut ligula sed dolor sollicitudin pellentesque.</p>
  364.  
  365. <p>Aenean fermentum nisl vel libero tincidunt sagittis. Aliquam consectetur rhoncus dui, vulputate aliquam elit auctor id. Nullam sollicitudin lobortis posuere. Nunc molestie molestie lectus, viverra facilisis purus consequat sed. Suspendisse nec sem ac mauris consectetur lobortis ac nec felis. Duis nisl lacus, egestas et risus a, scelerisque placerat dolor. Maecenas fringilla elit vitae accumsan consectetur. In sit amet lacus ut lorem vestibulum laoreet vitae vitae felis. Pellentesque sodales et arcu id lobortis. Fusce posuere aliquet urna consectetur cursus. Fusce viverra quam vitae turpis hendrerit, id consequat purus aliquet. Duis dolor ante, fermentum et mauris non, pellentesque vestibulum neque. Cras facilisis tempor ante at tristique. Pellentesque vel est lectus.</p>
  366.  
  367. <p>Suspendisse potenti. Fusce porta pellentesque sagittis. Cras sollicitudin enim id ante pellentesque scelerisque vel vel lorem. Ut et mauris massa. Etiam pulvinar quam at posuere lacinia. Curabitur tellus ex, interdum id ultrices ac, aliquam et ligula. Pellentesque consectetur egestas laoreet. Nunc lobortis gravida erat non accumsan. Aliquam erat volutpat. Donec maximus metus vel ex accumsan accumsan. Sed eu massa quam.</p>
  368.  
  369. </div><!--infor-->
  370. </div><!--infopanel-->
  371.  
  372. <!--below image link is for the biography. dimensions are 320*420.-->
  373. <img class="mainimg" src="https://31.media.tumblr.com/c6e3fedd76dd06cada37efdbb9449f65/tumblr_inline_nh85df8TH41rshr70.png">
  374.  
  375.  
  376. </div><!--panel1-->
  377.  
  378. </div><!--main1-->
  379.  
  380.  
  381.  
  382. <div id="main2">
  383.  
  384. <!--below image link is for the quote. dimensions are 320*420.-->
  385. <img class="mainimg2" src="https://31.media.tumblr.com/39e0c7d8daaec6dbae63d7563828d240/tumblr_inline_nh85ddLda01rshr70.png">
  386.  
  387. <div id="panel2">
  388. <div class="basicpanel">
  389. <div class="basics">
  390.  
  391. <div class="quote"><span class="quom">“</span> That's what the world is, after all; an endless battle of contrasting memories.</div>
  392.  
  393. </div><!--basics-->
  394. </div><!--basicpanel-->
  395.  
  396. </div><!--panel2-->
  397.  
  398. </div><!--main2-->
  399.  
  400. <div id="navigate">
  401.  
  402. <!-- default link looks like: <a href="url">link title</a> :: -->
  403.  
  404. <a href="/">home</a> ::
  405. <a href="/ask">whisper</a> ::
  406. <a href="/archive">remember</a> ::
  407. <a href="/">link one</a> ::
  408. <a href="/">link two</a> ::
  409. <a href="http://yukoki.tumblr.com">credit</a>
  410.  
  411. </div>
  412.  
  413. </div><!--content-->
  414. </div><!--content1-->
  415.  
  416. </center>
  417.  
  418. </body>
  419. </html>
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!