API tools faq
paste
Advertisement
ninchuser

WIPs Page 1 - Sorbet - cactusthemes

ninchuser
Jun 21st, 2019
1,883
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 25.73 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--                    WORKS IN PROGRESS PAGE 1 - SORBET
  4.                                 by cactusthemes
  5. -->
  6.  
  7. <!-- CREDITS:   - Fade In/Tumblr Controls by cyantists
  8.                - Font Family by suiomi
  9.                - Tooltip by Manos Malihu
  10.                - Basic CSS Vertical Carousel by yeoli-thm
  11. -->
  12.  
  13. <head>
  14.  
  15. <title>{Title}</title>
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <meta name="description" content="{MetaDescription}">
  19. <meta name="viewport" content="width=device-width, initial-scale=1">
  20.  
  21. <link href="https://fonts.googleapis.com/css?family=Staatliches|Rubik" rel="stylesheet">
  22.  
  23. <link href="https://dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  24.  
  25. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  26.  
  27. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  28.  
  29. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.9/SmoothScroll.min.js"></script>
  30.  
  31. <script src="https://static.tumblr.com/uxq3xua/16tpu12x7/cactusthemes.sorbet.js"></script>
  32.  
  33. <style type="text/css">
  34.  
  35. :root {
  36.     --body-background:#d5f7ff; /* hex color for the background */
  37.     --text-color:#222; /* hex color for the text */
  38.     --font-size:14px; /* font size for the text */
  39.     --accent-color:#ffbdae; /* hex color for the accent color */
  40.     --section-background:#fff; /* hex color for the background of sections */
  41.     --wip-amount:6; /* amount of wips */
  42. }
  43.  
  44. /* DELETE THE BELOW CSS IF YOU WANT LIGHT TUMBLR CONTROLS */
  45.  
  46. iframe.iframe-controls--desktop {
  47.     filter:invert(1) contrast(150%);
  48.     -webkit-filter:invert(1) contrast(150%);
  49.     -o-filter:invert(1) contrast(150%);
  50.     -moz-filter:invert(1) contrast(150%);
  51.     -ms-filter:invert(1) contrast(150%);
  52. }
  53.  
  54. div.status-indicator {
  55.     filter:invert(1)!important;
  56.     -webkit-filter:invert(1)!important;
  57.     -o-filter:invert(1)!important;
  58.     -moz-filter:invert(1)!important;
  59.     -ms-filter:invert(1)!important;
  60. }
  61.  
  62. /* END OF DELETE FOR LIGHT TUMBLR CONTROLS */
  63.  
  64. /* DELETE FROM THIS TO THE OTHER BRACKET IF YOU DON'T WANT A FADE IN EFFECT */
  65.  
  66. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  67. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  68. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  69. .fade-in {
  70.    opacity:0;
  71.    -webkit-animation:fadeIn ease-in 1;
  72.    -moz-animation:fadeIn ease-in 1;
  73.    animation:fadeIn ease-in 1;
  74.    -webkit-animation-fill-mode:forwards;
  75.    -moz-animation-fill-mode:forwards;
  76.    animation-fill-mode:forwards;
  77.    -webkit-animation-duration:1s;
  78.    -moz-animation-duration:1s;
  79.    animation-duration:1s;
  80. }
  81. .fade-in.one {
  82.    -webkit-animation-delay:0s;
  83.    -moz-animation-delay:0s;
  84.    animation-delay:0s;
  85. }
  86. .fade-in.two {
  87.    -webkit-animation-delay:0.8s;
  88.    -moz-animation-delay:0.8s;
  89.    animation-delay:0.8s;
  90. }
  91.  
  92. /* DELETE TO HERE */
  93.  
  94. /* PLEASE DO NOT EDIT THE CSS BEYOND HERE UNLESS YOU KNOW WHAT YOU'RE DOING */
  95.  
  96. iframe.iframe-controls--desktop {
  97.     white-space:nowrap!important;
  98.     z-index:99999999999999!important;
  99.     top:25px;
  100.     right:calc(5% + 10px);
  101.     opacity:.8!important;
  102.     transition:all .5s ease-in-out;
  103.     -moz-transition:all .5s ease-in-out;
  104.     -o-transition:all .5s ease-in-out;
  105.     -webkit-transition:all .5s ease-in-out;
  106.     transform:scale(0.75);
  107.     transform-origin:100% 0;
  108.     -webkit-transform:scale(0.75);
  109.     -webkit-transform-origin:100% 0;
  110.     -o-transform:scale(0.75);
  111.     -o-transform-origin:100% 0;
  112.     -moz-transform:scale(0.75);
  113.     -moz-transform-origin:100% 0;
  114.     -ms-transform:scale(0.75);
  115.     -ms-transform-origin:100% 0;
  116. }
  117.  
  118. iframe.iframe-controls--desktop:hover {
  119.     opacity:1!important;
  120. }
  121.  
  122. iframe.tmblr-iframe--app-cta-button, iframe.iframe-controls--phone-mobile {
  123.     display:none!important;
  124. }
  125.  
  126. .tmblr-iframe-pushdown {
  127.     padding:0px!important;
  128. }
  129.  
  130. body {
  131.     background:var(--body-background);
  132.     font-family:'Rubik';
  133.     color:var(--text-color);
  134.     margin:0;
  135.     font-size:var(--font-size);
  136. }
  137.  
  138. ::selection {
  139.     background:var(--accent-color);
  140.     color:var(--section-background);
  141. }
  142.  
  143. ::-moz-selection {
  144.     background:var(--accent-color);
  145.     color:var(--section-background);
  146. }
  147.  
  148. #s-m-t-tooltip {
  149.     max-width:300px;
  150.     overflow-x:auto;
  151.     margin:20px;
  152.     padding:7.5px;
  153.     background:var(--accent-color);
  154.     color:var(--text-color);
  155.     font-size:var(--font-size);
  156.     height:auto;
  157.     word-wrap:break-word;
  158.     z-index:9999!important;
  159.     text-transform:lowercase;
  160.     border-radius:10px;
  161. }
  162.  
  163. ::-webkit-scrollbar {
  164.     width:5px;
  165.     height:5px;
  166.     background:#fff;
  167.     border-radius:8px;
  168.     z-index:99999999999999!important;
  169. }
  170.  
  171. ::-webkit-scrollbar-thumb {
  172.     width:3px;
  173.     height:3px;
  174.     background:var(--accent-color);
  175.     border-radius:8px;
  176.     z-index:99999999999999!important;
  177. }
  178.  
  179. a {
  180.     text-decoration:none;
  181. }
  182.  
  183. #carousel {
  184.     overflow:hidden;
  185.     width:100%;
  186.     height:100vh;
  187. }
  188.  
  189. #carousel .wrapper {
  190.     position:relative;
  191.     width:100%;
  192.     height:100%;
  193.     transition:all .5s ease-in-out;
  194. }
  195.  
  196. #switch_1:checked ~ #carousel .wrapper {
  197.     -webkit-transform:translateY(0);
  198.     -ms-transform:translateY(0);
  199.     transform:translateY(0);
  200. }
  201.  
  202. #switch_2:checked ~ #carousel .wrapper {
  203.     -webkit-transform:translateY(-100%);
  204.     -ms-transform:translateY(-100%);
  205.     transform:translateY(-100%);
  206. }
  207.  
  208. #switch_3:checked ~ #carousel .wrapper {
  209.     -webkit-transform:translateY(-200%);
  210.     -ms-transform:translateY(-200%);
  211.     transform:translateY(-200%);
  212. }
  213.  
  214. #switch_4:checked ~ #carousel .wrapper {
  215.     -webkit-transform:translateY(-300%);
  216.     -ms-transform:translateY(-300%);
  217.     transform:translateY(-300%);
  218. }
  219.  
  220. #switch_5:checked ~ #carousel .wrapper {
  221.     -webkit-transform:translateY(-400%);
  222.     -ms-transform:translateY(-400%);
  223.     transform:translateY(-400%);
  224. }
  225.  
  226. #switch_6:checked ~ #carousel .wrapper {
  227.     -webkit-transform:translateY(-500%);
  228.     -ms-transform:translateY(-500%);
  229.     transform:translateY(-500%);
  230. }
  231.  
  232. #switch_7:checked ~ #carousel .wrapper {
  233.     -webkit-transform:translateY(-600%);
  234.     -ms-transform:translateY(-600%);
  235.     transform:translateY(-600%);
  236. }
  237.  
  238. #switch_8:checked ~ #carousel .wrapper {
  239.     -webkit-transform:translateY(-700%);
  240.     -ms-transform:translateY(-700%);
  241.     transform:translateY(-700%);
  242. }
  243.  
  244. #switch_9:checked ~ #carousel .wrapper {
  245.     -webkit-transform:translateY(-800%);
  246.     -ms-transform:translateY(-800%);
  247.     transform:translateY(-800%);
  248. }
  249.  
  250. #switch_2:checked ~ section#nav_bar nav label:nth-of-type(2) .lbltxt {
  251.     cursor:default;
  252.     box-shadow:-2px 2px var(--accent-color);
  253.     background:var(--accent-color);
  254.     color:var(--section-background);
  255. }
  256.  
  257. #switch_3:checked ~ section#nav_bar nav label:nth-of-type(3) .lbltxt {
  258.     cursor:default;
  259.     box-shadow:-2px 2px var(--accent-color);
  260.     background:var(--accent-color);
  261.     color:var(--section-background);
  262. }
  263.  
  264. #switch_4:checked ~ section#nav_bar nav label:nth-of-type(4) .lbltxt {
  265.     cursor:default;
  266.     box-shadow:-2px 2px var(--accent-color);
  267.     background:var(--accent-color);
  268.     color:var(--section-background);
  269. }
  270.  
  271. #switch_5:checked ~ section#nav_bar nav label:nth-of-type(5) .lbltxt {
  272.     cursor:default;
  273.     box-shadow:-2px 2px var(--accent-color);
  274.     background:var(--accent-color);
  275.     color:var(--section-background);
  276. }
  277.  
  278. #switch_6:checked ~ section#nav_bar nav label:nth-of-type(6) .lbltxt {
  279.     cursor:default;
  280.     box-shadow:-2px 2px var(--accent-color);
  281.     background:var(--accent-color);
  282.     color:var(--section-background);
  283. }
  284.  
  285. #switch_7:checked ~ section#nav_bar nav label:nth-of-type(7) .lbltxt {
  286.     cursor:default;
  287.     box-shadow:-2px 2px var(--accent-color);
  288.     background:var(--accent-color);
  289.     color:var(--section-background);
  290. }
  291.  
  292. #switch_8:checked ~ section#nav_bar nav label:nth-of-type(8) .lbltxt {
  293.     cursor:default;
  294.     box-shadow:-2px 2px var(--accent-color);
  295.     background:var(--accent-color);
  296.     color:var(--section-background);
  297. }
  298.  
  299. #switch_9:checked ~ section#nav_bar nav label:nth-of-type(9) .lbltxt {
  300.     cursor:default;
  301.     box-shadow:-2px 2px var(--accent-color);
  302.     background:var(--accent-color);
  303.     color:var(--section-background);
  304. }
  305.  
  306. section#nav_bar {
  307.     display:none;
  308.     position:fixed;
  309.     width:5%;
  310.     height:100vh;
  311.     top:0;
  312.     right:0;
  313.     z-index:3;
  314. }
  315.  
  316. section#nav_bar section.nav_in {
  317.     display:-webkit-box;
  318.     display:-ms-flexbox;
  319.     display:flex;
  320.     -webkit-box-pack:center;
  321.     -ms-flex-pack:center;
  322.     justify-content:center;
  323.     -webkit-box-align:center;
  324.     -ms-flex-align:center;
  325.     align-items:center;
  326.     width:100%;
  327.     height:100%;
  328.     z-index:2;
  329.     background:var(--body-background);
  330.     position:relative;
  331. }
  332.  
  333. section#nav_bar .nav_in label {
  334.     width:32px;
  335.     height:32px;
  336.     display:block;
  337.     position:relative;
  338.     transform:translate3d(0, 0, 0);
  339.     transition:transform ease-out 200ms;
  340.     cursor:pointer;
  341. }
  342.  
  343. section#nav_bar .nav_in label span {
  344.     width:32px;
  345.     height:3px;
  346.     background:var(--section-background);
  347.     display:block;
  348.     position:absolute;
  349.     top:calc(50% - 2px);
  350.     left:calc(50% - 16px);
  351.     transition:transform 0.5s ease-in-out;
  352.     border-radius:3px;
  353. }
  354.  
  355. section#nav_bar .nav_in label span:first-of-type {
  356.     transform:translate3d(0, -8px, 0);
  357. }
  358.  
  359. section#nav_bar .nav_in label span:nth-of-type(2) {
  360.     transform:translate3d(0, 0, 0);
  361. }
  362.  
  363. section#nav_bar .nav_in label span:last-of-type {
  364.     transform:translate3d(0, 8px, 0);
  365. }
  366.  
  367. #menu-1:checked + .nav_in label.hamburger span:first-of-type {
  368.     transform:translate3d(0, 0, 0) rotate(45deg);
  369. }
  370.  
  371. #menu-1:checked + .nav_in label.hamburger span:nth-of-type(2) {
  372.     transform:translate3d(0, 0, 0) scale(0, 1);
  373. }
  374.  
  375. #menu-1:checked + .nav_in label.hamburger span:nth-of-type(3) {
  376.     transform:translate3d(0, 0, 0) rotate(-45deg);
  377. }
  378.  
  379. section#nav_bar nav {
  380.     position:fixed;
  381.     top:0;
  382.     right:0;
  383.     width:5%;
  384.     height:100vh;
  385.     background:var(--body-background);
  386.     text-align:center;
  387.     z-index:1;
  388.     transition:all .5s ease-in-out;
  389. }
  390.  
  391. section#nav_bar nav .nav_inner {
  392.     display:-webkit-box;
  393.     display:-ms-flexbox;
  394.     display:flex;
  395.     -ms-flex-line-pack:distribute;
  396.     align-content:space-around;
  397.     -webkit-box-pack:center;
  398.     -ms-flex-pack:center;
  399.     justify-content:center;
  400.     -ms-flex-wrap:wrap;
  401.     flex-wrap:wrap;
  402.     width:100%;
  403.     height:100%;
  404. }
  405.  
  406. section#nav_bar nav label {
  407.     width:51%;
  408.     display:-webkit-box;
  409.     display:-ms-flexbox;
  410.     display:flex;
  411.     -webkit-box-pack:center;
  412.     -ms-flex-pack:center;
  413.     justify-content:center;
  414.     -webkit-box-align:center;
  415.     -ms-flex-align:center;
  416.     align-items:center;
  417. }
  418.  
  419. section#nav_bar nav label .lbltxt, section#nav_bar nav label .th {
  420.     display:-webkit-box;
  421.     display:-ms-flexbox;
  422.     display:flex;
  423.     -webkit-box-pack:center;
  424.     -ms-flex-pack:center;
  425.     justify-content:center;
  426.     -webkit-box-align:center;
  427.     -ms-flex-align:center;
  428.     align-items:center;
  429.     width:30px;
  430.     height:30px;
  431.     border-radius:5px;
  432.     background:var(--section-background);
  433.     box-shadow:-2px 2px var(--accent-color);
  434.     cursor:pointer;
  435.     transition:all .5s ease-in-out;
  436. }
  437.  
  438. section#nav_bar nav label .lbltxt:hover, section#nav_bar nav label .th:hover {
  439.     box-shadow:-3px 3px var(--accent-color);
  440.     color:var(--accent-color);
  441. }
  442.  
  443. #menu-1:checked ~ nav {
  444.     right:5%;
  445. }
  446.  
  447. [class^=slide_] {
  448.     overflow:hidden;
  449.     position:relative;
  450.     max-width:100%;
  451.     max-height:100%;
  452.     z-index:2;
  453. }
  454.  
  455. section.slide_1 header {
  456.     text-align:center;
  457. }
  458.  
  459. section.slide_1 header h2 {
  460.     font-family:'Staatliches';
  461.     font-size:2.9em;
  462.     letter-spacing:1px;
  463.     margin:10px 0px 0px 0px;
  464. }
  465.  
  466. section.slide_1 header h3 {
  467.     margin:5px 0px 10px 0px;
  468. }
  469.  
  470. section.slide_1 header nav a {
  471.     text-transform:lowercase;
  472.     margin-right:15px;
  473. }
  474.  
  475. section.slide_1 header nav a:last-of-type {
  476.     margin-right:0;
  477. }
  478.  
  479. section.slide_1 header nav a .th {
  480.     font-size:1.4em;
  481. }
  482.  
  483. section.slide_1 header nav a .th_omheen {
  484.     display:-webkit-inline-box;
  485.     display:-ms-inline-flexbox;
  486.     display:inline-flex;
  487.     -webkit-box-align:center;
  488.     -ms-flex-align:center;
  489.     align-items:center;
  490.     -webkit-box-pack:center;
  491.     -ms-flex-pack:center;
  492.     justify-content:center;
  493.     vertical-align:middle;
  494.     background:var(--accent-color);
  495.     color:var(--section-background);
  496.     width:2.2em;
  497.     height:2.2em;
  498.     border-radius:50px;
  499.     margin-right:5px;
  500.     transition:all .5s ease-in-out;
  501. }
  502.  
  503. section.slide_1 header nav a .linktext {
  504.     display:inline-block;
  505.     vertical-align:middle;
  506.     transition:all .5s ease-in-out;
  507.     color:#222;
  508. }
  509.  
  510. section.slide_1 header nav a:hover .linktext {
  511.     transform:scale(1.1);
  512. }
  513.  
  514. section.slide_1 header nav a:hover .th_omheen {
  515.     transform:scale(1.2);
  516.     background:transparent;
  517.     color:var(--accent-color);
  518. }
  519.  
  520. section.slide_1 #label_cont {
  521.     width:90%;
  522.     margin:5vh auto;
  523.     height:calc(90vh - 129px);
  524.     display:-webkit-box;
  525.     display:-ms-flexbox;
  526.     display:flex;
  527.     -webkit-box-align:center;
  528.     -ms-flex-align:center;
  529.     align-items:center;
  530.     -ms-flex-wrap:wrap;
  531.     flex-wrap:wrap;
  532.     -ms-flex-pack:distribute;
  533.     justify-content:space-around;
  534. }
  535.  
  536. section.slide_1 #label_cont label {
  537.     display:block;
  538.     background:var(--section-background);
  539.     border-radius:10px;
  540.     box-sizing:border-box;
  541.     width:calc((100% / (var(--wip-amount) / 2)) - 20px);
  542.     margin:0px 10px;
  543.     max-height:100px;
  544.     padding:15px;
  545.     text-align:center;
  546.     cursor:pointer;
  547.     box-shadow:-3px 3px var(--accent-color);
  548.     transition:all .5s ease-in-out;
  549. }
  550.  
  551. section.slide_1 #label_cont label:hover {
  552.     box-shadow:-5px 5px var(--accent-color);
  553.     color:var(--accent-color);
  554. }
  555.  
  556. section.wip_cont {
  557.     min-height:100vh;
  558.     width:95%;
  559.     position:relative;
  560.     transition:all .5s ease-in-out;
  561.     display:-ms-grid;
  562.     display:grid;
  563.     -ms-grid-columns:(10%)[10];
  564.     grid-template:14.5% repeat(9, 9.5%)/repeat(10, 10%);
  565.     grid-template-areas:
  566.     "a a a a a a a a a a"
  567.     "b b c c c c c c c e"
  568.     "b b c c c c c c c e"
  569.     "b b c c c c c c c e"
  570.     "b b d d d d d d d e"
  571.     "b b d d d d d d d e"
  572.     "b b d d d d d d d e"
  573.     "b b d d d d d d d e"
  574.     "b b d d d d d d d e"
  575.     "b b d d d d d d d e";
  576. }
  577.  
  578. section.wip_cont h3 {
  579.     font-family:'Staatliches';
  580.     font-size:2.3em;
  581.     margin:15px 0px 15px 15px;
  582.     display:-webkit-box;
  583.     display:-ms-flexbox;
  584.     display:flex;
  585.     -webkit-box-align:center;
  586.     -ms-flex-align:center;
  587.     align-items:center;
  588.     -webkit-box-pack:center;
  589.     -ms-flex-pack:center;
  590.     justify-content:center;
  591.     background:var(--section-background);
  592.     grid-area:a;
  593.     border-radius:10px;
  594. }
  595.  
  596. section.wip_cont .wip_img {
  597.     grid-area:b;
  598.     display:-webkit-box;
  599.     display:-ms-flexbox;
  600.     display:flex;
  601.     -webkit-box-orient:vertical;
  602.     -webkit-box-direction:normal;
  603.     -ms-flex-direction:column;
  604.     flex-direction:column;
  605. }
  606.  
  607. section.wip_cont .wip_img img {
  608.     -webkit-box-flex:0;
  609.     -ms-flex:0 1 auto;
  610.     flex:0 1 auto;
  611.     width:100%;
  612.     height:auto;
  613.     margin:0px 15px 15px 15px;
  614.     border-radius:10px;
  615. }
  616.  
  617. section.wip_cont .wip_img div {
  618.     -webkit-box-flex:1;
  619.     -ms-flex:1 1 auto;
  620.     flex:1 1 auto;
  621.     background:var(--section-background);
  622.     width:100%;
  623.     margin:0px 15px 15px 15px;
  624.     border-radius:10px;
  625.     padding:10px;
  626.     box-sizing:border-box;
  627.     overflow:auto;
  628. }
  629.  
  630. section.wip_cont .wip_sum {
  631.     grid-area:c;
  632.     background:var(--section-background);
  633.     margin:0px 15px 15px 30px;
  634.     padding:10px;
  635.     border-radius:10px;
  636.     overflow:auto;
  637. }
  638.  
  639. section.wip_cont h4 {
  640.     font-family:'Staatliches';
  641.     text-transform:uppercase;
  642.     font-size:1.7em;
  643.     font-weight:bold;
  644.     margin:0;
  645.     letter-spacing:1px;
  646. }
  647.  
  648. section.wip_cont .wip_sum h4 {
  649.     background:var(--section-background);
  650.     position:absolute;
  651.     width:50%;
  652.     padding-top:10px;
  653.     margin-top:-10px;
  654. }
  655.  
  656. section.wip_cont .wip_text {
  657.     margin-top:27.5px;
  658. }
  659.  
  660. section.wip_cont .wip_sum p {
  661.     margin:7px 0px;
  662. }
  663.  
  664. section.wip_cont .wip_sum p:first-of-type {
  665.     margin-top:0;
  666. }
  667.  
  668. section.wip_cont .wip_sum p:last-of-type {
  669.     margin-bottom:0;
  670. }
  671.    
  672. section.wip_cont .wip_chars {
  673.     grid-area:d;
  674.     margin:0px 15px 15px 30px;
  675.     display:-webkit-box;
  676.     display:-ms-flexbox;
  677.     display:flex;
  678.     -webkit-box-orient:vertical;
  679.     -webkit-box-direction:normal;
  680.     -ms-flex-direction:column;
  681.     flex-direction:column;
  682.     overflow:auto;
  683. }
  684.  
  685. section.wip_cont .wip_chars h4 {
  686.     background:var(--section-background);
  687.     padding:5px 10px;
  688.     border-radius:10px;
  689.     -webkit-box-flex:0;
  690.     -ms-flex:0 1 auto;
  691.     flex:0 1 auto;
  692. }
  693.  
  694. section.wip_cont .wip_chars .wip_inner {
  695.     margin-top:15px;
  696.     -webkit-box-flex:1;
  697.     -ms-flex:1 1 auto;
  698.     flex:1 1 auto;
  699. }
  700.  
  701. section.wip_cont .wip_chars .char {
  702.     width:calc(33.3% - 13px);
  703.     height:100%;
  704.     background:var(--section-background);
  705.     display:inline-block;
  706.     vertical-align:top;
  707.     margin-right:15px;
  708.     border-radius:10px;
  709.     padding:10px;
  710.     box-sizing:border-box;
  711. }
  712.  
  713. section.wip_cont .wip_chars .char:last-of-type {
  714.     margin-right:0;
  715. }
  716.  
  717. section.wip_cont .wip_chars .char img {
  718.     width:100%;
  719.     height:auto;
  720.     border-radius:7px;
  721. }
  722.  
  723. section.wip_cont .wip_chars .char b {
  724.     font-family:'Staatliches';
  725.     font-size:1.1em;
  726.     letter-spacing:1px;
  727.     background:var(--accent-color);
  728.     padding:2.5px 5px;
  729.     border-radius:5px;
  730.     color:var(--section-background);
  731.     display:inline-block;
  732.     margin-right:5px;
  733. }
  734.  
  735. section.wip_cont .wip_chars .char em {
  736.     margin:5px 0px;
  737.     display:block;
  738.     font-style:normal;
  739. }
  740.  
  741. section.wip_cont .wip_chars .char p {
  742.     margin:5px 0px;
  743. }
  744.  
  745. section.wip_cont .wip_chars .char p:first-of-type {
  746.     margin-top:0;
  747. }
  748.  
  749. section.wip_cont .wip_chars .char p:last-of-type {
  750.     margin-bottom:0;
  751. }
  752.  
  753. section.wip_cont .wip_links {
  754.     grid-area:e;
  755.     background:var(--section-background);
  756.     margin:0px 0px 15px 0px;
  757.     border-radius:10px;
  758.     padding:10px;
  759.     overflow:auto;
  760. }
  761.  
  762. section.wip_cont .wip_links h4 {
  763.     margin-top:15px;
  764.     font-size:1.4em;
  765.     word-break:break-all;
  766. }
  767.  
  768. section.wip_cont .wip_links h4:first-of-type {
  769.     margin-top:0;
  770. }
  771.  
  772. section.wip_cont .wip_links a {
  773.     margin-top:5px;
  774. }
  775.  
  776. section.wip_cont .wip_links h4 + a {
  777.     margin-top:0;
  778. }
  779.  
  780. section.wip_cont a {
  781.     color:#000;
  782.     font-weight:bold;
  783.     padding:1px 3px;
  784.     margin:-3px;
  785.     display:inline-block;
  786.     position:relative;
  787.     z-index:1;
  788.     word-break:break-all;
  789. }
  790.  
  791. section.wip_cont a:after {
  792.     content:'';
  793.     display:block;
  794.     height:2px;
  795.     position:absolute;
  796.     bottom:0;
  797.     right:5px;
  798.     left:5px;
  799.     background:var(--accent-color);
  800.     border-radius:5px;
  801.     transition:all .5s cubic-bezier(.2, 0, 0, 1);
  802.     transform-origin:bottom center;
  803.     z-index:-1;
  804.   }
  805.    
  806. section.wip_cont a:hover:after {
  807.       right:0;
  808.       left:0;
  809.       height:100%;
  810. }
  811.  
  812. /* CREDIT. DO NOT TOUCH */
  813.  
  814. #credz {
  815.     position:fixed;
  816.     bottom:15px;
  817.     right:calc(2.5% - 16.5px);
  818.     width:33px;
  819.     height:33px;
  820.     border-radius:50px;
  821.     border:1px solid rgba(0,0,0,.1);
  822.     background-image:url('https://78.media.tumblr.com/avatar_09d2b1f05d49_128.pnj');
  823.     background-repeat:no-repeat;
  824.     background-position:center center;
  825.     background-size:28px;
  826.     transition:all .5s ease-in-out;
  827.     z-index:99;
  828. }
  829.  
  830. a[href="https://cactusthemes.tumblr.com"]:hover > #credz {
  831.     -webkit-transform:scale(1.15);
  832.     -ms-transform:scale(1.15);
  833.     transform:scale(1.15);
  834. }
  835.  
  836. @media only screen and (max-width:1200px) and (min-width:801px) {
  837.     section.wip_cont {
  838.         grid-template:14.5% repeat(9, 9.5%)/repeat(9, 9.5%) 14.5%;
  839.     }
  840. }
  841.  
  842. @media only screen and (max-width:801px) {
  843.     iframe.iframe-controls--desktop {
  844.         top:4.5%;
  845.     }
  846.    
  847.     [class^=slide_] {
  848.         overflow:auto;
  849.         max-height:none;
  850.         height:100%;
  851.     }
  852.    
  853.     section.wip_cont {
  854.         width:90%;
  855.         margin:5% 5% 7.5% 5%;
  856.         display:block;
  857.         height:92.5%;
  858.     }
  859.    
  860.     section.wip_cont h3 {
  861.         margin:0 0 5% 0;
  862.         padding:10px;
  863.     }
  864.    
  865.     section.wip_cont .wip_img {
  866.         display:none;
  867.     }
  868.    
  869.     section.wip_cont .wip_sum {
  870.         margin:0 0 5% 0;
  871.         min-height:200px;
  872.     }
  873.    
  874.     section.wip_cont .wip_chars {
  875.         margin:0 0 5% 0;
  876.         display:block;
  877.     }
  878.    
  879.     section.wip_cont .wip_chars .char {
  880.         width:100%;
  881.         margin-bottom:15px;
  882.         margin-right:0;
  883.     }
  884.    
  885.     section.wip_cont .wip_links {
  886.         margin:0;
  887.         margin-bottom:15%;
  888.     }
  889.    
  890.     section#nav_bar {
  891.         width:100%;
  892.         height:7.5%;
  893.         bottom:0;
  894.         top:auto;
  895.     }
  896.    
  897.     section#nav_bar nav {
  898.         width:100%;
  899.         height:92.6vh;
  900.         top:92.5%;
  901.     }
  902.    
  903.     #menu-1:checked ~ nav {
  904.         right:0;
  905.     }
  906.    
  907.     #credz {
  908.         bottom:calc(3.75% - 16.5px);
  909.         right:5px;
  910.     }
  911. }
  912.  
  913. @media only screen and (max-width:650px) {
  914.     section.slide_1 #label_cont label {
  915.         width:100%;
  916.     }
  917. }
  918.  
  919. </style>
  920.  
  921. </head>
  922.  
  923. <body>
  924.  
  925. <input type="radio" name="switch" id="switch_1" hidden checked="checked">
  926. <input type="radio" name="switch" id="switch_2" hidden>
  927. <input type="radio" name="switch" id="switch_3" hidden>
  928. <input type="radio" name="switch" id="switch_4" hidden>
  929. <input type="radio" name="switch" id="switch_5" hidden>
  930. <input type="radio" name="switch" id="switch_6" hidden>
  931. <input type="radio" name="switch" id="switch_7" hidden>
  932. <input type="radio" name="switch" id="switch_8" hidden>
  933. <input type="radio" name="switch" id="switch_9" hidden>
  934.  
  935. <!-- START OF NAVIGATION BAR -->
  936.  
  937. <section id="nav_bar">
  938. <input type="checkbox" name="menu-open" id="menu-1" hidden>
  939. <section class="nav_in">
  940.     <label class="hamburger" for="menu-1">
  941.         <span></span>
  942.         <span></span>
  943.         <span></span>
  944.     </label>
  945. </section>
  946. <nav>
  947. <div class="nav_inner">
  948.  
  949. <!-- START OF CUSTOMIZABLE NAV BAR -->
  950.  
  951.     <label for="switch_1">
  952.         <i class="th th-home" aria-hidden="true"></i>
  953.     </label>
  954.     <label for="switch_2">
  955.     <div class="lbltxt">
  956.         1
  957.     </div>
  958.     </label>
  959. </div>
  960.  
  961. <!-- END OF CUSTOMIZABLE NAV BAR -->
  962.  
  963. </nav>
  964. </section>
  965.  
  966. <!-- END OF NAVIGATION BAR -->
  967.  
  968. <!-- START OF CAROUSEL -->
  969.  
  970. <section id="carousel">
  971.  
  972. <!-- START OF WRAPPER -->
  973.  
  974. <div class="wrapper">
  975.  
  976. <!-- START OF FIRST SLIDE -->
  977.  
  978. <section class="slide_1">
  979. <header class="fade-in one">
  980.     <h2>Works in Progress</h2> <!-- TITLE -->
  981.     <h3>by {name}</h3>
  982.     <nav>
  983.    
  984.     <!-- CUSTOMIZABLE LINKS -->
  985.    
  986.         <a href="/">
  987.             <span class="th_omheen">
  988.                 <span class="th th-home" aria-hidden="true"></span>
  989.             </span>
  990.             <span class="linktext">
  991.                 home
  992.             </span>
  993.         </a>
  994.         <a href="/ask" title="message">
  995.             <span class="th_omheen">
  996.                 <span class="th th-envelope" aria-hidden="true"></span>
  997.             </span>
  998.             <span class="linktext">
  999.                 mssg
  1000.             </span>
  1001.         </a>
  1002.         <a href="/">
  1003.             <span class="th_omheen">
  1004.                 <span class="th th-ice-cream-1" aria-hidden="true"></span>
  1005.             </span>
  1006.             <span class="linktext">
  1007.                 link 1
  1008.             </span>
  1009.         </a>
  1010.         <a href="/">
  1011.             <span class="th_omheen">
  1012.                 <span class="th th-pineapple" aria-hidden="true"></span>
  1013.             </span>
  1014.             <span class="linktext">
  1015.                 link 2
  1016.             </span>
  1017.         </a>
  1018.         <a href="/">
  1019.             <span class="th_omheen">
  1020.                 <span class="th th-pancakes" aria-hidden="true"></span>
  1021.             </span>
  1022.             <span class="linktext">
  1023.                 link 3
  1024.             </span>
  1025.         </a>
  1026.        
  1027.     <!-- END OF CUSTOMIZABLE LINKS -->
  1028.    
  1029.     </nav>
  1030. </header>
  1031.  
  1032. <div id="label_cont" class="fade-in two">
  1033.  
  1034. <!-- CUSTOMIZABLE BUTTONS FOR WIP PAGES -->
  1035.  
  1036.     <label for="switch_2">
  1037.         WIP 1 Title
  1038.     </label>
  1039.  
  1040. <!-- END OF CUSTOMIZABLE BUTTONS FOR WIP PAGES -->
  1041.  
  1042. </div>
  1043.  
  1044. </section>
  1045.  
  1046. <!-- END OF FIRST SLIDE -->
  1047.  
  1048. <!-- START OF WIP SLIDE -->
  1049.  
  1050. <section class="slide_2">
  1051.  
  1052. <!-- START OF WIP CONTAINER -->
  1053.  
  1054. <section class="wip_cont">
  1055.  
  1056. <h3><!-- put your title here --></h3>
  1057.  
  1058. <!-- LEFT COLUMN -->
  1059.  
  1060. <div class="wip_img">
  1061.     <img src=""> <!-- put your image here -->
  1062.     <div>
  1063.         <!-- this is your blank box/credit link box -->
  1064.     </div>
  1065. </div>
  1066.  
  1067. <!-- SUMMARY SECTION -->
  1068.  
  1069. <div class="wip_sum">
  1070.     <h4><!-- summary title --></h4>
  1071.     <div class="wip_text">
  1072.         <p>A paragraph!</p> <!-- put your summary here -->
  1073.     </div>
  1074. </div>
  1075.  
  1076. <!-- CHARACTER SECTION -->
  1077.  
  1078. <div class="wip_chars">
  1079.     <h4><!-- character section title --></h4>
  1080. <div class="wip_inner">
  1081.  
  1082. <!-- PLEASE PUT MAX 3 CHARS HERE -->
  1083.  
  1084.     <div class="char">
  1085.         <img src="">
  1086.         <em><b>label</b>content</em>
  1087.         <em><b>LABEL</b>content</em>
  1088.         <p>description</p>
  1089.     </div>
  1090.        
  1091.     </div>
  1092. </div>
  1093.    
  1094. <!-- START OF LINKS SECTION -->
  1095.  
  1096. <div class="wip_links">
  1097.     <h4><!-- link section title --></h4>
  1098.     <a href="link url">link text</a>
  1099.     <br>
  1100.     <a href="link url">link text</a>
  1101. </div>
  1102.  
  1103. </section>
  1104.  
  1105. </section>
  1106.  
  1107. <!-- END OF WIP SLIDE -->
  1108.    
  1109. </div>
  1110.    
  1111. <!-- END OF WRAPPER -->
  1112.  
  1113. </section>
  1114.  
  1115. <!-- END OF CAROUSEL -->
  1116.  
  1117. <!-- CREDIT. DO NOT TOUCH -->
  1118.  
  1119. <a href="https://cactusthemes.tumblr.com" title="by cactusthemes">
  1120. <div id="credz" class="fade-in two">
  1121. </div>
  1122. </a>
  1123.  
  1124. </body>
  1125.  
  1126. </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!