API tools faq
paste
annasthms

page 05 - postcard

annasthms
Dec 24th, 2018 (edited)
1,081
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.94 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. - honeybee icon font by suiomi
  9. - Overlay Scrollbars by Rene Haas
  10.  
  11. - postcard page by annasthms (dec 24, 2018)
  12.  more info @ https://annasthms.tumblr.com/more/page/05
  13.  made for the #happyholidayschallenge
  14.  
  15.  
  16. rules:
  17.  
  18. 1. don't remove the credit
  19. 2. don't steal/claim as yours
  20. 3. don't use as a base code
  21.  
  22. thank you!! ♡♡♡
  23.  
  24. ----------------------------------------------------->
  25.  
  26. <head>
  27.  
  28.   <meta charset="utf-8">
  29.   <meta name="viewport" content="width=device-width, initial-scale=1">
  30.  
  31.   <title>cards | {title}</title>
  32.  
  33.   <link href="https://solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  34.   <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  35.   <link href="https://fonts.googleapis.com/css?family=Noto+Serif+TC" rel="stylesheet">
  36.   <link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet">
  37.   <link href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.6.0/css/OverlayScrollbars.min.css" rel="stylesheet">
  38.   <link href="https://static.tumblr.com/0podkko/Gs9pjuqza/os_thin_dark.css" rel="stylesheet">
  39.  
  40.   <style>
  41.  
  42.   /***** GENERAL *****/
  43.   * {
  44.     position: relative;
  45.   }
  46.   body {
  47.     color: #000; /* default font color */
  48.     font-family: 'Karla', sans-serif;
  49.     font-size: 16px; /* font size */
  50.     line-height: 1.35em;
  51.     background: #99b9a7; /* background color */
  52.   }
  53.   a {
  54.     text-decoration: none;
  55.     color: #c60936; /* link color */
  56.     cursor: help;
  57.   }
  58.   a:hover {
  59.     color: #711128; /* link hover color */
  60.   }
  61.   img {
  62.     display: block;
  63.     max-height: 100%;
  64.     max-width: 100%;
  65.     height: auto;
  66.     width: auto;
  67.     margin: auto;
  68.     object-fit: cover;
  69.   }
  70.   p:first-child {
  71.     margin-top: 0;
  72.   }
  73.   p:last-child {
  74.     margin-bottom: 0;
  75.   }
  76.  
  77.   /***** UNORDERED LISTS (BULLET POINTS) *****/
  78.   ul {
  79.     margin: 0;
  80.     padding: 0;
  81.     list-style: none;
  82.   }
  83.   ul li {
  84.     padding-left: 1em;
  85.   }
  86.   ul li::before {
  87.     content: "";
  88.     position: absolute;
  89.     display: block;
  90.     height: 1.5px;
  91.     width: 0.65em;
  92.     top: 50%;
  93.     left: 0;
  94.     background: #c60936; /* unordered list dash color */
  95.   }
  96.  
  97.   /***** SCROLLBAR STATE: NORMAL *****/
  98.   .os-theme-thin-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  99.     background: rgba(249, 126, 155, 0.5);
  100.   }
  101.   /***** SCROLLBAR STATE: HOVER *****/
  102.   .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  103.   .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before {
  104.     background: rgba(198, 9, 54, 0.5);
  105.   }
  106.   /***** SCROLLBAR STATE: ACTIVE (CLICKED) *****/
  107.   .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before,
  108.   .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  109.     background: #c60936;
  110.   }
  111.  
  112.   /***** POSTCARD CONTAINER *****/
  113.   div#postcard_container {
  114.     display: none;
  115.     position: fixed;
  116.     top: 0;
  117.     bottom: 0;
  118.     left: 0;
  119.     right: 0;
  120.     z-index: 3;
  121.     opacity: 0;
  122.     transition: 0.25s opacity;
  123.   }
  124.   div#postcard_container.show {
  125.     opacity: 1;
  126.   }
  127.  
  128.   /***** POSTCARD OVERLAY *****/
  129.   div#postcard_back {
  130.     position: absolute;
  131.     top: 0;
  132.     bottom: 0;
  133.     left: 0;
  134.     right: 0;
  135.     background: #fff;
  136.     background: rgba(255,255,255,0.65); /* overlay color */
  137.   }
  138.  
  139.   /***** POSTCARD *****/
  140.   div#postcard {
  141.     height: 425px;
  142.     width: 600px;
  143.     top: 50%;
  144.     left: 50%;
  145.     transform: translate(-50%, -50%);
  146.     position: absolute;
  147.     background: #fff; /* postcard background color */
  148.     box-sizing: border-box;
  149.     border: 6px solid #c60936; /* postcard border */
  150.     box-shadow: 0 0 2em rgba(0,0,0,0.25); /* postcard shadow */
  151.   }
  152.   div#postcard::before {
  153.     content: "";
  154.     position: absolute;
  155.     display: block;
  156.     height: 100%;
  157.     width: 1px;
  158.     background: #fafafa;
  159.     background: rgba(0,0,0,0.05); /* postcard middle line color */
  160.     top: 0;
  161.     left: calc(50% - .5px);
  162.   }
  163.  
  164.   /***** POSTCARD TITLE *****/
  165.   div#postcard_title {
  166.     width: 25%;
  167.     margin: auto;
  168.     padding: 2em 1.5em;
  169.     text-align: center;
  170.     color: #000; /* postcard title font color */
  171.     font-weight: bold;
  172.     font-family: 'Noto Serif TC', serif; /* postcard title font */
  173.     text-transform: uppercase;
  174.     letter-spacing: 3px;
  175.     background: #fff;
  176.   }
  177.  
  178.   /***** POSTCARD STAMP *****/
  179.   div#stamp {
  180.     top: 1em;
  181.     right: 1em;
  182.     position: absolute;
  183.   }
  184.  
  185.   div#links, div#stamp img {
  186.     display: inline-block;
  187.     vertical-align: top;
  188.   }
  189.  
  190.   /***** BLOG LINKS *****/
  191.   div#links {
  192.     max-width: 5em;
  193.     margin-right: 0.75em;
  194.     text-align: right;
  195.     line-height: 1.45em;
  196.     font-size: 0.8em;
  197.   }
  198.   div#links a {
  199.     display: block;
  200.     word-break: break-word;
  201.   }
  202.  
  203.   /***** STAMP IMAGE/BLOG AVATAR *****/
  204.   div#stamp img {
  205.     width: 0.87em;
  206.     height: 0.979em;
  207.     font-size: 5em;
  208.   }
  209.  
  210.   /***** TUMBLR CONTROLS *****/
  211.   div#controls {
  212.     font-size: 0.7em;
  213.     margin-top: 0.5em;
  214.     text-align: right;
  215.   }
  216.   div#controls a {
  217.     display: inline-block;
  218.     margin-left: 0.35em;
  219.   }
  220.  
  221.   /***** POSTCARD SECTIONS *****/
  222.   div#postcard .left, div#postcard .right {
  223.     position: absolute;
  224.     width: 50%;
  225.     max-height: 100%;
  226.     box-sizing: border-box;
  227.     padding: 2.75em;
  228.     bottom: 0;
  229.     overflow: auto;
  230.   }
  231.  
  232.   /***** POSTCARD LEFT *****/
  233.   div#postcard .left {
  234.     max-height: 350px;
  235.   }
  236.   div#postcard .left .os-scrollbar-vertical {
  237.     padding: 2.5em 1em 2.5em 0;
  238.   }
  239.  
  240.   /***** POSTCARD RIGHT *****/
  241.   div#postcard .right {
  242.     right: 0;
  243.   }
  244.  
  245.   /***** BLOG INFO *****/
  246.   div#blog_info {
  247.     background: linear-gradient(to bottom, transparent 1.45em, #ccc 0.05em);
  248.     background-size: 100% 1.5em;
  249.     line-height: 1.5em;
  250.     padding: 0.1em 0.25em 0;
  251.     max-height: 225px;
  252.     overflow: auto;
  253.   }
  254.   /***** USERNAME *****/
  255.   div#blog_name {
  256.     font-weight: bold;
  257.     color: #000; /* username font color */
  258.   }
  259.   /***** BLOG DESCRIPTION *****/
  260.   div#blog_description {
  261.     color: #000; /* blog description font color */
  262.   }
  263.   div#blog_description p {
  264.     margin: 0;
  265.   }
  266.   div#blog_info .os-scrollbar-vertical {
  267.     right: -0.35em;
  268.   }
  269.  
  270.   /***** POSTCARD ICON (AIRPLANE) *****/
  271.   div#postcard_icon {
  272.     position: absolute;
  273.     bottom: 0;
  274.     right: 0;
  275.     height: 1em;
  276.     width: 1em;
  277.     background: #c60936; /* postcard icon background color */
  278.     padding: 0.5em;
  279.     font-size: 1.5em;
  280.     color: #fff; /* postcard icon color */
  281.     border-radius: 100%;
  282.     transform: translate(40%, 40%);
  283.     transition: 0.35s box-shadow;
  284.   }
  285.   div#postcard_icon:hover {
  286.     box-shadow: 0 0 0.35em 0 #711128; /* postcard icon shadow */
  287.   }
  288.   div#postcard_icon span {
  289.     display: block;
  290.     height: 1em;
  291.     width: 1em;
  292.   }
  293.  
  294.   /***** CARDS CONTAINER *****/
  295.   div#container {
  296.     max-height: 75vh;
  297.     width: 85vw;
  298.     margin: 12.5vh auto;
  299.     padding: 3em 1em 3em 3em;
  300.     background: #fff; /* container background color */
  301.     box-sizing: border-box;
  302.     box-shadow: 0 0 2em rgba(0,0,0,0.1); /* container shadow */
  303.     opacity: 0;
  304.     transition: 0.35s opacity;
  305.   }
  306.   div#container.show {
  307.     opacity: 1;
  308.   }
  309.  
  310.   /***** CARDS CONTAINER SCROLLBAR *****/
  311.   /***** SCROLLBAR STATE: NORMAL *****/
  312.   div#container .os-theme-thin-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  313.     background: #99b9a7;
  314.   }
  315.   /***** SCROLLBAR STATE: HOVER *****/
  316.   div#container .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before, div#container .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before {
  317.     background: #1a6239;
  318.   }
  319.   /***** SCROLLBAR STATE: ACTIVE (CLICKED) *****/
  320.   div#container .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before, div#container .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  321.     background: #004f22;
  322.   }
  323.  
  324.   /***** BLOG INFO ICON (ENVELOPE) *****/
  325.   div#mail_icon {
  326.     position: absolute;
  327.     bottom: 0;
  328.     right: 0;
  329.     height: 1em;
  330.     width: 1em;
  331.     background: #004f22; /* icon background */
  332.     padding: 0.5em;
  333.     font-size: 2em;
  334.     color: #fff; /* icon color */
  335.     border-radius: 100%;
  336.     transform: translate(40%, 40%);
  337.     transition: 0.35s box-shadow;
  338.   }
  339.   div#mail_icon:hover {
  340.     box-shadow: 0 0 0.35em 0 #087537; /* icon shadow */
  341.   }
  342.   div#mail_icon span {
  343.     display: block;
  344.     height: 1em;
  345.     width: 1em;
  346.   }
  347.  
  348.   /***** PAGE TITLE *****/
  349.   div#page_title {
  350.     position: absolute;
  351.     top: -1em;
  352.     left: -1em;
  353.     font-size: 1.5em;
  354.     padding: 0.75em;
  355.     background: #fff; /* page title background */
  356.     color: #000; /* page title font color */
  357.     font-style: italic;
  358.     font-family: 'Euphoria Script', cursive; /* page title font */
  359.     font-weight: bold;
  360.     letter-spacing: 0.05em;
  361.     box-shadow: 2px 2px 3px #888; /* page title shadow */
  362.   }
  363.  
  364.   /***** INNER CARD CONTAINER *****/
  365.   div#cards {
  366.     max-height: calc(75vh - 6em);
  367.     overflow: auto;
  368.   }
  369.  
  370.   /***** CARD *****/
  371.   .card {
  372.     display: inline-block;
  373.     margin: 0 2em 2.5em 0;
  374.     height: 300px; /* card height */
  375.     width: 200px; /* card width */
  376.     top: 0;
  377.     left: 0;
  378.     transition: 0.25s all;
  379.     vertical-align: top;
  380.   }
  381.   .card:hover, .card.selected {
  382.     box-shadow: 5px 5px 5px rgba(0,0,0,0.15); /* card shadow on hover */
  383.     top: -2.5px;
  384.     left: -2.5px;
  385.   }
  386.  
  387.   /***** CARD FRONT *****/
  388.   .card .front {
  389.     height: 100%;
  390.     width: 100%;
  391.     padding: 55px 1.5em;
  392.     background: #c60936; /* default card front background */
  393.     background-size: cover;
  394.     background-position: center center;
  395.     text-align: center;
  396.     box-sizing: border-box;
  397.   }
  398.  
  399.   /***** CARD FRONT ICON *****/
  400.   .card .front .icon {
  401.     height: 1em;
  402.     width: 1em;
  403.     margin: 0 auto 20px;
  404.     padding: 1em;
  405.     background: #fff; /* default card icon background */
  406.     color: #c60936; /* default card icon color */
  407.     font-size: 2.25em;
  408.     border-radius: 100%;
  409.   }
  410.   .card .front .icon.i {
  411.     height: 3em;
  412.     width: 3em;
  413.     padding: 0;
  414.   }
  415.   .card .front .icon.i img {
  416.     height: 100%;
  417.     width: 100%;
  418.     border-radius: 100%;
  419.   }
  420.  
  421.   /***** CARD FRONT GREETING *****/
  422.   .card .front .tline {
  423.     padding: .7em;
  424.     color: #fff; /* card front greeting color */
  425.     font-family: 'Euphoria Script', cursive; /* card front greeting font */
  426.     font-size: 1.5em;
  427.     text-shadow: 2px 1px 1px #000; /* card front greeting text shadow */
  428.   }
  429.  
  430.   /***** HIDE CONTENTS *****/
  431.   .contents {
  432.     display: none;
  433.   }
  434.  
  435.   /***** CARD POPUP CONTAINER *****/
  436.   div#pop {
  437.     position: fixed;
  438.     top: 0;
  439.     bottom: 0;
  440.     left: 0;
  441.     right: 0;
  442.     z-index: 1;
  443.     opacity: 0;
  444.     transition: 0.25s opacity;
  445.   }
  446.   div#pop.show {
  447.     opacity: 1;
  448.   }
  449.  
  450.   /***** CARD POPUP OVERLAY *****/
  451.   div#back {
  452.     position: absolute;
  453.     top: 0;
  454.     bottom: 0;
  455.     left: 0;
  456.     right: 0;
  457.     background: #fff;
  458.     background: rgba(255,255,255,0.5); /* card popup overlay color */
  459.   }
  460.  
  461.   /***** CARD POPUP *****/
  462.   div#wrap {
  463.     height: 500px; /* card popup height */
  464.     width: 800px; /* card popup width */
  465.     max-width: 95%;
  466.     top: 50%;
  467.     left: 50%;
  468.     transform: translate(-50%, -50%);
  469.     position: absolute;
  470.     background: #fff; /* card popup background */
  471.     box-sizing: border-box;
  472.     box-shadow: 0 0 2em rgba(0,0,0,0.25); /* card popup shadow */
  473.   }
  474.   /***** CARD CENTER LINE *****/
  475.   div#wrap::before {
  476.     content: "";
  477.     position: absolute;
  478.     display: block;
  479.     height: 100%;
  480.     width: 1px;
  481.     background: #fafafa;
  482.     background: rgba(0,0,0,0.05); /* line background */
  483.     top: 0;
  484.     left: calc(50% - .5px);
  485.     box-shadow: 0 0 10px rgba(0,0,0,0.225); /* line shadow */
  486.   }
  487.  
  488.   /***** CARD SECTIONS *****/
  489.   div#wrap > div {
  490.     box-sizing: border-box;
  491.     border: 3em solid transparent;
  492.     border-right-width: 1.5em;
  493.     padding-right: 1.5em;
  494.     overflow: auto;
  495.   }
  496.  
  497.   /***** CARD LEFT *****/
  498.   div#wrap .left {
  499.     position: absolute;
  500.     width: 50%;
  501.     height: 100%;
  502.   }
  503.  
  504.   /***** CARD RIGHT *****/
  505.   div#wrap .right {
  506.     position: absolute;
  507.     right: 0;
  508.     top: 0;
  509.     width: 50%;
  510.     height: 100%;
  511.   }
  512.  
  513.   /***** HIDE DEFAULT TUMBLR CONTROLS *****/
  514.   .tmblr-iframe{display:none!important;}
  515.  
  516.   /***** MAKE PAGE RESPONSIVE (DON'T TOUCH) *****/
  517.   @media screen and (max-width: 750px) {
  518.     div#wrap {
  519.       max-width: 95%;
  520.       overflow: auto;
  521.     }
  522.     div#wrap::before {
  523.       display: none;
  524.     }
  525.     div#wrap .left, div#wrap .right {
  526.       position: relative;
  527.       width: 100%;
  528.       height: auto;
  529.     }
  530.     div#wrap .left + .right::before {
  531.       content: "";
  532.       display: block;
  533.       position: absolute;
  534.       top: -3em;
  535.       left: -3em;
  536.       right: -1.5em;
  537.       height: 3px;
  538.       background: #fafafa;
  539.       background: rgba(0,0,0,0.05);
  540.     }
  541.   }
  542.   @media screen and (max-width: 650px) {
  543.     div#postcard {
  544.       max-width: 90%;
  545.       max-height: 80%;
  546.       height: auto;
  547.     }
  548.     div#postcard::before {
  549.       display: none;
  550.     }
  551.     div#postcard_title {
  552.       margin: 0;
  553.     }
  554.     div#stamp + div {
  555.       margin-top: 3em;
  556.       padding-top: 0!important;
  557.       padding-bottom: 0!important;
  558.     }
  559.     div#postcard .left, div#postcard .right {
  560.       position: relative;
  561.       width: 100%;
  562.       max-height: calc(35vh - 4em);
  563.     }
  564.     div#postcard .left + .right {
  565.       padding: 0;
  566.       border: 2.75em solid transparent;
  567.     }
  568.     div#postcard .left + .right::before {
  569.       content: "";
  570.       display: block;
  571.       position: absolute;
  572.       top: 0;
  573.       left: 0;
  574.       right: 0;
  575.       height: 3px;
  576.     }
  577.   }
  578.   </style>
  579.   <style>
  580.   /***** SOME PROVIDED STYLING *****/
  581.   .i-list img:first-child {
  582.     height: 150px;
  583.     width: 150px;
  584.     margin: 0 auto 2em;
  585.     border-radius: 100%;
  586.   }
  587.   .i-list .th:first-child {
  588.     display: block;
  589.     height: 1em;
  590.     width: 1em;
  591.     margin: 0 auto 1em;
  592.     padding: 1em;
  593.     color: #fff;
  594.     background: #c60936;
  595.     font-size: 2.5em;
  596.     border-radius: 100%;
  597.   }
  598.   .i-center, .i-center .os-content {
  599.     display: flex;
  600.     align-items: center;
  601.     height: 100%!important;
  602.   }
  603.   .i-center img:first-child:last-child {
  604.     height: 200px;
  605.     width: 200px;
  606.     margin: 0 auto;
  607.     border-radius: 100%;
  608.   }
  609.   .i-center .th:first-child:last-child {
  610.     display: block;
  611.     height: 1em;
  612.     width: 1em;
  613.     margin: 0 auto;
  614.     padding: 1em;
  615.     color: #fff;
  616.     background: #c60936;
  617.     font-size: 3em;
  618.     border-radius: 100%;
  619.   }
  620.   </style>
  621. </head>
  622. <body>
  623.   <div id="postcard_container">
  624.     <div id="postcard_back" onclick="hidePostcard()"></div>
  625.     <div id="postcard">
  626.  
  627.       <!---------------
  628.  
  629.      POSTCARD TITLE
  630.      --------------
  631.  
  632.      if you don't want it called postcard, you can change it
  633.      keep it short though
  634.  
  635.      ---------------->
  636.       <div id="postcard_title">postcard</div>
  637.  
  638.       <div id="stamp">
  639.  
  640.         <!---------------
  641.  
  642.        POSTCARD "STAMP"
  643.        ----------------
  644.  
  645.        LINKS:
  646.        to edit the links:
  647.        - change url to the link's url (make sure to keep the "")
  648.        - change link [#] to the link's title
  649.  
  650.        to add more links, paste <a href="url">title</a> after the last link
  651.        - change url to the link's url (make sure to keep the "")
  652.        - change title to the link's title
  653.  
  654.        ICON:
  655.        if you don't want the image to be your blog's avatar, change {PortraitURL-96} to the url of the image of your choice
  656.  
  657.        TUMBLR CONTROLS:
  658.        please don't touch
  659.  
  660.        ---------------->
  661.  
  662.         <div id="links">
  663.           <a href="/">back</a>
  664.           <a href="url">link 1</a>
  665.           <a href="url">link 2</a>
  666.         </div>
  667.  
  668.         <img src="{PortraitURL-96}" alt="stamp">
  669.  
  670.         <div id="controls">
  671.           <a href="https://tumblr.com" target="_blank" title="dashboard"><span class="th th-house-1-o"></span></a>
  672.           <a href="https://www.tumblr.com/message/{Name}" target="_blank" title="message"><span class="th th-chat-bubbles"></span></a>
  673.           <a href="https://www.tumblr.com/follow/{Name}" target="_blank" title="follow"><span class="th th-plus-2-o"></span></a>
  674.           <a href="https://annasthms.tumblr.com" target="_blank" title="page by anna"><span class="th th-code"></span></a>
  675.         </div>
  676.  
  677.       </div>
  678.  
  679.       <div class="left">
  680.         <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" id="ask_form"></iframe>
  681.       </div>
  682.  
  683.       <div class="right">
  684.         <div id="blog_info">
  685.  
  686.           <!---------------
  687.  
  688.          POSTCARD "ADDRESS"
  689.          ------------------
  690.  
  691.          1. change name to your name/username
  692.          2. change blog description to your blog description
  693.             please keep it to 2-3 lines!
  694.  
  695.          ---------------->
  696.  
  697.           <div id="blog_name">name</div>
  698.  
  699.           <div id="blog_description">blog description</div>
  700.  
  701.         </div>
  702.       </div>
  703.  
  704.       <div id="postcard_icon" onclick="hidePostcard()"><span class="th th-paper-plane-o"></span></div>
  705.     </div>
  706.   </div>
  707.   <div id="container">
  708.  
  709.     <div id="mail_icon" onclick="showPostcard()"><span class="th th-envelope-o"></span></div>
  710.  
  711.     <!---------------
  712.  
  713.    PAGE TITLE
  714.    ----------
  715.  
  716.    change "to all my friends..." to the page title of your choice, though please keep it short
  717.  
  718.    ---------------->
  719.     <div id="page_title">to all my friends...</div>
  720.  
  721.     <div id="cards">
  722.       <div class="card">
  723.         <div class="front">
  724.  
  725.           <!---------------
  726.  
  727.          CARD FRONT
  728.          ----------
  729.  
  730.          customizing the icon:
  731.          icon font: change th-chtristmas-tree-o to the icon you want from http://honeybee.suiomi.com/
  732.          image: change <span class="th th-christmas-tree-o"></span> to <img src="url" alt="icon">, changing url to the url of the image (make sure to keep the "")
  733.  
  734.          customizing the greeting: change merry christmas to the greeting of your choice
  735.  
  736.          ---------------->
  737.  
  738.           <div class="icon">
  739.             <span class="th th-christmas-tree-o"></span>
  740.           </div>
  741.  
  742.           <div class="tline">merry christmas!</div>
  743.  
  744.         </div>
  745.         <div class="contents">
  746.  
  747.           <!---------------
  748.  
  749.          CARD CONTENTS
  750.          -------------
  751.  
  752.          you may delete either one if you don't need it
  753.  
  754.          ---------------->
  755.  
  756.           <div class="left">
  757.             <!-- content on the left side of the card -->
  758.           </div>
  759.  
  760.           <div class="right">
  761.             <!-- content on the right side of the card -->
  762.           </div>
  763.  
  764.         </div>
  765.       </div>
  766.  
  767.       <!-----------------------------------------------------
  768.  
  769.      CARD TEMPLATE
  770.      -------------
  771.  
  772.      to add more cards, paste this after the last </div> of the last card:
  773.  
  774.  
  775.      <div class="card">
  776.        <div class="front">
  777.          <div class="icon">
  778.            <span class="th th-christmas-tree-o"></span>
  779.          </div>
  780.          <div class="tline">merry christmas!</div>
  781.        </div>
  782.        <div class="contents">
  783.          <div class="left">
  784.            content on the left side of the card
  785.          </div>
  786.          <div class="right">
  787.            content on the right side of the card
  788.          </div>
  789.        </div>
  790.      </div>
  791.  
  792.      ------------------------------------------------------>
  793.  
  794.     </div>
  795.   </div>
  796.   <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.6.0/js/OverlayScrollbars.min.js" charset="utf-8"></script>
  797.   <script src="https://static.tumblr.com/0podkko/qodpjuqz3/annasthms_cards.js" charset="utf-8"></script>
  798.   <script type="text/javascript">
  799.  
  800.   /******************************
  801.  
  802.   CARD BACKGROUNDS
  803.   ----------------
  804.  
  805.   for each card:
  806.   type 1: same color for both background and icon
  807.     simply type the color in quotes
  808.     e.g. "#93819c"
  809.   type 2: different colors for the backgound and icon
  810.     type the two colors in quotes, separated by a comma, in square brackets
  811.     the first color is the background, the second color is the icon
  812.     e.g. ["#382219", "#dcddaf"]
  813.   type 3: using an image for the background
  814.     type the image's url in quotes
  815.     if you wish to specify an icon color, add it in quotes
  816.     e.g. ["image url", "#a5f092"]
  817.   type 4: using the default colors
  818.     simply type ""
  819.  
  820.   separate each card with commas!
  821.     e.g. const backgrounds = ["#93819c", ["#382219", "#dcddaf"], ["image url", "#a5f092"], ""];
  822.  
  823.   go to annasthms.tumblr.com/more/page/05#backgrounds for more help
  824.  
  825.   ******************************/
  826.  
  827.   const backgrounds = [];
  828.  
  829.   generateCards(backgrounds);
  830.   </script>
  831. </body>
  832. </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!