API tools faq
paste
Advertisement
gasphard-ulliel

about me page 001

gasphard-ulliel
Oct 21st, 2012
2,469
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.50 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--
  5. ABOUT ME 001 by GASPHARD-ULLIEL
  6.  
  7. Please don't:
  8. 1. Remove or move the credit
  9. 2. Use this as a base code
  10. 3. Claim as your own or redistribute
  11. Thank you!
  12.  
  13. If there's any error in the coding please tell me and I'll fix it. I hope you enjoy using this theme! C:
  14.  
  15.  
  16. -->
  17.  
  18. <html>
  19.  
  20. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  21. <script src="/path/to/jquery.masonry.min.js"></script>
  22.  
  23. <head>
  24.  
  25. <title>{Title}</title>
  26. <link rel="shortcut icon" href="{favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28. {block:description}
  29. <meta name="description" content="{MetaDescription}"/>
  30. {/block:description}
  31.  
  32. <style type="text/css">
  33.  
  34. /*CUSTOMIZE GENERAL HERE*/
  35.  
  36. body {
  37. font-family: cambria;
  38. font-size: 11px;
  39. background-color: #ffffff;
  40. color: #303030;
  41. text-align: justify;
  42. }
  43.  
  44. a:link, a:active, a:visited {
  45. color: #000;
  46. text-decoration: none;
  47. transition: all 0.6s ease-out;
  48. -webkit-transition: all 0.6s ease-out;
  49. -moz-transition: all 0.6s ease-out;
  50. -o-transition: all 0.6s ease-out;
  51. }
  52.  
  53. a:hover {
  54. color: #fff;
  55. background-color: #000;
  56. transition: all 0.6s ease-out;
  57. -webkit-transition: all 0.6s ease-out;
  58. -moz-transition: all 0.6s ease-out;
  59. -o-transition: all 0.6s ease-out;
  60. }
  61.  
  62. /*END OF CUSTOMIZABLE PART*/
  63.  
  64. ::-webkit-scrollbar-thumb:vertical {
  65. background-color: #fff;
  66. height:100px;
  67. }
  68.  
  69. ::-webkit-scrollbar {
  70. height:25px;
  71. width: 4px;
  72. background-color: #000;
  73. }
  74.  
  75. iframe#tumblr_controls {
  76. margin-top: 75px;
  77. position: fixed !important;
  78. right:6px !important;
  79. opacity: 0;
  80. width: auto;
  81. border-radius: 10px;
  82. -webkit-transition: all 0.8s ease-in-out;
  83. -moz-transition: all 0.8s ease-in-out;
  84. -o-transition: all 0.8s ease-in-out;
  85. }
  86.  
  87. iframe#tumblr_controls:hover {
  88. -webkit-transition: all 0.8s ease-in-out;
  89. -moz-transition: all 0.8s ease-in-out;
  90. -o-transition: all 0.8s ease-in-out;
  91. opacity: 0.2;
  92. border-radius: 5px;
  93. }
  94.  
  95. #container {
  96. position: fixed;
  97. margin-left: 20%;
  98. margin-top: 20%;
  99. }
  100.  
  101. /*IMAGE*/
  102.  
  103. .sidebar {
  104. float: left;
  105. position: fixed;
  106. width: 200px;
  107. height: 200px;
  108. overflow: hidden;
  109. z-index: 10;
  110. margin-top: 11px;
  111. margin-left: 11px;
  112. }
  113.  
  114. .sidebarbg {
  115. float: left;
  116. position: fixed;
  117. z-index: 9;
  118. margin-top: 4px;
  119. margin-left: 4px;
  120. width: 212px;
  121. height: 212px;
  122. border: 1px solid #d8d8d8; /*the color of the border*/
  123. }
  124.  
  125. /*TITLE*/
  126.  
  127. .title {
  128. float: left;
  129. position: fixed;
  130. width: 500px;
  131. border-bottom: 1px solid #d8d8d8;
  132. margin-top: 0px;
  133. margin-left: 218px;
  134. text-align: right;
  135. font-size: 30px; /*size of the title font*/
  136. text-transform: uppercase;
  137. letter-spacing: 4px;
  138. color: #000;
  139. }
  140.  
  141. /*END OF TITLE*/
  142.  
  143. .container2 {
  144. position: fixed;
  145. width: 500px;
  146. margin-top: 40px;
  147. margin-left: 217px;
  148. text-align: center;
  149. background-color: transparent;
  150. height: 285px; /*this is where you customize the length of the horizontal border. it depends on how long your description is*/
  151. border-left: 1px solid #d8d8d8;
  152. }
  153.  
  154. /*DESCRIPTION*/
  155.  
  156. .description {
  157. float: left;
  158. text-align: justify;
  159. padding: 5px 5px 10px 5px;
  160. font-size: 12px;
  161. line-height: 14px;
  162. z-index: 15;
  163. border-bottom: 1px solid #d8d8d8;
  164. }
  165.  
  166. /*LINKS*/
  167.  
  168. .links {
  169. float: left;
  170. margin-top: 3px;
  171. margin-left: 215px; /*adjust this according to the length of your link titles. if you want your links to align on the left, simply add a number smaller than 10, and if you want it on the right adjust it according to the length of your links*/
  172. -webkit-transition: all 0.5s ease-in-out;
  173. -moz-transition: all 0.5s ease-in-out;
  174. -o-transition: all 0.5s ease-in-out;
  175. }
  176.  
  177. .links:hover a {
  178. opacity: 0.4;
  179. -webkit-transition: all 0.5s ease-in-out;
  180. -moz-transition: all 0.5s ease-in-out;
  181. -o-transition: all 0.5s ease-in-out;
  182. }
  183.  
  184. .links a {
  185. text-align: center;
  186. display: inline;
  187. float: left;
  188. margin: 0px 5px 0px 0px;
  189. padding: 2px;
  190. color: #000;
  191. font-size: 10px;
  192. text-transform: uppercase;
  193. width: auto;
  194. -webkit-transition: all 0.7s ease-in-out;
  195. -moz-transition: all 0.7s ease-in-out;
  196. -o-transition: all 0.7s ease-in-out;
  197. }
  198.  
  199. .links a:hover {
  200. opacity: 1;
  201. color: #fff;
  202. background-color: #000;
  203. -webkit-transition: all 0.7s ease-in-out;
  204. -moz-transition: all 0.7s ease-in-out;
  205. -o-transition: all 0.7s ease-in-out;
  206. }
  207.  
  208.  
  209. </style>
  210. </head>
  211.  
  212. <body>
  213.  
  214. <div id="container">
  215.  
  216. <div class="sidebarbg"></div>
  217. <div class="sidebar"><img src="http://24.media.tumblr.com/tumblr_mc8dffecVv1rfymxfo1_500.jpg" width="200"></div><!--if you don't want the picture to be resized to 200px in width, delete the width="200" part.-->
  218.  
  219. <div class="title">About Me</div>
  220.  
  221. <div class="container2">
  222. <div class="description">
  223. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tortor ipsum, commodo et pretium rhoncus, blandit euismod dui. Donec risus ipsum, egestas in euismod ac, sodales tristique augue. Duis erat nulla, mattis non vestibulum eget, ornare eget nibh. Sed ac rhoncus elit. Aliquam adipiscing risus eu nulla accumsan ultrices euismod tellus interdum. Praesent rutrum fermentum felis, quis feugiat nunc posuere vitae. Nullam in ultrices mi. Quisque tempor rutrum dolor nec volutpat. Proin rhoncus elementum lacus quis feugiat. Cras adipiscing pretium fermentum. Cras in elementum tellus. Donec sed lorem non nisl tincidunt hendrerit et in orci.</br>
  224. Nullam nunc lacus, eleifend quis porta eget, aliquam a dui. Quisque faucibus mollis nunc vitae lacinia. Integer ut lorem tellus, eget consequat elit. Pellentesque iaculis ligula quis elit aliquam aliquet. Sed viverra auctor sodales. Mauris suscipit interdum ipsum a accumsan. Nunc sed turpis quam, at placerat dolor. Nam magna magna, dictum sit amet rhoncus et, molestie et augue. Cras mollis dolor eu nisl mollis luctus et non turpis. Vestibulum vitae tortor sapien, quis sodales eros. Morbi in odio turpis. Mauris in felis a lorem tincidunt blandit ac quis nisi. Aliquam iaculis porta pretium. Nulla euismod viverra elit eu aliquet. Ut tristique, arcu sed viverra dapibus, lectus justo viverra tellus, vitae euismod felis urna eget enim.</p>
  225. <b>Bold.</b> <i>Italic.</i> <a href="/">Link.</a>
  226. </div>
  227. <div class="links">
  228. <a href="/">home</a>
  229. <a href="/ask">message</a>
  230. <a href="http://">link 01</a>
  231. <a href="http://">link 02</a>
  232. <!--you can add more links here-->
  233. <a href="http://tumblr.com">dashboard</a>
  234. <a href="http://gasphard-ulliel.tumblr.com">credit</a>
  235. </div></div>
  236. </div>
  237.  
  238.  
  239. </div>
  240.  
  241.  
  242.  
  243. </body>
  244. </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!