API tools faq
paste
Advertisement
ettudisthemes

Page Design 01

ettudisthemes
Aug 21st, 2012
11,347
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.59 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. PAGE DESIGN 01 (c) by Ans by ETTUDIS [http://ettudis.three-words.net]
  3. CONTACT INFO [email: ettudisdesigns@gmail.com]
  4. FOLLOW THEME BLOG [http://ettudis.tumblr.com]
  5. TERMS OF USE [http://ettudis.tumblr.com/post/8327340215/terms-of-usage]
  6. -->
  7.  
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  9. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  10. <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
  11. <link href='http://fonts.googleapis.com/css?family=Coustard' rel='stylesheet' type='text/css'>
  12.  
  13. <!-- INSERT ICON URL HERE -->
  14. <link rel="shortcut icon" href="URLHERE" />
  15.  
  16. <!-- TYPE IN TITLE OF YOUR PAGE -->
  17. <title>TITLEHERE</title>
  18.  
  19. <style type="text/css">
  20. /*** BASIC VARIABLES ***/
  21. body {
  22. margin: 0px;
  23. padding:0px;
  24. background:#FAF6F5 url(http://assets.tumblr.com/images/x.gif) fixed;
  25. }
  26. a {
  27. color:#e4d7d4;
  28. text-decoration: none;
  29. -webkit-transition: all 0.9s ease;
  30. -moz-transition: all 0.9s ease;
  31. -o-transition: all 0.9s ease;
  32. }
  33. a:hover {
  34. color: #AAAAAA;
  35. -webkit-transition: all 0.9s ease;
  36. -moz-transition: all 0.9s ease;
  37. -o-transition: all 0.9s ease;
  38. }
  39. :hover {
  40. -webkit-transition: all 0.5s ease-in-out;
  41. -moz-transition: all 0.5s ease-in-out;
  42. -o-transition: all 0.5s ease-in-out;
  43. }
  44. ::-webkit-scrollbar {width:7px; height:7px;}
  45. ::-webkit-scrollbar-track {background-color:#FFFFFF;}
  46. ::-webkit-scrollbar-thumb {background-color:#000000;-moz-border-radius: 1px;-webkit-border-radius: 1px;border-radius: 1px;}
  47. ::-webkit-scrollbar:double-button {background-color:#000000;}
  48. ::-webkit-scrollbar-track-piece{background-color:#FFFFFF;}
  49. ::-webkit-scrollbar-thumb:vertical{background-color:#000000;}
  50.  
  51. /*** CONTENT LAYOUT ***/
  52. #colm {
  53. margin-top:30px;
  54. font:9px/12px lucida sans unicode, trebuchet ms, consolas;
  55. overflow:visible;
  56. padding:0px;
  57. }
  58. #post {
  59. color:#666666;
  60. background:#FFFFFF;
  61. padding:15px;
  62. border:1px dashed #DDDDDD;
  63. width:500px;
  64. position:relative;
  65. float:right;
  66. margin:-10px;
  67. min-height:47px;
  68. }
  69. #content {
  70. background:#000000;
  71. -moz-border-radius: 5px 0px 0px 5px;
  72. -webkit-border-radius: 5px 0px 0px 5px;
  73. border-radius: 5px 0px 0px 5px;
  74. }
  75. #spacer {
  76. background:transparent!important;
  77. }
  78. #data {
  79. font-family:coustard, rockwell, georgia, times new roman, serif;
  80. color:#555555;
  81. padding-left:18px;
  82. padding-top:20px;
  83. float:left;
  84. }
  85. #box {
  86. width:120px;
  87. }
  88. #space {
  89. height:150px!important;
  90. }
  91. /*** LEFT COLUMN ***/
  92. .img {
  93. border:1px solid #1A1A1A;
  94. background:#0A0A0A;
  95. padding:15px;
  96. max-width:80px;
  97. }
  98. h2 {
  99. font:12px coustard, rockwell, georgia, times new roman, serif;
  100. color:#666;
  101. text-align:center;
  102. }
  103. #data p {
  104. font:7px lucida sans unicode, trebuchet ms, sans-serif;
  105. text-transform:uppercase;
  106. color:#454545;
  107. letter-spacing:1px;
  108. }
  109. #box a {
  110. display:block;
  111. border:1px solid #1A1A1A;
  112. color:#444;
  113. background:#0A0A0A;
  114. margin:3px 0px;
  115. padding:1px;
  116. text-align:center;
  117. text-transform:none!important;
  118. font-size:9px;
  119. letter-spacing: 1px;
  120. }
  121. #box a:hover {
  122. background: #1A1A1A;
  123. font-style:italic;
  124. }
  125.  
  126. /*** RIGHT COLUMN ***/
  127. h1 {
  128. font:20px coustard, rockwell, georgia, times new roman, serif;
  129. color:#666;
  130. text-align:left;
  131. border-bottom:1px dotted #DDD;
  132. }
  133.  
  134. i, em {
  135. font-family:times new roman, times, serif;
  136. letter-spacing:1px;
  137. color: #96b0b7;
  138. }
  139.  
  140. b, strong {
  141. color: #564f5b;
  142. }
  143.  
  144. u {
  145. color:#AAA;
  146. text-decoration:underline;
  147. border-bottom:1px solid #EEE;
  148. }
  149.  
  150. s {
  151. color:#000;
  152. text-decoration:line-through;
  153. }
  154. #text a:hover{
  155. border-bottom:1px dotted #444;
  156. }
  157.  
  158. /*** QUOTE ***/
  159. #quote {
  160. position:fixed;
  161. right:0px;
  162. bottom:5px;
  163. font:italic 50px/20px georgia, times new roman, serif;
  164. z-index:10;
  165. width:500px;
  166. text-align:right;
  167. }
  168. h3 {
  169. font:40px/20px coustard, rockwell, georgia, times new roman, serif;
  170. margin:0px;
  171. }
  172. #quote a{
  173. color:#000!important;
  174. }
  175. #quote a:hover {
  176. color:#d6b4c2!important;
  177. }
  178. </style></head>
  179. <body>
  180.  
  181. <div style="width:720px;margin:auto;"><table border="0" cellspacing="20" cellpadding="0" id="colm" width="720px"><tr><td id="content">
  182. <div id="data">
  183. <div id="box">
  184.  
  185. <!-- START LEFT COLUMN CONTENT -->
  186. <div style="text-align:center"><img src="http://i51.tinypic.com/fvy6o9.jpg" class="img"></div>
  187. <h2>basic info</h2>
  188. <p>
  189. <b>name:</b> Ans <br>
  190. <b>dob:</b> 1993/02/17 <br>
  191. <b>occupation:</b> movie-addict <br>
  192. </p>
  193. <p>
  194. <a href="">links</a>
  195. <a href="">links</a>
  196. <a href="">links</a>
  197. <a href="">links</a>
  198. <!-- END LEFT COLUMN CONTENT -->
  199.  
  200. </div>
  201. </div>
  202.  
  203. <div id="post">
  204. <div id="text">
  205. <!-- START RIGHT COLUMN CONTENT -->
  206. <h1>introduction</h1>
  207.  
  208. <p>I've roamed this world for 18 years and I currently reside in Vancouver, B.C., Canada. And in case you couldn't tell my gender from my weird and ambiguous name, I'm a female</p>
  209. <p>I am a pretty easy-going person who is quite random and weird and loves bright colours and many other things including jrock, contemporary world literature involving magical realism and girly, cute things.</p>
  210.  
  211. <h1>inventory of likes</h1>
  212.  
  213. <p><i>movies:</i> Battle Royale, Kokuhaku, Inception, Lord of the Rings, V for Vendetta, Pan's Labyrinth, The Matrix, Lord of the Rings, Harry Potter 1 and 2, Roman Holiday (and anything by Audrey Hepburn), Ocean's 11 to 13, Spirited Away (and most of Hayao Miyazaki Films), classic Disney, Amelie, and generally anything that is thriller, intellectual, fantasy or artistic.</p>
  214.  
  215. <p><i>music:</i> Led Zeppelin, Oberhofer, Yellow Ostrich, Incubus, Radiohead, Garbage, Metric, Cocorosie, Dir en Grey, Girugamesh, Plastic Tree, D'espairsRay, MERRY, The Lighthouse And The Whaler, Big Bang, Glen Check, Casker, SHINee, U-Kiss, MBLAQ, 2NE1, 4minute. <p>
  216.  
  217. <p><i>hobbies:</i> running, writing, reading comics and manga, literature, drawing, skiing, dancing, singing, daydreaming, shopping, traveling, hanging out with my friends, taking baths<br />
  218.  
  219. <p><i>books:</i> Battle Royale (Koushun Takami), Kafka on the Shore (Haruki Murakami), Lord of the Rings (JRR Tolkien), Alice's Adventures in Wonderland (Lewis Carrol), the Harry Potter series (JK Rowling), The Sailor who fell from Grace with the Sea (Yukio Mishima), Tithe (Holly Black), Le Petit Prince (Antoine de Saint-Exupery)</p>
  220.  
  221. <p><em>art: </em><a href="http://jamesjean.com/" target="_blank">James Jean</a>, <a href="http://kumaori.info/" target="_blank">Jun Kumaori</a>, <a href="http://www.fucoueda.com/" target="_blank">Fuco Ueda</a>, <a href="http://www.iklimt.com/" target="_blank">Gustav Kimlit</a> </p>
  222.  
  223. <p><i>manga:</i> Monster, Liar Game, Skip Beat, Hitman Reborn, D.Gray Man, Glass Mask, Angel Densetsu, GTO, Tokyo Crazy Paradise, Kuragehime, Basara, Dogs: Bullets and Carnage, Detective Conan, Karakuri Odetto, Kamisama Hajimemashita and more~ </p>
  224.  
  225. <!-- END RIGHT COLUMN CONTENT -->
  226. </div>
  227. </div>
  228. </td>
  229. </tr>
  230. <tr><td id="spacer"></td></tr>
  231. </table>
  232. </div>
  233. <div id="quote">
  234. <!-- START QUOTE -->
  235. <h3>and what the</h3>
  236. <a href="/">hell have I done?</a>
  237. <!-- END QUOTE -->
  238. </div>
  239. </body>
  240. </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!