Want more features on Pastebin? Sign Up, it's FREE!

About Page: Macchiato

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