API tools faq
paste
spielglocken

Page 02 | Sochi

spielglocken
Aug 24th, 2019
1,413
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <link href='https://static.tumblr.com/vr8wztv/KHzpnokhf/cssreset.css' rel='stylesheet' type='text/css'>
  5. <link href='https://dl.dropbox.com/s/9wavgqnh65ywsqu/sochi-v1.css' rel='stylesheet' type='text/css'>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link href="https://fonts.googleapis.com/css?family=IBM Plex Mono:400,700|Livvic:300,300i,600,600i,700,700i" rel="stylesheet">
  8.  
  9.  
  10.  
  11.  
  12. <!--
  13. ===============================================
  14.  
  15.  
  16. Commission page: Sochi
  17. more @ https://spielglocken.tumblr.com
  18.  
  19. Do not alter or remove credit
  20.  
  21.  
  22. ===============================================
  23. Notes are included below.
  24. -->
  25.  
  26.  
  27.  
  28.  
  29. <title>Sochi</title>
  30. <!-- Don't forget to change this -->
  31. <meta charset="utf-8"/>
  32. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  33. <style type="text/css">
  34.  
  35. /* colors */
  36.  
  37. :root {
  38. /* fruit colors */
  39.  
  40. --blueberry-background-color: #ebf2ff; /* page background, not the container */
  41. /* main background, if gradient is disabled and start gradient color (gradient is top to bottom) */
  42. --blueberry-sidebar-background: #3a4199;
  43. /* end gradient color */
  44. --blueberry-sidebar-background-2: #6e81b7;
  45. /* main text color */
  46. --blueberry-sidebar-text: #ffffff;
  47. /* alt text color, also doubles as link color */
  48. --blueberry-sidebar-alt-text: #d7e6fd;
  49. --blueberry-image: url('https://static.tumblr.com/vr8wztv/oScpwr228/blueberry.svg');
  50. --blueberry-image-alt: url('https://static.tumblr.com/vr8wztv/NBBpwr21n/blueberry-bare.svg');
  51.  
  52. --avocado-background-color: #ecffe6;
  53. --avocado-sidebar-background: #42895b;
  54. --avocado-sidebar-background-2: #65a84f;
  55. --avocado-sidebar-text: #ffffff;
  56. --avocado-sidebar-alt-text: #f4e8c3;
  57. --avocado-image: url('https://static.tumblr.com/vr8wztv/BlSpwr27w/avocado.svg');
  58. --avocado-image-alt: url('https://static.tumblr.com/vr8wztv/6S5pwr27f/avocado-bare.svg');
  59.  
  60. --banana-background-color: #fff5e3;
  61. --banana-sidebar-background: #ffc41f;
  62. --banana-sidebar-background-2: #f4de7f;
  63. --banana-sidebar-text: #3d2700;
  64. --banana-sidebar-alt-text: #846328;
  65. --banana-image: url('https://static.tumblr.com/vr8wztv/Uoapwr262/banan.svg');
  66. --banana-image-alt: url('https://static.tumblr.com/vr8wztv/TNhpwr26n/banan-bare.svg');
  67.  
  68. --cherry-background-color: #fcedee;
  69. --cherry-sidebar-background: #99222b;
  70. --cherry-sidebar-background-2: #d65867;
  71. --cherry-sidebar-text: #ffffff;
  72. --cherry-sidebar-alt-text: #fcd2d8;
  73. --cherry-image: url('https://static.tumblr.com/vr8wztv/2L5pwr25e/cherry.svg');
  74. --cherry-image-alt: url('https://static.tumblr.com/vr8wztv/Kc2pwr24w/cherry-bare.svg');
  75.  
  76. --grape-background-color: #f4e7f7;
  77. --grape-sidebar-background: #8e255c;
  78. --grape-sidebar-background-2: #c66a96;
  79. --grape-sidebar-text: #ffffff;
  80. --grape-sidebar-alt-text: #fee3ff;
  81. --grape-image: url('https://static.tumblr.com/vr8wztv/Xa5pwr248/grapes.svg');
  82. --grape-image-alt: url('https://static.tumblr.com/vr8wztv/BMMpwr23n/grapes-bare.svg');
  83.  
  84. --orange-background-color: #fcf5f0;
  85. --orange-sidebar-background: #ff8a3b;
  86. --orange-sidebar-background-2: #f3b853;
  87. --orange-sidebar-text: #ffffff;
  88. --orange-sidebar-alt-text: #ffedd4;
  89. --orange-image: url('https://static.tumblr.com/vr8wztv/UQDpwr295/orange.svg');
  90. --orange-image-alt: url('https://static.tumblr.com/vr8wztv/L4bpwr28i/orange-bare.svg');
  91.  
  92. --watermelon-background-color: #edf9f3;
  93. --watermelon-sidebar-background: #18844e;
  94. --watermelon-sidebar-background-2: #53bb72;
  95. --watermelon-sidebar-text: #ffffff;
  96. --watermelon-sidebar-alt-text: #ffe0d2;
  97. --watermelon-image: url('https://static.tumblr.com/vr8wztv/7fhpwr2a2/watermelon.svg');
  98. --watermelon-image-alt: url('https://static.tumblr.com/vr8wztv/Futpwr29m/watermelon-bare.svg');
  99.  
  100.  
  101. /* regular, non-fruit-themed */
  102.  
  103. --reg-background-color: #f7f7f7;
  104. --reg-sidebar-background: #27272d;
  105. --reg-sidebar-background-2: #4f4f56;
  106. --reg-sidebar-text: #ffffff;
  107. --reg-sidebar-alt-text: #d0d0d0;
  108.  
  109.  
  110. /* appearance */
  111.  
  112. --container-width: 950px;
  113. --container-background: #fbfbfb;
  114. --container-border-radius: 10px;
  115. --container-box-shadow: 0 0 25px rgba(0,0,0,.15);
  116. --container-body-text: #494956;
  117. --container-alt-body-text: #80808e;
  118. --container-heading-text: #262630;
  119. --container-link: #696e7a;
  120. --container-borders: #d4d9e8;
  121.  
  122. /* fruit variables only change the accent. elements inside the container that are not part of the sidebar have different color variables. you may need to adjust the colors to match your chosen theme, fruit or non-fruit. */
  123. }
  124. </style>
  125. </head>
  126. <!--
  127.  
  128. there are 7 fruit themes to choose from:
  129. blueberry | avocado | banana | cherry | grape | orange | watermelon
  130. there is also a regular theme that doesn't feature fruits.
  131. each (including the regular one) have their own pattern background image (optional).
  132.  
  133. ENABLING A THEME:
  134. add fruit name + `-theme` as class name to `<body>`:
  135.  
  136. `<body class="blueberry-theme">`
  137.  
  138. REGULAR THEME:
  139. add `none` in place of the fruit name instead:
  140.  
  141. `<body class="none-theme">`
  142.  
  143. USING BACKGROUND IMAGE:
  144. add class name `enable-background-image` to `<body>`
  145.  
  146. ENABLING GRADIENT COLOR ON SIDEBAR:
  147. add class name `enable-gradient` to `<body>`
  148.  
  149. -->
  150. <body class="blueberry-theme enable-gradient">
  151. <div class="wrapper">
  152. <aside class="title">
  153. <article class="page-data">
  154.  
  155. <div class="page-title bold">
  156. <!-- title of page -->
  157. Page Title
  158. </div>
  159. <div class="page-description">
  160. <!-- description goes here -->
  161. Short description here, or long or rambling or something
  162. <small><br/><br/><b>PS.</b> there is a guide that you can view <a href="https://spielglocken.tumblr.com/guide/sochi" target="_blank">here</a>. thanks for using this page!</small>
  163. </div>
  164. </article>
  165. <article class="commission-data">
  166. <!-- begin status -->
  167. <div class="commission-status">
  168. <div class="cap sub-title">Status</div>
  169. <div class="status cap"><span class="active">Open</span><span class="inactive">Closed</span></div>
  170. </div>
  171. <!-- close status -->
  172.  
  173. <!-- begin slots -->
  174. <div class="commission-slot">
  175. <div class="cap sub-title">Available Slots</div>
  176. <!--
  177.  
  178. `data-slot-count` denotes the number of slots you have. in this example I used 5, but it can be any number you want.
  179.  
  180. `data-booked-slot` denotes the number of occupied slots.
  181.  
  182. `data-display-count` basically displays [available slots]/[total number of slots]. for example, if you have 10 total slots and 7 are currently occupied, it will return a 3/10. to display this number, use `data-display-count="display"`, and `data-display-count="hide"` to hide it.
  183.  
  184. `data-slot-string` is what you want the label to say. useful if you want to add something else. leave them empty if unused.
  185.  
  186. -->
  187. <div class="slots" data-slot-count="5" data-booked-slot="2" data-display-count="display" data-slot-string="still available">
  188. </div>
  189. </div>
  190. <!-- close slots -->
  191. </article>
  192.  
  193. </aside>
  194. <main>
  195.  
  196. <!------------------------------------------------
  197.  
  198. SECTION 1: INTRODUCTION, TERMS, ETC
  199.  
  200. -------------------------------------------------->
  201. <section class="sections introduction">
  202. <article class="section-title bold">Introduction</article>
  203. <article class="section-content">
  204. <p>I never spend much time in school but I taught ladies plenty. It’s true I hire my body out for pay, hey hey. I’ve gotten burned over Cheryl Tiegs, blown up for Raquel Welch. But when I end up in the hay it’s only hay, hey hey. I might jump an open drawbridge, or Tarzan from a vine. ’Cause I’m the unknown stuntman that makes Eastwood look so fine.</p>
  205. <h1>Heading</h1>
  206. <p>But when I end up in the hay it’s only hay, hey hey. I might jump an open drawbridge, or Tarzan from a vine. ’Cause I’m the unknown stuntman that makes Eastwood look so fine.</p>
  207. <h1>More Heading</h1>
  208. <p>’Cause I’m the unknown stuntman that makes Eastwood look so fine.</p>
  209. </article>
  210. </section>
  211.  
  212. <!------------------------------------------------
  213.  
  214. SECTION 2: SKILLS, YEHS AND NAHS
  215.  
  216. -------------------------------------------------->
  217. <section class="sections">
  218. <!-- begin skill -->
  219. <article class="sub-sections skill-meters">
  220. <!-- section title -->
  221. <div class="section-title bold">Skills</div>
  222.  
  223. <!--
  224. notes on skill list:
  225. `data-level` is your skill proficiency. it has a range from 1 (or 0) to 5, with 1 (or 0) being the lowest and 5 the highest. it can take halves too so 2.5 | 3.5 | 0.5 is possible.
  226.  
  227. `data-label` is the name of skill. knitting, sewing, fixing things, anything.
  228.  
  229. all you need to do is to edit `data-level` and `data-label`, no need to add anything else inside the divs.
  230. -->
  231.  
  232. <!-- begin skill list -->
  233. <div class="skill-item" data-level="5" data-label="Skill label 01"></div>
  234. <!-- close skill list -->
  235.  
  236. <!-- add or remove as necessary -->
  237. <div class="skill-item" data-level="4" data-label="Skill label 02"></div>
  238. <div class="skill-item" data-level="4" data-label="Skill label 03"></div>
  239. <div class="skill-item" data-level="3" data-label="Skill label 04"></div>
  240. <div class="skill-item" data-level="3" data-label="Skill label 05"></div>
  241. <div class="skill-item" data-level="3.5" data-label="Skill label 06"></div>
  242. </article>
  243. <!-- close skill -->
  244.  
  245. <!-- begin yehs and nahs -->
  246. <article class="sub-sections vodki-naidu">
  247. <!--
  248.  
  249. basically this is where you will put what you will/can do and what you won't/can't. as any section before it, you only need to delete this part if you do not use it.
  250.  
  251. `yeh` class in `<div class="section-content">` gives the list green checkmarks,
  252. `nah` class on the other hand, gives the list red cross/X marks. remove these class from markup if you want a "normal" list.
  253.  
  254. -->
  255. <div class="section-content yeh">
  256. <div class="sub section-title bold">Yay:</div>
  257. <ul>
  258. <li>This</li>
  259. <li>That</li>
  260. <li>Those</li>
  261. </ul>
  262. </div>
  263. <div class="section-content nah">
  264. <div class="sub section-title bold">Nay:</div>
  265. <ul>
  266. <li>Yeah nope</li>
  267. <li>No</li>
  268. <li>Nu uh</li>
  269. <li>Yep never</li>
  270. </ul>
  271. </div>
  272. </article>
  273. <!-- /close yehs and nahs -->
  274. </section>
  275.  
  276. <!------------------------------------------------
  277.  
  278. SECTION 3: PRICE LIST
  279.  
  280. -------------------------------------------------->
  281.  
  282. <!-- begin price list -->
  283. <section class="sections price-list">
  284. <!-- section title -->
  285. <article class="section-title bold">Prices</article>
  286. <!-- container -->
  287. <article class="price-list-container">
  288.  
  289. <!-- begin list item -->
  290. <div class="price-list-item is-alternating">
  291. <!--
  292.  
  293. there are 2 styles for `price-list-item`: 1) wide 2) grid/inline-block.
  294. wide-style items are displayed as rows, with the image and the description displayed side-by-side.
  295. grid-style items are displayed as grid (2 items per row). image and description are displayed as rows.
  296.  
  297. WIDE STYLE:
  298. add class `is-alternating` to `price-list-item`
  299.  
  300. GRID STYLE:
  301. add class `is-inline-block` to `price-list-item`
  302.  
  303. -->
  304.  
  305.  
  306. <!-- image container -->
  307. <div class="image-container">
  308. <img src="https://via.placeholder.com/100x100" />
  309. </div>
  310.  
  311. <!-- begin description -->
  312. <div class="description-container">
  313. <!-- description title goes here -->
  314. <div class="description-title bold">Work Type 1</div>
  315. <!-- content goes here -->
  316. <div class="description-content">
  317. <!-- you can use this markup to create a list. you can also enlarge the price/number using `<span class="dc-number">` as demonstrated below. -->
  318. <li><span class="dc-number bold">$18</span> Base price</li>
  319. <li><span class="dc-number bold">$5</span> With mushrooms</li>
  320. <li><span class="dc-number bold">$5</span> Extra cheese toppings</li>
  321. </div>
  322. </div>
  323. </div>
  324. <!-- close list item -->
  325.  
  326. <!-- add/remove as necessary -->
  327. <div class="price-list-item is-alternating">
  328. <div class="image-container"><img src="https://via.placeholder.com/150x100" /></div>
  329. <div class="description-container">
  330. <div class="description-title bold">Work Type 2</div>
  331. <div class="description-content">
  332. <!-- alternatively, you can keep the styling plain. -->
  333. Base price: <b>$30</b><br/>
  334. Extra spicy: <b>-$5</b><br/>
  335. With extra dedication: <b>$15</b><br/>
  336. A side of dad joke: <b>-$3</b>
  337. </div>
  338. </div>
  339. </div>
  340.  
  341. <div class="price-list-item is-inline-block">
  342. <div class="description-container">
  343. <div class="image-container"><img src="https://via.placeholder.com/100x150" /></div>
  344. <div class="description-title bold">Griddy Work 1</div>
  345. <div class="description-content">
  346. <li><span class="dc-number bold">$50</span> base price</li>
  347. <li><span class="dc-number bold">$10</span> with a heartfelt message</li>
  348. <li><span class="dc-number bold">$5</span> with cleverly disguised backhanded compliment</li>
  349. </div>
  350. </div>
  351. </div>
  352.  
  353. <div class="price-list-item is-inline-block">
  354. <div class="description-container">
  355. <div class="image-container"><img src="https://via.placeholder.com/100x150" /></div>
  356. <div class="description-title bold">Griddy Work 2</div>
  357. <div class="description-content">
  358. <b>What is a Griddy Work?</b> Things that man is not meant to know lest they go insane from the revelation. You have been warned.
  359. <li><span class="dc-number bold">$60</span> If you insist</li>
  360. <li><span class="dc-number bold">$10</span> Extra insanity-inducing things</li>
  361. </div>
  362. </div>
  363. </div>
  364.  
  365. </article>
  366. </section>
  367.  
  368.  
  369. <!------------------------------------------------
  370.  
  371. SECTION 4: SAMPLE WORKS
  372.  
  373. -------------------------------------------------->
  374.  
  375. <!--
  376.  
  377. you may choose to display your work in 2 or 3 columns. for 2 columns use `column-count-2` and for 3 columns use `column-count-3`, add to `<section class="sections sample-works">`.
  378.  
  379. -->
  380. <section class="sections sample-works column-count-3">
  381. <!-- section title -->
  382. <article class="section-title bold">Sample Works</article>
  383. <article class="sample-container">
  384.  
  385. <!-- begin sample item -->
  386. <div class="sample-item">
  387. <!-- sample image goes here -->
  388. <img src="https://via.placeholder.com/500x500&text=Preferably+above+500px" />
  389. <div class="sample-label">
  390. <!-- label goes here. this feature is optional. you may delete it if you don't need them. -->
  391. Amazing Piece
  392. <span class="sub-label">Label if needed</span>
  393. <!-- optional sub-label. -->
  394. </div>
  395. </div>
  396. <!-- close sample item -->
  397.  
  398. <!-- add/remove as necessary -->
  399. <div class="sample-item">
  400. <img src="https://via.placeholder.com/500x500&text=Preferably+above+500px" />
  401. <div class="sample-label">
  402. No Less Amazing Work <span class="sub-label">You should totally hire me</span>
  403. </div>
  404. </div>
  405. <div class="sample-item">
  406. <img src="https://via.placeholder.com/500x500&text=Preferably+above+500px" />
  407. <div class="sample-label">
  408. Seriously this is da Vinci tier
  409. </div>
  410. </div>
  411. <div class="sample-item">
  412. <img src="https://via.placeholder.com/500x600&text=Preferably+above+500px" />
  413. <div class="sample-label">
  414. Serious Work for Magazine Name
  415. </div>
  416. </div>
  417. <div class="sample-item">
  418. <img src="https://via.placeholder.com/500x600&text=Preferably+above+500px" />
  419. <div class="sample-label">
  420. Less Serious Work as a Personal Project
  421. </div>
  422. </div>
  423. <div class="sample-item">
  424. <img src="https://via.placeholder.com/500x600&text=Preferably+above+500px" />
  425. <div class="sample-label">
  426. Ok maybe I'm no da Vinci
  427. </div>
  428. </div>
  429. </article>
  430. </section>
  431.  
  432.  
  433. <!------------------------------------------------
  434.  
  435. SECTION 5: FINAL NOTE, OPTIONAL ASK BOX
  436.  
  437. -------------------------------------------------->
  438. <section class="sections if-interested">
  439. <!-- section title -->
  440. <article class="section-title bold">Interested?</article>
  441. <article class="section-content">
  442. <!-- contact info goes here -->
  443. Send enquiries to [email protected] or fill out this form.
  444.  
  445. <!-- ask box goes here. no need to edit. remove if unneeded. -->
  446. <div class="askbox-wrap">
  447. <iframe scrolling="no" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color: transparent; overflow: hidden; height: 190px;" id="ask_form" width="100%" height="190" frameborder="0"></iframe>
  448. </div>
  449. </article>
  450. </section>
  451. </main>
  452. </div>
  453. <script src="https://dl.dropbox.com/s/3uxl6kwp4g8n092/sochi-scripts.js"></script>
  454. <!--
  455. ===============================================
  456.  
  457.  
  458. Credits
  459. -------
  460.  
  461. Icons:
  462.  
  463. "Fruits and Vegetables"
  464. by Freepik from Flaticon
  465. https://www.flaticon.com
  466.  
  467.  
  468. ===============================================
  469. -->
  470.  
  471.  
  472. </body>
  473. </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!