API tools faq
paste
Advertisement
bangyixing

Page #04 - About Me + Navigation Page

bangyixing
Jun 30th, 2013
977
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.89 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7. <html>
  8. <head>
  9.  
  10. <!--
  11. THEME MADE BY ANDREA @ MILIKBOY
  12. PLEASE DON'T REMOVE THE CREDITS. THANK YOU.
  13. -->
  14.  
  15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  16. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  17. <head><title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19.  
  20. <style type="text/css">
  21.  
  22. body {
  23. font-family:Trebuchet MS;
  24. font-size:10px;
  25. margin-top: 120px;
  26. text-align:center;
  27. background-color:#ffffff;
  28. background-image: url("http://25.media.tumblr.com/b48cc6d2dadedd20019aeb052b07fa6b/tumblr_mp6r11XLAX1rfmwu3o1_500.jpg");
  29. background-attachment: fixed;
  30. }
  31.  
  32. a {
  33. color:#111111;
  34. text-decoration:none;
  35. }
  36.  
  37. a:hover {
  38. color:#b8b8b8;
  39. text-decoration:none;
  40. }
  41.  
  42. #navigate {
  43. background:#cf2727;
  44. padding:15px;
  45. text-align:left;
  46. font-family:Trebuchet MS;
  47. display:inline-block;
  48. line-height:140%;
  49. height:10px;
  50. width:1600px;
  51. position:fixed;
  52. text-align:center;
  53. text-transform:uppercase;
  54. margin-left:-800px;
  55. margin-top:-120px;
  56. }
  57.  
  58. #navigate a {
  59. color:#ffffff;
  60. padding:5px;
  61. text-align:center;
  62. }
  63.  
  64. #navigate a:hover {
  65. background:#ffffff;
  66. color:#cf2727;
  67. }
  68.  
  69. #daisy {
  70. border:10px solid #cf2727;
  71. height:453px;
  72. width:280px;
  73. margin-left:790px;
  74. margin-top:70px;
  75. -webkit-transition: all 0.5s ease-out;
  76. -moz-transition: all 0.5s ease-out;
  77. transition: all 0.5s ease-out;
  78. }
  79.  
  80. #rose {
  81. overflow:scroll;
  82. border:10px solid #cf2727;
  83. background:#ffffff;
  84. padding:15px;
  85. text-align:left;
  86. font-family:Trebuchet MS;
  87. line-height:140%;
  88. height:180px;
  89. margin-left:470px;
  90. width:250px;
  91. margin-top:-473px;
  92. }
  93.  
  94. #sunflower {
  95. overflow:scroll;
  96. border:10px solid #cf2727;
  97. background:#ffffff;
  98. padding:15px;
  99. height:180px;
  100. margin-left:470px;
  101. width:250px;
  102. }
  103.  
  104. #title {
  105. color:#ffffff;
  106. background:#cf2727;
  107. width:223px;
  108. font-size:12px;
  109. text-transform:uppercase;
  110. padding:5px;
  111. letter-spacing:2px;
  112. margin-bottom:5px;
  113. text-align:center;
  114. }
  115.  
  116. #category {
  117. color:#ffffff;
  118. background:#cf2727;
  119. width:194px;
  120. font-size:12px;
  121. text-transform:uppercase;
  122. padding:5px;
  123. letter-spacing:2px;
  124. margin-bottom:5px;
  125. text-align:center;
  126. }
  127.  
  128. #links a {
  129. display:block;
  130. text-transform:uppercase;
  131. width:200px;
  132. font-size:9px;
  133. letter-spacing:2px;
  134. padding:2px;
  135. margin-top:2px;
  136. margin-bottom:2px;
  137. position:justify;
  138. color:#111111;
  139. -webkit-transition: all 0.5s ease-out;
  140. -moz-transition: all 0.5s ease-out;
  141. transition: all 0.5s ease-out;
  142. }
  143.  
  144. #links a:hover {
  145. color:#ffffff;
  146. background:#111111;
  147. font-style:none;
  148. -moz-transition-duration:1s;
  149. -webkit-transition-duration:1s;
  150. -o-transition-duration:1s;
  151. }
  152.  
  153. {CustomCSS}</style></head><body>
  154.  
  155.  
  156. <div id="navigate">
  157. <a href="/">home</a>
  158. <a href="/ask">mail</a>
  159. <a href="/">link</a><!-- Extra link. -->
  160. <a href="/">link</a><!-- Extra link. -->
  161. <a href="http://mlikboy.tumblr.com/">credit</a>
  162. </div>
  163.  
  164. <!-- This is where your sidebar image is. --><div id="daisy"><img src="http://24.media.tumblr.com/6938a5ab6e6f3e992e6053165931e321/tumblr_mp5j2b5jcv1rfmwu3o1_400.jpg"></div>
  165.  
  166. <div id="rose">
  167. <!-- Change your title here. --><div id="title">about me</a></div>
  168.  
  169. <!-- Write stuff about yourself here. --> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare magna et libero dapibus sagittis. Duis eget felis id turpis tempor sagittis. Donec a nulla quam. In hac habitasse platea dictumst. Quisque pulvinar justo quis nisi fringilla eget dapibus dui pharetra. Ut ornare leo et odio cursus euismod. Proin in neque ut odio consequat lacinia. Nam sagittis posuere nulla sit amet cursus. In aliquam tellus ut felis venenatis interdum. Nunc tellus est, dapibus ut aliquet quis, euismod at mi. Suspendisse fringilla mauris quis libero cursus aliquam. Praesent consectetur, dolor eu molestie volutpat, felis nunc adipiscing arcu, a egestas tellus lectus quis massa. Ut elementum commodo libero hendrerit scelerisque. Sed vehicula metus nec nisl pellentesque eu mollis est malesuada.
  170.  
  171. <p>
  172.  
  173. Sed dictum ligula nec ante vestibulum eu imperdiet purus consequat. Nullam hendrerit iaculis egestas. Nulla facilisi. Phasellus ornare lacus sed sem blandit cursus. Duis convallis semper pellentesque. Duis pulvinar lacinia dolor, tincidunt scelerisque purus pretium in. Quisque non nibh nunc, at pharetra ipsum. Curabitur ut odio turpis. Donec tellus nisl, elementum a dictum sit amet, lacinia at sem. Donec sollicitudin lobortis nunc.
  174.  
  175. <p>
  176.  
  177. Nam a venenatis leo. Integer mauris tellus, consequat ut auctor a, volutpat sit amet nulla. Donec nec lorem ac lacus molestie fermentum a vel est. Vivamus commodo mauris augue. In hac habitasse platea dictumst. Etiam arcu massa, lacinia in adipiscing a, venenatis at lectus. Sed sit amet tortor magna, sit amet pharetra sapien. In semper hendrerit massa sed aliquam. Vestibulum condimentum auctor volutpat. Fusce pellentesque est non sapien vulputate ac laoreet lectus auctor. Suspendisse eget erat ut arcu egestas suscipit.
  178. </div>
  179.  
  180. <br>
  181.  
  182. <div id="sunflower">
  183. <div style="width:200px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  184. <!-- Change the group title here. --><div id="category">group title</a></div>
  185. <div id="links">
  186. <!-- Your links. -->
  187. <a href="/">link three</a>
  188. <a href="/">link two</a>
  189. <a href="/">link three</a>
  190. <a href="/">link four</a>
  191. <a href="/">link five</a>
  192. </div></div>
  193.  
  194. <br>
  195.  
  196. <div style="width:200px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  197. <div id="category">group title</a></div>
  198. <div id="links">
  199. <a href="/">link one</a>
  200. <a href="/">link two</a>
  201. <a href="/">link three</a>
  202. <a href="/">link four</a>
  203. <a href="/">link five</a>
  204. </div></div>
  205.  
  206. <br>
  207.  
  208. <div style="width:200px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  209. <div id="category">group title</a></div>
  210. <div id="links">
  211. <a href="/">link one</a>
  212. <a href="/">link two</a>
  213. <a href="/">link three</a>
  214. <a href="/">link four</a>
  215. <a href="/">link five</a>
  216. </div></div>
  217.  
  218. <br>
  219.  
  220. <div style="width:200px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  221. <div id="category">group title</a></div>
  222. <div id="links">
  223. <a href="/">link one</a>
  224. <a href="/">link two</a>
  225. <a href="/">link three</a>
  226. <a href="/">link four</a>
  227. <a href="/">link five</a>
  228. </div></div>
  229.  
  230. <div style="width:200px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  231. <div id="category">group title</a></div>
  232. <div id="links">
  233. <a href="/">link one</a>
  234. <a href="/">link two</a>
  235. <a href="/">link three</a>
  236. <a href="/">link four</a>
  237. <a href="/">link five</a>
  238. </div></div>
  239.  
  240. <br>
  241.  
  242. <div style="width:200px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  243. <div id="category">group title</a></div>
  244. <div id="links">
  245. <a href="/">link one</a>
  246. <a href="/">link two</a>
  247. <a href="/">link three</a>
  248. <a href="/">link four</a>
  249. <a href="/">link five</a>
  250. </div></div>
  251.  
  252. </div>
  253.  
  254. </body>
  255. </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!