Advertisement
oodly

About Page #1

Jul 22nd, 2014
3,698
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.33 KB | None | 0 0
  1. <html>
  2. <!-- DO NOT REMOVE
  3. about me page by cat/oodly.tumblr.com
  4. do not remove credit, copy, distribute, or claim as your own. -->
  5.  
  6. <head>
  7. <title>{Title}</title>
  8. <style type="text/css">
  9. /* --- BASIC CODE --- */
  10. body {
  11. background-color:#ffffff;
  12. color:#000000;
  13. font-family:georgia;
  14. font-size:10px;
  15. margin:0px;
  16. }
  17.  
  18. b {
  19. font-family:helvetica;
  20. font-size:10px;
  21. color:#e84c5a;
  22. text-transform:uppercase;
  23. letter-spacing:1px;
  24. font-weight:300px;
  25. opacity:0.7;
  26. }
  27.  
  28. i {
  29. font-family:georgia;
  30. font-size:9px;
  31. color:#61C9DE;
  32. text-transform:none;
  33. opacity:0.9;
  34. }
  35.  
  36. f {
  37. font-family:helvetica;
  38. font-size:9px;
  39. color:#AE61DE;
  40. text-transform:none;
  41. letter-spacing:1px;
  42. font-weight:200px;
  43. opacity:0.8;
  44. }
  45.  
  46. a:link, a:active, a:visited {
  47. color:#f5f5f5;
  48. font-size:9px;
  49. font-family:georgia;
  50. text-decoration:none;
  51. }
  52.  
  53. a:hover {
  54. color:#f7f7f7;
  55. font-size:9px;
  56. font-family:georgia;
  57. }
  58.  
  59. /* --- NAV --- */
  60.  
  61. .nav a:link { display:block; width:116px; color:#b8b8b8; font-size:9px; font-family:georgia; text-align:center; }
  62.  
  63. .nav a:visited { display:block; width:116px; color:#b8b8b8; font-size:9px; font-family:georgia; text-align:center; }
  64.  
  65. .nav a:hover { display:block; width:116px; background-color:#71af8a; color:#000000; font-size:9px; font-family:georgia; text-align:center; }
  66.  
  67. .nav2 a:link { display:block; width:116px; color:#b8b8b8; font-size:9px; font-family:georgia; text-align:center; }
  68.  
  69. .nav2 a:visited { display:block; width:116px; color:#b8b8b8; font-size:9px; font-family:georgia; text-align:center; }
  70.  
  71. .nav2 a:hover { display:block; width:116px; background-color:#e898a1; color:#000000; font-size:9px; font-family:georgia; text-align:center; }
  72.  
  73. .nav3 a:link { display:block; width:116px; color:#b8b8b8; font-size:9px; font-family:georgia; text-align:center; }
  74.  
  75. .nav3 a:visited { display:block; width:116px; color:#b8b8b8; font-size:9px; font-family:georgia; text-align:center; }
  76.  
  77. .nav3 a:hover { display:block; width:116px; background-color:#7cc0cb; color:#000000; font-size:9px; font-family:georgia; text-align:center; }
  78.  
  79. .navi a:link { display:block; width:116px; color:#b8b8b8; font-size:9px; font-family:georgia; text-align:center; }
  80.  
  81. .navi a:visited { display:block; width:116px; color:#b8b8b8; font-size:9px; font-family:georgia; text-align:center; }
  82.  
  83. .navi a.hover1:hover { display:block; color:#000000; background-color:#71af8a;}
  84. .navi a.hover2:hover {display:block; color:#000000; background-color:#e898a1;}
  85. .navi a.hover3:hover {display:block; color:#000000; background-color:#7cc0cb;}
  86.  
  87. /* --- TITLES --- */
  88.  
  89. .stitle {
  90. background-color:#fafafa;
  91. color:#acacac;
  92. font-family:georgia;
  93. font-size:12px;
  94. font-style:italic;
  95. font-weight:normal;
  96. text-align:center;
  97. padding:3px;
  98. border-bottom:1px solid #e84c5a;
  99. width:110px;
  100. }
  101.  
  102. .title {
  103. background-color:#fafafa;
  104. color:#acacac;
  105. font-family:georgia;
  106. font-size:13px;
  107. font-style:italic;
  108. font-weight:normal;
  109. text-align:left;
  110. padding:4px;
  111. border-bottom:1px solid #71af8a;
  112. width:100%;
  113. }
  114.  
  115. .title2 {
  116. background-color:#fafafa;
  117. color:#acacac;
  118. font-family:georgia;
  119. font-size:13px;
  120. font-style:italic;
  121. font-weight:normal;
  122. text-align:right;
  123. padding:4px;
  124. border-bottom:1px solid #e898a1;
  125. width:100%;
  126. }
  127.  
  128. .title3 {
  129. background-color:#fafafa;
  130. color:#acacac;
  131. font-family:georgia;
  132. font-size:13px;
  133. font-style:italic;
  134. font-weight:normal;
  135. text-align:left;
  136. padding:4px;
  137. border-bottom:1px solid #7cc0cb;
  138. width:100%;
  139. }
  140.  
  141. /* --- COLUMN 1 --- */
  142.  
  143. #sidebar {
  144. overflow:hidden;
  145. background-color:#ffffff;
  146. width:150px;
  147. height:100%;
  148. position:fixed;
  149. color:#b8b8b8;
  150. text-align:left;
  151. top:0px; left:200px;
  152. padding:7px;
  153. border-right:1px solid #eeeeee;
  154. }
  155.  
  156. #sbimg img {
  157. margin-top:100px;
  158. max-width:106px;
  159. text-align:center;
  160. border:#fafafa 5px solid;
  161. opacity:0.7;
  162. }
  163.  
  164. .text {
  165. padding-top:4px;
  166. }
  167.  
  168. /* --- COLUMN 2 --- */
  169. #box1 {
  170. overflow:hidden;
  171. background-color:#ffffff;
  172. width:500px;
  173. position:absolute;
  174. color:#b8b8b8;
  175. text-align:left;
  176. top:100px; left:390px;
  177. padding:7px;
  178. }
  179.  
  180. .icon img {
  181. float:left;
  182. width:50px;
  183. height:50px;
  184. border-radius:50px;
  185. padding:7px;
  186. opacity:0.7;
  187. }
  188.  
  189. .icon2 img {
  190. float:right;
  191. width:50px;
  192. height:50px;
  193. border-radius:50px;
  194. padding:7px;
  195. opacity:0.7;
  196. }
  197.  
  198. </style>
  199. </head>
  200. <body>
  201. <div id="sidebar">
  202. <div id="sbimg"><img src="http://i.imgur.com/Fvxm194.jpg" /></div><br>
  203. <div id="sb">
  204. <div class="stitle">about me</div>
  205. <div class="text">
  206. <b>Name:</b> Name<br>
  207. <b>Age:</b> Age<br>
  208. <b>Location:</b> Location<br>
  209. <b>Status:</b> Status</div>
  210. <p></p>
  211. <div class="stitle">links</div>
  212. <div class="text">
  213. <div class="navi">
  214. <a href="YOUR LINK HERE" class="hover1">link 1</a>
  215. <a href="YOUR LINK HERE" class="hover2">link 2</a>
  216. <a href="YOUR LINK HERE" class="hover3">link 3</a>
  217. </div></div>
  218. <p></p>
  219. <div class="stitle">navigate</div>
  220. <div class="text">
  221. <div class="nav"><a href="http://tumblr.com">dashboard</a></div>
  222. <div class="nav2"><a href="http://oodly.tumblr.com">main blog</a></div>
  223. <div class="nav3"><a href="http://oodly.tumblr.com">credits</a></div>
  224. </div>
  225. </div></div>
  226.  
  227. <div id="box1">
  228. <div class="title">title here</div><br>
  229. <div class="icon"><img src="http://i.imgur.com/TfX1ysC.jpg"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla ipsum ut est scelerisque, ut eleifend neque commodo. Suspendisse neque nisi, egestas quis posuere nec, blandit at nibh. Curabitur adipiscing porta dui. Ut mollis dui a nunc varius, sit amet vulputate felis vestibulum. Vivamus ut est vel urna sollicitudin mollis suscipit sed risus. Nulla rhoncus elit mauris, id posuere orci hendrerit at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ut ipsum ante. Donec porta sed velit ut pharetra. Suspendisse potenti. Vestibulum eget turpis eget nulla ultricies accumsan. Vestibulum nec nisl posuere, condimentum arcu non, sagittis felis. Donec at fringilla augue. Fusce sit amet odio ac mi interdum fermentum sit amet nec mi. Pellentesque consectetur sem nec magna congue pharetra.<p></p>
  230.  
  231.  
  232. <div class="title2">title here</div><br>
  233. <div class="icon2"><img src="http://i.imgur.com/zd6GB8N.jpg"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla ipsum ut est scelerisque, ut eleifend neque commodo. Suspendisse neque nisi, egestas quis posuere nec, blandit at nibh. Curabitur adipiscing porta dui. Ut mollis dui a nunc varius, sit amet vulputate felis vestibulum. Vivamus ut est vel urna sollicitudin mollis suscipit sed risus. Nulla rhoncus elit mauris, id posuere orci hendrerit at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ut ipsum ante. Donec porta sed velit ut pharetra. Suspendisse potenti. Vestibulum eget turpis eget nulla ultricies accumsan. Vestibulum nec nisl posuere, condimentum arcu non, sagittis felis. Donec at fringilla augue. Fusce sit amet odio ac mi interdum fermentum sit amet nec mi. Pellentesque consectetur sem nec magna congue pharetra.<p></p>
  234.  
  235. <div class="title3">title here</div><br>
  236. <div class="icon"><img src="http://i.imgur.com/U0YpR96.jpg"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla ipsum ut est scelerisque, ut eleifend neque commodo. Suspendisse neque nisi, egestas quis posuere nec, blandit at nibh. Curabitur adipiscing porta dui. Ut mollis dui a nunc varius, sit amet vulputate felis vestibulum. Vivamus ut est vel urna sollicitudin mollis suscipit sed risus. Nulla rhoncus elit mauris, id posuere orci hendrerit at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ut ipsum ante. Donec porta sed velit ut pharetra. Suspendisse potenti. Vestibulum eget turpis eget nulla ultricies accumsan. Vestibulum nec nisl posuere, condimentum arcu non, sagittis felis. Donec at fringilla augue. Fusce sit amet odio ac mi interdum fermentum sit amet nec mi. Pellentesque consectetur sem nec magna congue pharetra.<p></p>
  237. </div>
  238. </body>
  239. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement