API tools faq
paste
Advertisement
silbrigthemes

Farbenfroh - Revamp (Page #1.1)

silbrigthemes
Mar 23rd, 2018
172
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. Farbenfroh – Revamp (Page #1.1)
  7. by @silbrigthemes
  8.  
  9. ---
  10.  
  11. This page is a "revamped" version of my first page, "Farbenfroh".
  12.  
  13. If you compare this version to the original one, you will notice that they are entirely different design wise.
  14.  
  15. Essentially it is to show how I have developed as a theme maker.
  16.  
  17. The old code still exists though, don't worry.
  18.  
  19. ---
  20.  
  21. Rules:
  22.  
  23. Do not claim as your own.
  24. Do not steal (parts of) the code.
  25. Do not alter beyond recognition.
  26. Leave the credit intact.
  27. Please like / reblog if you are using this code.
  28.  
  29. ---
  30.  
  31. Have fun!
  32.  
  33. -->
  34.  
  35.  
  36. <head>
  37.  
  38. <!-- Without this line the page will not be responsive. -->
  39. <meta name="viewport" content="width=device-width, initial-scale=1">
  40.  
  41. <!-- Necessary for the custom font, "Roboto Condensed", to work. -->
  42. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  43.  
  44. <!-- TOOLTIP SCRIPTS -->
  45. <script type="text/javascript"
  46. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  47. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  48. <script>
  49. (function($){
  50. $(document).ready(function(){
  51. $("[title]").style_my_tooltips({
  52. tip_follows_cursor:true,
  53. tip_delay_time:200,
  54. tip_fade_speed:300
  55. }
  56. );
  57. });
  58. })(jQuery);
  59. </script>
  60.  
  61. <style>
  62.  
  63. body{
  64. background-color:#f8f9fa;
  65. background:linear-gradient(to bottom right, #f8f9fa, #e1e6ea);
  66. margin:0;
  67. font-size:1em;
  68. font-family:"Roboto Condensed";
  69. }
  70.  
  71. /* Custom Scrollbar */
  72. ::-webkit-scrollbar{
  73. width:8px;
  74. background-color:#fff;
  75. }
  76.  
  77. ::-webkit-scrollbar-thumb{
  78. background-color:#333;
  79. width:8px;
  80. }
  81.  
  82. /* Custom Selection */
  83. ::selection{
  84. background-color:#333;
  85. color:#f8f9fa;
  86. }
  87.  
  88. ::-webkit-selection{
  89. background-color:#333;
  90. color:#f8f9fa;
  91. }
  92.  
  93. ::-o-selection{
  94. background-color:#333;
  95. color:#f8f9fa;
  96. }
  97.  
  98. ::-moz-selection{
  99. background-color:#333;
  100. color:#f8f9fa;
  101. }
  102.  
  103. /** TOOLTIPS **/
  104. #s-m-t-tooltip{
  105. max-width:300px;
  106. margin:15px;
  107. padding:0.25em;
  108. background:#333; /** tooltip background color **/
  109. color:#f8f9fa; /** toolip color **/
  110. box-shadow:4px 4px cornflowerblue;
  111. z-index:999999;
  112. font-size:0.75em;
  113. text-transform:uppercase;
  114. }
  115.  
  116. a{
  117. color:#333;
  118. text-decoration:none;
  119. }
  120.  
  121. #everything{
  122. width:100vw;
  123. height:100vh;
  124. display:flex;
  125. align-items:flex-start;
  126. justify-content:center;
  127. }
  128.  
  129. #sidebar{
  130. background-color:cornflowerblue;
  131. background:linear-gradient(to bottom right, cornflowerblue, #4881ea);
  132. height:100vh;
  133. width:25vw;
  134. display:flex;
  135. align-items:center;
  136. justify-content:center;
  137. flex-direction:column;
  138. }
  139.  
  140. #s-icon img{
  141. width:96px;
  142. height:96px;
  143. box-shadow:4px 4px #333;
  144. }
  145.  
  146. #s-desc{
  147. width:192px;
  148. height:auto;
  149. padding:0.5em;
  150. margin-top:0.5em;
  151. background-color:#fff;
  152. box-shadow:4px 4px #333;
  153. }
  154.  
  155. #content{
  156. width:75vw;
  157. height:auto;
  158. max-height:100vh;
  159. overflow-y:scroll;
  160. display:flex;
  161. align-items:space-between;
  162. justify-content:space-between;
  163. flex-wrap:wrap;
  164. }
  165.  
  166. .d-box{
  167. width:calc(75vw + 0.5em);
  168. padding:0.25em;
  169. margin:0.5em;
  170. background-color:#fff;
  171. box-shadow:4px 4px #333;
  172. }
  173.  
  174. .filterbox{
  175. display:none;
  176. }
  177.  
  178. #title{
  179. font-size:2.5em;
  180. }
  181.  
  182. #desc{
  183. font-size:1.05em;
  184. }
  185.  
  186. #links{
  187. display:flex;
  188. align-items:center;
  189. justify-content:space-between;
  190. }
  191.  
  192. .box{
  193. width:150px;
  194. height:200px;
  195. background-color:#fff;
  196. box-shadow:4px 4px #333;
  197. margin:0.5em;
  198. display: none;
  199. transition:0.5s;
  200. -moz-transition:0.5s;
  201. -o-transition:0.5s;
  202. -webkit-transition:0.5s;
  203. }
  204.  
  205. .box:hover{
  206. transform:scale(1.05);
  207. transition:0.5s;
  208. -moz-transition:0.5s;
  209. -o-transition:0.5s;
  210. -webkit-transition:0.5s;
  211. }
  212.  
  213. .box-link{
  214. border-bottom:4px solid #ed6495;
  215. transition:0.5s;
  216. -moz-transition:0.5s;
  217. -o-transition:0.5s;
  218. -webkit-transition:0.5s;
  219. }
  220.  
  221. .box-link:hover{
  222. border-bottom:4px solid #95ed64;
  223. transition:0.5s;
  224. -moz-transition:0.5s;
  225. -o-transition:0.5s;
  226. -webkit-transition:0.5s;
  227. }
  228.  
  229. .text{
  230. padding:0.25em;
  231. height:50px;
  232. }
  233.  
  234. .b{
  235. width:150px;
  236. height:150px;
  237. }
  238.  
  239. .one{
  240. background-color:#a76c97;
  241. }
  242.  
  243. .two{
  244. background-color:#f7cac9;
  245. }
  246.  
  247. .three{
  248. background-color:#92a8d1;
  249. }
  250.  
  251. .four{
  252. background-color:#ff8d94;
  253. }
  254.  
  255. .five{
  256. background-color:cornflowerblue;
  257. }
  258.  
  259. .six{
  260. background-color:#5f5b8b;
  261. }
  262.  
  263. .seven{
  264. background-color:#d2738d;
  265. }
  266.  
  267. .eight{
  268. background-color:#d94f70;
  269. }
  270.  
  271. .nine{
  272. background-color:#848dc5;
  273. }
  274.  
  275. .ten{
  276. background-color:#b09fca;
  277. }
  278.  
  279. .eleven{
  280. background-color:#e290b2;
  281. }
  282.  
  283.  
  284. /* FILTER BUTTONS */
  285.  
  286. #s-contain{
  287. width:204px;
  288. height:auto;
  289. margin-top:0.5em;
  290. display:flex;
  291. align-items:space-between;
  292. justify-content:space-between;
  293. flex-wrap:wrap;
  294. }
  295.  
  296. /* The "show" class is added to the filtered elements */
  297. .show {
  298. display: block;
  299. }
  300.  
  301. /* Style the buttons */
  302. .btn {
  303. border: none;
  304. outline: none;
  305. padding:12px;
  306. width:96px;
  307. background-color: #fff;
  308. box-shadow:4px 4px #333;
  309. cursor: pointer;
  310. margin-bottom:8px;
  311. font-size:0.75em;
  312. font-family:"Roboto Condensed";
  313. transition:0.5s;
  314. -moz-transition:0.5s;
  315. -o-transition:0.5s;
  316. -webkit-transition:0.5s;
  317. }
  318.  
  319. /* Add a light grey background on mouse-over */
  320. .btn:hover {
  321. box-shadow:4px 4px #ed6495;
  322. transition:0.5s;
  323. -moz-transition:0.5s;
  324. -o-transition:0.5s;
  325. -webkit-transition:0.5s;
  326. }
  327.  
  328. /* Add a dark background to the active button */
  329. .btn.active {
  330. box-shadow:4px 4px #95ed64;
  331. background-color:#333;
  332. color:#fff;
  333. }
  334.  
  335. /** START RESPONSIVE CODE FOR SMALL SCREENS **/
  336.  
  337. @media only screen and (max-width: 750px){
  338. #sidebar{
  339. display:none;
  340. }
  341.  
  342. #content{
  343. width:80vw;
  344. }
  345.  
  346. .d-box{
  347. width:100vw;
  348. display:block;
  349. }
  350.  
  351. #links{
  352. display:block;
  353. display:flex;
  354. align-items:space-between;
  355. justify-content:space-between;
  356. flex-direction:row;
  357. flex-wrap:wrap;
  358. }
  359.  
  360. .filterbox{
  361. display:block;
  362. display:flex;
  363. align-items:space-between;
  364. justify-content:space-between;
  365. flex-direction:row;
  366. flex-wrap:wrap;
  367. }
  368.  
  369. .box{
  370. width:250px;
  371. height:300px;
  372. }
  373.  
  374. .b{
  375. width:250px;
  376. height:250px;
  377. }
  378. }
  379.  
  380.  
  381.  
  382. /** START RESPONSIVE CODE FOR PHONES **/
  383.  
  384. @media only screen and (max-width: 450px){
  385.  
  386. body{
  387. font-size:20px;
  388. }
  389.  
  390. .btn{
  391. font-size:16px;
  392. width:120px;
  393. }
  394.  
  395. #content{
  396. width:100vw;
  397. }
  398.  
  399. .box{
  400. width:calc(100vw - (1.5em + 4px));
  401. margin:0.5em;
  402. }
  403.  
  404. .b{
  405. width:100%;
  406. max-height:400px;
  407. }
  408.  
  409. }
  410.  
  411.  
  412.  
  413. </style>
  414. </head>
  415.  
  416. <body>
  417. <div id="everything">
  418.  
  419. <div id="sidebar">
  420. <div id="s-icon">
  421. <img src="https://78.media.tumblr.com/b83488d4c36724ab10e7679ec5977e1f/tumblr_p3smscNMS61wsskx3o4_r1_1280.jpg" alt="page icon">
  422. </div>
  423. <div id="s-desc">
  424. <p>
  425. A simple page meant to showcase the colors on a blog.
  426. </p>
  427. <p>
  428. This is a revamp of "<b>Farbenfroh</b>" (Page #1).
  429. </p>
  430. </div>
  431. <div id="s-contain">
  432. <!-- Control buttons -->
  433. <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  434. <button class="btn" onclick="filterSelection('pink')"> Pink</button>
  435. <button class="btn" onclick="filterSelection('red')"> Red</button>
  436. <button class="btn" onclick="filterSelection('orange')"> Orange</button>
  437. <button class="btn" onclick="filterSelection('yellow')"> Yellow</button>
  438. <button class="btn" onclick="filterSelection('green')"> Green</button>
  439. <button class="btn" onclick="filterSelection('turquoise')"> Turquoise</button>
  440. <button class="btn" onclick="filterSelection('blue')"> Blue</button>
  441. <button class="btn" onclick="filterSelection('purple')"> Purple</button>
  442. <button class="btn" onclick="filterSelection('neutral')"> Neutrals</button>
  443.  
  444.  
  445. </div>
  446. </div>
  447.  
  448. <div id="content">
  449. <div class="d-box">
  450. <div id="title">Farbenfroh</div>
  451. </div>
  452.  
  453. <div class="d-box">
  454. <div id="desc">
  455. <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
  456. </div>
  457. </div>
  458.  
  459. <div class="d-box filterbox">
  460. <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  461. <button class="btn" onclick="filterSelection('pink')"> Pink</button>
  462. <button class="btn" onclick="filterSelection('red')"> Red</button>
  463. <button class="btn" onclick="filterSelection('orange')"> Orange</button>
  464. <button class="btn" onclick="filterSelection('yellow')"> Yellow</button>
  465. <button class="btn" onclick="filterSelection('green')"> Green</button>
  466. <button class="btn" onclick="filterSelection('turquoise')"> Turquoise</button>
  467. <button class="btn" onclick="filterSelection('blue')"> Blue</button>
  468. <button class="btn" onclick="filterSelection('purple')"> Purple</button>
  469. <button class="btn" onclick="filterSelection('neutral')"> Neutrals</button>
  470. </div>
  471.  
  472. <!--
  473. For more color boxes, just add:
  474.  
  475. <a href="/tagged/[Color Tag]" title="tagged: [Color Tag]">
  476. <div class="box [Color Filter]">
  477. <div class="b [Box Number]"></div>
  478. <div class="text">[Color Name] | #[HEX Value]</div>
  479. </div>
  480. </a>
  481.  
  482. -->
  483.  
  484. <a href="/tagged/mulberry" title="tagged: mulberry">
  485. <div class="box purple">
  486. <div class="b one"></div>
  487. <div class="text">Mulberry | #a76c97</div>
  488. </div>
  489. </a>
  490.  
  491. <a href="/tagged/rose-quartz" title="tagged: rose quartz">
  492. <div class="box pink">
  493. <div class="b two"></div>
  494. <div class="text">Rose Quartz | #f7cac9</div>
  495. </div>
  496. </a>
  497.  
  498. <a href="/tagged/serenity" title="tagged: serenity">
  499. <div class="box blue">
  500. <div class="b three"></div>
  501. <div class="text">Serenity | #92a8d1</div>
  502. </div>
  503. </a>
  504.  
  505. <a href="/tagged/salmon-rose" title="tagged: salmon rose">
  506. <div class="box pink">
  507. <div class="b four"></div>
  508. <div class="text">Salmon Rose | #ff8d94</div>
  509. </div>
  510. </a>
  511.  
  512. <a href="/tagged/cornflowerblue" title="tagged: cornflowerblue">
  513. <div class="box blue">
  514. <div class="b five"></div>
  515. <div class="text">Cornflowerblue | #6495ed</div>
  516. </div>
  517. </a>
  518.  
  519. <a href="/tagged/ultra-violet" title="tagged: ultra violet">
  520. <div class="box purple">
  521. <div class="b six"></div>
  522. <div class="text">Ultra Violet | #5f4b8b</div>
  523. </div>
  524. </a>
  525.  
  526. <a href="/tagged/chateau-rose" title="tagged: chateau rose">
  527. <div class="box pink">
  528. <div class="b seven"></div>
  529. <div class="text">Chateau Rose | #d2738f</div>
  530. </div>
  531. </a>
  532.  
  533. <a href="/tagged/honeysuckle" title="tagged: honeysuckle">
  534. <div class="box pink">
  535. <div class="b eight"></div>
  536. <div class="text">Honeysuckle | #d94f70</div>
  537. </div>
  538. </a>
  539.  
  540. <a href="/tagged/jacaranda" title="tagged: jacaranda">
  541. <div class="box blue">
  542. <div class="b nine"></div>
  543. <div class="text">Jacaranda | #848dc5</div>
  544. </div>
  545. </a>
  546.  
  547. <a href="/tagged/purple-rose" title="tagged: purple rose">
  548. <div class="box purple">
  549. <div class="b ten"></div>
  550. <div class="text">Purple Rose | #b09fca</div>
  551. </div>
  552. </a>
  553.  
  554. <a href="/tagged/rosebloom" title="tagged: rosebloom">
  555. <div class="box pink">
  556. <div class="b eleven"></div>
  557. <div class="text">Rosebloom | #e290b2</div>
  558. </div>
  559. </a>
  560.  
  561. <div class="d-box">
  562. <div id="links">
  563.  
  564. <a href="/" title="Index">
  565. <div class="box-link">Index</div>
  566. </a>
  567.  
  568. <a href="/ask" title="Message">
  569. <div class="box-link">Message</div>
  570. </a>
  571.  
  572. <a href="/archive" title="Archive">
  573. <div class="box-link">Archive</div>
  574. </a>
  575.  
  576. <a href="/" title="Custom 1">
  577. <div class="box-link">Custom 1</div>
  578. </a>
  579.  
  580. <a href="/" title="Custom 2">
  581. <div class="box-link">Custom 2</div>
  582. </a>
  583.  
  584. <a href="https://silbrigthemes.tumblr.com/" title="Page by @silbrigthemes">
  585. <div class="box-link">Credit</div>
  586. </a>
  587.  
  588. </div>
  589. </div>
  590.  
  591. </div>
  592. </div>
  593.  
  594. <!-- FILTER SCRIPT (w3schools) -->
  595. <script>
  596. filterSelection("all")
  597. function filterSelection(c) {
  598. var x, i;
  599. x = document.getElementsByClassName("box");
  600. if (c == "all") c = "";
  601. // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  602. for (i = 0; i < x.length; i++) {
  603. w3RemoveClass(x[i], "show");
  604. if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  605. }
  606. }
  607.  
  608. // Show filtered elements
  609. function w3AddClass(element, name) {
  610. var i, arr1, arr2;
  611. arr1 = element.className.split(" ");
  612. arr2 = name.split(" ");
  613. for (i = 0; i < arr2.length; i++) {
  614. if (arr1.indexOf(arr2[i]) == -1) {
  615. element.className += " " + arr2[i];
  616. }
  617. }
  618. }
  619.  
  620. // Hide elements that are not selected
  621. function w3RemoveClass(element, name) {
  622. var i, arr1, arr2;
  623. arr1 = element.className.split(" ");
  624. arr2 = name.split(" ");
  625. for (i = 0; i < arr2.length; i++) {
  626. while (arr1.indexOf(arr2[i]) > -1) {
  627. arr1.splice(arr1.indexOf(arr2[i]), 1);
  628. }
  629. }
  630. element.className = arr1.join(" ");
  631. }
  632.  
  633. // Add active class to the current control button (highlight it)
  634. var btnContainer = document.getElementById("s-contain");
  635. var btns = btnContainer.getElementsByClassName("btn");
  636. for (var i = 0; i < btns.length; i++) {
  637. btns[i].addEventListener("click", function() {
  638. var current = document.getElementsByClassName("active");
  639. current[0].className = current[0].className.replace(" active", "");
  640. this.className += " active";
  641. });
  642. }
  643.  
  644. </script>
  645.  
  646. </body>
  647. </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!