This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!

About Page: Macchiato

By: mugendia on Jun 3rd, 2012 (edited)  |  syntax: None  |  size: 5.82 KB  |  views: 14,620  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <head><title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link href='http://fonts.googleapis.com/css?family=Oxygen|Codystar' rel='stylesheet' type='text/css'>
  6.  
  7. <!--
  8.  
  9. MACCHIATO PAGE THEME BY COCORINI (http://www.cocorini.com).
  10. PLEASE DON'T REMOVE THE CREDITS. THANK YOU!
  11.  
  12. PATTERNS: http://www.subtlepatterns.com
  13. IMAGES: http://www.san-x.co.jp
  14.  
  15. -->
  16.  
  17. <style type="text/css">
  18.  
  19. body {
  20. background-image: url('http://media.tumblr.com/tumblr_m51vdtGMUM1rnjuep.png');
  21. background-attachment: fixed;
  22. font-family: tinytots;
  23. font-size: 8px;
  24. }
  25.  
  26. ::-webkit-scrollbar-thumb:vertical {
  27. background-color: #e4bec3;
  28. height: auto;
  29. }
  30.  
  31. ::-webkit-scrollbar-thumb:horizontal {
  32. background-color: #e4bec3;
  33. height: auto;
  34. }
  35.  
  36. ::-webkit-scrollbar {
  37. height: 5px;
  38. width: 5px;
  39. background-color: #f9f9f9;
  40. }
  41.  
  42. /* LINKS */
  43.  
  44. a {
  45. color: #e4b49f;
  46. text-decoration: none;
  47. }
  48.  
  49. /* BOLD TEXT */
  50.  
  51. b, strong {
  52. color: #d3a184;
  53. }
  54.  
  55. /* ITALIC TEXT */
  56.  
  57. i, em {
  58. color: #c4cecb;
  59. }
  60.  
  61. #title {
  62. font-size: 38px;
  63. font-family: codystar;
  64. letter-spacing: 6px;
  65. color: #fff;
  66. }
  67.  
  68. #placeholder {
  69. margin-top: 140px;
  70. }
  71.  
  72. #content {
  73. margin-top: -2px;
  74. width: 500px;
  75. height: 305px;
  76. position: relative;
  77. background-color: #fff;
  78. padding: 5px;
  79. border-radius: 28px;
  80. border: 3px dotted #e8e3e2;
  81. box-shadow: 0px 0px 6px 1px #cbb2a8;
  82. background-image: url('http://media.tumblr.com/tumblr_m51vq1aHYY1rnjuep.png');
  83. }
  84.  
  85. #content a {
  86. text-decoration: none;
  87. color: #e6bcd4;
  88. -webkit-transition: all 0.7s ease-in-out;
  89. -moz-transition: all 0.7s ease-in-out;
  90. -o-transition: all 0.7s ease-in-out;
  91. -ms-transition: all 0.7s ease-in-out;
  92. transition: all 0.7s ease-in-out;
  93. }
  94.  
  95. #content a:hover {
  96. text-decoration: none;
  97. color: #ded69f;
  98. }
  99.  
  100. #middleimage {
  101. width: 140px;
  102. height: 280px;
  103. margin-top: 8px;
  104. border: 5px solid #ccc;
  105. }
  106.  
  107. #middleimage img {
  108. max-width: 140px;
  109. max-height: 280px;
  110. }
  111.  
  112. #aboutbg {
  113. width: 143px;
  114. height: 280px;
  115. overflow: auto;
  116. margin-top: -290px;
  117. margin-left: 6px;
  118. padding: 10px 10px 0px 10px;
  119. position: fixed;
  120. background-image: url('http://media.tumblr.com/tumblr_m51vtePDcv1rnjuep.png');
  121. background-color: #f9f9f9;
  122. }
  123.  
  124. #portrait img {
  125. border-radius: 100px;
  126. margin-top: 3px;
  127. margin-bottom: 3px;
  128. box-shadow: 0px 0px 3px 1px #ccc;
  129. }
  130.  
  131. #about {
  132. width: 128px;
  133. padding: 7px;
  134. background-color: #fff5f9;
  135. border-radius: 8px;
  136. position: relative;
  137. font-family: oxygen;
  138. font-size: 9px;
  139. text-align: left;
  140. color: #b6abb1;
  141. margin-bottom: 10px;
  142. }
  143.  
  144. #placesbg {
  145. width: 143px;
  146. height: 280px;
  147. overflow: auto;
  148. margin-top: -290px;
  149. margin-left: 331px;
  150. padding: 10px 10px 0px 10px;
  151. position: fixed;
  152. background-image: url('http://media.tumblr.com/tumblr_m51vtePDcv1rnjuep.png');
  153. background-color: #f9f9f9;
  154. }
  155.  
  156. #places {
  157. width: 128px;
  158. padding: 7px;
  159. background-color: #fff5f9;
  160. border-radius: 8px;
  161. position: relative;
  162. font-family: oxygen;
  163. font-size: 9px;
  164. text-align: left;
  165. color: #b6abb1;
  166. margin-bottom: 10px;
  167. }
  168.  
  169. #places img {
  170. border-radius: 20px;
  171. float: left;
  172. margin-right: 5px;
  173. max-width: 40px;
  174. box-shadow: 2px 2px 2px #ddd7cf;
  175. }
  176.  
  177. #header {
  178. text-align: center;
  179. font-family: consolas;
  180. text-transform: uppercase;
  181. font-size: 9px;
  182. letter-spacing: 2px;
  183. color: #c6bba2;
  184. padding: 3px;
  185. border-bottom: 1px dashed #decbcb;
  186. margin-bottom: 3px;
  187. }
  188.  
  189. #credit {
  190. position: fixed;
  191. bottom: 8px;
  192. right: 10px;
  193. font-size: 10px;
  194. color: #e4b49f;
  195. }
  196.  
  197. </style>
  198.  
  199. <body>
  200.  
  201. <div id="credit"><a href="http://cocorini.tumblr.com/" target="_blank">☂</a></div>
  202.  
  203. <div align="center"><div id="placeholder">
  204.  
  205. <!-- EDIT YOUR CONTENT BELOW THIS LINE. -->
  206.  
  207. <div id="title">MACCHIATO☕</div>
  208.  
  209. <div id="content">
  210.  
  211. <div id="middleimage">
  212. <img src="http://media.tumblr.com/tumblr_m51v6oZtM31rnjuep.png">
  213. </div>
  214.  
  215. <!-- THIS IS THE LEFT SIDE OF YOUR CONTENT. -->
  216.  
  217. <div id="aboutbg">
  218.  
  219. <div id="about">
  220. <div align="center"><div id="portrait"><img src="{PortraitURL-96}"></div></div>
  221.  
  222. <div id="header">ABOUT ME</div>
  223. This is where you put stuff about your profile.
  224. </div>
  225.  
  226. <div id="about">
  227. <div id="header">CURRENT FANDOMS</div>
  228. This is where you put stuff about your fandoms.
  229. </div>
  230.  
  231. <div id="about">
  232. <div id="header">OTHER STUFF</div>
  233. This is where you put stuff about anything you want.
  234. </div>
  235.  
  236. </div> <!-- IT'S IMPORTANT THAT THIS </div> REMAINS HERE. -->
  237.  
  238.  
  239. <!-- THIS IS THE RIGHT SIDE OF YOUR CONTENT. -->
  240.  
  241. <div id="placesbg">
  242.  
  243. <div id="places">
  244. <div id="header">BlOG #1</div>
  245. <a href="YOUR LINK URL HERE"><img src="http://media.tumblr.com/tumblr_m51ykm3yFY1rnjuep.png"></a>
  246. Your description of the blog/place you're linking.
  247. </div>
  248.  
  249. <div id="places">
  250. <div id="header">BlOG #2</div>
  251. <a href="YOUR LINK URL HERE"><img src="http://media.tumblr.com/tumblr_m51ykm3yFY1rnjuep.png"></a>
  252. Your description of the blog/place you're linking.
  253. </div>
  254.  
  255. <div id="places">
  256. <div id="header">BlOG #3</div>
  257. <a href="YOUR LINK URL HERE"><img src="http://media.tumblr.com/tumblr_m51ykm3yFY1rnjuep.png"></a>
  258. Your description of the blog/place you're linking.
  259. </div>
  260.  
  261. <div id="places">
  262. <div id="header">BlOG #4</div>
  263. <a href="YOUR LINK URL HERE"><img src="http://media.tumblr.com/tumblr_m51ykm3yFY1rnjuep.png"></a>
  264. Your description of the blog/place you're linking.
  265. </div>
  266.  
  267. <div id="places">
  268. <div id="header">BlOG #5</div>
  269. <a href="YOUR LINK URL HERE"><img src="http://media.tumblr.com/tumblr_m51ykm3yFY1rnjuep.png"></a>
  270. Your description of the blog/place you're linking.
  271. </div>
  272.  
  273. <div id="places">
  274. <div id="header">BlOG #6</div>
  275. <a href="YOUR LINK URL HERE"><img src="http://media.tumblr.com/tumblr_m51ykm3yFY1rnjuep.png"></a>
  276. Your description of the blog/place you're linking.
  277. </div>
  278.  
  279. </div> <!-- IT'S IMPORTANT THAT THIS </div> REMAINS HERE. -->
  280.  
  281. </div></div>
  282.  
  283. <!-- YOUR CONTENT ENDS HERE. -->
  284.  
  285. </body>
  286. </html>
clone this paste RAW Paste Data