Advertisement
silbrigthemes

Farbenfroh Page (Page #1)

Jul 7th, 2017
121
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.16 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!------------------------------------------------------------------
  5.  
  6. Page "farbenfroh" by ©silbrigthemes. Please do not remove the credit, it's rude and you surely wouldn't want anyone to steal your work either.
  7.  
  8. I will try my best to answer any questions in regards to this page. Please keep in mind that it might take some time before I answer your question though.
  9.  
  10. The most important things in this code are annotated to make things easy to use and to customize. If there are any bugs in the code, feel free to tell me right away.
  11.  
  12. Thank you very much and have fun with this page.
  13.  
  14. xoxo, Julia
  15.  
  16. ------------------------------------------------------------------->
  17.  
  18. <title>Colours</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20.  
  21. <!-- TOOLTIP SCRIPTS -->
  22. <script type="text/javascript"
  23. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  24. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  25. <script>
  26. (function($){
  27. $(document).ready(function(){
  28. $("[title]").style_my_tooltips({
  29. tip_follows_cursor:true,
  30. tip_delay_time:200,
  31. tip_fade_speed:300
  32. }
  33. );
  34. });
  35. })(jQuery);
  36. </script>
  37.  
  38. <style type="text/css">
  39.  
  40. /* BODY */
  41. body{
  42. font-family:"Avenir"; /*change body font here*/
  43. font-size:12px; /*change font-size here*/
  44. background-image:url(http://media.tumblr.com/tumblr_mex6qbS3q71rbvno1.png);
  45. /*you can add an image here if you want; else, just delete the above line*/
  46. /*for a full page background, add the line
  47.  
  48. background-size:cover
  49.  
  50. and change…*/
  51. background-repeat:repeat; /*this to "no-repeat"*/
  52. background-attachment:fixed;
  53. margin-top:0px;
  54. margin-left:0px;
  55. margin-right:0px;
  56. margin-bottom:0px;
  57. }
  58.  
  59. #content{
  60. width:650px;
  61. margin-left:50px;
  62. height:500px;
  63. overflow-y:auto;
  64. background:rgba(255, 255, 255, 0.4); /*vary the last number between 0 and 1 for the opacity*/
  65. border:1px solid #ccc;
  66. }
  67.  
  68. #footer{
  69. background-color:#fff;
  70. margin-bottom:0px;
  71. margin-right:0px;
  72. margin-left:0px;
  73. margin-top:25px;
  74. height:50px;
  75. text-align:center;
  76. }
  77.  
  78. ::-webkit-scrollbar {
  79. height: 10px;
  80. width: 7px;
  81. background:#eee;
  82. }
  83.  
  84. ::-webkit-scrollbar-thumb:vertical {
  85. background: #eee;
  86. border: 3px solid #ccc;
  87. }
  88.  
  89. /*colors of the text selection*/
  90. ::selection{
  91. background:#333;
  92. color:#fff;
  93. }
  94.  
  95. ::-moz-selection{
  96. background:#333;
  97. color:#fff;
  98. }
  99.  
  100. #tumblr_controls,.tmblr-iframe {
  101. transform:scale(1);
  102. -webkit-transform:scale(1);
  103. position:fixed;
  104. top:0;
  105. right:0px!important;
  106. filter:invert(100%);
  107. -webkit-filter:invert(100%);
  108. opacity:.3;
  109. }
  110.  
  111. #sidebar{
  112. width:25%;
  113. background-color:#fff;
  114. background-image:url("https://s-media-cache-ak0.pinimg.com/736x/4a/ff/7b/4aff7bbbbbf9ffa3a6c60367f8f3c875--spray-paint-cans-spray-can.jpg");
  115. /*add an image url here or leave this blank, it's your choice*/
  116. background-size:cover; /*this needs to be cover in oder to fill the whole sidebar*/
  117. right:0px;
  118. height:100%;
  119. position:fixed;
  120. top:0px;
  121. }
  122.  
  123. /*Please DO NOT change this in any kind or form.*/
  124. .credit img{
  125. width:100px;
  126. height:100px;
  127. margin-top:100%;
  128. position:absolute;
  129. bottom:10px;
  130. right:10px;
  131. -webkit-filter:grayscale(100%);/* This line makes the credit image black and white. You may delete this one line from the credit if you like. But only this one.*/
  132.  
  133. }
  134.  
  135. /* TOOLTIPS */
  136. #s-m-t-tooltip{
  137. max-width:300px;
  138. margin:15px;
  139. padding:5px 5px;
  140. background:#000; /** tooltip background color **/
  141. color:#fff; /** toolip color **/
  142. z-index:999999;
  143. font-size:11px;
  144. text-transform:uppercase;
  145. }
  146.  
  147. /* LINKS */
  148. .links{
  149. margin-top:20px;
  150. }
  151.  
  152. a{
  153. font-size:14px;
  154. text-decoration:none;
  155. text-transform:uppercase;
  156. color:#555;
  157. }
  158.  
  159. a:hover{
  160. color:#ccc;
  161. text-decoration:none;
  162. transition:0.5s;
  163. -webkit-transition:0.5s;
  164. -moz-transition:0.5s;
  165. -o-transition:0.5s;
  166. }
  167.  
  168. /* TITLE */
  169. #title{
  170. font-size:40px;
  171. color:#333; /** title color **/
  172. text-transform:uppercase;
  173. width:900px;
  174. margin:0 auto;
  175. margin-top:30px;
  176. margin-bottom:10px;
  177. margin-left:50px;
  178. }
  179.  
  180. /*SUBTITLE*/
  181. #subtitle{
  182. font-size:15px;
  183. color:#555;
  184. font-family:"Didot";
  185. margin-left:50px;
  186. width:650px;
  187. margin-bottom:25px;
  188. }
  189.  
  190. /* TOPLINKS */
  191. #toplinks{
  192. font-size:11px;
  193. margin-top:5px;
  194. margin-left:50px;
  195. }
  196.  
  197. h2{
  198. font-family:"Avenir";
  199. font-size:20px;
  200. margin-left:10px;
  201. text-align:center;
  202. margin-right:14px;
  203. margin-bottom:0px;
  204. font-weight:bold;
  205. color:#fff;
  206. background:#333;
  207. }
  208.  
  209. h3{
  210. font-family:"Avenir";
  211. font-size:16px;
  212. margin-left:10px;
  213. text-align:left;
  214. margin-bottom:-5px;
  215. color:#555;
  216. }
  217.  
  218. /* ---------- */
  219.  
  220. /* For every new row, you will need to add
  221.  
  222. margin-left: 10px;
  223.  
  224. in order to have a homogenous margin from the border.
  225.  
  226. */
  227.  
  228. /*COLORS*/
  229. .color:hover {
  230. opacity: 1;
  231. transition: opacity .25s ease-in-out;
  232. -moz-transition: opacity .25s ease-in-out;
  233. -webkit-transition: opacity .25s ease-in-out;
  234. border: 1px solid #fff; /* match this color with the background color from #content (or don't, it's your choice) */
  235. }
  236.  
  237. /* SHADES OF PINK */
  238.  
  239. .one { /* color one, set to pink */
  240. width: 100px;
  241. height: 100px;
  242. position: relative;
  243. display: inline-block;
  244. margin-left: 10px;
  245. margin-right: 1px;
  246. margin-top: 20px;
  247. background-color: #ff66b3; /* pink color of the first box */
  248. border: 1px solid #ff3399;
  249. opacity: .7;
  250. }
  251.  
  252.  
  253. .two { /* color two, set to thulian pink */
  254. width: 100px;
  255. height: 100px;
  256. position: relative;
  257. display: inline-block;
  258. margin-right: 1px;
  259. margin-top: 20px;
  260. background-color: #de6fa1; /* thulian pink color of the second box */
  261. border: 1px solid #d54485;
  262. opacity: .7;
  263. }
  264.  
  265.  
  266. .three { /* color three, set to blush */
  267. width: 100px;
  268. height: 100px;
  269. position: relative;
  270. display: inline-block;
  271. margin-right: 1px;
  272. margin-top: 20px;
  273. background-color: #de5d83; /* blush color of the third box */
  274. border: 1px solid #d8416e;
  275. opacity: .7;
  276. }
  277.  
  278.  
  279. .four { /* color four, set to lavender blush */
  280. width: 100px;
  281. height: 100px;
  282. position: relative;
  283. display: inline-block;
  284. margin-right: 1px;
  285. margin-top: 20px;
  286. background-color: #fff0f5; /* lavender blush color of the fourth box */
  287. border: 1px solid #ffccdd;
  288. opacity: .7;
  289. }
  290.  
  291.  
  292. /* SHADES OF RED */
  293.  
  294. .five { /* color five, set to crimson */
  295. width: 100px;
  296. height: 100px;
  297. position: relative;
  298. display: inline-block;
  299. margin-left:10px;
  300. margin-right: 1px;
  301. margin-top: 20px;
  302. background-color: #dc143c; /* crimson color of the fifth box */
  303. border: 1px solid #bb1133;
  304. opacity: .7;
  305. }
  306.  
  307. .six { /* color six, set to red */
  308. width: 100px;
  309. height: 100px;
  310. position: relative;
  311. display: inline-block;
  312. margin-right: 1px;
  313. margin-top: 20px;
  314. background-color: #ff3333; /* red color of the sixth box */
  315. border: 1px solid #ff0000;
  316. opacity: .7;
  317. }
  318.  
  319. .seven { /* color seven, set to vermilion */
  320. width: 100px;
  321. height: 100px;
  322. position: relative;
  323. display: inline-block;
  324. margin-right: 1px;
  325. margin-top: 20px;
  326. background-color: #e7584b; /* vermillion color of the seventh box */
  327. border: 1px solid #e02f1f;
  328. opacity: .7;
  329. }
  330.  
  331.  
  332. /* SHADES OF ORANGE */
  333.  
  334. .eight { /* color eight, set to tea rose */
  335. width: 100px;
  336. height: 100px;
  337. position: relative;
  338. display: inline-block;
  339. margin-right: 1px;
  340. margin-top: 20px;
  341. margin-left:10px;
  342. background-color: #f88379; /* tea rose color of the eighth box */
  343. border: 1px solid #f66355;
  344. opacity: .7;
  345. }
  346.  
  347.  
  348. .nine { /* color nine, set to melon */
  349. width: 100px;
  350. height: 100px;
  351. position: relative;
  352. display: inline-block;
  353. margin-right: 1px;
  354. margin-top: 20px;
  355. background-color: #fdbcb4; /* melon color of the ninth box */
  356. border: 1px solid #fc9183;
  357. opacity: .7;
  358. }
  359.  
  360.  
  361. .ten { /* color ten, set to rose peach */
  362. width: 100px;
  363. height: 100px;
  364. position: relative;
  365. display: inline-block;
  366. margin-right: 1px;
  367. margin-top: 20px;
  368. background-color: #f2c6aa; /* rose peach color of the tenth box */
  369. border: 1px solid #eaa57b;
  370. opacity: .7;
  371. }
  372.  
  373.  
  374. /* SHADES OF YELLOW */
  375.  
  376. .eleven { /* color eleven, set to yellow */
  377. width: 100px;
  378. height: 100px;
  379. position: relative;
  380. display: inline-block;
  381. margin-right: 1px;
  382. margin-top: 20px;
  383. margin-left:10px;
  384. background-color: #ffd633; /* yellow color of the 11th box */
  385. border: 1px solid #ffcc00;
  386. opacity: .7;
  387.  
  388. }
  389.  
  390.  
  391. .twelve { /* color twelve, set to mellow yellow */
  392. width: 100px;
  393. height: 100px;
  394. position: relative;
  395. display: inline-block;
  396. margin-right: 1px;
  397. margin-top: 20px;
  398. background-color: #f8de7e; /* mellow yellow color of the 12th box */
  399. border: 1px solid #f6d355;
  400. opacity: .7;
  401.  
  402. }
  403.  
  404.  
  405. .thirteen { /* color thirteen, set to vanilla */
  406. width: 100px;
  407. height: 100px;
  408. position: relative;
  409. display: inline-block;
  410. margin-right: 1px;
  411. margin-top: 20px;
  412. background-color: #f3e5ab; /* vanilla color of the 13th box */
  413. border: 1px solid #efdc8f;
  414. opacity: .7;
  415.  
  416. }
  417.  
  418.  
  419. /* SHADES OF GREEN */
  420.  
  421. .fourteen { /* color fourteen, set to tea */
  422. width: 100px;
  423. height: 100px;
  424. position: relative;
  425. display: inline-block;
  426. margin-right: 1px;
  427. margin-top: 20px;
  428. margin-left:10px;
  429. background-color: #d0f0c0; /* tea color of the 14th box */
  430. border: 1px solid #b2e798;
  431. opacity: .7;
  432. }
  433.  
  434. .fifteen { /* color fifteen, set to lush */
  435. width: 100px;
  436. height: 100px;
  437. position: relative;
  438. display: inline-block;
  439. margin-right: 1px;
  440. margin-top: 20px;
  441. background-color: #ccffcc; /* lush color of the 15th box */
  442. border: 1px solid #99ff99;
  443. opacity: .7;
  444. }
  445.  
  446.  
  447. .sixteen { /* color sixteen, set to light green */
  448. width: 100px;
  449. height: 100px;
  450. position: relative;
  451. display: inline-block;
  452. margin-right: 1px;
  453. margin-top: 20px;
  454. background-color: #90ee90; /* light green color of the 16th box */
  455. border: 1px solid #65e765;
  456. opacity: .7;
  457. }
  458.  
  459.  
  460.  
  461. /* SHADES OF CYAN */
  462.  
  463. .seventeen { /* color seventeen, set to aquamarine */
  464. width: 100px;
  465. height: 100px;
  466. position: relative;
  467. display: inline-block;
  468. margin-right: 1px;
  469. margin-top: 20px;
  470. margin-left:10px;
  471. background-color: #7fffd4; /* aquamarine color of the 17th box */
  472. border: 1px solid #4dffc3;
  473. opacity: .7;
  474. }
  475.  
  476. .eighteen { /* color eighteen, set to turquoise */
  477. width: 100px;
  478. height: 100px;
  479. position: relative;
  480. display: inline-block;
  481. margin-right: 1px;
  482. margin-top: 20px;
  483. background-color: #40e0d0; /* turquoise color of the 18th box */
  484. border: 1px solid #24dbc9;
  485. opacity: .7;
  486. }
  487.  
  488.  
  489. .nineteen { /* color nineteen, set to teal */
  490. width: 100px;
  491. height: 100px;
  492. position: relative;
  493. display: inline-block;
  494. margin-right: 1px;
  495. margin-top: 20px;
  496. background-color: #008080; /* teal color of the 19th box */
  497. border: 1px solid #00b3b3;
  498. opacity: .7;
  499. }
  500.  
  501.  
  502.  
  503. /* SHADES OF BLUE */
  504.  
  505. .twenty { /* color twenty, set to sky */
  506. width: 100px;
  507. height: 100px;
  508. position: relative;
  509. display: inline-block;
  510. margin-right: 1px;
  511. margin-top: 20px;
  512. margin-left:10px;
  513. background-color: #87ceeb; /* sky color of the 20th box */
  514. border: 1px solid #66c1e5;
  515. opacity: .7;
  516. }
  517.  
  518.  
  519. .twentyone { /* color twentyone, set to cerulean */
  520. width: 100px;
  521. height: 100px;
  522. position: relative;
  523. display: inline-block;
  524. margin-right: 1px;
  525. margin-top: 20px;
  526. background-color: #98b4d4; /* cerulean color of the 21st box */
  527. border: 1px solid #81a3ca;
  528. opacity: .7;
  529. }
  530.  
  531.  
  532. .twentytwo { /* color twentytwo, set to blue */
  533. width: 100px;
  534. height: 100px;
  535. position: relative;
  536. display: inline-block;
  537. margin-right: 1px;
  538. margin-top: 20px;
  539. background-color: #3385ff; /* blue color of the 22nd box */
  540. border: 1px solid #0066ff;
  541. opacity: .7;
  542. }
  543.  
  544.  
  545. /* SHADES OF PURPLE */
  546.  
  547. .twentythree { /* color twentythree, set to lavender */
  548. width: 100px;
  549. height: 100px;
  550. position: relative;
  551. display: inline-block;
  552. margin-right: 1px;
  553. margin-top: 20px;
  554. margin-left:10px;
  555. background-color: #e6e6fa; /* lavender color of the 23rd box */
  556. border: 1px solid #bfbff2;
  557. opacity: .7;
  558. }
  559.  
  560.  
  561. .twentyfour { /* color twentyfour, set to lilac */
  562. width: 100px;
  563. height: 100px;
  564. position: relative;
  565. display: inline-block;
  566. margin-right: 1px;
  567. margin-top: 20px;
  568. background-color: #c69fc6; /* lilac color of the 24th box */
  569. border: 1px solid #b380b3;
  570. opacity: .7;
  571. }
  572.  
  573.  
  574. .twentyfive { /* color twentyfive, set to css purle*/
  575. width: 100px;
  576. height: 100px;
  577. position: relative;
  578. display: inline-block;
  579. margin-right: 1px;
  580. margin-top: 20px;
  581. background-color: #800080; /* css purple color of the 25th box */
  582. border: 1px solid #b300b3;
  583. opacity: .7;
  584. }
  585.  
  586.  
  587. /* ––– */
  588. /*NEUTRALS*/
  589. /*SHADES OF GRAY*/
  590.  
  591. .w { /* color w, set to white */
  592. width: 100px;
  593. height: 100px;
  594. position: relative;
  595. display: inline-block;
  596. margin-right: 1px;
  597. margin-left:10px;
  598. margin-top: 20px;
  599. margin-bottom:10px;
  600. background-color: #fff; /* white color of the w box */
  601. border: 1px solid #e6e5e6;
  602. opacity: .7;
  603. }
  604.  
  605.  
  606. .s { /* color s, set to silver */
  607. width: 100px;
  608. height: 100px;
  609. position: relative;
  610. display: inline-block;
  611. margin-right: 1px;
  612. margin-top: 20px;
  613. margin-bottom:10px;
  614. background-color: #c0c0c0; /* silver color of the s box */
  615. border: 1px solid #a6a6a6;
  616. opacity: 1;
  617. }
  618.  
  619.  
  620. a[tooltip]:hover:after {
  621. content: attr(tooltip);
  622. width:100px;
  623. height:15px;
  624. font-size: 10px;
  625. font-weight:bold;
  626. color: #808080;
  627. position: absolute;
  628. text-align:center;
  629. background-color:#fff;
  630. margin-top:100px;
  631. white-space: nowrap;
  632. /*
  633. z-index: 20;
  634. -moz-border-radius: 3px;
  635. -webkit-border-radius: 3px;
  636. border-radius: 3px;
  637. -moz-box-shadow: 0px 0px 2px #c0c1c2;
  638. -webkit-box-shadow: 0px 0px 2px #c0c1c2;
  639. box-shadow: 0px 0px 2px #c0c1c2;*/
  640. }
  641. /*END COLORS*/
  642.  
  643.  
  644. </style>
  645. </head>
  646. <body>
  647. <!-- Add your title here. -->
  648. <div id="title">Colours</div>
  649.  
  650. <!-- Add a quote or whatever else of text you would like here. -->
  651. <div id="subtitle">„<i>Die Farbe hat mich. Ich brauche nicht nach ihr zu haschen. Sie hat mich für immer. Das ist der glücklichen Stunde Sinn: ich und die Farbe sind eins. Ich bin Maler.</i>“ – Paul Klee</div>
  652.  
  653. <!-- This is where your sidebar starts. -->
  654. <div id="sidebar">
  655.  
  656. <!-- Please do NOT alter the credit in any way or form. -->
  657. <div class="credit">
  658. <a href="https://silbrigthemes.tumblr.com" title="Credit"><img src="https://68.media.tumblr.com/cf9aff07174cea3c70e686c99a10756f/tumblr_orplbl8mI41wsskx3o1_500.png"></a>
  659. </div>
  660.  
  661. </div>
  662.  
  663. <div id="content">
  664. <div id="box">
  665.  
  666. <!-- change the "/tagged/xx" to the tag for you use, change the "tooltip=xx" to the text that shows up in the tooltip when you hover -->
  667.  
  668. <!-- The h3 headings will only work properly if you add the "</a>" after the last color in the category. Else the whole thing will begin to look odd. -->
  669.  
  670. <h2>Colours</h2>
  671. <h3>Shades of Pink</h3>
  672. <!-- SHADES OF PINK -->
  673. <a href="/tagged/pink" class="color one" tooltip="pink">
  674. <a href="/tagged/thulian-pink" class="color two" tooltip="thulian pink">
  675. <a href="/tagged/blush" class="color three" tooltip="blush">
  676. <a href="/tagged/lavender-blush" class="color four" tooltip="lavender blush">
  677.  
  678. </a>
  679.  
  680.  
  681. <h3>Shades of Red</h3>
  682. <!-- SHADES OF RED -->
  683. <a href="/tagged/crimson" class="color five" tooltip="crimson">
  684. <a href="/tagged/red" class="color six" tooltip="red">
  685. <a href="/tagged/vermilion" class="color seven" tooltip="vermilion">
  686.  
  687. </a>
  688.  
  689.  
  690. <h3>Shades of Orange</h3>
  691. <!-- SHADES OF ORANGE -->
  692. <a href="/tagged/tea-rose" class="color eight" tooltip="tea rose">
  693. <a href="/tagged/melon" class="color nine" tooltip="melon">
  694. <a href="/tagged/rose-peach" class="color ten" tooltip="rose peach">
  695.  
  696. </a>
  697.  
  698.  
  699. <h3>Shades of Yellow</h3>
  700. <!-- SHADES OF YELLOW -->
  701. <a href="/tagged/yellow" class="color eleven" tooltip="yellow">
  702. <a href="/tagged/mellow-yellow" class="color twelve" tooltip="mellow yellow">
  703. <a href="/tagged/vanilla" class="color thirteen" tooltip="vanilla">
  704.  
  705. </a>
  706.  
  707.  
  708. <h3>Shades of Green</h3>
  709. <!-- SHADES OF GREEN -->
  710. <a href="/tagged/tea" class="color fourteen" tooltip="tea">
  711. <a href="/tagged/lush" class="color fifteen" tooltip="lush">
  712. <a href="/tagged/light+green" class="color sixteen" tooltip="light green">
  713.  
  714. </a>
  715.  
  716.  
  717. <h3>Shades of Cyan</h3>
  718. <!-- SHADES OF CYAN -->
  719. <a href="/tagged/aquamarine" class="color seventeen" tooltip="aquamarine">
  720. <a href="/tagged/turquoise" class="color eighteen" tooltip="turquoise">
  721. <a href="/tagged/teal" class="color nineteen" tooltip="teal">
  722.  
  723. </a>
  724.  
  725.  
  726. <h3>Shades of Blue</h3>
  727. <!-- SHADES OF BLUE -->
  728. <a href="/tagged/sky" class="color twenty" tooltip="sky">
  729. <a href="/tagged/cerulean" class="color twentyone" tooltip="cerulean">
  730. <a href="/tagged/blue" class="color twentytwo" tooltip="blue">
  731.  
  732. </a>
  733.  
  734.  
  735. <h3>Shades of Purple</h3>
  736. <!-- SHADES OF PURPLE -->
  737.  
  738. <a href="/tagged/lavender" class="color twentythree" tooltip="lavender">
  739. <a href="/tagged/css-purple" class="color twentyfour" tooltip="css purple">
  740. <a href="/tagged/lilac" class="color twentyfive" tooltip="lilac">
  741.  
  742. </a>
  743.  
  744. <br><br>
  745.  
  746. <h2>Neutrals</h2>
  747.  
  748. <h3>Shades of Gray</h3>
  749. <a href="/tagged/white" class="color w" tooltip="white">
  750. <a href="/tagged/silver" class="color s" tooltip="silver">
  751.  
  752. </a>
  753.  
  754. </div>
  755. </div>
  756.  
  757. <!-- This is where you can add your navigation links. -->
  758. <div id="footer">
  759. <div class="links">
  760. <br>
  761. <a href="/">Home</a> | <a href="/ask">Ask</a> | <a href="/archive">Past</a>
  762. </div>
  763. </div>
  764.  
  765. </body>
  766. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement