API tools faq
paste
Advertisement
annasthms

page 06 - showcase

annasthms
Apr 24th, 2019
3,456
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.  
  4. <!----------------------------------------------------
  5.  
  6. credits:
  7.  
  8. - isotope.js and imagesLoaded by Metafizzy
  9.  
  10. - showcase page by annasthms (april 2, 2019)
  11.  more info @ https://annasthms.tumblr.com/more/page/06
  12.  made for coding cabin's gridmania challenge
  13.  
  14.  
  15. rules:
  16.  
  17. 1. don't remove the credit
  18. 2. don't steal/claim as yours
  19. 3. don't use as a base code
  20.  
  21. thank you!! ♡♡♡
  22.  
  23. ----------------------------------------------------->
  24.  
  25. <head>
  26.   <meta charset="utf-8">
  27.   <title>projects</title>
  28.   <meta name="viewport" content="width=device-width, initial-scale=1">
  29.   <style media="screen">
  30.   @import url('https://fonts.googleapis.com/css?family=Maven+Pro');
  31.  
  32.   *,
  33.   *::after,
  34.   *::before {
  35.     -webkit-box-sizing : border-box;
  36.     box-sizing         : border-box;
  37.     position           : relative;
  38.   }
  39.  
  40.   /* EDIT THESE OPTIONS - they should be self-explanatory */
  41.   body {
  42.     --font-size                    : 16px;
  43.     --text                         : #0a0203;
  44.     --links                        : #ca6a89;
  45.     --link-hover                   : #222;
  46.     --page-background              : #fff;
  47.     --header-background            : #fcfafa;
  48.     --header-image-width           : 200px;
  49.     --header-accent                : #4E3131;
  50.     --filter-accent                : #4E3131;
  51.     --filter-title-text            : #fff;
  52.     --card-width                   : 300px;
  53.     --card-spacing                 : 2em;
  54.     --card-background              : #fcfafa;
  55.     --card-tags-background         : #4E3131;
  56.     --card-tags-text               : #fff;
  57.     --card-progress-bar            : #4E3131;
  58.     --card-progress-bar-height     : 3px;
  59.     --card-progress-bar-background : rgba(78, 49, 49, 0.35);
  60.     --footer-avatar-size           : 100px;
  61.     --footer-accent                : #4E3131;
  62.     --footer-link-text             : #fff;
  63.   }
  64.  
  65.   body {
  66.     margin                  : 0;
  67.     color                   : var(--text);
  68.     overflow-x              : hidden;
  69.     background-color        : #fff;
  70.     background-color        : var(--page-background);
  71.     font-family             : "Maven Pro",
  72.                               sans-serif;
  73.     font-size               : var(--font-size);
  74.     -webkit-font-smoothing  : antialiased;
  75.     -moz-osx-font-smoothing : grayscale;
  76.     line-height             : 1.5em;
  77.   }
  78.  
  79.   a {
  80.     color           : #068570;
  81.     color           : var(--links);
  82.     outline         : none;
  83.     text-decoration : none;
  84.   }
  85.  
  86.   a:focus,
  87.   a:hover {
  88.     color   : var(--link-hover);
  89.     outline : none;
  90.   }
  91.  
  92.   img {
  93.     display    : block;
  94.     max-width  : 100%;
  95.     height     : auto;
  96.     object-fit : cover;
  97.   }
  98.  
  99.   p:first-child {
  100.     margin-top : 0;
  101.   }
  102.  
  103.   p:last-child {
  104.     margin-bottom : 0;
  105.   }
  106.  
  107.   header {
  108.     display               : grid;
  109.     width                 : 800px;
  110.     max-width             : 95%;
  111.     margin                : 5em auto;
  112.     grid-template-columns : var(--header-image-width) auto;
  113.   }
  114.  
  115.   header > img {
  116.     width  : var(--header-image-width);
  117.     height : 100%;
  118.   }
  119.  
  120.   .page_info {
  121.     padding    : 2em;
  122.     background : var(--header-background);
  123.   }
  124.  
  125.   img + .page_info {
  126.     padding-left : 1.5em;
  127.   }
  128.  
  129.   img + .page_info::before {
  130.     content           : '';
  131.     display           : block;
  132.     position          : absolute;
  133.     top               : 0;
  134.     left              : 0;
  135.     left              : calc(-1 * 6.992681194% / 4);
  136.     width             : 6.992681194%;
  137.     height            : 100%;
  138.     background        : var(--header-background);
  139.     -ms-transform     : skewX(-4deg);
  140.     -webkit-transform : skewX(-4deg);
  141.     transform         : skewX(-4deg);
  142.   }
  143.  
  144.   .page_title {
  145.     margin-bottom : 0.35em;
  146.     color         : var(--header-accent);
  147.     font-size     : 1.25em;
  148.     font-weight   : bold;
  149.   }
  150.  
  151.   .page_title a {
  152.     color : var(--header-accent);
  153.   }
  154.  
  155.   .filters {
  156.     margin     : 3em auto;
  157.     text-align : center;
  158.   }
  159.  
  160.   .filters > div:not(:last-child) {
  161.     margin-bottom : 0.35em;
  162.   }
  163.  
  164.   .filters .block div {
  165.     display : inline-block;
  166.   }
  167.  
  168.   .filters .block .block_title {
  169.     margin-right : 0.75em;
  170.     padding      : 0.3em 0.45em;
  171.     color        : var(--filter-title-text);
  172.     background   : var(--filter-accent);
  173.     line-height  : 1.35em;
  174.   }
  175.  
  176.   .filters .block .filter {
  177.     cursor : pointer;
  178.   }
  179.  
  180.   .filters .block .filter:not(:last-child) {
  181.     margin-right : 0.35em;
  182.   }
  183.  
  184.   .filters .filter.selected {
  185.     color       : var(--filter-accent);
  186.     font-weight : bold;
  187.   }
  188.  
  189.   .filters .reset {
  190.     display            : inline-block;
  191.     margin-top         : 0.5em;
  192.     padding            : 0.3em 0.45em;
  193.     color              : var(--filter-title-text);
  194.     opacity            : 1;
  195.     background         : var(--filter-accent);
  196.     text-transform     : uppercase;
  197.     font-size          : 0.8em;
  198.     line-height        : 1.35em;
  199.     -o-transition      : 0.25s opacity;
  200.     -webkit-transition : 0.25s opacity;
  201.     transition         : 0.25s opacity;
  202.     cursor             : pointer;
  203.   }
  204.  
  205.   .filters .reset:not(.selected):hover {
  206.     opacity : 0.9;
  207.   }
  208.  
  209.   .filters .reset.selected {
  210.     opacity     : 0.65;
  211.     user-select : none;
  212.     cursor      : not-allowed;
  213.   }
  214.  
  215.   .container {
  216.     margin             : 0 auto;
  217.     -o-transition      : 0.25s width;
  218.     -webkit-transition : 0.25s width;
  219.     transition         : 0.25s width;
  220.   }
  221.  
  222.   .card {
  223.     width                       : var(--card-width);
  224.     max-width                   : calc(100vw - var(--card-spacing) * 2);
  225.     margin                      : calc(var(--card-spacing) + 1.5em) var(--card-spacing) var(--card-spacing);
  226.     opacity                     : 0;
  227.     -o-transition-property      : opacity,
  228.                                   margin;
  229.     -webkit-transition-property : opacity,
  230.                                   margin;
  231.     transition-property         : opacity,
  232.                                   margin;
  233.     -o-transition-duration      : 0.35s;
  234.     -webkit-transition-duration : 0.35s;
  235.     transition-duration         : 0.35s;
  236.   }
  237.  
  238.   .container.show .card {
  239.     margin  : var(--card-spacing);
  240.     opacity : 1;
  241.   }
  242.  
  243.   .card img.lightbox {
  244.     cursor : zoom-in;
  245.   }
  246.  
  247.   .info {
  248.     padding    : 1em 1.5em 1.5em;
  249.     background : var(--card-background);
  250.   }
  251.  
  252.   .info:first-child {
  253.     padding-top : 1.5em;
  254.   }
  255.  
  256.   img + .info::before {
  257.     content           : '';
  258.     display           : block;
  259.     position          : absolute;
  260.     top               : 0;
  261.     top               : calc(-1 * var(--card-width) * 0.06992681194 / 2);
  262.     left              : 0;
  263.     width             : 100%;
  264.     height            : calc(350px * 0.06992681194);
  265.     height            : calc(var(--card-width) * 0.06992681194);
  266.     background        : var(--card-background);
  267.     -ms-transform     : skewY(-4deg);
  268.     -webkit-transform : skewY(-4deg);
  269.     transform         : skewY(-4deg);
  270.   }
  271.  
  272.   .card img.lightbox + .info::after {
  273.     content       : '+';
  274.     display       : block;
  275.     position      : absolute;
  276.     top           : -0.6em;
  277.     left          : -0.4em;
  278.     width         : 1.2em;
  279.     height        : 1.2em;
  280.     padding       : 0.1em;
  281.     color         : var(--card-tags-text);
  282.     border-radius : 100%;
  283.     background    : var(--card-tags-background);
  284.     text-align    : center;
  285.     font-size     : 1.5em;
  286.     line-height   : 0.9em;
  287.   }
  288.  
  289.   .info div:last-child {
  290.     margin-bottom : 0;
  291.   }
  292.  
  293.   .name {
  294.     margin-bottom : 0.15em;
  295.     font-size     : 1.3em;
  296.     font-weight   : bold;
  297.   }
  298.  
  299.   .date {
  300.     margin-bottom  : 0.65em;
  301.     font-size      : 0.8em;
  302.     letter-spacing : 1px;
  303.   }
  304.  
  305.   .tags {
  306.     margin-bottom : 0.25em;
  307.   }
  308.  
  309.   .name + .tags {
  310.     margin-top : 1em;
  311.   }
  312.  
  313.   .tags a,
  314.   .tags span {
  315.     display       : inline-block;
  316.     margin-right  : 0.5em;
  317.     margin-bottom : 0.5em;
  318.     padding       : 0.35em 0.6em;
  319.     color         : var(--card-tags-text);
  320.     border-radius : 0.65em;
  321.     background    : var(--card-tags-background);
  322.     font-size     : 0.8em;
  323.     line-height   : 1.35em;
  324.   }
  325.  
  326.   .tags span {
  327.     cursor : default;
  328.   }
  329.  
  330.   .tags a {
  331.     text-decoration    : underline;
  332.     -o-transition      : 0.25s background;
  333.     -webkit-transition : 0.25s background;
  334.     transition         : 0.25s background;
  335.   }
  336.  
  337.   .tags a:hover {
  338.     background : var(--links);
  339.   }
  340.  
  341.   .progress {
  342.     margin-top : 1em;
  343.   }
  344.  
  345.   .progress .title {
  346.     color          : var(--card-progress-bar);
  347.     text-transform : uppercase;
  348.     font-size      : 0.75em;
  349.     line-height    : 1.35em;
  350.   }
  351.  
  352.   .progress .bar {
  353.     width      : 100%;
  354.     height     : var(--card-progress-bar-height);
  355.     background : var(--card-progress-bar-background);
  356.   }
  357.  
  358.   .progress .bar .bar_prog {
  359.     height     : 100%;
  360.     background : var(--card-progress-bar);
  361.   }
  362.  
  363.   .no_results {
  364.     display    : none;
  365.     text-align : center;
  366.   }
  367.  
  368.   footer {
  369.     display               : grid;
  370.     width                 : 800px;
  371.     max-width             : 95%;
  372.     margin                : 3em auto 5em;
  373.     align-items           : start;
  374.     grid-template-columns : var(--footer-avatar-size) auto;
  375.   }
  376.  
  377.   footer > img {
  378.     width  : var(--footer-avatar-size);
  379.     height : var(--footer-avatar-size);
  380.   }
  381.  
  382.   .blog_info {
  383.     padding : 0 2em;
  384.   }
  385.  
  386.   .username {
  387.     margin-bottom : 0.35em;
  388.     color         : var(--footer-accent);
  389.     font-size     : 1.15em;
  390.     font-weight   : bold;
  391.   }
  392.  
  393.   .username a {
  394.     color : var(--footer-accent);
  395.   }
  396.  
  397.   .username a:hover {
  398.     color : var(--link-hover);
  399.   }
  400.  
  401.   .description {
  402.     margin-bottom : 0.5em;
  403.   }
  404.  
  405.   .links a {
  406.     margin-right    : 0.5em;
  407.     color           : var(--footer-accent);
  408.     text-decoration : underline;
  409.     font-weight     : bold;
  410.   }
  411.  
  412.   .links a:hover {
  413.     color : var(--link-hover);
  414.   }
  415.  
  416.   div#lightbox {
  417.     display    : none;
  418.     position   : fixed;
  419.     top        : 0;
  420.     right      : 0;
  421.     bottom     : 0;
  422.     left       : 0;
  423.     background : #fff;
  424.   }
  425.  
  426.   div#lightbox img {
  427.     position          : absolute;
  428.     top               : 50%;
  429.     left              : 50%;
  430.     width             : auto;
  431.     max-width         : 80%;
  432.     height            : auto;
  433.     max-height        : 80%;
  434.     -ms-transform     : translate(-50%, -50%);
  435.     -webkit-transform : translate(-50%, -50%);
  436.     transform         : translate(-50%, -50%);
  437.   }
  438.  
  439.   iframe.tmblr-iframe.iframe-controls--desktop {
  440.     margin           : 0.5em;
  441.     filter           : invert(1);
  442.     transform        : scale(0.7);
  443.     transform-origin : top right;
  444.   }
  445.  
  446.   @media
  447.     screen
  448.     and (max-width : 600px) {
  449.     header {
  450.       display    : block;
  451.       margin-top : 1em;
  452.     }
  453.  
  454.     header > img {
  455.       display : none;
  456.     }
  457.  
  458.     .page_info {
  459.       background : var(--page-background);
  460.     }
  461.  
  462.     .page_info::before {
  463.       display : none !important;
  464.     }
  465.  
  466.     footer {
  467.       display : block;
  468.     }
  469.  
  470.     footer > img {
  471.       display : none;
  472.     }
  473.   }
  474.   </style>
  475. </head>
  476.  
  477. <body>
  478.  
  479.   <!-------------------------------
  480.  
  481.  HEADER
  482.  ======
  483.  
  484.  to edit the header:
  485.  - change "header image url" to the url of the header image you want (keep the "")
  486.  - change "page title" to the page's title
  487.  - change "page description" to the page's description
  488.  
  489.  -------------------------------->
  490.  
  491.   <header>
  492.     <img src="header image url" alt="header image">
  493.     <div class="page_info">
  494.       <div class="page_title">page title</div>
  495.       <div class="page_description">page description</div>
  496.     </div>
  497.   </header>
  498.  
  499.   <main>
  500.  
  501.     <div class="filters">
  502.  
  503.       <!-------------------------------
  504.  
  505.      FILTERS
  506.      =======
  507.  
  508.      to edit the filter categories:
  509.      1. change [filter category] to the category title
  510.      2. change the ".filter" in filter=".filter" to the filter name
  511.         * make sure to keep the "" and the .
  512.  
  513.      NOTES
  514.      =====
  515.      * you can NOT repeat category titles; repetition of titles messes up the filtering
  516.      * to add additional categories, copy/paste the template below "paste additional categories here"
  517.  
  518.      TEMPLATE
  519.      ========
  520.  
  521.      <div class="block">
  522.        <div class="block_title">filter category</div>
  523.        <div class="filter selected" filter="">all</div>
  524.        <div class="filter" filter=".filter">filter</div>
  525.      </div>
  526.  
  527.      -------------------------------->
  528.  
  529.       <div class="block">
  530.         <div class="block_title">filter category</div>
  531.         <div class="filter selected" filter="">all</div>
  532.         <div class="filter" filter=".filter">filter</div>
  533.         <div class="filter" filter=".filter">filter</div>
  534.         <div class="filter" filter=".filter">filter</div>
  535.       </div>
  536.       <!-- paste additional categories here -->
  537.  
  538.  
  539.       <div class="reset selected">reset</div>
  540.  
  541.     </div>
  542.  
  543.     <div class="container">
  544.  
  545.       <!-------------------------------
  546.  
  547.      CARDS
  548.      =====
  549.  
  550.      to edit the cards:
  551.      - change "project image url" to the url of the image that represents the project (keeping the "")
  552.      - change "project name" to the name of the project
  553.        - this appears twice
  554.        - make sure to keep the "" for the alt=
  555.      - change 00.00.00 - 00.00.00 to the dates of the project
  556.        - if you do not need this line, you can delete <div class="date">00.00.00 - 00.00.00</div>
  557.      - change/add "tags" and links as needed
  558.        - for tags, simply change "tag" to the text you'd like
  559.        - for links, change "link" to the link's title, and change "url" to the url you'd like to link to (keeping the "")
  560.      - change "project description" to the project's description
  561.      - for progress bars:
  562.        - change "bar title" to the progress bar's title
  563.        - change 34% to the percentage you'd like the bar to be at
  564.      - for filters:
  565.        - add each filter to the class="card" of the card (found at the beginning), separating each with a space
  566.          example: <div class="card filter1 filter2">...</div>
  567.  
  568.      NOTES
  569.      =====
  570.      * there is an option to have the project's image show in a lightbox if clicked
  571.        - to enable, add class="lightbox" right inside the > of the image
  572.        - make sure there is a space in front of class
  573.      * to add additional cards, copy/paste one of the templates below "paste additional cords here"
  574.  
  575.      TEMPLATES
  576.      =========
  577.  
  578.      without lightbox:
  579.  
  580.      <div class="card">
  581.        <img src="project image url" alt="project name">
  582.        <div class="info">
  583.          <div class="name">project name</div>
  584.          <div class="date">00.00.00 - 00.00.00</div>
  585.          <div class="tags">
  586.            <span>tag</span>
  587.            <a href="url">link</a>
  588.          </div>
  589.          <div class="description">project description</div>
  590.          <div class="progress">
  591.            <div class="title">bar title</div>
  592.            <div class="bar">34%</div>
  593.          </div>
  594.        </div>
  595.      </div>
  596.  
  597.      with lightbox:
  598.  
  599.      <div class="card">
  600.        <img src="project image url" alt="project name" class="lightbox">
  601.        <div class="info">
  602.          <div class="name">project name</div>
  603.          <div class="date">00.00.00 - 00.00.00</div>
  604.          <div class="tags">
  605.            <span>tag</span>
  606.            <a href="url">link</a>
  607.          </div>
  608.          <div class="description">project description</div>
  609.          <div class="progress">
  610.            <div class="title">bar title</div>
  611.            <div class="bar">34%</div>
  612.          </div>
  613.        </div>
  614.      </div>
  615.  
  616.      -------------------------------->
  617.  
  618.       <div class="card">
  619.         <img src="project image url" alt="project name" class="lightbox">
  620.         <div class="info">
  621.           <div class="name">project name</div>
  622.           <div class="date">00.00.00 - 00.00.00</div>
  623.           <div class="tags">
  624.             <span>tag</span>
  625.             <a href="url">link</a>
  626.           </div>
  627.           <div class="description">project description</div>
  628.           <div class="progress">
  629.             <div class="title">bar title</div>
  630.             <div class="bar"></div>
  631.           </div>
  632.         </div>
  633.       </div>
  634.  
  635.       <!-- paste additional cords here -->
  636.  
  637.       <!-- text to show if there are no cards with the selected filter -->
  638.       <div class="no_results">nothing :(</div>
  639.  
  640.     </div>
  641.  
  642.   </main>
  643.  
  644.   <!-------------------------------
  645.  
  646.  FOOTER
  647.  ======
  648.  
  649.  the footer should fill in automatically, except for the links
  650.  to edit the links:
  651.  - change "url" to the url you'd like to link to (keep the "")
  652.  - change "link" to the link's title
  653.  - you may add/delete as many links as you'd like
  654.  
  655.  -------------------------------->
  656.  
  657.   <footer>
  658.     <img src="{PortraitURL-96}" alt="{Name}'s avatar">
  659.     <div class="blog_info">
  660.       <div class="username"><a href="/">{Name}</a></div>
  661.       <div class="description">{Description}</div>
  662.       <div class="links">
  663.         <a href="/">home</a>
  664.         <a href="/ask">ask</a>
  665.         <a href="/archive">archive</a>
  666.         <a href="url">link</a>
  667.         <a href="url">link</a>
  668.         <!-- add additional blog links here -->
  669.       </div>
  670.     </div>
  671.   </footer>
  672.  
  673.   <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  674.   <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  675.   <script src="https://static.tumblr.com/0podkko/sAipqg9fe/portfolio.js"></script>
  676.   <script type="text/javascript">
  677.     const iso = new Isotope('.container', {
  678.       itemSelector: '.card',
  679.       masonry: {
  680.         horizontalOrder: true,
  681.         fitWidth: true,
  682.         initLayout: false,
  683.       }
  684.     });
  685.  
  686.     iso.once('layoutComplete', function(items) {
  687.       document.querySelector('.container').className += ' show';
  688.     });
  689.  
  690.     iso.on('layoutComplete', function(items) {
  691.       if (items.length == 0) document.querySelector('.no_results').style.display = "block";
  692.       else document.querySelector('.no_results').style.display = "none";
  693.     });
  694.  
  695.     const imgLoad = imagesLoaded('.card');
  696.     imgLoad.on('done', function(instance) {
  697.       iso.layout();
  698.     });
  699.   </script>
  700. </body>
  701.  
  702. </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!