ControlC Pastebin - The easiest way to host your text

Paste content

Up to 100 KB of text. BBCode formatting is supported.
Title - optional
Content
<!DOCTYPE html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n\r\n<!----------------------------------------------------\r\n\r\ncredits:\r\n\r\n- isotope.js and imagesLoaded by Metafizzy\r\n\r\n- showcase page by annasthms (april 2, 2019)\r\n  more info @ https://annasthms.tumblr.com/more/page/06\r\n  made for coding cabin's gridmania challenge\r\n\r\n\r\nrules:\r\n\r\n1. don't remove the credit\r\n2. don't steal/claim as yours\r\n3. don't use as a base code\r\n\r\nthank you!! â™¡â™¡â™¡\r\n\r\n----------------------------------------------------->\r\n\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <title>projects</title>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n  <style media=\"screen\">\r\n  @import url('https://fonts.googleapis.com/css?family=Maven+Pro');\r\n\r\n  *,\r\n  *::after,\r\n  *::before {\r\n    -webkit-box-sizing : border-box;\r\n    box-sizing         : border-box;\r\n    position           : relative;\r\n  }\r\n\r\n  /* EDIT THESE OPTIONS - they should be self-explanatory */\r\n  body {\r\n    --font-size                    : 16px;\r\n    --text                         : #0a0203;\r\n    --links                        : #ca6a89;\r\n    --link-hover                   : #222;\r\n    --page-background              : #fff;\r\n    --header-background            : #fcfafa;\r\n    --header-image-width           : 200px;\r\n    --header-accent                : #4E3131;\r\n    --filter-accent                : #4E3131;\r\n    --filter-title-text            : #fff;\r\n    --card-width                   : 300px;\r\n    --card-spacing                 : 2em;\r\n    --card-background              : #fcfafa;\r\n    --card-tags-background         : #4E3131;\r\n    --card-tags-text               : #fff;\r\n    --card-progress-bar            : #4E3131;\r\n    --card-progress-bar-height     : 3px;\r\n    --card-progress-bar-background : rgba(78, 49, 49, 0.35);\r\n    --footer-avatar-size           : 100px;\r\n    --footer-accent                : #4E3131;\r\n    --footer-link-text             : #fff;\r\n  }\r\n\r\n  body {\r\n    margin                  : 0;\r\n    color                   : var(--text);\r\n    overflow-x              : hidden;\r\n    background-color        : #fff;\r\n    background-color        : var(--page-background);\r\n    font-family             : \"Maven Pro\",\r\n                              sans-serif;\r\n    font-size               : var(--font-size);\r\n    -webkit-font-smoothing  : antialiased;\r\n    -moz-osx-font-smoothing : grayscale;\r\n    line-height             : 1.5em;\r\n  }\r\n\r\n  a {\r\n    color           : #068570;\r\n    color           : var(--links);\r\n    outline         : none;\r\n    text-decoration : none;\r\n  }\r\n\r\n  a:focus,\r\n  a:hover {\r\n    color   : var(--link-hover);\r\n    outline : none;\r\n  }\r\n\r\n  img {\r\n    display    : block;\r\n    max-width  : 100%;\r\n    height     : auto;\r\n    object-fit : cover;\r\n  }\r\n\r\n  p:first-child {\r\n    margin-top : 0;\r\n  }\r\n\r\n  p:last-child {\r\n    margin-bottom : 0;\r\n  }\r\n\r\n  header {\r\n    display               : grid;\r\n    width                 : 800px;\r\n    max-width             : 95%;\r\n    margin                : 5em auto;\r\n    grid-template-columns : var(--header-image-width) auto;\r\n  }\r\n\r\n  header > img {\r\n    width  : var(--header-image-width);\r\n    height : 100%;\r\n  }\r\n\r\n  .page_info {\r\n    padding    : 2em;\r\n    background : var(--header-background);\r\n  }\r\n\r\n  img + .page_info {\r\n    padding-left : 1.5em;\r\n  }\r\n\r\n  img + .page_info::before {\r\n    content           : '';\r\n    display           : block;\r\n    position          : absolute;\r\n    top               : 0;\r\n    left              : 0;\r\n    left              : calc(-1 * 6.992681194% / 4);\r\n    width             : 6.992681194%;\r\n    height            : 100%;\r\n    background        : var(--header-background);\r\n    -ms-transform     : skewX(-4deg);\r\n    -webkit-transform : skewX(-4deg);\r\n    transform         : skewX(-4deg);\r\n  }\r\n\r\n  .page_title {\r\n    margin-bottom : 0.35em;\r\n    color         : var(--header-accent);\r\n    font-size     : 1.25em;\r\n    font-weight   : bold;\r\n  }\r\n\r\n  .page_title a {\r\n    color : var(--header-accent);\r\n  }\r\n\r\n  .filters {\r\n    margin     : 3em auto;\r\n    text-align : center;\r\n  }\r\n\r\n  .filters > div:not(:last-child) {\r\n    margin-bottom : 0.35em;\r\n  }\r\n\r\n  .filters .block div {\r\n    display : inline-block;\r\n  }\r\n\r\n  .filters .block .block_title {\r\n    margin-right : 0.75em;\r\n    padding      : 0.3em 0.45em;\r\n    color        : var(--filter-title-text);\r\n    background   : var(--filter-accent);\r\n    line-height  : 1.35em;\r\n  }\r\n\r\n  .filters .block .filter {\r\n    cursor : pointer;\r\n  }\r\n\r\n  .filters .block .filter:not(:last-child) {\r\n    margin-right : 0.35em;\r\n  }\r\n\r\n  .filters .filter.selected {\r\n    color       : var(--filter-accent);\r\n    font-weight : bold;\r\n  }\r\n\r\n  .filters .reset {\r\n    display            : inline-block;\r\n    margin-top         : 0.5em;\r\n    padding            : 0.3em 0.45em;\r\n    color              : var(--filter-title-text);\r\n    opacity            : 1;\r\n    background         : var(--filter-accent);\r\n    text-transform     : uppercase;\r\n    font-size          : 0.8em;\r\n    line-height        : 1.35em;\r\n    -o-transition      : 0.25s opacity;\r\n    -webkit-transition : 0.25s opacity;\r\n    transition         : 0.25s opacity;\r\n    cursor             : pointer;\r\n  }\r\n\r\n  .filters .reset:not(.selected):hover {\r\n    opacity : 0.9;\r\n  }\r\n\r\n  .filters .reset.selected {\r\n    opacity     : 0.65;\r\n    user-select : none;\r\n    cursor      : not-allowed;\r\n  }\r\n\r\n  .container {\r\n    margin             : 0 auto;\r\n    -o-transition      : 0.25s width;\r\n    -webkit-transition : 0.25s width;\r\n    transition         : 0.25s width;\r\n  }\r\n\r\n  .card {\r\n    width                       : var(--card-width);\r\n    max-width                   : calc(100vw - var(--card-spacing) * 2);\r\n    margin                      : calc(var(--card-spacing) + 1.5em) var(--card-spacing) var(--card-spacing);\r\n    opacity                     : 0;\r\n    -o-transition-property      : opacity,\r\n                                  margin;\r\n    -webkit-transition-property : opacity,\r\n                                  margin;\r\n    transition-property         : opacity,\r\n                                  margin;\r\n    -o-transition-duration      : 0.35s;\r\n    -webkit-transition-duration : 0.35s;\r\n    transition-duration         : 0.35s;\r\n  }\r\n\r\n  .container.show .card {\r\n    margin  : var(--card-spacing);\r\n    opacity : 1;\r\n  }\r\n\r\n  .card img.lightbox {\r\n    cursor : zoom-in;\r\n  }\r\n\r\n  .info {\r\n    padding    : 1em 1.5em 1.5em;\r\n    background : var(--card-background);\r\n  }\r\n\r\n  .info:first-child {\r\n    padding-top : 1.5em;\r\n  }\r\n\r\n  img + .info::before {\r\n    content           : '';\r\n    display           : block;\r\n    position          : absolute;\r\n    top               : 0;\r\n    top               : calc(-1 * var(--card-width) * 0.06992681194 / 2);\r\n    left              : 0;\r\n    width             : 100%;\r\n    height            : calc(350px * 0.06992681194);\r\n    height            : calc(var(--card-width) * 0.06992681194);\r\n    background        : var(--card-background);\r\n    -ms-transform     : skewY(-4deg);\r\n    -webkit-transform : skewY(-4deg);\r\n    transform         : skewY(-4deg);\r\n  }\r\n\r\n  .card img.lightbox + .info::after {\r\n    content       : '+';\r\n    display       : block;\r\n    position      : absolute;\r\n    top           : -0.6em;\r\n    left          : -0.4em;\r\n    width         : 1.2em;\r\n    height        : 1.2em;\r\n    padding       : 0.1em;\r\n    color         : var(--card-tags-text);\r\n    border-radius : 100%;\r\n    background    : var(--card-tags-background);\r\n    text-align    : center;\r\n    font-size     : 1.5em;\r\n    line-height   : 0.9em;\r\n  }\r\n\r\n  .info div:last-child {\r\n    margin-bottom : 0;\r\n  }\r\n\r\n  .name {\r\n    margin-bottom : 0.15em;\r\n    font-size     : 1.3em;\r\n    font-weight   : bold;\r\n  }\r\n\r\n  .date {\r\n    margin-bottom  : 0.65em;\r\n    font-size      : 0.8em;\r\n    letter-spacing : 1px;\r\n  }\r\n\r\n  .tags {\r\n    margin-bottom : 0.25em;\r\n  }\r\n\r\n  .name + .tags {\r\n    margin-top : 1em;\r\n  }\r\n\r\n  .tags a,\r\n  .tags span {\r\n    display       : inline-block;\r\n    margin-right  : 0.5em;\r\n    margin-bottom : 0.5em;\r\n    padding       : 0.35em 0.6em;\r\n    color         : var(--card-tags-text);\r\n    border-radius : 0.65em;\r\n    background    : var(--card-tags-background);\r\n    font-size     : 0.8em;\r\n    line-height   : 1.35em;\r\n  }\r\n\r\n  .tags span {\r\n    cursor : default;\r\n  }\r\n\r\n  .tags a {\r\n    text-decoration    : underline;\r\n    -o-transition      : 0.25s background;\r\n    -webkit-transition : 0.25s background;\r\n    transition         : 0.25s background;\r\n  }\r\n\r\n  .tags a:hover {\r\n    background : var(--links);\r\n  }\r\n\r\n  .progress {\r\n    margin-top : 1em;\r\n  }\r\n\r\n  .progress .title {\r\n    color          : var(--card-progress-bar);\r\n    text-transform : uppercase;\r\n    font-size      : 0.75em;\r\n    line-height    : 1.35em;\r\n  }\r\n\r\n  .progress .bar {\r\n    width      : 100%;\r\n    height     : var(--card-progress-bar-height);\r\n    background : var(--card-progress-bar-background);\r\n  }\r\n\r\n  .progress .bar .bar_prog {\r\n    height     : 100%;\r\n    background : var(--card-progress-bar);\r\n  }\r\n\r\n  .no_results {\r\n    display    : none;\r\n    text-align : center;\r\n  }\r\n\r\n  footer {\r\n    display               : grid;\r\n    width                 : 800px;\r\n    max-width             : 95%;\r\n    margin                : 3em auto 5em;\r\n    align-items           : start;\r\n    grid-template-columns : var(--footer-avatar-size) auto;\r\n  }\r\n\r\n  footer > img {\r\n    width  : var(--footer-avatar-size);\r\n    height : var(--footer-avatar-size);\r\n  }\r\n\r\n  .blog_info {\r\n    padding : 0 2em;\r\n  }\r\n\r\n  .username {\r\n    margin-bottom : 0.35em;\r\n    color         : var(--footer-accent);\r\n    font-size     : 1.15em;\r\n    font-weight   : bold;\r\n  }\r\n\r\n  .username a {\r\n    color : var(--footer-accent);\r\n  }\r\n\r\n  .username a:hover {\r\n    color : var(--link-hover);\r\n  }\r\n\r\n  .description {\r\n    margin-bottom : 0.5em;\r\n  }\r\n\r\n  .links a {\r\n    margin-right    : 0.5em;\r\n    color           : var(--footer-accent);\r\n    text-decoration : underline;\r\n    font-weight     : bold;\r\n  }\r\n\r\n  .links a:hover {\r\n    color : var(--link-hover);\r\n  }\r\n\r\n  div#lightbox {\r\n    display    : none;\r\n    position   : fixed;\r\n    top        : 0;\r\n    right      : 0;\r\n    bottom     : 0;\r\n    left       : 0;\r\n    background : #fff;\r\n  }\r\n\r\n  div#lightbox img {\r\n    position          : absolute;\r\n    top               : 50%;\r\n    left              : 50%;\r\n    width             : auto;\r\n    max-width         : 80%;\r\n    height            : auto;\r\n    max-height        : 80%;\r\n    -ms-transform     : translate(-50%, -50%);\r\n    -webkit-transform : translate(-50%, -50%);\r\n    transform         : translate(-50%, -50%);\r\n  }\r\n\r\n  iframe.tmblr-iframe.iframe-controls--desktop {\r\n    margin           : 0.5em;\r\n    filter           : invert(1);\r\n    transform        : scale(0.7);\r\n    transform-origin : top right;\r\n  }\r\n\r\n  @media\r\n    screen\r\n    and (max-width : 600px) {\r\n    header {\r\n      display    : block;\r\n      margin-top : 1em;\r\n    }\r\n\r\n    header > img {\r\n      display : none;\r\n    }\r\n\r\n    .page_info {\r\n      background : var(--page-background);\r\n    }\r\n\r\n    .page_info::before {\r\n      display : none !important;\r\n    }\r\n\r\n    footer {\r\n      display : block;\r\n    }\r\n\r\n    footer > img {\r\n      display : none;\r\n    }\r\n  }\r\n  </style>\r\n</head>\r\n\r\n<body>\r\n\r\n  <!-------------------------------\r\n\r\n  HEADER\r\n  ======\r\n\r\n  to edit the header:\r\n  - change \"header image url\" to the url of the header image you want (keep the \"\")\r\n  - change \"page title\" to the page's title\r\n  - change \"page description\" to the page's description\r\n\r\n  -------------------------------->\r\n\r\n  <header>\r\n    <img src=\"header image url\" alt=\"header image\">\r\n    <div class=\"page_info\">\r\n      <div class=\"page_title\">page title</div>\r\n      <div class=\"page_description\">page description</div>\r\n    </div>\r\n  </header>\r\n\r\n  <main>\r\n\r\n    <div class=\"filters\">\r\n\r\n      <!-------------------------------\r\n\r\n      FILTERS\r\n      =======\r\n\r\n      to edit the filter categories:\r\n      1. change [filter category] to the category title\r\n      2. change the \".filter\" in filter=\".filter\" to the filter name\r\n         * make sure to keep the \"\" and the .\r\n\r\n      NOTES\r\n      =====\r\n      * you can NOT repeat category titles; repetition of titles messes up the filtering\r\n      * to add additional categories, copy/paste the template below \"paste additional categories here\"\r\n\r\n      TEMPLATE\r\n      ========\r\n\r\n      <div class=\"block\">\r\n        <div class=\"block_title\">filter category</div>\r\n        <div class=\"filter selected\" filter=\"\">all</div>\r\n        <div class=\"filter\" filter=\".filter\">filter</div>\r\n      </div>\r\n\r\n      -------------------------------->\r\n\r\n      <div class=\"block\">\r\n        <div class=\"block_title\">filter category</div>\r\n        <div class=\"filter selected\" filter=\"\">all</div>\r\n        <div class=\"filter\" filter=\".filter\">filter</div>\r\n        <div class=\"filter\" filter=\".filter\">filter</div>\r\n        <div class=\"filter\" filter=\".filter\">filter</div>\r\n      </div>\r\n      <!-- paste additional categories here -->\r\n\r\n\r\n      <div class=\"reset selected\">reset</div>\r\n\r\n    </div>\r\n\r\n    <div class=\"container\">\r\n\r\n      <!-------------------------------\r\n\r\n      CARDS\r\n      =====\r\n\r\n      to edit the cards:\r\n      - change \"project image url\" to the url of the image that represents the project (keeping the \"\")\r\n      - change \"project name\" to the name of the project\r\n        - this appears twice\r\n        - make sure to keep the \"\" for the alt=\r\n      - change 00.00.00 - 00.00.00 to the dates of the project\r\n        - if you do not need this line, you can delete <div class=\"date\">00.00.00 - 00.00.00</div>\r\n      - change/add \"tags\" and links as needed\r\n        - for tags, simply change \"tag\" to the text you'd like\r\n        - for links, change \"link\" to the link's title, and change \"url\" to the url you'd like to link to (keeping the \"\")\r\n      - change \"project description\" to the project's description\r\n      - for progress bars:\r\n        - change \"bar title\" to the progress bar's title\r\n        - change 34% to the percentage you'd like the bar to be at\r\n      - for filters:\r\n        - add each filter to the class=\"card\" of the card (found at the beginning), separating each with a space\r\n          example: <div class=\"card filter1 filter2\">...</div>\r\n\r\n      NOTES\r\n      =====\r\n      * there is an option to have the project's image show in a lightbox if clicked\r\n        - to enable, add class=\"lightbox\" right inside the > of the image\r\n        - make sure there is a space in front of class\r\n      * to add additional cards, copy/paste one of the templates below \"paste additional cords here\"\r\n\r\n      TEMPLATES\r\n      =========\r\n\r\n      without lightbox:\r\n\r\n      <div class=\"card\">\r\n        <img src=\"project image url\" alt=\"project name\">\r\n        <div class=\"info\">\r\n          <div class=\"name\">project name</div>\r\n          <div class=\"date\">00.00.00 - 00.00.00</div>\r\n          <div class=\"tags\">\r\n            <span>tag</span>\r\n            <a href=\"url\">link</a>\r\n          </div>\r\n          <div class=\"description\">project description</div>\r\n          <div class=\"progress\">\r\n            <div class=\"title\">bar title</div>\r\n            <div class=\"bar\">34%</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      with lightbox:\r\n\r\n      <div class=\"card\">\r\n        <img src=\"project image url\" alt=\"project name\" class=\"lightbox\">\r\n        <div class=\"info\">\r\n          <div class=\"name\">project name</div>\r\n          <div class=\"date\">00.00.00 - 00.00.00</div>\r\n          <div class=\"tags\">\r\n            <span>tag</span>\r\n            <a href=\"url\">link</a>\r\n          </div>\r\n          <div class=\"description\">project description</div>\r\n          <div class=\"progress\">\r\n            <div class=\"title\">bar title</div>\r\n            <div class=\"bar\">34%</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      -------------------------------->\r\n\r\n      <div class=\"card\">\r\n        <img src=\"project image url\" alt=\"project name\" class=\"lightbox\">\r\n        <div class=\"info\">\r\n          <div class=\"name\">project name</div>\r\n          <div class=\"date\">00.00.00 - 00.00.00</div>\r\n          <div class=\"tags\">\r\n            <span>tag</span>\r\n            <a href=\"url\">link</a>\r\n          </div>\r\n          <div class=\"description\">project description</div>\r\n          <div class=\"progress\">\r\n            <div class=\"title\">bar title</div>\r\n            <div class=\"bar\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- paste additional cords here -->\r\n\r\n      <!-- text to show if there are no cards with the selected filter -->\r\n      <div class=\"no_results\">nothing :(</div>\r\n\r\n    </div>\r\n\r\n  </main>\r\n\r\n  <!-------------------------------\r\n\r\n  FOOTER\r\n  ======\r\n\r\n  the footer should fill in automatically, except for the links\r\n  to edit the links:\r\n  - change \"url\" to the url you'd like to link to (keep the \"\")\r\n  - change \"link\" to the link's title\r\n  - you may add/delete as many links as you'd like\r\n\r\n  -------------------------------->\r\n\r\n  <footer>\r\n    <img src=\"{PortraitURL-96}\" alt=\"{Name}'s avatar\">\r\n    <div class=\"blog_info\">\r\n      <div class=\"username\"><a href=\"/\">{Name}</a></div>\r\n      <div class=\"description\">{Description}</div>\r\n      <div class=\"links\">\r\n        <a href=\"/\">home</a>\r\n        <a href=\"/ask\">ask</a>\r\n        <a href=\"/archive\">archive</a>\r\n        <a href=\"url\">link</a>\r\n        <a href=\"url\">link</a>\r\n        <!-- add additional blog links here -->\r\n      </div>\r\n    </div>\r\n  </footer>\r\n\r\n  <script src=\"https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js\"></script>\r\n  <script src=\"https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js\"></script>\r\n  <script src=\"https://static.tumblr.com/0podkko/sAipqg9fe/portfolio.js\"></script>\r\n  <script type=\"text/javascript\">\r\n    const iso = new Isotope('.container', {\r\n      itemSelector: '.card',\r\n      masonry: {\r\n        horizontalOrder: true,\r\n        fitWidth: true,\r\n        initLayout: false,\r\n      }\r\n    });\r\n\r\n    iso.once('layoutComplete', function(items) {\r\n      document.querySelector('.container').className += ' show';\r\n    });\r\n\r\n    iso.on('layoutComplete', function(items) {\r\n      if (items.length == 0) document.querySelector('.no_results').style.display = \"block\";\r\n      else document.querySelector('.no_results').style.display = \"none\";\r\n    });\r\n\r\n    const imgLoad = imagesLoaded('.card');\r\n    imgLoad.on('done', function(instance) {\r\n      iso.layout();\r\n    });\r\n  </script>\r\n</body>\r\n\r\n</html>
Password
Anyone with the link will still need this password to view.
Expires