Pastebin launched a little side project called HostCabi.net, check it out ;-)Don't like ads? PRO users don't see any ads ;-)

About Page: Macchiato

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