API tools faq
paste
Advertisement
mogimochi

About Page [02] Hirou

mogimochi
Oct 21st, 2013
10,195
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.30 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. About Page [02] Hirou
  8. by yukoki/yokoris
  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.  
  15. ---------------------------------------------------------------------------
  16. Please look out for notes throughout the code
  17. to help you in customizing the page!!
  18. ---------------------------------------------------------------------------
  19.  
  20. -->
  21.  
  22. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  23. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  24. <link rel="shortcut icon" href="{Favicon}" />
  25.  
  26. <link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
  27.  
  28. <style type="text/css">
  29.  
  30. @import url(http://weloveiconfonts.com/api/?family=fontawesome);
  31.  
  32. /* fontawesome */
  33. [class*="fontawesome-"]:before {
  34. font-family: 'FontAwesome', sans-serif;
  35. position: fixed;
  36. z-index: 1;
  37. }
  38.  
  39. ::-webkit-scrollbar { width: 5px; }
  40. ::-webkit-scrollbar-track-piece { background-color:#fffeff; }
  41. ::-webkit-scrollbar-thumb:vertical {
  42. width: 10px;
  43. background-color: #a4a6b7;
  44. }
  45.  
  46. body {
  47. background-color: #000;
  48. background-image: url(http://media.tumblr.com/e8ec4aa40ea6b3d27b889c5deec02109/tumblr_inline_muyxfhWoJ41rshr70.png); /** The background image. Paste your background image link in between the brackets. **/
  49. background-attachment: fixed;
  50. margin: 0;
  51. word-wrap: break-word;
  52. }
  53. a { text-decoration:none; }
  54.  
  55. #main {
  56. width: 600px;
  57. height: 350px;
  58. margin: 130px auto;
  59. padding: 10px;
  60. border: 1px solid #cccccc; /** main container border **/
  61. background-color: #ffffff; /** main container background **/
  62. }
  63.  
  64. .maint {
  65. color: #000000; /**blog title text colour**/
  66. text-shadow: -2px 0 0 #fff; /**blog title text shadow**/
  67. letter-spacing: 5px;
  68. font-family: courier new;
  69. font-size: 30px;
  70. position: absolute;
  71. width: 600px;
  72. text-align: right;
  73. text-transform: uppercase;
  74. margin: -50px 0;
  75. }
  76.  
  77. .pic {width: 200px;height: 350px;float: left;}
  78.  
  79. .info {
  80. position: absolute;
  81. width: 200px;
  82. overflow: hidden;
  83. margin: 255px 0;
  84. transition: 0.8s;
  85. -moz-transition: 0.8s;
  86. -webkit-transition: 0.8s;
  87. -o-transition: 0.8s;
  88. }
  89.  
  90. .name, .age, .country {
  91. font-family: consolas;
  92. font-size: 9px;
  93. text-transform: uppercase;
  94. letter-spacing: 1px;
  95. color: #555;
  96. padding: 3px 10px;
  97. margin-bottom: 5px;
  98. opacity: 0;
  99. background-color: #eee; /** info bars background **/
  100. border-right: 10px solid #88452c; /** info name borders **/
  101. border-left: 10px solid #88452c; /** info name borders **/
  102. transition: 0.8s;
  103. -moz-transition: 0.8s;
  104. -webkit-transition: 0.8s;
  105. -o-transition: 0.8s;
  106. }
  107.  
  108. .age {
  109. border-right: 10px solid #723f71; /** info age borders **/
  110. border-left: 10px solid #723f71; /** info age borders **/
  111. }
  112.  
  113. .country {
  114. border-right: 10px solid #556dce; /** info country borders **/
  115. border-left: 10px solid #556dce; /** info country borders **/
  116. }
  117.  
  118. .name b,strong { color: #88452c; } /** info 'NAME:' colour **/
  119. .age b,strong { color: #723f71; } /** info 'AGE:' colour **/
  120. .country b,strong { color: #556dce; } /** info 'COUNTRY:' colour **/
  121.  
  122. #yi, #er, #san {width:200px;height:350px;float:left;overflow:hidden;}
  123.  
  124. #yi:hover .info { margin: 265px 0; }
  125. #yi:hover .name { opacity: 1; }
  126. #yi:hover .age { opacity: 1; transition-delay: 0.2s; }
  127. #yi:hover .country { opacity: 1; transition-delay: 0.4s; }
  128.  
  129. .bio {
  130. color: #888888; /** bio text colour **/
  131. width: 140px;
  132. height: 290px;
  133. padding: 10px 20px;
  134. overflow: auto;
  135. font-family: georgia;
  136. font-size: 10px;
  137. text-align: justify;
  138. position: absolute;
  139. margin: 10px;
  140. opacity: 0;
  141. z-index: 10;
  142. transition: 1.2s;
  143. -moz-transition: 1.2s;
  144. -webkit-transition: 1.2s;
  145. -o-transition: 1.2s;
  146. }
  147.  
  148. .bio a { color: #b55c7a; /** bio links colour **/ }
  149. .bio a:hover { color: #cccccc; } /** bio links colour hover **/
  150. .bio b,strong { color: #3d8291; } /** bio bold colour **/
  151. .bio i,em { color: #3f8f7b; } /** bio italic colour **/
  152.  
  153. .ichi, .ni, .san, .shi {
  154. background-color: #fff; /** bio background **/
  155. opacity: 0.8;
  156. width: 50px;
  157. height: 350px;
  158. float: left;
  159. position: absolute;
  160. z-index: 9;
  161. height: 0;
  162. transition: 1.2s;
  163. -moz-transition: 1.2s;
  164. -webkit-transition: 1.2s;
  165. -o-transition: 1.2s;
  166. }
  167. .ni { margin-left: 50px; }
  168. .san { margin-left: 100px; }
  169. .shi { margin-left: 150px; }
  170.  
  171. #er:hover .ichi { height: 350px; }
  172. #er:hover .ni { height: 350px; transition-delay: 0.2s; }
  173. #er:hover .san { height: 350px; transition-delay: 0.4s; }
  174. #er:hover .shi { height: 350px; transition-delay: 0.6s; }
  175. #er:hover .bio { opacity: 1; }
  176.  
  177. #one, #two, #three {
  178. background-color: #ffffff; /** right column: interests background **/
  179. color: #666666; /** right column: interests text **/
  180. font-family: georgia;
  181. font-size: 8.5px;
  182. letter-spacing: 0px;
  183. position: absolute;
  184. padding: 20px 10px 10px 10px;
  185. width: 150px;
  186. margin: 15px -20px;
  187. height: 65px;
  188. overflow: auto;
  189. opacity: 0;
  190. text-align: justify;
  191. transition: 0.8s;
  192. -moz-transition: 0.8s;
  193. -webkit-transition: 0.8s;
  194. -o-transition: 0.8s;
  195. }
  196. #two { margin: 127px 50px; }
  197. #three { margin: 240px -20px; }
  198.  
  199. #san:hover #one { opacity: 1; margin: 15px; }
  200. #san:hover #two { opacity: 1;transition-delay:0.2s; margin: 127px 15px; }
  201. #san:hover #three { opacity:1;transition-delay:0.4s;margin: 240px 15px; }
  202.  
  203. .onet {
  204. background-color: #000000; /**right column: interests header background**/
  205. color: #ffffff; /**right column: interests header text colour**/
  206. letter-spacing: 1px;
  207. font-family: consolas;
  208. font-size: 8px;
  209. position: absolute;
  210. text-align: center;
  211. width: 170px;
  212. padding: 3px 0 3px 10px;
  213. margin: -20px -20px 10px -20px;
  214. text-transform: uppercase;
  215. }
  216.  
  217. #navigate {margin: -45px 50px;position: absolute;}
  218. #navigate a { color: #888888; } /** navigation icon colour **/
  219.  
  220. #nava {
  221. background-color: #fff; /** navigation icon background **/
  222. overflow: hidden;
  223. float: left;
  224. margin-right: 30px;
  225. font-size: 12px;
  226. width: 25px;
  227. height: 25px;
  228. line-height: 25px;
  229. border-radius: 100px;
  230. transition: 0.6s;
  231. -moz-transition: 0.6s;
  232. -webkit-transition: 0.6s;
  233. -o-transition: 0.6s;
  234. }
  235.  
  236. .navicon {
  237. position: fixed;
  238. width: 25px;
  239. margin: 0 -6px;
  240. text-align: center;
  241. transition: 0.6s;
  242. -moz-transition: 0.6s;
  243. -webkit-transition: 0.6s;
  244. -o-transition: 0.6s;
  245. }
  246.  
  247. #nava:hover .navicon {
  248. color: #ffffff; /** navigation icon hover colour **/
  249. }
  250. #nava:hover .navicon {margin: -25px -6px;}
  251.  
  252. .shield1, .shield2, .shield3 {
  253. background-color: #fcc142; /** navigation icon hover background **/
  254. margin-top: -25px;
  255. width: 25px;
  256. height: 25px;
  257. transition: 0.6s;
  258. -moz-transition: 0.6s;
  259. -webkit-transition: 0.6s;
  260. -o-transition: 0.6s;
  261. }
  262. .shield2 { background-color: #546ecc; } /** nav icon hover background 2 **/
  263. .shield3 { background-color: #5dc9b6; } /** nav icon hover background 3 **/
  264. #nava:hover .shield1, #nava:hover .shield2, #nava:hover .shield3 {margin-top: 0;}
  265.  
  266. .navt {
  267. background-color: #fff; /**navigation text background**/
  268. color: #888888; /**navigation text colour**/
  269. z-index: 1;
  270. font-family: consolas;
  271. text-transform: uppercase;
  272. letter-spacing: 1px;
  273. position: absolute;
  274. margin: 0px 10px;
  275. text-align: center;
  276. line-height: 14px;
  277. opacity: 0;
  278. font-size: 0;
  279. transition: 0.6s;
  280. -moz-transition: 0.6s;
  281. -webkit-transition: 0.6s;
  282. -o-transition: 0.6s;
  283. }
  284.  
  285. #nava:hover .navt {
  286. font-size: 8px;
  287. opacity: 1;
  288. width: 50px;
  289. margin: -55px -10px;
  290. }
  291.  
  292. .tri {
  293. color: #fff; /**navigation text background**/
  294. z-index: 1;
  295. font-size: 0px;
  296. position: absolute;
  297. margin: -5px 12px;
  298. transition: 0.6s;
  299. -moz-transition: 0.6s;
  300. -webkit-transition: 0.6s;
  301. -o-transition: 0.6s;
  302. }
  303.  
  304. #nava:hover .tri {
  305. margin: -50px 5px;
  306. font-size: 16px;
  307. }
  308.  
  309. {CustomCSS}
  310.  
  311. </style>
  312. </head>
  313. <body>
  314.  
  315. <div id="main">
  316.  
  317. <div class="maint">about me</div>
  318.  
  319. <div id="navigate">
  320.  
  321. <!--
  322.  
  323. This is where the links at the top of the main div goes. (home, ask, past, theme, custom links, etc)
  324.  
  325. <a href="[THE URL]"><div id="nava">
  326. <div class="shield"></div>
  327. <span class="navt">[LINK TITLE]</span>
  328. <span class="tri">▼</span>
  329. <div class="navicon"><span class="fontawesome-home"></span></div>
  330. </div></a>
  331.  
  332. -->
  333.  
  334. <a href="/"><div id="nava">
  335. <div class="shield1"></div>
  336. <span class="navt">index</span>
  337. <span class="tri">▼</span>
  338. <div class="navicon"><span class="fontawesome-home"></span></div>
  339. </div></a>
  340.  
  341. <a href="/ask"><div id="nava">
  342. <div class="shield2"></div>
  343. <span class="navt">message</span>
  344. <span class="tri">▼</span>
  345. <div class="navicon"><span class="fontawesome-envelope"></span></div>
  346. </div></a>
  347.  
  348. <a href="/archive"><div id="nava">
  349. <div class="shield3"></div>
  350. <span class="navt">past</span>
  351. <span class="tri">▼</span>
  352. <div class="navicon"><span class="fontawesome-calendar"></span></div>
  353. </div></a>
  354.  
  355. <a href="/"><div id="nava">
  356. <div class="shield1"></div>
  357. <span class="navt">link 1</span>
  358. <span class="tri">▼</span>
  359. <div class="navicon"><span class="fontawesome-star-empty"></span></div>
  360. </div></a>
  361.  
  362. <a href="/"><div id="nava">
  363. <div class="shield2"></div>
  364. <span class="navt">link 2</span>
  365. <span class="tri">▼</span>
  366. <div class="navicon"><span class="fontawesome-key"></span></div>
  367. </div></a>
  368.  
  369. <a href="http://yukoki.tumblr.com"><div id="nava">
  370. <div class="shield3"></div>
  371. <span class="navt">credit</span>
  372. <span class="tri">▼</span>
  373. <div class="navicon"><span class="fontawesome-paper-clip"></span></div>
  374. </div></a>
  375.  
  376. </div><!--navigate-->
  377.  
  378. <div id="yi">
  379. <!---------------- the image link to the first picture ------------------->
  380. <!------------------ images should be 200px by 350px --------------------->
  381. <img class="pic" src="http://media.tumblr.com/0a5ba7e1b8ddf344f0154ec2a838e838/tumblr_inline_muyw00thee1rshr70.jpg">
  382.  
  383. <!--
  384.  
  385. you should fill up the info portion as follows:
  386.  
  387. <div class="info">
  388. <div class="name"><b>name:</b> Yuko</div>
  389. <div class="age"><b>age:</b> 14</div>
  390. <div class="country"><b>country:</b> Singapore</div>
  391. </div>
  392.  
  393. -->
  394.  
  395. <div class="info">
  396. <div class="name"><b>name:</b> <!--your name--></div>
  397. <div class="age"><b>age:</b> <!--your age--></div>
  398. <div class="country"><b>country:</b> <!--your country--></div>
  399. </div><!--info-->
  400.  
  401. </div>
  402. <!--yi-->
  403.  
  404. <div id="er">
  405. <!--------------- the image link to the second picture ------------------->
  406. <!------------------ images should be 200px by 350px --------------------->
  407. <img class="pic" src="http://media.tumblr.com/89b2c4df9080027744c134d6cae3ac8c/tumblr_inline_muyxd2nFhI1rshr70.jpg">
  408.  
  409. <div class="bio">
  410. <!----------------------- YOUR BIO GOES HERE!!!! ------------------------->
  411.  
  412. </div><!--bio-->
  413.  
  414. <div class="ichi"></div><div class="ni"></div><div class="san"></div><div class="shi"></div>
  415. </div><!--er-->
  416.  
  417. <div id="san">
  418. <!---------------- the image link to the third picture ------------------->
  419. <!------------------ images should be 200px by 350px --------------------->
  420. <img class="pic" src="http://media.tumblr.com/9057ff844d77830579611ac144030158/tumblr_inline_muyxcvbgOj1rshr70.jpg">
  421.  
  422. <!--
  423. an example of how the bottom portion should be like:
  424.  
  425. <div id="one">
  426. <div class="onet">Hobbies:</div> Theme making, reading, writing, drawing, watching anime, reading manga
  427. </div>
  428.  
  429. <div id="two">
  430. <div class="onet">Fave books:</div> Harry Potter series, Percy Jackson series, Heroes of Olympus series, Inhertiance Cycle, Riftwar Saga
  431. </div>
  432.  
  433. <div id="three">
  434. <div class="onet">Fave anime:</div> Tengen Toppa Gurren Lagann, Fullmetal Alchemist: Brotherhood, Kateikyoushi Hitman Reborn, Shingeki no Kyojin, Dangan Ronpa
  435. </div>
  436. -->
  437.  
  438. <div id="one">
  439. <div class="onet">Header 1:</div>
  440. </div><!--one-->
  441.  
  442. <div id="two">
  443. <div class="onet">Header 2:</div>
  444. </div><!--two-->
  445.  
  446. <div id="three">
  447. <div class="onet">Header 3:</div>
  448. </div><!--three-->
  449.  
  450. </div><!--san-->
  451.  
  452. </div><!--main-->
  453.  
  454. </body>
  455. </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!