Advertisement
Jessicakim

Sorawa - P: About #01

Dec 27th, 2012
4,502
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.48 KB | None | 0 0
  1. <!---- sorawa page theme made by madarathemes
  2. don't take off the credits
  3. don't copy
  4. don't use this theme as a base ---->
  5.  
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  8. <head>
  9.  
  10. <!-- CHANGE THE TITLE OF YOUR PAGE -->
  11. <title>{Title}'s About</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14.  
  15. <style type="text/css">
  16.  
  17.  
  18. ::-webkit-scrollbar-thumb:vertical {
  19. background-color: #44bbdd; /** SCROLL BAR **/
  20. height:100px;
  21. }
  22.  
  23. ::-webkit-scrollbar {
  24. height:25px;
  25. width:7px;
  26. background-color: #f9f9f9; /** SCROLL BAR BACKGROUND **/
  27. }
  28.  
  29. body {
  30. background-color: #ddd; /** BACKGROUND COLOR **/
  31. background-image:url('http://static.tumblr.com/z9nrs6q/GIImfp0ny/linedpaper__2x.png'); /** BACKGROUND IMAGE **/
  32. font: 13px 'calibri';
  33. color: #000; /** ABOUT FONT COLOR **/
  34. }
  35.  
  36. a:link,a:active,a:visited {
  37. text-decoration: none;
  38. color: #44bbdd; /** LINK COLOR **/
  39. -webkit-transition: all 0.5s ease-out;
  40. -moz-transition: all 0.5s ease-out;
  41. -o-transition: all 0.5s ease-out;
  42. }
  43.  
  44. a:hover {
  45. color: #55eeff; /** LINK HOVER COLOR **/
  46. text-shadow: 2px 0 .3px #eee, -2px 0 .3px #ddd;
  47. -webkit-transition: all 0.5s ease-out;
  48. -moz-transition: all 0.5s ease-out;
  49. -o-transition: all 0.5s ease-out;
  50. }
  51.  
  52. ::-moz-selection {
  53. color: #446677; /** selection font color **/
  54. background:#ddeeee; /** selection background **/
  55. }
  56. ::selection {
  57. color:#446677; /** selection font color **/
  58. background: #ddeeee; /** selection background **/
  59. }
  60.  
  61. #wrapping{
  62. position:fixed;
  63. top:40%;
  64. margin-top:-200px;
  65. width:100%;
  66. }
  67.  
  68. .center{
  69. margin: auto;
  70. padding:2px;
  71. width: 810px;
  72. height: 500px;
  73. }
  74.  
  75. .pic{
  76. width: 250px;
  77. float:left;
  78. height:500px;
  79. }
  80.  
  81. .descr{
  82. width:499px;
  83. float:left;
  84. height:440px;
  85. padding:20px;
  86. text-align:justify;
  87. background:#fff; /** ABOUT BACKGROUND **/
  88. border-right:10px solid #fff; /** ABOUT BACKGROUND **/
  89. border-top:10px solid #fff; /** ABOUT BACKGROUND **/
  90. border-bottom:10px solid #fff; /** ABOUT BACKGROUND **/
  91. }
  92.  
  93. .namu{
  94. font: 34px 'arial';
  95. color:#4488bb; /** TITLE COLOR **/
  96. position:absolute;
  97. text-transform:uppercase;
  98. margin-top:-22px;
  99. margin-left:270px;
  100. margin-bottom:10px;
  101. letter-spacing:-2px;
  102. text-align:left;}
  103.  
  104. #linku{
  105. position: absolute;
  106. text-align: center;
  107. }
  108.  
  109. #linku{opacity: 1.0; filter: alpha(opacity = 100); zoom: 1;
  110. margin-top:500px;}
  111.  
  112.  
  113. #linku a{
  114. text-decoration: none;
  115. display: block;
  116. text-align:center;
  117. float:left;
  118. font-size: 12px;
  119. color:#fff; /** NAVIGATION FONT COLOR **/
  120. width:127px;
  121. height:20px;
  122. text-transform:uppercase;
  123. letter-spacing:2px;
  124. padding:3px;
  125. background:#111; /** NAVIGATION BACKGROUND **/
  126. margin-bottom:10px;
  127. opacity: 0.70; filter: alpha(opacity = 70);
  128. }
  129.  
  130. #linku a:hover{
  131. opacity: 1; filter: alpha(opacity = 100);}
  132.  
  133. </style>
  134.  
  135. </head>
  136.  
  137. <body>
  138. <div id="wrapping">
  139.  
  140. <div class="center">
  141.  
  142. <div id="linku">
  143. <a href="/">main</a>
  144. <a href="/ask">questions ?</a>
  145.  
  146. <!-- ADD A CUSTOM LINK DON'T FORGET TO KEEP THE http:// IF IT IS A LINK-->
  147. <a href="http://">link 1</a>
  148.  
  149. <!-- ADD A CUSTOM LINK DON'T FORGET TO KEEP THE http:// IF IT IS A LINK-->
  150. <a href="http://">link 2</a>
  151.  
  152. <a href="/dashboard">dashboard</a>
  153.  
  154. <!-- please keep the credits thank you-->
  155. <a href="http://madarathemes.tumblr.com">theme</a>
  156. </div>
  157.  
  158. <div class="pic">
  159.  
  160. <!-- REPLACE THE LINK WITH THE LINK OF YOUR PICTURE-->
  161. <img src="http://static.tumblr.com/z9nrs6q/TN0mfp08b/dfgh.jpg" width='250' height='500'>
  162. </div>
  163.  
  164. <!-- CHANGE THE TITLE -->
  165. <div class="namu"><b>Curious ?</b></div>
  166.  
  167.  
  168. <div class="descr" style="overflow:auto; line-height:120%">
  169.  
  170. <!-- HERE YOU CAN WRITE YOUR ABOUT-->
  171.  
  172. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  173.  
  174. <br>
  175.  
  176. <ul>
  177. <li>Lorem ipsum dolor sit amet.</li>
  178. <li>Consectetuer adipiscing elit.</li>
  179. <li>Nam at tortor quis ipsum tempor aliquet.</li>
  180. </ul>
  181.  
  182.  
  183. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.
  184. <br><br>
  185. Suspendisse ac pede. Cras tincidunt pretium felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porttitor mi id felis. Maecenas nec augue. Praesent a quam pretium leo congue accumsan.
  186.  
  187. <br></br>
  188.  
  189. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  190. <br>
  191. <br>
  192. Lorem ipsum dolor sit amet.<br>
  193. Consectetuer adipiscing elit.<br>
  194. Nam at tortor quis ipsum tempor aliquet.<br>
  195. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.
  196. <br>
  197. <b>bold</b>, <i>italic</i>, <u>underline</u>, <s>strike</s>, <a href="/">link</a>
  198.  
  199. </div>
  200.  
  201. </div></div>
  202. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement