API tools faq
paste
ninchuser

All In One Page 2 - Littoral - cactusthemes

ninchuser
Feb 25th, 2019
2,778
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 38.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.  
  5. <!--                      ALL IN ONE PAGE 2 - LITTORAL
  6.                                by cactusthemes
  7. -->
  8.  
  9. <!--                NOTES FOR EDITING THE PAGE: PLEASE READ
  10.  
  11.    - Blogrolls do not work on side blogs - if you're using this page on a side blog, please ctrl/cmd+f "delete this if side blog" and delete all of the things that are between those relevant brackets
  12.    - Please do not edit the CSS unless you know what you're doing - all the colors can be edited on the top of the page
  13.    - To start editing the actual content, ctrl/cmd+f "<body>." I've added relevant text for whatever you want/need to change.
  14.    
  15.                    THANKS FOR READING! HAVE FUN USING THIS PAGE
  16. -->
  17.  
  18. <!-- CREDITS:   - Vertical Carousel Tutorial by yeoli-thm
  19.                - Tooltip by Manos Malihu
  20.                - Icon font by suiomi
  21.                - Fade In/Tumblr Controls by cyantists
  22. -->
  23.  
  24. <title>{Title}</title>
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <meta name="description" content="{MetaDescription}">
  28. <meta name="viewport" content="width=device-width, initial-scale=1">
  29.  
  30. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  31.  
  32. <link href="https://fonts.googleapis.com/css?family=Staatliches|Roboto+Mono" rel="stylesheet">
  33.  
  34. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  35.  
  36. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  37.  
  38. <script src="https://static.tumblr.com/uxq3xua/7qIpnia5a/cactusthemes.pantone.js"></script>
  39.  
  40. <style type="text/css">
  41.  
  42. /* If you want to add more fonts, you can find them at https://fonts.google.com and add them to the page here */
  43.  
  44. /* If you want to change the icons, check out the options below. Unicodes for the icons can be found here: https://honeybee.suiomi.com/ */
  45.  
  46. /* ADJUST COLORS HERE */
  47.  
  48. :root {
  49.     --body-font:'Roboto Mono'; /* regular text font */
  50.     --title-font:'Staatliches'; /* title text font */
  51.     --text-font-size:14px; /* font size for the regular text */
  52.     --title-font-size:35px; /* font size for the title text */
  53.     --text-color:#000; /* color for the regular text */
  54.     --selection-background:#ff6f61; /* background color for the selection/tooltip */
  55.     --selection-text:#fff; /* text color for the selection/tooltip */
  56.     --odd-slide-background:#fff; /* background for the content of odd slides */
  57.     --even-slide-background:#f4f7fc; /* background for the content of even slides */
  58.     --icons-color:#fff; /* color for all of the icons */
  59.     --about-slide-icon:'\eade'; /* unicode for the about slide icon */
  60.     --faq-slide-icon:'\ebcf'; /* unicode for the faq slide icon */
  61.     --navi-slide-icon:'\ebe0'; /* unicode for the navi slide icon */
  62.     --blogroll-slide-icon:'\eb9c';  /* unicode for the blogroll slide icon */
  63.     --main-color-one:#263056; /* dark blue color in the preview */
  64.     --main-color-two:#ff6f61; /* pinkish color in the preview */
  65.     --main-color-three:#e1d2bf; /* brown color in the preview */
  66. }
  67.  
  68. /* PLEASE DO NOT EDIT THE CSS BEYOND HERE UNLESS YOU KNOW WHAT YOU'RE DOING */
  69.  
  70. body {
  71.     margin:0;
  72.     font-size:var(--text-font-size);
  73.     color:var(--text-color);
  74. }
  75.  
  76. iframe.iframe-controls--desktop {
  77.     white-space:nowrap!important;
  78.     z-index:99999999999999!important;
  79.     top:16px;
  80.     right:17px;
  81.     opacity:.8!important;
  82.     transition:all .5s ease-in-out;
  83.     -moz-transition:all .5s ease-in-out;
  84.     -o-transition:all .5s ease-in-out;
  85.     -webkit-transition:all .5s ease-in-out;
  86.     transform:scale(0.65);
  87.     transform-origin:100% 0;
  88.     -webkit-transform:scale(0.75);
  89.     -webkit-transform-origin:100% 0;
  90.     -o-transform:scale(0.75);
  91.     -o-transform-origin:100% 0;
  92.     -moz-transform:scale(0.75);
  93.     -moz-transform-origin:100% 0;
  94.     -ms-transform:scale(0.75);
  95.     -ms-transform-origin:100% 0;
  96. }
  97.  
  98. iframe.iframe-controls--desktop:hover {
  99.     opacity:1!important;
  100. }
  101.  
  102. iframe.tmblr-iframe--app-cta-button, iframe.iframe-controls--phone-mobile {
  103.     display:none!important;
  104. }
  105.  
  106. .tmblr-iframe-pushdown {
  107.     padding:0px!important;
  108. }
  109.  
  110. section:nth-of-type(odd) .helft::-webkit-scrollbar {
  111.     width:12px;
  112.     height:12px;
  113.     background:#e5e5e5;
  114.     border:5px solid var(--odd-slide-background);
  115.     border-radius:3px;
  116. }
  117.  
  118. section:nth-of-type(even) .helft::-webkit-scrollbar {
  119.     width:12px;
  120.     height:12px;
  121.     background:#e5e5e5;
  122.     border:5px solid var(--even-slide-background);
  123.     border-radius:3px;
  124. }
  125.  
  126. section:nth-of-type(odd) .helft::-webkit-scrollbar-thumb, section#etiketten .helft .inhoud article.labels:nth-of-type(odd) .labels_binnenste::-webkit-scrollbar-thumb {
  127.     border:2px solid #fff;
  128.     border-radius:10px;
  129.     background:var(--main-color-two);
  130. }
  131.  
  132. section:nth-of-type(even) .helft::-webkit-scrollbar-thumb, section#etiketten .helft .inhoud article.labels:nth-of-type(even) .labels_binnenste::-webkit-scrollbar-thumb {
  133.     border:2px solid #fff;
  134.     border-radius:10px;
  135.     background:var(--main-color-one);
  136. }
  137.  
  138. section#etiketten .helft .inhoud article.labels .labels_binnenste::-webkit-scrollbar {
  139.     width:9px;
  140.     height:9px;
  141.     background:#e5e5e5;
  142.     border:4px solid var(--odd-slide-background);
  143.     border-radius:3px;
  144. }
  145.  
  146. ::selection {
  147.     background:var(--selection-background);
  148.     color:var(--selection-text);
  149. }
  150.  
  151. ::-moz-selection {
  152.     background:var(--selection-background);
  153.     color:var(--selection-text);
  154. }
  155.  
  156. #s-m-t-tooltip {
  157.     max-width:300px;
  158.     overflow-x:auto;
  159.     margin:25px 20px;
  160.     padding:10px;
  161.     background:var(--selection-background);
  162.     color:var(--selection-text);
  163.     font-size:var(--text-font-size);
  164.     height:auto;
  165.     word-wrap:break-word;
  166.     z-index:9999!important;
  167.     text-transform:lowercase;
  168.     font-family:var(--body-font);
  169.     border-radius:10px;
  170. }
  171.  
  172. span.th {
  173.     display:inline-block;
  174. }
  175.  
  176. a {
  177.     text-decoration:none;
  178. }
  179.  
  180. #carousel {
  181.     overflow:hidden;
  182.     width:100%;
  183.     height:100vh;
  184. }
  185.  
  186. #carousel .wrapper {
  187.     position:relative;
  188.     width:100%;
  189.     height:100%;
  190.     transition:all .5s ease-in-out;
  191. }
  192.  
  193. #switch_1:checked ~ #carousel .wrapper {
  194.     -webkit-transform:translateY(0);
  195.     -ms-transform:translateY(0);
  196.     transform:translateY(0);
  197. }
  198.  
  199. #switch_2:checked ~ #carousel .wrapper {
  200.     -webkit-transform:translateY(-100%);
  201.     -ms-transform:translateY(-100%);
  202.     transform:translateY(-100%);
  203. }
  204.  
  205. #switch_3:checked ~ #carousel .wrapper {
  206.     -webkit-transform:translateY(-200%);
  207.     -ms-transform:translateY(-200%);
  208.     transform:translateY(-200%);
  209. }
  210.  
  211. #switch_4:checked ~ #carousel .wrapper {
  212.     -webkit-transform:translateY(-300%);
  213.     -ms-transform:translateY(-300%);
  214.     transform:translateY(-300%);
  215. }
  216.  
  217. section {
  218.     overflow:auto;
  219.     position:relative;
  220.     width:inherit;
  221.     height:inherit;
  222.     display:-webkit-box;
  223.     display:-ms-flexbox;
  224.     display:flex;
  225. }
  226.  
  227. section:nth-child(odd) {
  228.     background:var(--odd-slide-background);
  229. }
  230.  
  231. section:nth-child(odd) .pictogram {
  232.     background:linear-gradient(to top, var(--main-color-one) 50%, var(--main-color-three) 50%);
  233.     background-size:100% 200%;
  234.     background-position:0% 100%;
  235.     transition:all 1.5s ease;
  236. }
  237.  
  238. section:nth-child(odd) .picto_binnenste, section:first-of-type .onderin label:first-of-type, section:nth-of-type(3) .onderin label:nth-of-type(3) {
  239.     background:linear-gradient(to right, var(--main-color-one) 50%, var(--main-color-two) 50%);
  240.     background-size:200% 100%;
  241.     background-position:100%;
  242. }
  243.  
  244. section:nth-child(odd) .picto_binnenste {
  245.     transition:all .9s ease;
  246.     transition-delay:.4s;  
  247. }
  248.  
  249. section:first-of-type .onderin label:first-of-type, section:nth-of-type(3) .onderin label:nth-of-type(3) {
  250.     transition:all .8s ease;
  251.     transition-delay:1.1s;
  252. }
  253.  
  254. section:nth-child(odd) .onderin label:hover {
  255.     background:var(--main-color-one);
  256. }
  257.  
  258. section:nth-child(odd) .onderin {
  259.     background:linear-gradient(to right, var(--main-color-two) 50%, var(--main-color-three) 50%);
  260.     background-size:200% 100%;
  261.     background-position:100%;
  262.     transition:all 1s ease;
  263.     transition-delay:1s;
  264. }
  265.  
  266. section:nth-child(odd) .helft h2 {
  267.     color:var(--main-color-two);
  268.     background:var(--odd-slide-background);
  269. }
  270.  
  271. section:nth-child(odd).actief .pictogram, section:nth-child(even).actief .pictogram, section:nth-child(odd).actief nav, section:nth-child(even).actief nav {
  272.     background-position:200% 0%;
  273. }
  274.  
  275. section:nth-child(odd).actief .onderin, section:nth-child(odd).actief .picto_binnenste, section:first-of-type.actief .onderin label:first-of-type, section:nth-of-type(3).actief .onderin label:nth-of-type(3) {
  276.     background-position:0%;
  277. }
  278.  
  279. section:nth-child(even) {
  280.     background:var(--even-slide-background);
  281.     -webkit-box-orient:horizontal;
  282.     -webkit-box-direction:reverse;
  283.     -ms-flex-direction:row-reverse;
  284.     flex-direction:row-reverse;
  285. }
  286.  
  287. section:nth-child(even) .helft {
  288.     margin-left:0;
  289. }
  290.  
  291. section:nth-child(even) .pictogram {
  292.     background:linear-gradient(to top, var(--main-color-three) 50%, var(--main-color-one) 50%);
  293.     background-size:100% 200%;
  294.     background-position:0% 100%;
  295.     transition:all 1.5s ease;
  296. }
  297.  
  298. section:nth-child(even) .picto_binnenste, section:nth-of-type(2) .onderin label:nth-of-type(2), section:nth-of-type(4) .onderin label:nth-of-type(4) {
  299.     background:linear-gradient(to right, var(--main-color-one) 50%, var(--main-color-two) 50%);
  300.     background-size:200% 100%;
  301.     background-position:0%;
  302. }
  303.  
  304. section:nth-child(even) .picto_binnenste {
  305.     transition:all .9s ease;
  306.     transition-delay:.4s;  
  307. }
  308.  
  309. section:nth-of-type(2) .onderin label:nth-of-type(2), section:nth-of-type(4) .onderin label:nth-of-type(4) {
  310.     transition:all .8s ease;
  311.     transition-delay:1.1s;
  312. }
  313.  
  314. section:nth-child(even) .onderin label:hover {
  315.     background:var(--main-color-two);
  316. }
  317.  
  318. section:nth-child(even) .onderin {
  319.     background:linear-gradient(to right, var(--main-color-two) 50%, var(--main-color-three) 50%);
  320.     background-size:200% 100%;
  321.     background-position:0%;
  322.     transition:all 1s ease;
  323.     transition-delay:1s;
  324. }
  325.  
  326. section:nth-child(even) .helft h2 {
  327.     background:var(--even-slide-background);
  328.     color:var(--main-color-one);
  329. }
  330.  
  331. section:nth-child(even).actief .onderin {
  332.     background-position:100%;
  333. }
  334.  
  335. section:nth-child(even).actief .picto_binnenste, section:nth-of-type(2).actief .onderin label:nth-of-type(2), section:nth-of-type(4).actief .onderin label:nth-of-type(4) {
  336.     background-position:101%;
  337. }
  338.  
  339. section .pictogram {
  340.     height:100%;
  341.     width:40%;
  342.     position:relative;
  343.     display:-webkit-inline-box;
  344.     display:-ms-inline-flexbox;
  345.     display:inline-flex;
  346.     -webkit-box-align:center;
  347.     -ms-flex-align:center;
  348.     align-items:center;
  349.     -webkit-box-pack:center;
  350.     -ms-flex-pack:center;
  351.     justify-content:center;
  352.     vertical-align:top;
  353. }
  354.  
  355. section .picto_binnenste {
  356.     text-align:center;
  357.     padding:20px;
  358.     border-radius:70px;
  359. }
  360.  
  361. section .pictogram .th_omheen::before {
  362.     color:var(--icons-color);
  363.     font-size:70px;
  364.     font-family:'honeybee';
  365. }
  366.  
  367. section:first-of-type .pictogram .th_omheen::before, section .onderin label[for=switch_1]::before, section nav label[for=switch_1]::after {
  368.     content:var(--about-slide-icon);    
  369. }
  370.  
  371. section:nth-of-type(2) .pictogram .th_omheen::before, section .onderin label[for=switch_2]::before, section nav label[for=switch_2]::after {
  372.     content:var(--faq-slide-icon);    
  373. }
  374.  
  375. section:nth-of-type(3) .pictogram .th_omheen::before, section .onderin label[for=switch_3]::before, section nav label[for=switch_3]::after {
  376.     content:var(--navi-slide-icon);    
  377. }
  378.  
  379. section:nth-of-type(4) .pictogram .th_omheen::before, section .onderin label[for=switch_4]::before, section nav label[for=switch_4]::after {
  380.     content:var(--blogroll-slide-icon);    
  381. }
  382.  
  383. section .pictogram .th_omheen {
  384.     width:70px;
  385.     height:70px;
  386.     margin:auto;
  387. }
  388.  
  389. section .pictogram .onderin {
  390.     width:100%;
  391.     height:10%;
  392.     bottom:0;
  393.     position:absolute;
  394.     display:-webkit-box;
  395.     display:-ms-flexbox;
  396.     display:inline-flex;
  397.     -webkit-box-align:center;
  398.     -ms-flex-align:center;
  399.     align-items:center;
  400.     -webkit-box-pack:center;
  401.     -ms-flex-pack:center;
  402.     justify-content:center;
  403. }
  404.  
  405. section .onderin label {
  406.     color:var(--icons-color);
  407.     margin:0px 5px;
  408.     height:25px;
  409.     width:25px;
  410.     padding:10px;
  411.     border-radius:50px;
  412.     cursor:pointer;
  413.     transition:all .5s ease-in-out;
  414. }
  415.  
  416. section .onderin label:first-of-type {
  417.     margin-left:0;
  418. }
  419.  
  420. section .onderin label:last-of-type {
  421.     margin-right:0;
  422. }
  423.  
  424. section .onderin label::before {
  425.     font-family:'honeybee';
  426.     font-size:25px;
  427. }
  428.  
  429. section nav {
  430.     display:none;
  431.     height:100%;
  432.     width:10%;
  433.     position:relative;
  434.     -webkit-box-align:center;
  435.     -ms-flex-align:center;
  436.     align-items:center;
  437.     -webkit-box-pack:center;
  438.     -ms-flex-pack:center;
  439.     justify-content:center;
  440.     vertical-align:top;
  441.     -ms-flex-wrap:wrap;
  442.     flex-wrap:wrap;
  443. }
  444.  
  445. section:nth-child(odd) nav {
  446.     background:linear-gradient(to top, var(--main-color-two) 50%, var(--main-color-three) 50%);
  447.     background-size:100% 200%;
  448.     background-position:0% 100%;
  449.     transition:all 1.5s ease;
  450. }
  451.  
  452. section:nth-child(even) nav {
  453.     background:linear-gradient(to top, var(--main-color-three) 50%, var(--main-color-one) 50%);
  454.     background-size:100% 200%;
  455.     background-position:0% 100%;
  456.     transition:all 1.5s ease;
  457. }
  458.  
  459. section nav label {
  460.     margin-left:calc(100% - 12.5px);
  461.     margin-right:calc(100% - 12.5px);
  462.     text-align:center;
  463.     width:25px;
  464.     height:25px;
  465.     padding:10px;
  466.     border-radius:50px;
  467.     cursor:pointer;
  468.     transition:all .5s ease-in-out;
  469. }
  470.  
  471. section nav label::after {
  472.     font-family:'honeybee';
  473.     color:var(--icons-color);
  474.     font-size:25px;
  475. }
  476.  
  477. section:nth-child(odd) nav label:hover {
  478.     background:var(--main-color-one);
  479. }
  480.  
  481. section:first-child nav label:first-of-type, section:nth-child(3) nav label:nth-child(3) {
  482.     background:linear-gradient(to top, var(--main-color-two) 50%, var(--main-color-one) 50%);
  483.     background-size:100% 200%;
  484.     background-position:0% 100%;
  485.     transition:all .7s ease;
  486. }
  487.  
  488. section:first-child.actief nav label:first-child, section:nth-child(3).actief nav label:nth-child(3) {
  489.     background-position:200% 0%;
  490. }
  491.  
  492. section:nth-child(even) nav label:hover {
  493.     background:var(--main-color-two);
  494. }
  495.  
  496. section:nth-child(2) nav label:nth-child(2), section:nth-child(4) nav label:nth-child(4) {
  497.     background:linear-gradient(to top, var(--main-color-one) 50%, var(--main-color-two) 50%);
  498.     background-size:100% 200%;
  499.     background-position:0% 100%;
  500.     transition:all .7s ease;
  501. }
  502.  
  503. section:nth-child(2).actief nav label:nth-child(2), section:nth-child(4).actief nav label:nth-child(4) {
  504.     background-position:200% 0%;
  505. }
  506.  
  507. section .helft {
  508.     width:60%;
  509.     height:100%;
  510.     overflow:auto;
  511.     display:inline-block;
  512.     vertical-align:top;
  513.     z-index:99;
  514. }
  515.  
  516. section .helft .inhoud {
  517.     font-family:var(--body-font);
  518.     padding:0px 25px 15px 25px;
  519.     box-sizing:border-box;
  520.     margin-top:80px;
  521. }
  522.  
  523. section .helft h2 {
  524.     font-size:var(--title-font-size);
  525.     font-family:var(--title-font);
  526.     letter-spacing:2px;
  527.     padding:15px 25px;
  528.     margin:0;
  529.     width:60%;
  530.     position:fixed;
  531.     box-sizing:border-box;
  532.     z-index:1;
  533. }
  534.  
  535. section#over a {
  536.     background:linear-gradient(to right, var(--main-color-one) 50%, var(--main-color-two) 50%);
  537.     -webkit-text-fill-color:transparent;
  538.     -webkit-background-clip:text;
  539.     background-size:200% 100%;
  540.     background-position:100%;
  541.     transition:all .5s ease-in-out;
  542. }
  543.  
  544. section#over a:hover {
  545.     background-position:0%;
  546. }
  547.  
  548. section .inhoud .helevraag {
  549.     margin-top:35px;
  550. }
  551.  
  552. section .inhoud .helevraag:first-of-type {
  553.     margin-top:0;
  554. }
  555.  
  556. section .inhoud .vraag .th_omheen, section .inhoud .antwoord .th_omheen {
  557.     background:var(--main-color-one);
  558.     width:50px;
  559.     height:50px;
  560.     border-radius:50px;
  561.     color:var(--icons-color);
  562.     display:-webkit-inline-box;
  563.     display:-ms-inline-flexbox;
  564.     display:inline-flex;
  565.     -webkit-box-pack:center;
  566.     -ms-flex-pack:center;
  567.     justify-content:center;
  568.     vertical-align:top;
  569. }
  570.  
  571. section .inhoud .vraag .th_omheen {
  572.     font-size:40px;    
  573. }
  574.  
  575. section .inhoud .antwoord .th_omheen {
  576.     font-size:28px;
  577.     -webkit-box-align:center;
  578.     -ms-flex-align:center;
  579.     align-items:center;
  580. }
  581.  
  582. section .inhoud .antwoord span.th {
  583.     border:3px solid var(--icons-color);
  584.     border-radius:50px;
  585.     width:32px;
  586.     height:35px;
  587.     padding:0 0 0 3px;
  588. }
  589.  
  590. section .inhoud .vraag .vraaginhoud, section .inhoud .antwoord .antwoordinhoud {
  591.     display:inline-block;
  592.     vertical-align:top;
  593.     min-height:50px;
  594.     width:calc(100% - 70px);
  595.     border-radius:15px;
  596.     box-sizing:border-box;
  597.     padding:10px;
  598.     position:relative;
  599. }
  600.  
  601. section .inhoud .vraag .vraaginhoud {
  602.     background:var(--main-color-two);
  603.     margin-left:10px;
  604. }
  605.  
  606. section .inhoud .vraag .vraaginhoud a {
  607.     color:var(--main-color-three);  
  608.     transition:all .5s ease-in-out;
  609. }
  610.  
  611. section .inhoud .antwoord .antwoordinhoud {
  612.     background:var(--main-color-three);
  613.     margin-right:10px;
  614. }
  615.  
  616. section .inhoud .antwoord .antwoordinhoud a {
  617.     color:var(--main-color-two);
  618.     transition:all .5s ease-in-out;
  619. }
  620.  
  621. section .inhoud .vraag .vraaginhoud a:hover, section .inhoud .antwoord .antwoordinhoud a:hover {
  622.     color:var(--main-color-one);
  623. }
  624.  
  625. section .inhoud .vraag .vraaginhoud::before, section .inhoud .antwoord .antwoordinhoud::before {
  626.     content:'';
  627.     width:15px;
  628.     height:15px;
  629.     -webkit-transform:rotate(45deg);
  630.     -ms-transform:rotate(45deg);
  631.     transform:rotate(45deg);
  632.     position:absolute;
  633.     z-index:-1;
  634. }
  635.  
  636. section .inhoud .vraag .vraaginhoud::before {
  637.     background:var(--main-color-two);
  638.     margin-left:-15px;
  639.     margin-top:7.5px;    
  640. }
  641.  
  642. section .inhoud .antwoord .antwoordinhoud::before {
  643.     background:var(--main-color-three);
  644.     margin-left:calc(100% - 17.5px);
  645.     margin-top:7.5px;
  646. }
  647.  
  648. section .inhoud .antwoord {
  649.     margin-top:15px;
  650. }
  651.  
  652. section#vragen .inhoud iframe#ask_form {
  653.     margin-top:35px;
  654. }
  655.  
  656. section#etiketten .helft .inhoud {
  657.     margin:60px 0px -20px -20px;
  658. }
  659.  
  660. section .inhoud article.labels {
  661.     width:calc(33% - 40px);
  662.     max-width:calc(33% - 40px);
  663.     word-wrap:break-word;
  664.     display:inline-block;
  665.     margin:20px;
  666. }
  667.  
  668. section .inhoud article.labels h3 {
  669.     color:var(--icons-color);
  670.     margin:0;
  671.     padding:10px;
  672.     border-radius:15px;
  673. }
  674.  
  675. section .inhoud article.labels:nth-of-type(odd) h3 {
  676.     background:var(--main-color-one);
  677. }
  678.  
  679. section .inhoud article.labels:nth-of-type(even) h3 {
  680.     background:var(--main-color-two);
  681. }
  682.  
  683. section .inhoud article.labels .labels_binnenste {
  684.     padding:10px;
  685.     overflow-y:scroll;
  686.     max-height:200px;
  687. }
  688.  
  689. section .inhoud article.labels a {
  690.     display:block;
  691.     position:relative;
  692.     color:#000;
  693.     transition:all .5s ease-in-out;
  694. }
  695.  
  696. section .inhoud article.labels a:hover {
  697.     color:var(--main-color-two);
  698. }
  699.  
  700. section .inhoud article.labels a.meer::after {
  701.     content:'\ebd8';
  702.     font-family:'honeybee';
  703.     display:inline-block;
  704.     margin-top:3px;
  705.     position:absolute;
  706.     margin-left:5px;
  707.     transition:all .5s ease-in-out;
  708. }
  709.  
  710. section .inhoud article.labels a.meer.open::after {
  711.     -webkit-transform:scaleY(-1);
  712.     -ms-transform:scaleY(-1);
  713.     transform:scaleY(-1);
  714. }
  715.  
  716. section .inhoud article.labels .meerlijst {
  717.     display:none;
  718.     margin-left:10px;
  719. }
  720.  
  721. section#volgend .helft .inhoud {
  722.     margin:60px 0px -20px -20px;
  723. }
  724.  
  725. section .inhoud a.persoon {
  726.     width:calc(33% - 40px);
  727.     margin:20px;
  728.     display:-webkit-inline-box;
  729.     display:-ms-inline-flexbox;
  730.     display:inline-flex;
  731.     -webkit-box-align:center;
  732.     -ms-flex-align:center;
  733.     align-items:center;
  734.     border-radius:15px;
  735.     padding:10px;
  736.     box-sizing:border-box;
  737.     color:var(--text-color);
  738.     transition:all .5s ease;
  739. }
  740.  
  741. section .inhoud a.persoon:nth-of-type(odd) {
  742.     background:linear-gradient(to right, var(--main-color-three) 50%, var(--main-color-two) 50%);
  743.     background-size:200% 100%;
  744.     background-position:100%;
  745. }
  746.  
  747. section .inhoud a.persoon:nth-of-type(even) {
  748.     background:linear-gradient(to right, var(--main-color-two) 50%, var(--main-color-three) 50%);
  749.     background-size:200% 100%;
  750.     background-position:100%;
  751. }
  752.  
  753. section .inhoud a.persoon:hover {
  754.     background-position:0%;
  755. }
  756.  
  757. section .inhoud a.persoon img.volg_afb {
  758.     width:calc(30% - 15px);
  759.     display:inline-block;
  760.     vertical-align:top;
  761.     border-radius:10px;
  762. }
  763.  
  764. section .inhoud a.persoon .volghelft {
  765.     width:calc(70% - 7.5px);
  766.     display:inline-block;
  767.     margin-left:14px;
  768.     vertical-align:top;
  769.     word-wrap:break-word;
  770. }
  771.  
  772. section .inhoud a.persoon .volghelft span, section .inhoud a.persoon .volghelft i {
  773.     display:block;
  774.     text-align:center;
  775. }
  776.  
  777. section .inhoud a.persoon .volghelft i {
  778.     font-size:calc(var(--text-font-size) - 2px);
  779. }
  780.  
  781. /* CREDIT. DO NOT TOUCH */
  782.  
  783. #credz {
  784.     position:fixed;
  785.     bottom:15px;
  786.     right:20px;
  787.     width:33px;
  788.     height:33px;
  789.     border-radius:50px;
  790.     border:1px solid rgba(0,0,0,.1);
  791.     background-image:url('https://78.media.tumblr.com/avatar_09d2b1f05d49_128.pnj');
  792.     background-repeat:no-repeat;
  793.     background-position:center center;
  794.     background-size:28px;
  795.     transition:all .5s ease-in-out;
  796. }
  797.  
  798. a[href="https://cactusthemes.tumblr.com"]:hover > #credz {
  799.     -webkit-transform:scale(1.15);
  800.     -ms-transform:scale(1.15);
  801.     transform:scale(1.15);
  802. }
  803.  
  804. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  805. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  806. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  807. .fade-in {
  808.    opacity:0;
  809.    -webkit-animation:fadeIn ease-in 1;
  810.    -moz-animation:fadeIn ease-in 1;
  811.    animation:fadeIn ease-in 1;
  812.    -webkit-animation-fill-mode:forwards;
  813.    -moz-animation-fill-mode:forwards;
  814.    animation-fill-mode:forwards;
  815.    -webkit-animation-duration:1s;
  816.    -moz-animation-duration:1s;
  817.    animation-duration:1s;
  818. }
  819. .fade-in.one {
  820.    -webkit-animation-delay:0s;
  821.    -moz-animation-delay:0s;
  822.    animation-delay:0s;
  823. }
  824. .fade-in.two {
  825.    -webkit-animation-delay:0.8s;
  826.    -moz-animation-delay:0.8s;
  827.    animation-delay:0.8s;
  828. }
  829.  
  830. @media only screen and (max-width:1200px) and (min-width:481px) {
  831.     section .inhoud article.labels, section .inhoud a.persoon {
  832.         width:calc(50% - 40px);
  833.         max-width:calc(50% - 40px);
  834.     }
  835.    
  836.     section .inhoud a.persoon:nth-child(4n), section.inhoud a.persoon:nth-child(4n+1) {
  837.         background:linear-gradient(to right, var(--main-color-three) 50%, var(--main-color-two) 50%);
  838.         background-size:200% 100%;
  839.         background-position:100%;
  840.     }
  841.    
  842.     section .inhoud a.persoon:nth-child(4n+2), section .inhoud a.persoon:nth-child(4n+3) {
  843.         background:linear-gradient(to right, var(--main-color-two) 50%, var(--main-color-three) 50%);
  844.         background-size:200% 100%;
  845.         background-position:100%;
  846.     }
  847.    
  848.     section .inhoud a.persoon:hover {
  849.         background-position:0%;
  850.     }
  851.    
  852.     section .inhoud article.labels:nth-child(4n) h3, section .inhoud article.labels:nth-child(4n+1) h3 {
  853.         background:var(--main-color-one);
  854.     }
  855.    
  856.     section .inhoud article.labels:nth-child(4n+2) h3, section .inhoud article.labels:nth-child(4n+3) h3 {
  857.         background:var(--main-color-two);
  858.     }
  859.    
  860.     section#etiketten .helft .inhoud article.labels:nth-child(4n) .labels_binnenste::-webkit-scrollbar-thumb, section#etiketten .helft .inhoud article.labels:nth-child(4n+1) .labels_binnenste::-webkit-scrollbar-thumb {
  861.     border:2px solid #fff;
  862.     border-radius:10px;
  863.     background:var(--main-color-two);
  864. }
  865.  
  866. section#etiketten .helft .inhoud article.labels:nth-child(4n+2) .labels_binnenste::-webkit-scrollbar-thumb, section#etiketten .helft .inhoud article.labels:nth-child(4n+3) .labels_binnenste::-webkit-scrollbar-thumb {
  867.     border:2px solid #fff;
  868.     border-radius:10px;
  869.     background:var(--main-color-one);
  870. }
  871.  
  872. }
  873.  
  874. @media only screen and (max-width:800px) and (min-width:751px) {
  875.     section .pictogram {
  876.         width:35%;
  877.     }
  878.    
  879.     section .helft, section .helft h2 {
  880.         width:65%;
  881.     }
  882. }
  883.  
  884. @media only screen and (max-width:750px) {
  885.     section .pictogram {
  886.         display:none;
  887.     }
  888.    
  889.     section .helft, section .helft h2 {
  890.         width:90%;
  891.     }
  892.    
  893.     section nav {
  894.             display:-webkit-inline-box;
  895.             display:-ms-inline-flexbox;
  896.             display:inline-flex;
  897.     }
  898.    
  899.     #credz {
  900.         right:12.5px;
  901.     }
  902. }
  903.  
  904. @media only screen and (max-width:480px) {
  905.     section nav {
  906.         width:15%;
  907.     }
  908.    
  909.     section .helft, section .helft h2 {
  910.         width:85%;
  911.     }
  912.    
  913.     section#vragen .helft .inhoud {
  914.         margin-top:120px;
  915.     }
  916.    
  917.     section .inhoud article.labels, section .inhoud a.persoon {
  918.         width:calc(100% - 40px);
  919.         max-width:calc(100% - 40px);
  920.     }
  921.    
  922.     #credz {
  923.         right:12.5px;
  924.     }
  925. }
  926.  
  927. @media only screen and (max-width:320px) {
  928.     section#over .helft .inhoud {
  929.         margin-top:120px;
  930.     }
  931.    
  932.     section#vragen .helft .inhoud {
  933.         margin-top:165px;
  934.     }
  935.    
  936.     section nav label {
  937.         width:20px;
  938.         height:20px;
  939.         margin-left:calc(100% - 10px);
  940.         margin-right:calc(100% - 10px);
  941.     }
  942.    
  943.     section nav label::after {
  944.         font-size:20px;
  945.     }
  946.    
  947.     #credz {
  948.         right:10px;
  949.         -webkit-transform:scale(.9);
  950.         -ms-transform:scale(.9);
  951.         transform:scale(.9);
  952.     }
  953. }
  954.  
  955. </style>
  956.  
  957. </head>
  958.  
  959. <body>
  960.  
  961. <input type="radio" name="switch" id="switch_1" hidden checked="checked">
  962. <input type="radio" name="switch" id="switch_2" hidden>
  963. <input type="radio" name="switch" id="switch_3" hidden>
  964. <input type="radio" name="switch" id="switch_4" hidden>
  965.  
  966. <div id="carousel">
  967.  
  968. <div class="wrapper">
  969.  
  970. <section id="over">
  971.  
  972. <div class="pictogram fade-in one">
  973.     <div class="picto_binnenste">
  974.         <div class="th_omheen"></div>
  975.     </div>
  976.     <div class="onderin">
  977.         <label for="switch_1"></label>
  978.         <label for="switch_2"></label>
  979.         <label for="switch_3"></label>
  980.         <!-- DELETE THIS IF SIDE BLOG -->
  981.         <label for="switch_4"></label>
  982.         <!-- END OF DELETE THIS IF SIDE BLOG -->
  983.     </div>
  984. </div>
  985.  
  986. <nav>
  987.     <label for="switch_1"></label>
  988.     <label for="switch_2"></label>
  989.     <label for="switch_3"></label>
  990.     <!-- DELETE THIS IF SIDE BLOG -->
  991.     <label for="switch_4"></label>
  992.     <!-- END OF DELETE THIS IF SIDE BLOG -->
  993. </nav>
  994.  
  995. <div class="helft fade-in two">
  996. <h2>About this user</h2> <!-- ABOUT SECTION TITLE -->
  997. <div class="inhoud">
  998. <!-- YOU CAN DELETE EVERYTHING FROM HERE TO THE OTHER BRACKET AND WRITE YOUR OWN CONTENT -->
  999.     This is where you put some info about yourself! You can format it however you want: you can use <b>bold format</b>, <i>italic</i> format, <u>underline format</u>. You can make links too - <a href="/" title="a link title">cool right?</a> - or you can make lists! Just like this.
  1000.    
  1001.     <ul>
  1002.         <li>An unlisted list!</li>
  1003.         <li>More points</li>
  1004.         <li>Wow nice facts</li>
  1005.     </ul>
  1006.    
  1007.     <ol>
  1008.         <li>We also have ordered lists</li>
  1009.         <li>This is number two</li>
  1010.     </ol>
  1011.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis non quam a facilisis. Duis vehicula arcu vitae euismod volutpat. Suspendisse accumsan ex non lacus fringilla, et tristique augue auctor. Quisque velit odio, pellentesque eu aliquam a, sagittis non erat. Nunc pellentesque placerat mi pulvinar porta. Ut blandit enim nisi, id varius nisi laoreet vel. Nam tellus nibh, volutpat eget odio eu, pretium pretium felis.
  1012. <br><br>
  1013. In placerat dui eget felis convallis molestie. Donec aliquet nec mi vitae vestibulum. Proin semper eros non tempor tristique. Vestibulum et commodo est. Sed et massa quis ligula mattis hendrerit sed eget risus. Duis faucibus, dolor ac lacinia commodo, odio diam pulvinar arcu, quis posuere nisi orci eu nibh. Nullam lectus dolor, porta vitae elementum a, congue nec mauris. Quisque faucibus risus eu pulvinar vulputate. Praesent eget nulla at mi faucibus convallis quis sit amet purus. Aenean dictum magna ac tortor posuere, non auctor risus fermentum.
  1014. <br><br>
  1015. Etiam venenatis lectus eu fringilla suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean at est hendrerit, dignissim nisl quis, tincidunt lacus. Mauris augue ligula, pulvinar a iaculis feugiat, auctor et velit. Sed non urna non augue luctus rutrum. Nulla eu tincidunt urna, nec pellentesque nisi. Maecenas lacinia leo auctor, dignissim erat vitae, bibendum tortor.
  1016. <br><br>
  1017. Vestibulum condimentum tortor ut lacus malesuada, vitae sollicitudin nulla volutpat. Donec eget nibh placerat, lacinia lacus at, posuere dui. Vivamus gravida id lectus ac porta. Vestibulum fringilla bibendum malesuada. Morbi fermentum lacinia lorem in lacinia. Nulla congue elit metus, consectetur porttitor nulla ornare ut. Sed vestibulum turpis et lorem tempus, ut ultricies ante viverra. Mauris eget sem nec quam mollis luctus quis non enim. Vestibulum ornare condimentum mauris, non dignissim velit auctor ac.
  1018. <br><br>
  1019. Aenean tempus magna dui, eu ornare dolor finibus in. Mauris augue turpis, efficitur vel egestas nec, molestie id nulla. Mauris non consectetur nulla. Maecenas egestas mauris tellus, vitae condimentum ligula faucibus non. Nullam ut ultrices ante, eu imperdiet orci. Curabitur varius nisi mauris, quis finibus elit accumsan vel. Nullam dictum mollis turpis a malesuada. Suspendisse tellus ligula, blandit quis sollicitudin ut, varius id urna. Proin et magna et magna pretium tincidunt. Phasellus eleifend et massa vel bibendum. Pellentesque a dignissim tellus. Duis hendrerit turpis libero, vel congue erat molestie ac. Mauris faucibus, purus et rhoncus hendrerit, lorem velit sollicitudin nisl, tincidunt semper sem nisi non urna. Nullam non felis laoreet, finibus est blandit, placerat tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  1020. <!-- END OF CONTENT YOU CAN DELETE -->
  1021. </div>
  1022.  
  1023. </div>
  1024.  
  1025. </section>
  1026.  
  1027. <section id="vragen">
  1028.  
  1029. <div class="pictogram">
  1030.     <div class="picto_binnenste">
  1031.         <div class="th_omheen"></div>
  1032.     </div>
  1033.     <div class="onderin">
  1034.         <label for="switch_1"></label>
  1035.         <label for="switch_2"></label>
  1036.         <label for="switch_3"></label>
  1037.         <!-- DELETE THIS IF SIDE BLOG -->
  1038.         <label for="switch_4"></label>
  1039.         <!-- END OF DELETE THIS IF SIDE BLOG -->
  1040.     </div>
  1041. </div>
  1042.  
  1043. <nav>
  1044.     <label for="switch_1"></label>
  1045.     <label for="switch_2"></label>
  1046.     <label for="switch_3"></label>
  1047.     <!-- DELETE THIS IF SIDE BLOG -->
  1048.     <label for="switch_4"></label>
  1049.     <!-- END OF DELETE THIS IF SIDE BLOG -->
  1050. </nav>
  1051.  
  1052. <div class="helft">
  1053.     <h2>Frequently Asked Questions</h2> <!-- F.A.Q. SECTION TITLE -->
  1054.     <div class="inhoud">
  1055.    
  1056.     <!-- TEMPLATE FOR QUESTIONS:
  1057.    
  1058.    <div class="helevraag">
  1059.            <div class="vraag">
  1060.                <div class="th_omheen">
  1061.                    <span class="th th-question-o" aria-hidden="true"></span>
  1062.                </div>
  1063.                <div class="vraaginhoud">
  1064.                    QUESTION CONTENT HERE
  1065.                </div>
  1066.            </div>
  1067.            <div class="antwoord">
  1068.                <div class="antwoordinhoud">
  1069.                    ANSWER CONTENT HERE
  1070.                </div>
  1071.                <div class="th_omheen">
  1072.                    <span class="th th-user-o" aria-hidden="true"></span>
  1073.                </div>
  1074.            </div>
  1075.        </div>
  1076.    
  1077.    -->
  1078.    
  1079.     <!-- YOU CAN DELETE THE STUFF FROM HERE TO THE OTHER BRACKET -->
  1080.    
  1081.         <div class="helevraag">
  1082.             <div class="vraag">
  1083.                 <div class="th_omheen">
  1084.                     <span class="th th-question-o" aria-hidden="true"></span>
  1085.                 </div>
  1086.                 <div class="vraaginhoud">
  1087.                     Question 1? Wow, what a long question! Plus, even here you can format it using HTML, check it out: <b>bold</b>, <i>italic</i>, <u>underline</u>, <a href="/">links</a>...
  1088.                 </div>
  1089.             </div>
  1090.             <div class="antwoord">
  1091.                 <div class="antwoordinhoud">
  1092.                     Answer 1! Yes, you are completely right ^^ Plus, just like with the about section, you can use lists here too.
  1093.                     <ul>
  1094.                     <li>Ooooh fancy, right?</li>
  1095.                     <li>So many bullet points, the possibilities are ENDLESS!</li>
  1096.                     <li>One more for the road and then I'm done</li>
  1097.                     </ul>
  1098.                     <ol>
  1099.                     <li>Plus, more listed lists! This is number one</li>
  1100.                     <li>Numero dos</li>
  1101.                     </ol>
  1102.                 </div>
  1103.                 <div class="th_omheen">
  1104.                     <span class="th th-user-o" aria-hidden="true"></span>
  1105.                 </div>
  1106.             </div>
  1107.         </div>
  1108.        
  1109.         <div class="helevraag">
  1110.             <div class="vraag">
  1111.                 <div class="th_omheen">
  1112.                     <span class="th th-question-o" aria-hidden="true"></span>
  1113.                 </div>
  1114.                 <div class="vraaginhoud">
  1115.                     The 2nd question! You can add as much of these as you want. Here comes the - obviously - most important one: where can you find the code for this awesome page?
  1116.                 </div>
  1117.             </div>
  1118.             <div class="antwoord">
  1119.                 <div class="antwoordinhoud">
  1120.                     Answer 2! How nice of you to ask, it's great to hear that you find this page so awesome :p You can find the code for this page here on pastebin. Also, just as an aside, this page was made for <a href="http://codingcabin.tumblr.com/post/181607465857/pantone-colour-of-the-year-2019-challenge-coding">Pantone Challenge</a> ^^
  1121.                 </div>
  1122.                 <div class="th_omheen">
  1123.                     <span class="th th-user-o" aria-hidden="true"></span>
  1124.                 </div>
  1125.             </div>
  1126.         </div>
  1127.        
  1128.         <!-- END OF THE STUFF YOU CAN DELETE -->
  1129.        
  1130.         <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!–[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]–>
  1131.        
  1132.     </div>
  1133. </div>
  1134.  
  1135. </section>
  1136.  
  1137. <section id="etiketten">
  1138.  
  1139. <div class="pictogram">
  1140.     <div class="picto_binnenste">
  1141.         <div class="th_omheen"></div>
  1142.     </div>
  1143.     <div class="onderin">
  1144.         <label for="switch_1"></label>
  1145.         <label for="switch_2"></label>
  1146.         <label for="switch_3"></label>
  1147.         <!-- DELETE THIS IF SIDE BLOG -->
  1148.         <label for="switch_4"></label>
  1149.         <!-- END OF DELETE THIS IF SIDE BLOG -->
  1150.     </div>
  1151. </div>
  1152.  
  1153. <nav>
  1154.     <label for="switch_1"></label>
  1155.     <label for="switch_2"></label>
  1156.     <label for="switch_3"></label>
  1157.     <!-- DELETE THIS IF SIDE BLOG -->
  1158.     <label for="switch_4"></label>
  1159.     <!-- END OF DELETE THIS IF SIDE BLOG -->
  1160. </nav>
  1161.  
  1162. <div class="helft">
  1163.     <h2>Navigation</h2> <!-- NAVIGATION SECTION TITLE -->
  1164.     <div class="inhoud">
  1165.    
  1166.     <!-- TEMPLATE FOR LINK CONTAINERS:
  1167.    
  1168.    <article class="labels">
  1169.            <h3>TITLE FOR CONTAINER</h3>
  1170.            <div class="labels_binnenste">
  1171.                // beginning of the dropdown links, please format them *exactly like this - also delete this if you paste the template into your code
  1172.                <a href="/" class="meer">More things</a>
  1173.                <div class="meerlijst">
  1174.                    <a href="/">More thing 1</a>
  1175.                    <a href="/">More thing 2</a>
  1176.                    <a href="/">More thing 3</a>
  1177.                </div>
  1178.                // end of the dropdown links - please delete this if you paste the template into your code
  1179.                <a href="link url - if you link to something outside your blog, add https:// in front of the link">link text</a>
  1180.            </div>
  1181.        </article>
  1182.    
  1183.    -->
  1184.        
  1185.         <!-- START OF THE CONTENT YOU CAN DELETE HERE 'TILL THE ENDING BRACKET -->
  1186.        
  1187.         <article class="labels">
  1188.             <h3>Thing 1</h3>
  1189.             <div class="labels_binnenste">
  1190.                 <a href="/" class="meer">More things</a>
  1191.                 <div class="meerlijst">
  1192.                     <a href="/">More thing 1</a>
  1193.                     <a href="/">More thing 2</a>
  1194.                     <a href="/">More thing 3</a>
  1195.                 </div>
  1196.                 <a href="/">A thing</a>
  1197.                 <a href="/">A thing</a>
  1198.                 <a href="/">A thing</a>
  1199.                 <a href="/">A thing</a>
  1200.                 <a href="/">A thing</a>
  1201.                 <a href="/">A thing</a>
  1202.                 <a href="/">A thing</a>
  1203.                 <a href="/">A thing</a>
  1204.                 <a href="/">A thing</a>
  1205.                 <a href="/">A thing</a>
  1206.                 <a href="/">A thing</a>
  1207.                 <a href="/">A thing</a>
  1208.                 <a href="/">A thing</a>
  1209.                 <a href="/">A thing</a>
  1210.                 <a href="/">A thing</a>
  1211.                 <a href="/">A thing</a>
  1212.             </div>
  1213.         </article>
  1214.                
  1215.         <!-- END OF THE CONTENT YOU CAN DELETE -->
  1216.        
  1217.     </div>
  1218. </div>
  1219.  
  1220. </section>
  1221.  
  1222. <!-- DELETE THIS IF SIDE BLOG, FOLLOW TILL ENDING BRACKET -->
  1223.  
  1224. <section id="volgend">
  1225.  
  1226. <div class="pictogram">
  1227.     <div class="picto_binnenste">
  1228.         <div class="th_omheen"></div>
  1229.     </div>
  1230.     <div class="onderin">
  1231.         <label for="switch_1"></label>
  1232.         <label for="switch_2"></label>
  1233.         <label for="switch_3"></label>
  1234.         <label for="switch_4"></label>
  1235.     </div>
  1236. </div>
  1237.  
  1238. <nav>
  1239.     <label for="switch_1"></label>
  1240.     <label for="switch_2"></label>
  1241.     <label for="switch_3"></label>
  1242.     <label for="switch_4"></label>
  1243. </nav>
  1244.  
  1245. <div class="helft">
  1246.     <h2>Blogroll</h2>
  1247.     <div class="inhoud">
  1248.         {block:Followed}
  1249.         <a href="{FollowedURL}" class="persoon">
  1250.             <img src="{FollowedPortraitURL-96}" class="volg_afb">
  1251.             <div class="volghelft">
  1252.                 <span>{FollowedName}</span>
  1253.                 <i>{FollowedTitle}</i>
  1254.             </div>
  1255.         </a>
  1256.         {/block:Followed}
  1257.     </div>
  1258. </div>
  1259.  
  1260. </section>
  1261.  
  1262. <!-- END OF DELETE THIS IF SIDE BLOG -->
  1263.  
  1264. </div>
  1265.  
  1266. </div>
  1267.  
  1268. <!-- CREDIT. DO NOT TOUCH -->
  1269.  
  1270. <a href="https://cactusthemes.tumblr.com" title="by cactusthemes">
  1271. <div id="credz" class="fade-in two">
  1272. </div>
  1273. </a>
  1274.  
  1275. </body>
  1276.  
  1277. </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!