API tools faq
paste
codesbyraven

fruit snacks | light

codesbyraven
Mar 12th, 2016
10,449
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.53 KB | None | 0 0
raw download clone embed print report
  1. <!--- page by hailthehelpful. please don't use this as a base, redistribute...just don't steal it in general. use common sense. thanks!-->
  2.  
  3. <!DOCTYPE html>
  4. <head>
  5. <title>{Title}</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8.  
  9. <!--fontawesome-->
  10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  11.  
  12.  
  13. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  14.  
  15.  
  16. <style type="text/css">
  17.  
  18. ::-webkit-scrollbar {
  19. width: 5px;
  20. border: 2px solid #f5f5f5;
  21. background-color: #acacac;
  22. }
  23.  
  24. ::-webkit-scrollbar-thumb {
  25. border-radius: 6px;
  26. background-color: #acacac;
  27. }
  28.  
  29. ::-webkit-scrollbar:horizontal {
  30. height: 5px;
  31. }
  32.  
  33. ::selection {
  34. background: gray;
  35. color: #fff;
  36. }
  37.  
  38. ::-moz-selection {
  39. background: gray;
  40. color: #fff;
  41. }
  42.  
  43. ::-webkit-selection {
  44. background: gray;
  45. color: #fff;
  46. }
  47.  
  48. a {
  49. text-decoration: none;
  50. }
  51.  
  52. body {
  53. margin: 0;
  54. padding: 0;
  55. background-color: #f5f5f5;
  56. background-image: url(http://i.imgur.com/cs2GcG5.jpg);
  57. background-attachment: fixed;
  58. background-position: center;
  59. -webkit-background-size: cover;
  60. -moz-background-size: cover;
  61. -o-background-size: cover;
  62. background-size: cover;
  63. background-repeat: no-repeat;
  64. color: #777;
  65. font-size: 10px;
  66. font-family: arial,helvetica,sans-serif;
  67. }
  68.  
  69.  
  70.  
  71. b,i, #info ul {
  72. color: #A3C5A3; /*accent color*/
  73. }
  74.  
  75. a {
  76. color: #aaa; /*link color*/
  77. }
  78.  
  79. #title {
  80. position: absolute;
  81. right: 0;
  82. bottom: 0;
  83. margin: 0;
  84. padding: 20px;
  85. color: #fff;
  86. text-align: center;
  87. font-weight: bold;
  88. font-style: italic;
  89. font-size: 40px;
  90. line-height: 100%;
  91. }
  92.  
  93. h2 {
  94. margin:0;
  95. padding: 0;
  96. text-align: left;
  97. letter-spacing: 1px;
  98. font-style:italic;
  99. font-size: 12px;
  100. }
  101.  
  102. h3 {
  103. margin-top: 0;
  104. padding: 15px;
  105. background: #0f0f0f;
  106. color: #fff;
  107. font-weight: bold;
  108. font-style: italic;
  109. font-size: 18px;
  110. line-height: 100%;
  111. }
  112.  
  113.  
  114. #sidebar {
  115. position: fixed;
  116. top: 0;
  117. overflow: hidden;
  118. margin: 30px;
  119. margin-top: 40px;
  120. margin-left: 145px;
  121. padding: 20px;
  122. width: 330px;
  123. }
  124.  
  125.  
  126. #sidebar, #statsbox, .stats i, .stats span{
  127. background-color: #fff; /*sidebar color*/
  128. }
  129.  
  130. #statsbox::-webkit-scrollbar, #statsbox::-webkit-scrollbar-thumb {
  131. border-color:#fff!important; /*sidebar color*/
  132. }
  133.  
  134. #sidebar b {
  135. font-weight: 400;
  136. }
  137.  
  138. /*playlist css--------------------------------------------------*/
  139.  
  140. #music {
  141. position: relative;
  142. width: 330px;
  143. background: #fff;
  144. background-image: url(http://i.imgur.com/u5SPNNZ.png);
  145. background-size: cover;
  146. }
  147.  
  148. #playlist:hover {
  149. opacity: 1;
  150. }
  151.  
  152. #playlist {
  153. padding: 20px;
  154. padding-bottom: 30px;
  155. width: 290px;
  156. height: 100%;
  157. background: rgba(0,0,0,0.7);
  158. color:#fff;
  159. text-align:right;
  160. font-style:italic;
  161. opacity: 0;
  162. -webkit-transition: all .4s ease-in-out;
  163. -moz-transition: all .4s ease-in-out;
  164. -ms-transition: all .4s ease-in-out;
  165. -o-transition: all .4s ease-in-out;
  166. transition: all .4s ease-in-out;
  167. }
  168.  
  169.  
  170. #musicplayer {
  171. position: absolute;
  172. bottom: 15px;
  173. left:15px;
  174. overflow: hidden;
  175. width: 60px;
  176. height: 25px;
  177. }
  178.  
  179. #musicgif {
  180. display: inline-block;
  181. overflow: hidden;
  182. padding: 5px;
  183. width: 8px;
  184. height: 8px;
  185. border-radius: 50%;
  186. background: rgba(0,0,0,.1);
  187. }
  188.  
  189. #musicgif img {
  190. margin-bottom: 5px;
  191. width: 7px;
  192. }
  193.  
  194. #musicmargin {
  195. display: inline-block;
  196. overflow: hidden;
  197. width: 31px;
  198. height: 24px;
  199. }
  200.  
  201. #musicbutton {
  202. margin-top: 5px;
  203. margin-left: -20px;
  204. }
  205.  
  206.  
  207. /*header css--------------------------------------------------*/
  208.  
  209. #header {
  210. position: relative;
  211. margin-top: -30px;
  212. margin-left: -30px;
  213. width: 560px;
  214. }
  215.  
  216. #header img {
  217. width: 100%;
  218. }
  219.  
  220. /*bio css------------------------------------------------------*/
  221.  
  222. #bio {
  223. position: absolute;
  224. left: 550px;
  225. margin: 40px 0;
  226. padding: 30px;
  227. width: 500px;
  228. background-color: #fff;
  229. box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
  230. text-align: justify;
  231. line-height: 150%;
  232. }
  233.  
  234. #bio p {
  235. padding: 5px 15px;
  236. }
  237.  
  238. #bio h2 {
  239. padding:10px;
  240. text-align: center;
  241. }
  242.  
  243.  
  244. /*stats css--------------------------------------------------*/
  245.  
  246.  
  247. #statsbox {
  248. overflow: auto;
  249. margin: 15px 0;
  250. padding: 10px;
  251. width: 320px;
  252. height: 280px;
  253. text-transform: lowercase;
  254. }
  255.  
  256. #statsbox::-webkit-scrollbar {
  257. width: 13px;
  258. border-top: 10px solid;
  259. border-right: 6px solid;
  260. border-bottom: 10px solid;
  261. border-left: 6px solid;
  262. }
  263.  
  264. #statsbox::-webkit-scrollbar-thumb {
  265. border: 5px solid;
  266. border-radius: 7px;
  267. }
  268.  
  269. .stats {
  270. margin-bottom: 20px;
  271. list-style: none;
  272. }
  273.  
  274. ul.stats {
  275. -webkit-padding-start: 0;
  276. }
  277.  
  278. .stats li {
  279. overflow: hidden;
  280. padding-bottom: 2px;
  281. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAJCAYAAAAYcf3nAAAAGUlEQVQIW2NkgAJGrIz/DAwMjNilwOoxpQAz4gEKEJaG1wAAAABJRU5ErkJggg==) repeat-x bottom left;
  282. line-height: 100%;
  283. }
  284.  
  285.  
  286. .stats span, .stats i {
  287. position: relative;
  288. bottom: -4px;
  289. display: inline-block;
  290. }
  291.  
  292.  
  293. .stats span {
  294. float: left;
  295. padding: 0 2px 3px 0;
  296. font-style: italic;
  297. }
  298.  
  299. .stats i {
  300. float: right;
  301. padding: 0 0 3px 2px;
  302. }
  303.  
  304.  
  305.  
  306. #links {
  307. padding: 15px;
  308. background: #000;
  309. text-align: center;
  310. }
  311.  
  312. #links a {
  313. color: #fff;
  314. font-style: italic;
  315. }
  316.  
  317. iframe {display:none}
  318.  
  319. .tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop {display:none}
  320.  
  321. #credit{line-height:100%; border-radius:50%;position:fixed;bottom:10px;right:10px;color:#fff;background:rgba(0,0,0,.2);padding:5px;width:10px;height:10px;overflow:hidden;font-size:10px;font-weight:100;white-space:nowrap;-moz-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-webkit-transition:all .6s ease-in-out;transition:all .6s ease-in-out}#credit:hover{background:#000;width:80px;border-radius:15px}#credit:before{font-size:10px;content:'\f292';font-family:FontAwesome;padding-right:5px;
  322. }
  323. </style></head>
  324.  
  325. <body>
  326.  
  327. <!-----------------------------BEGIN SIDEBAR----------------------------->
  328.  
  329. <div id="sidebar">
  330.  
  331. <div id="music">
  332. <div id="playlist">
  333. fruit snacks & cups of patron - kyle <br>
  334. miley cyrus - 2am club<br>
  335. 1 of those weaks - the nbhd<br>
  336. #stupidfacedd - wallpaper.<br>
  337. wanna be cool - donnie trumpet & the social experiment<br>
  338. guilty pleasure - bryce vine<br>
  339. no exit - childish gambino<br>
  340. girls girls girls - kyle<br>
  341. </div>
  342.  
  343.  
  344. <!--music player------------------------------------------------->
  345.  
  346. <div id="musicplayer">
  347. <div id="musicgif"><img src="http://55.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif"></div>
  348. <div id="musicmargin">
  349. <div id="musicbutton">
  350. <embed src="http://www.sheepproductions.com/billy/billy.swf?
  351. autoplay=false&f0=http://www.dropbox.com/yoursong1.mp3
  352. &t0=SongTitle1&f1=http://www.dropbox.com/yoursong2.mp3
  353. &t1=SongTitle2&f2=http://www.dropbox.com/yoursong3.mp3
  354. &t2=SongTitle3&f3=http://www.dropbox.com/yoursong4.mp3
  355. &t3=SongTitle4&f4=http://www.dropbox.com/yoursong5.mp3
  356. &t4=SongTitle5&f5=http://www.dropbox.com/yoursong6.mp3
  357. &t5=SongTitle6&f6=http://www.dropbox.com/yoursong7.mp3
  358. &t6=SongTitle7&f7=http://www.dropbox.com/yoursong8.mp3
  359. &t7=SongTitle8&f8=http://www.dropbox.com/yoursong9.mp3
  360. &t8=SongTitle9&f9=http://www.dropbox.com/yoursong10.mp3
  361. &t9=SongTitle10&total=10"
  362. quality="high" wmode="transparent"
  363. width="200" height="10" name="billy" align="middle"
  364. type="application/x-shockwave-flash" />
  365.  
  366. </div>
  367. </div>
  368. </div>
  369. </div>
  370.  
  371. <!--stats------------------------------------------------------->
  372.  
  373.  
  374. <div id="statsbox">
  375. <h2>GENERAL INFORMATION.</h2>
  376. <ul class="stats">
  377. <li><span>Full Name</span> <i>CHARACTER NAME</i></li>
  378. <li><span>Alias</span> <i>ALIAS</i></li>
  379. <li><span>Age</span> <i>AGE</i></li>
  380. <li><span>Date of Birth</span> <i>MONTH 00, 1900</i></li>
  381. <li><span>Place of Birth</span> <i>ANYWHERE, USA</i></li>
  382. <li><span>Zodiac</span> <i>ZODIAC</i></li>
  383. <li><span>Gender</span> <i>GENDER</i></li>
  384. <li><span>Nationality</span> <i>NATIONALITY</i></li>
  385. <li><span>Religion</span> <i>RELIGION</i></li>
  386. <li><span>Orientation</span> <i>ORIENTATION</i></li>
  387. <li><span>Relationship Status</span> <i>STATUS</i></li>
  388. </ul>
  389. <h2>PHYSICAL ATTRIBUTES.</h2>
  390. <ul class="stats">
  391. <li><span>face claim</span> <i>FACE CLAIM</i></li>
  392. <li><span>height</span> <i>0'00</i></li>
  393. <li><span>weight</span> <i>000 LBS</i></li>
  394. <li><span>hair color</span> <i>HAIR COLOR</i></li>
  395. <li><span>eye color</span> <i>EYE COLOR</i></li>
  396. <li><span>voice claim</span> <i>VOICE CLAIM</i></li>
  397. <li><span>tattoos</span> <i>TATTOOS</i></li>
  398. <li><span>distinguishing marks</span> <i>DISTINGISHING MARKS</i></li>
  399. <li><span>outfit/clothing style</span> <i>STYLE</i></li>
  400. </ul>
  401. <h2>BACKGROUND INFORMATION.</h2>
  402. <ul class="stats">
  403. <li><span>hometown</span> <i>hometown</i></li>
  404. <li><span>current residence</span> <i>current residence</i></li>
  405. <li><span>past residences</span> <i>past residences</i></li>
  406. <li><span>spoken languages</span> <i>spoken languages</i></li>
  407. <li><span>financial status</span> <i>financial status</i></li>
  408. <li><span>education level</span> <i>education level</i></li>
  409. <li><span>occupation</span> <i>occupation</i></li>
  410. </ul>
  411. <h2>FAMILIAL INFORMATION.</h2>
  412. <ul class="stats">
  413. <li><span>mother</span> <i>character name</i></li>
  414. <li><span>father</span> <i>character name</i></li>
  415. <li><span>siblings</span> <i>character name</i></li>
  416. <li><span>children</span> <i>character name</i></li>
  417. </ul>
  418. <h2>PERSONALITY.</h2>
  419. <ul class="stats">
  420. <li><span>positive traits</span> <i>one, two, three</i></li>
  421. <li><span>negative traits</span> <i>one, two, three</i></li>
  422. <li><span>likes</span> <i>one, two, three</i></li>
  423. <li><span>dislikes</span> <i>one, two, three</i></li>
  424. <li><span>moral alignment</span> <i>moral alignment</i></li>
  425. <li><span>mbti</span> <i>xxxx</i></li>
  426. <li><span>enneagram</span> <i>type x: enneagram</i></li>
  427. <li><span>temperament</span> <i>temperament</i></li>
  428. </ul>
  429. </div>
  430.  
  431. <!--links------------------------------------------------------->
  432.  
  433. <div id="links">
  434. <a href="/tagged/">pics</a> /
  435. <a href="/tagged/">music</a> /
  436. <a href="/tagged/">aesthetic</a> /
  437. <a href="/tagged/">isms</a><br>
  438. <a href="/tagged/">tasks</a> /
  439. <a href="/tagged/">headcanons</a> /
  440. <a href="/tagged/">self-paras</a><br>
  441. <a href="/tagged/">schedule</a> /
  442. <a href="/">connections</a>
  443. </div>
  444.  
  445. </div>
  446. <!-----------------------------END SIDEBAR----------------------------->
  447.  
  448.  
  449. <div id="bio">
  450.  
  451. <div id="header">
  452. <div id="title"> cool title</div>
  453. <img src="http://i.imgur.com/aVJ5439.png">
  454. </div>
  455. <h2>age / species / mbti / moral alignment</h2>
  456.  
  457.  
  458. <h3>BIOGRAPHY.</h3>
  459.  
  460.  
  461. <p>Lumbersexual wayfarers normcore DIY, sint labore art party migas culpa dolore man braid. Letterpress YOLO skateboard disrupt knausgaard meggings. Blue bottle four dollar toast disrupt accusamus asymmetrical. Kale chips pork belly ugh, sapiente health goth dreamcatcher keffiyeh selvage craft beer viral etsy fashion axe esse gentrify taxidermy. Bushwick culpa chicharrones gastropub pickled incididunt. Cold-pressed affogato keytar tousled, nulla forage neutra deserunt dolore irony lumbersexual food truck man braid minim. XOXO seitan messenger bag pour-over man bun aute.</p>
  462.  
  463.  
  464. <p>Direct trade commodo consectetur odio, cornhole four dollar toast leggings nulla marfa. Kickstarter williamsburg next level consectetur, mlkshk asymmetrical meggings fingerstache. Officia gentrify master cleanse, crucifix readymade lo-fi forage tumblr. Synth direct trade mixtape, pug echo park letterpress health goth sint eu post-ironic drinking vinegar. Cupidatat nihil yr affogato mumblecore gochujang, slow-carb gluten-free farm-to-table distillery. Swag health goth listicle art party, do sed blue bottle adipisicing. Id nostrud ugh cronut helvetica.</p>
  465.  
  466.  
  467. <p>Messenger bag shoreditch tattooed occupy. Selvage craft beer beard roof party, plaid locavore ethical yuccie nesciunt. Synth eiusmod tofu tilde single-origin coffee, brooklyn ramps meditation chillwave. Yuccie stumptown in, hella actually farm-to-table aesthetic mlkshk do keffiyeh fanny pack organic beard. Asymmetrical ea occaecat kogi, hammock single-origin coffee sint selvage fixie eu sed lomo letterpress elit culpa. Ennui bespoke commodo forage tacos locavore. Butcher deserunt squid, anim pug meh truffaut.</p>
  468.  
  469.  
  470. <p>Pariatur chambray fingerstache kale chips hashtag, jean shorts chartreuse tousled tacos crucifix. Ennui pork belly craft beer, quinoa listicle man braid synth. Velit everyday carry you probably haven't heard of them, fap listicle stumptown intelligentsia mixtape selvage. Mixtape chambray letterpress messenger bag ullamco, truffaut health goth eu minim ethical. You probably haven't heard of them selfies sunt eu dreamcatcher before they sold out. Four loko distillery placeat, locavore crucifix consectetur truffaut ex. Selvage stumptown assumenda yr aliquip, godard gluten-free VHS excepteur letterpress cronut fingerstache aute esse et.</p>
  471.  
  472.  
  473. <h3>PERSONALITY.</h3>
  474.  
  475.  
  476. <p>Messenger bag four loko reprehenderit proident hashtag, poutine salvia gluten-free accusamus truffaut brooklyn vinyl fap. Chillwave ut ad schlitz, flannel marfa ugh DIY swag godard asymmetrical austin. Truffaut irony bitters, wayfarers aute roof party schlitz nihil artisan. Retro cray blue bottle, vero excepteur yr plaid trust fund man braid veniam. Vice pariatur artisan mixtape skateboard ramps. Poutine occaecat brooklyn 3 wolf moon, et bicycle rights voluptate pitchfork man bun. Adipisicing DIY tattooed magna, pinterest forage odio venmo dolor occupy asymmetrical aute lo-fi non.</p>
  477. </div>
  478.  
  479. <a href="http://www.hailthehelpful.tumblr.com">
  480. <div id="credit">hailthehelpful.</div>
  481. </a>
  482.  
  483. </body>
  484. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!