API tools faq
paste
Advertisement
lovedbyliam

About Me Page: Sherbet

lovedbyliam
Feb 8th, 2014
2,242
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.77 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ABOUT ME PAGE: SHERBET
  4. by asschlin.tumblr.com
  5.  
  6. ::DON'T REDISTRIBUTE
  7. ::DON'T USE AS BASE
  8. ::DON'T REMOVE CREDIT
  9.  
  10. Contact me if there are any problems with the page.
  11.  
  12. -->
  13.  
  14.  
  15. <html>
  16. <head>
  17.  
  18. <title>{Title}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  21.  
  22. <link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
  23.  
  24.  
  25.  
  26.  
  27. <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600' rel='stylesheet' type='text/css'>
  28.  
  29.  
  30. </head>
  31. <style type="text/css">
  32.  
  33.  
  34.  
  35. body {
  36. background-color:#ffffff;
  37. color:#777777;}
  38.  
  39. a { text-decoration:none; color:{color:link}; font-size:9px;}
  40. a:hover { text-decoration:underline; color:{color:hover}; }
  41.  
  42. b, strong {color:#ea8f47;}
  43. i, em {color:#f9408a;}
  44. u {color:#47c2ea;}
  45. small {font-size:9px;}
  46. big {font-size:12px;color:#a2b334;}
  47.  
  48.  
  49. #content {
  50. width:840px;
  51. font-family:arial;
  52. font-size:9px;
  53. line-height:100%;
  54. margin:90px auto; }
  55.  
  56. #side {
  57. padding:30px;
  58. height:400px;
  59. overflow:auto;
  60. width:280px;
  61. background-color:#eeeeee;
  62. border-bottom:20px solid #e5e5e5;
  63. display:inline-block; }
  64.  
  65. #about {
  66. padding:30px;
  67. position:fixed;
  68. overflow:hidden;
  69. height:400px;
  70. display:inline-block;
  71. width:440px;
  72. border-bottom:20px solid #e5e5e5;
  73. background-color:#eeeeee;
  74. text-align:justify;}
  75.  
  76. .image {
  77. text-align:left;
  78. width:48px;}
  79.  
  80. .image img {
  81. width:48px;
  82. float:left;
  83. margin-top:-2px;
  84. margin-left:-5px;
  85. padding:2px 5px 2px 5px;
  86. border-radius:97%;}
  87.  
  88. .image2 {
  89. text-align:right;
  90. width:48px;}
  91.  
  92. .image2 img {
  93. width:48px;
  94. float:right;
  95. margin-top:-2px;
  96. margin-right:-5px;
  97. padding:2px 5px 2px 5px;
  98. border-radius:97%;}
  99.  
  100.  
  101. .navigation {
  102. text-align:center;
  103. width:280px;
  104. margin-left:0px;
  105. padding-bottom:2px;
  106. -webkit-transition: all 0.7s ease-in-out;
  107. -moz-transition: all 0.7s ease-in-out;
  108. -o-transition: all 0.7s ease-in-out;
  109. transition: all 0.7s ease-in-out;}
  110.  
  111. .navigation a {
  112. text-align:center;
  113. display:inline-block;
  114. width:57px;
  115. padding:4px;
  116. font-family:calibri;
  117. color:#777;
  118. font-size:8px;
  119. text-transform:uppercase;
  120. background:#f6f6f6;
  121. -webkit-transition: all 0.4s ease-in-out;
  122. -moz-transition: all 0.4s ease-in-out;
  123. -o-transition: all 0.4s ease-in-out;
  124. transition: all 0.4s ease-in-out;}
  125.  
  126.  
  127. .links {
  128. text-align:center;
  129. width:275px;
  130. margin-left:0px;
  131. margin-top:20px;}
  132.  
  133. .links a{
  134. text-align:left;
  135. display:inline-block;
  136. padding:5px;
  137. padding-left:10px;
  138. width:justify;
  139. font-family:calibri;
  140. color:#777;
  141. width:55px;
  142. font-size:8px;
  143. border-left:4px solid #ddd;
  144. text-transform:uppercase;
  145. margin-bottom:10px;
  146. margin-right:5px;
  147. -webkit-transition: all 0.4s ease-in-out;
  148. -moz-transition: all 0.4s ease-in-out;
  149. -o-transition: all 0.4s ease-in-out;
  150. transition: all 0.4s ease-in-out;}
  151.  
  152. .links a.hover1:hover {color:#ea8f48;border-left:4px solid #ea8f48;}
  153. .links a.hover2:hover {color:#47c1ea;border-left:4px solid #47c1ea;}
  154. .links a.hover3:hover {color:#f93887;border-left:4px solid #f93887;}
  155.  
  156.  
  157. /* SCROLLBAR */
  158.  
  159. ::-webkit-scrollbar-thumb:vertical {
  160. background-color:#47c2ea;
  161. height:auto;}
  162. ::-webkit-scrollbar-thumb:vertical:hover{
  163. background-color:#b9ca61;}
  164. ::-webkit-scrollbar-thumb:horizontal{
  165. background-color:#eee;
  166. height:auto;}
  167. ::-webkit-scrollbar-thumb:horizontal:hover{
  168. background-color:#fff;}
  169. ::-webkit-scrollbar{
  170. height:10px;
  171. width:7px;
  172. }
  173.  
  174. .oneheader{
  175. font-family: 'Merriweather Sans', sans-serif;
  176. font-weight:normal;
  177. letter-spacing:1px;
  178. font-size:11px;
  179. display:block;
  180. background-color:#e5e5e5;
  181. text-transform:uppercase;
  182. color:#ffffff;
  183. text-align:left;
  184. padding:5px;
  185. margin:0;
  186. border-bottom-width:2px;
  187. border-bottom-style:solid;}
  188.  
  189. .twoheader{
  190. font-family: 'Merriweather Sans', sans-serif;
  191. font-weight:normal;
  192. letter-spacing:1px;
  193. font-size:11px;
  194. display:block;
  195. background-color:#e5e5e5;
  196. text-transform:uppercase;
  197. color:#ffffff;
  198. text-align:center;
  199. padding:5px;
  200. margin:0;
  201. border-bottom-width:2px;
  202. border-bottom-style:solid;}
  203.  
  204. .threeheader{
  205. font-family: 'Merriweather Sans', sans-serif;
  206. font-weight:normal;
  207. letter-spacing:1px;
  208. font-size:11px;
  209. display:block;
  210. background-color:#e5e5e5;
  211. text-transform:uppercase;
  212. color:#ffffff;
  213. text-align:right;
  214. padding:5px;
  215. margin:0;
  216. border-bottom-width:2px;
  217. border-bottom-style:solid;}
  218.  
  219.  
  220. .oneheader{border-bottom-color:#47c2ea; color:#47c2ea;}
  221. .twoheader{border-bottom-color:#e99149; color:#e99149;}
  222. .threeheader{border-bottom-color:#f93887; color:#f93887;}
  223.  
  224. .blurb { 
  225. padding:10px 0px;
  226. margin:10px 0;
  227. line-height:120%; }
  228.  
  229. .back {
  230. letter-spacing:1px;
  231. font-family:arial;
  232. font-size:10px;
  233. text-transform:uppercase;
  234. font-weight:bold;
  235. }
  236.  
  237. .category
  238. {text-transform:uppercase;
  239. font-family:consolas;
  240. letter-spacing:1px;
  241. color:#555;
  242. padding-left:5px;
  243. border-left: solid 10px;}
  244. #name{color:#47c2ea;}
  245. #age{color:#e99149;}
  246. #location{color:#f93887;}
  247. #status{color:#47c2ea;}
  248. #quote{color:#e99149;}
  249.  
  250. /* CREDIT */
  251.  
  252. .cred { font-family:calibri; letter-spacing:1px; font-size:9px; bottom:0px; right:4px; position:fixed; padding:10px; text-align:right; font-weight:bold; }
  253.  
  254. </style>
  255.  
  256.  
  257. <body>
  258. <div class="cred"><a href="http://keciasthemes.tumblr.com">★</a></div>
  259.  
  260. <div id="content">
  261.  
  262. <div id="side">
  263. <!-- SIDE BLURB ONE BEGINS HERE -->
  264. <div class="navigation">
  265. <a href="/">home</a>
  266. <a href="/ask">message</a>
  267. <a href="/tags">more tags</a>
  268. <a href="/blogroll">blogroll</a></div><br>
  269.  
  270.  
  271. <div class="oneheader">quick stats</div>
  272.  
  273. <div class="blurb">
  274.  
  275. <div class="infos"><span class="category" id="name">Name:</span> TYPE genre HERE</div>
  276. <div class="infos"><span class="category" id="age">AGE:</span> TYPE year HERE</div>
  277. <div class="infos"><span class="category" id="location">LOCATION:</span> MERICA</div>
  278. <div class="infos"><span class="category" id="status">STATUS:</span> Single</div>
  279. <div class="infos"><span class="category" id="quote">QUOTE:</span> Stick my dick in they mouth, so I guess it's fuck what they say.</div>
  280.  
  281. </div><br><br>
  282.  
  283. <!-- SIDE BLURB ONE ENDS HERE -->
  284.  
  285.  
  286. <!-- SIDE BLURB TWO BEGINS HERE -->
  287.  
  288. <div class="twoheader">about me</div>
  289. <div class="blurb">
  290. <center>normal, <b>bold</b>, <i>italic</i>, <u>underline</u>, <small>small</small>, <big>big</big></center>
  291. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  292.  
  293. </div><br><br>
  294.  
  295. <!-- SIDE BLURB TWO ENDS HERE -->
  296.  
  297.  
  298. <!-- SIDE BLURB THREE BEGINS HERE -->
  299.  
  300. <div class="threeheader">navigation / tags</div>
  301. <div class="links">
  302. <a href="URL HERE" class="hover1">LINK HERE</a>
  303. <a href="URL HERE" class="hover2">LINK HERE</a>
  304. <a href="URL HERE" class="hover3">LINK HERE</a>
  305. <a href="URL HERE" class="hover1">LINK HERE</a>
  306. <a href="URL HERE" class="hover2">LINK HERE</a>
  307. <a href="URL HERE" class="hover3">LINK HERE</a>
  308. <a href="URL HERE" class="hover1">LINK HERE</a>
  309. <a href="URL HERE" class="hover2">LINK HERE</a>
  310. <a href="URL HERE" class="hover3">LINK HERE</a>
  311. </div>
  312.  
  313. <!-- SIDE BLURB THREE ENDS HERE -->
  314.  
  315.  
  316. </div>
  317.  
  318.  
  319.  
  320.  
  321.  
  322.  
  323. <div id="about">
  324.  
  325. <!-- BLURB ONE BEGINS HERE -->
  326.  
  327.  
  328. <div class="oneheader">header</div>
  329. <div class="blurb">
  330. <span class="image"><img src="https://31.media.tumblr.com/cb944c8abd8e820a70399a8c934ba574/tumblr_inline_n0he3ic9as1rhm23e.png"></span>
  331. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  332.  
  333. </div>
  334. <br><br>
  335.  
  336. <!-- BLURB ONE ENDS HERE -->
  337.  
  338.  
  339.  
  340.  
  341.  
  342. <!-- BLURB TWO BEGINS HERE -->
  343.  
  344.  
  345. <div class="twoheader">header</div>
  346. <div class="blurb">
  347. <span class="image2"><img src="https://31.media.tumblr.com/bf1bdd69dda07b4755fbae131726abe5/tumblr_inline_n0hdm2vKTx1rhm23e.png"></span>
  348. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  349.  
  350. </div>
  351. <br><br>
  352.  
  353.  
  354. <!-- BLURB TWO ENDS HERE -->
  355.  
  356.  
  357.  
  358.  
  359.  
  360. <!-- BLURB THREE BEGINS HERE -->
  361.  
  362.  
  363. <div class="threeheader">header</div>
  364. <div class="blurb">
  365. <span class="image"><img src="https://31.media.tumblr.com/7d47f596616b2dba4974b697c4a4fe4c/tumblr_inline_n0hdsrdWAF1rhm23e.png"></span>
  366. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  367.  
  368. </div>
  369.  
  370.  
  371. <!-- BLURB THREE ENDS HERE -->
  372.  
  373.  
  374.  
  375. </div>
  376. </div>
  377.  
  378. </body>
  379. </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!