API tools faq
paste
haeresitic

mt

haeresitic
Jul 1st, 2014
685
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.25 KB | None | 0 0
raw download clone embed print report
  1. <!----
  2.  
  3. ===蒙恬===
  4. ===meng tian===
  5. an about page theme made by princewenyuan
  6. themes and pages @ baimajiangjun.tumblr.com
  7. PLEASE FEEL FREE TO USE AND MODIFY, BUT PLEASE DO NOT REMOVE THE CREDIT!
  8.  
  9. ---->
  10.  
  11. <!doctype html>
  12. <html>
  13. <head>
  14. <link href='http://fonts.googleapis.com/css?family=Domine|Merriweather:400,300,700' rel='stylesheet' type='text/css'>
  15. <link rel="shortcut icon" href="{Favicon}" />
  16. <meta charset="utf-8">
  17. <script>
  18.  
  19. </script>
  20. <title>about page</title>
  21. <style>
  22. html, body{
  23. height:100%;
  24. width:100%;
  25. margin:0;
  26. padding:0;
  27.  
  28. }
  29. .wrapper{
  30. width:100%;
  31. height:100%;
  32. overflow:hidden;
  33. }
  34. .container{
  35. width:100%;
  36. height:25%;
  37. position:relative;
  38. background-color:rgba(240, 240, 244, 1); /*<!-----background color of the text!------!>*/
  39. overflow:hidden;
  40. word-wrap:break-word;
  41. border-bottom:1px dashed #ffffff; /*<!-----border color of dash between sliding bits------!>*/
  42. text-align:justify;
  43. }
  44.  
  45. .container .ctext{
  46. padding-right:100px;
  47. padding-left:374px;
  48. padding-top:10px;
  49. padding-bottom:50px;
  50. font-family: 'Merriweather', serif;
  51. font-weight:300;
  52. font-size:15px; /*<!-----font-size of the text------!>*/
  53. color:#000; /*<!-----font-color of the text------!>*/
  54. margin:auto;
  55. }
  56.  
  57. .container ul{
  58. list-style:none;
  59. }
  60.  
  61. .container li{
  62. display:inline;
  63. padding:10px;
  64. margin:auto;
  65. text-align:center;
  66. }
  67.  
  68. .container a {
  69. text-decoration:none;
  70. color:#000; /*<!-----font-size of tags------!>*/
  71. }
  72.  
  73. .container a:hover{
  74. color:#bb4452; /*<!-----font-size of tags on hover------!>*/
  75. }
  76.  
  77. .container .banner{
  78. position:absolute;
  79. float:right;
  80. top:0;
  81. right:0;
  82. font-size:45px;
  83. letter-spacing:-3px;
  84. text-align:right;
  85. width:100%;
  86. height:100%;
  87. z-index:99;
  88. -webkit-transition-property:right;
  89. -webkit-transition-duration:3s;
  90. -mozkit-transition-property:right;
  91. -mozkit-transition-duration:3s;
  92. }
  93.  
  94. .container:hover .banner{
  95. right:1000px;
  96. -webkit-transition-property:right;
  97. -webkit-transition-duration:3s;
  98. -mozkit-transition-property:right;
  99. -mozkit-transition-duration:3s;
  100. }
  101.  
  102. .container .banner h1{
  103. margin-top:33px;
  104. padding-right:70px;
  105. color:#fff; /*<!-----font color of sliding bit------!>*/
  106. font-family: 'Domine', serif;
  107. }
  108.  
  109. .ctext img {
  110. border:1px solid #fff; /*<!-----border color of avatars------!>*/
  111. padding:2px;
  112. background-color:#fff; /*<!-----bg color of avatars------!>*/
  113. margin:5px;
  114. float:center;
  115. border-radius:200px;
  116. height:70px;width:70px; /*<!-----size of avatars------!>*/
  117. }
  118.  
  119.  
  120. .tooltip {
  121. position: relative;
  122. text-decoration:none;
  123. }
  124.  
  125. .tooltip span {
  126. margin-left: -999em;
  127. position: absolute;
  128. }
  129.  
  130. .tooltip:hover span {
  131. font-size:12px;
  132. position: absolute;
  133. left: 1px;
  134. top: -10px;
  135. z-index: 99;
  136. margin-left: 0;
  137. width: 250px;
  138. }
  139.  
  140. .tcaption { padding: 0.8em 1em; }
  141. * html a:hover { background: transparent; }
  142. .tcaption { color:#329090 ; /*<!-----font-color of caption------!>*/
  143. background: #BAFFDE; /*<!-----background color of caption------!>*/
  144. border: 2px solid #fff; }/*<!-----border color of caption------!>*/
  145.  
  146. h5 {
  147. margin-bottom:-15px;
  148. font-weight:700;
  149. font-size:15px;
  150. margin-top:-3px;
  151. }
  152.  
  153. #logo{
  154. color:#ddd;
  155. font-size:15px;
  156. position:fixed;
  157. bottom:-10px;
  158. right:5px;
  159. }
  160.  
  161. #logo a{
  162. text-decoration:none;
  163. color:#999;
  164. cursor:crosshair;
  165. }
  166.  
  167. #logo a:hover{
  168. text-decoration:none;
  169. color:#d9264d;
  170. }
  171.  
  172. #home{
  173. position:fixed;
  174. top:10px;
  175. right:15px;
  176. }
  177.  
  178. #home img{
  179. height:20px;
  180. width:20px;
  181. }
  182.  
  183. </style>
  184. </head>
  185. <body>
  186. <div class="wrapper">
  187.  
  188. <!---ABOUT! please keep it short and sweet!---->
  189. <div class="container">
  190. <div class="ctext">
  191. <p> <span style="font-weight:700">Meng Tian // Chinese // Male</span>
  192. </p>
  193. <p>I'm an officer of the Qin who's helping our Lord King Ying Zheng to realise his ambition to unite all seven kingdoms. </p>
  194. <p>Warring is in my family and in my blood, but tbh sometimes I'd like to take some time to sketch out building plans, and enjoy cat pictures on the internet.</p>
  195. </div>
  196. <div class="banner" style="background-color:#E78554"><!---color of the sliding bit!---->
  197. <h1>about</h1> <!---title of the sliding bit!---->
  198. </div>
  199.  
  200. <div id="home">
  201. <a href="/"><img src="http://i.imgur.com/rpvscvP.png" title="home"></a>
  202. </div>
  203.  
  204. </div>
  205. <!---end container---->
  206.  
  207. <!---LIKES! please keep it short and sweet!---->
  208. <div class="container">
  209. <div class="ctext">
  210. <p>ARCHITECTURE! I'm interested in learning how to build big walls to keep invaders from the north out of our borders.
  211. </p>
  212. <p>The Military School and the Legalism School: I'm a general first and foremost, but I also have a responsibility to be well-versed in how our lord governs the land.</p>
  213.  
  214. <p>And going to war. I don't necessarily enjoy it but... I do.</p>
  215. </div>
  216. <div class="banner" style="background-color:#FFDB78"> <!---color of the sliding bit!---->
  217. <h1>likes</h1> <!---title of the sliding bit!---->
  218. </div>
  219. </div>
  220. <!---end container---->
  221.  
  222. <!---TAGS
  223. delete/add the tags/subheadings you need. i don't think you can do more than 3 subheadings unless you tweak the font-sizes and margins/paddings above if you know CSS!---->
  224. <div class="container">
  225. <div class="ctext">
  226. <h5>subheading 1</h5>
  227. <ul>
  228. <li><a href="/tagged/#">tag1</a></li>
  229. <li><a href="/tagged/#">tag2</a></li>
  230. <li><a href="/tagged/#">tag3</a></li>
  231. <li><a href="/tagged/#">tag4</a></li>
  232. <li><a href="/tagged/#">tag5</a></li>
  233. <li><a href="/tagged/#">tag6</a></li>
  234. <li><a href="/tagged/#">tag7</a></li>
  235. <li><a href="/tagged/#">tag8</a></li>
  236. <li><a href="/tagged/#">tag9</a></li>
  237. <li><a href="/tagged/#">tag10</a></li>
  238. <li><a href="/tagged/#">tag11</a></li>
  239. <li><a href="/tagged/#">tag12</a></li>
  240. </ul>
  241. <h5>subheading 2</h5>
  242. <ul>
  243. <li><a href="/tagged/#">tag1</a></li>
  244. <li><a href="/tagged/#">tag2</a></li>
  245. <li><a href="/tagged/#">tag3</a></li>
  246. <li><a href="/tagged/#">tag4</a></li>
  247. <li><a href="/tagged/#">tag5</a></li>
  248. <li><a href="/tagged/#">tag6</a></li>
  249. <li><a href="/tagged/#">tag7</a></li>
  250. <li><a href="/tagged/#">tag8</a></li>
  251. </ul>
  252. <h5>subheading 3</h5>
  253. <ul>
  254. <li><a href="/tagged/#">tag1</a></li>
  255. <li><a href="/tagged/#">tag2</a></li>
  256. <li><a href="/tagged/#">tag3</a></li>
  257. <li><a href="/tagged/#">tag4</a></li>
  258. </ul>
  259. </div>
  260. <div class="banner" style="background-color:#329090"> <!---color of the sliding bit!---->
  261. <h1>tags</h1><!---title of the sliding bit!---->
  262. </div>
  263. </div>
  264. <!---end container---->
  265.  
  266. <!---FRIENDS!
  267. add/delete the part from <start img to end img>, enter your img url, and also your caption. keep it short and sweet. i don't think you can do more than a row of friends icons unless you tweak the size of the icons above!---->
  268. <div class="container">
  269. <div class="ctext">
  270. <!---start img---->
  271. <a class="tooltip"href="#"><img src="http://i.imgur.com/1LqC21V.png" width="100px" height="100px">
  272. <span class="tcaption"><h5>Han Xin</h5><br> I'm not sure who this is actually but he looks like a big loser</span></a>
  273. <!---end img---->
  274.  
  275. <!---start img---->
  276. <a class="tooltip"href="#"><img src="http://i.imgur.com/1QmTYon.png" width="100px" height="100px">
  277. <span class="tcaption"><h5>Zhang Liang</h5><br>I'm also not sure who this is but he's ridiculously pretty</span></a>
  278. <!---end img---->
  279.  
  280. <!---start img---->
  281. <a class="tooltip"href="#"><img src="http://i.imgur.com/XhB8Bd2.png" width="100px" height="100px">
  282. <span class="tcaption"><h5>Xiang Yu</h5><br>Who is this kid? How are all these weird people ending up on my friends list? Fusu, can you help?</span></a>
  283. <!---end img---->
  284.  
  285. <!---start img---->
  286. <a class="tooltip"href="#"><img src="http://i.imgur.com/eMJ33Xi.png" width="100px" height="100px">
  287. <span class="tcaption"><h5>Han Fei</h5><br>I know him, he's a Legalist and some royalty from Han. Li Si hates his guts. I think.</span></a>
  288. <!---end img---->
  289.  
  290. <!---start img---->
  291. <a class="tooltip"href="#"><img src="http://i.imgur.com/S9wVDfa.png" width="100px" height="100px">
  292. <span class="tcaption"><h5>Meng Wu</h5><br>My dad... why is he on Tumblr...</span></a>
  293. <!---end img---->
  294.  
  295. <!---start img---->
  296. <a class="tooltip"href="#"><img src="http://i.imgur.com/VUl9ZIp.png" width="100px" height="100px">
  297. <span class="tcaption"><h5>Xin</h5><br>Friends??? Sort of?? I think?</span></a>
  298. <!---end img---->
  299.  
  300. <!---start img---->
  301. <a class="tooltip"href="#"><img src="http://i.imgur.com/JNuDBvN.png" width="100px" height="100px">
  302. <span class="tcaption"><h5>Wang Ben</h5><br>Also sort of friends?? I guess.</span></a>
  303. <!---end img---->
  304.  
  305. <!---start img---->
  306. <a class="tooltip"href="#"><img src="http://i.imgur.com/SMvy0JX.png" width="100px" height="100px">
  307. <span class="tcaption"><h5>Li Si</h5><br>Actually we hate each other. But keep your friends close enemies closer etc.</span></a>
  308. <!---end img---->
  309.  
  310. <!---start img---->
  311. <a class="tooltip"href="#"><img src="http://i.imgur.com/FLvZi6W.png" width="100px" height="100px">
  312. <span class="tcaption"><h5>Ying Zheng</h5><br>My Lord and my King.</span></a>
  313. <!---end img---->
  314. </div>
  315.  
  316.  
  317. <div class="banner" style="background-color:#A8B5E1"> <!---color of the sliding bit!---->
  318. <h1>friends</h1> <!---title of the sliding bit!---->
  319. </div>
  320. <!----PLEASE DO NOT REMOVE CREDITS--->
  321. <div id="logo">
  322. <p><a href="http://princewenyuan.tumblr.com" title="page made by princewenyuan">&#10049;</a></p>
  323. </div>
  324. </div>
  325. <!----PLEASE DO NOT REMOVE CREDITS--->
  326. </div>
  327. <!---end container---->
  328.  
  329.  
  330. </div>
  331. </body>
  332. </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!