SHARE
TWEET

✱⁞ ALYANNA.BBCODE+

sugarvine Feb 6th, 2018 166 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [nobr]
  2.     [class name=body]
  3.         display: block;
  4.         width: 100%;
  5.         padding: 10vh 10px;
  6.         box-sizing: border-box;
  7.         overflow: hidden;
  8.         background: linear-gradient(#ffb9c9,#8decff);
  9.     font-smoothing: antialiased;
  10.     -webkit-font-smoothing: antialiased;
  11.     -moz-osx-font-smoothing: grayscale;
  12.     [/class]
  13.  
  14.     [class name=container]
  15.         display: flex;
  16.         width: 100%;
  17.         margin: auto;
  18.         max-width: 850px;
  19.         flex-flow: row wrap;
  20.         justify-content: center;
  21.         align-items: stretch;
  22.         align-content: center;
  23.         overflow: hidden;
  24.         border-radius: 10px;
  25.     [/class]
  26.    
  27.     [class name=leftcolumn]
  28.         flex: 4 0 280px;
  29.         background: #FFF;
  30.         box-sizing: border-box;
  31.         padding: 20px;
  32.         overflow: hidden;
  33.         display: flex;
  34.         flex-flow: column wrap;
  35.         justify-content: center;
  36.         align-content: center;
  37.         text-align: center;
  38.     [/class]
  39.    
  40.     [class name=imagecontainer]
  41.         flex: 0 0 225px;
  42.         width: 226px;
  43.         height: 225px;
  44.         background: #FFF url(https://i.imgur.com/2niDXCJ.jpg) no-repeat center center;
  45.         font-size: 0px;
  46.         line-height: 0px;
  47.         display: inline-block;
  48.         margin: auto;
  49.         margin-top: 10px;
  50.         margin-bottom: 10px;
  51.     [/class]
  52.    
  53.     [class name=mainimage]
  54.         display: block;
  55.         height: 100%;
  56.         width: 100%;
  57.         pointer-events: none;
  58.         mix-blend-mode: screen;
  59.     [/class]
  60.    
  61.     [class name=title]
  62.         display: block;
  63.         font-family: 'Abril Fatface', serif;
  64.         font-size: 2em;
  65.         color: #ffb9c9;
  66.         text-transform: uppercase;
  67.     [/class]
  68.    
  69.     [class name=subtitle]
  70.         width: 100%;
  71.         max-width: 215px;
  72.         text-align: center;
  73.         font-family: 'Quicksand', sanserif;
  74.         font-size: .6em;
  75.         text-transform: uppercase;
  76.         margin: auto;
  77.         margin-top: -5px;
  78.         margin-bottom: 20px;
  79.         font-weight: bold;
  80.         color: #8decff;
  81.     [/class]
  82.    
  83.     [class name=maincontentcolumn]
  84.         flex: 5 0 280px;
  85.         background: rgba(255, 255, 255, 0.6);
  86.         max-height: 550px;
  87.         box-sizing: border-box;
  88.         padding: 20px;
  89.         overflow: hidden;
  90.     [/class]
  91.    
  92.     [class name=scrollbox]
  93.         display: block;
  94.         height: 100%;
  95.         width: 100%;
  96.         padding-right: 150px;
  97.         overflow-x: visible;
  98.         overflow-y: scroll;
  99.     [/class]
  100.    
  101.     [class name=tabcontents]
  102.         display: block;
  103.         width: 100%;
  104.         display: none;
  105.     [/class]
  106.    
  107.     [class name=post]
  108.         display: block;
  109.         width: 100%;
  110.         background: white;
  111.         font-size: .8em;
  112.         font-family: 'Quicksand', sanserif;
  113.         color: #a1a1a1;
  114.         text-align: justify;
  115.         box-sizing: border-box;
  116.         padding: 10px;
  117.         margin-bottom: 25px;
  118.     [/class]
  119.    
  120.     [class name=emptyspace]
  121.         display: none;
  122.     [/class]
  123.    
  124.     [class name=image]
  125.         // add pointer events: none if you'd rather not deal with the larger view thing
  126.         font-size: 0px;
  127.         -webkit-filter: contrast(80%) brightness(120%) grayscale(30%);
  128.         filter: contrast(80%) brightness(120%) grayscale(30%);
  129.     -o-transition: all .5s ease-in-out;
  130.     -ms-transition: all .5s ease-in-out;
  131.     -moz-transition: all .5s ease-in-out;
  132.     -webkit-transition: all .5s ease-in-out;
  133.     transition: all .5s ease-in-out;
  134.     [/class]
  135.    
  136.     [class name=image state=hover]
  137.         // delete this class if planning on disabling the larger view thing
  138.         -webkit-filter: none;
  139.         filter: none;
  140.     [/class]
  141.    
  142.     [class name=navcolumn]
  143.         flex: 1 0 100px;
  144.         background: #FFF;
  145.         box-sizing: border-box;
  146.         padding: 15px 0px;
  147.         overflow: hidden;
  148.         display: flex;
  149.         flex-flow: row wrap;
  150.         justify-content: center;
  151.         align-items: center;
  152.         align-content: center;
  153.     [/class]
  154.    
  155.     [class name=navbutton]
  156.         flex: 1 0 100px;
  157.         box-sizing: border-box;
  158.         text-align: center;
  159.         font-family: 'Abril Fatface', serif;
  160.         font-size: 4em;
  161.         color: #ffb9c9;
  162.         padding: 10px;
  163.     -o-transition: all .5s ease-in-out;
  164.     -ms-transition: all .5s ease-in-out;
  165.     -moz-transition: all .5s ease-in-out;
  166.     -webkit-transition: all .5s ease-in-out;
  167.     transition: all .5s ease-in-out;
  168.     cursor: pointer;
  169.     [/class]
  170.    
  171.     [class name=selectednavbutton]
  172.         flex: 1 0 100px;
  173.         box-sizing: border-box;
  174.         text-align: center;
  175.         font-family: 'Abril Fatface', serif;
  176.         font-size: 4em;
  177.         color: #8decff;
  178.         padding: 10px;
  179.     -o-transition: all .5s ease-in-out;
  180.     -ms-transition: all .5s ease-in-out;
  181.     -moz-transition: all .5s ease-in-out;
  182.     -webkit-transition: all .5s ease-in-out;
  183.     transition: all .5s ease-in-out;
  184.     cursor: pointer;
  185.     [/class]
  186.    
  187.     [class name=navbutton state=hover]
  188.         color: #8decff;
  189.     [/class]
  190.    
  191.    
  192.     [script class=navbutton on=click]
  193.         // resets everything to their default appearance
  194.         hide tabcontents
  195.         removeClass selectednavbutton navbutton
  196.        
  197.         // cheaty way of doing this lol
  198.         set currentTab (getText)
  199.        
  200.         // sets which navbutton gets the color change
  201.         if (eq ${currentTab} 1) (addClass selectednavbutton navbuttonone)
  202.         if (eq ${currentTab} 2) (addClass selectednavbutton navbuttontwo)
  203.         if (eq ${currentTab} 3) (addClass selectednavbutton navbuttonthree)
  204.         if (eq ${currentTab} 4) (addClass selectednavbutton navbuttonfour)
  205.         if (eq ${currentTab} 5) (addClass selectednavbutton navbuttonfive)
  206.        
  207.         // sets which tabcontents gets shown
  208.         if (eq ${currentTab} 1) (show tabcontentsone)
  209.         if (eq ${currentTab} 2) (show tabcontentstwo)
  210.         if (eq ${currentTab} 3) (show tabcontentsthree)
  211.         if (eq ${currentTab} 4) (show tabcontentsfour)
  212.         if (eq ${currentTab} 5) (show tabcontentsfive)
  213.     [/script]
  214.    
  215.    
  216.     [div style="display: none;"]
  217.         [font=Abril Fatface]font call[/font]
  218.         [font=Quicksand]font call[/font]
  219.     [/div]
  220.     [div class=body]
  221.         [div class=container]
  222.             [div class=leftcolumn]
  223.                 [div class=imagecontainer]
  224.                     [div class=mainimage]
  225.                         [img]https://i.imgur.com/G4ELxKB.jpg[/img]
  226.                     [/div]
  227.                 [/div]
  228.                 [div class=title]
  229.                     ALYANNA
  230.                 [/div]
  231.                 [div class=subtitle]
  232.                     THE BEST THINGS IN LIFE COME IN PASTEL
  233.                 [/div]
  234.             [/div]
  235.             [div class=maincontentcolumn]
  236.                 [div class=scrollbox]
  237.                     [div class="tabcontents tabcontentsone" style="display: block;"]
  238.                         [div class=post]
  239.                             hello you can put text here. if you'd like a linebreak, add [font=Courier][plain][br][/br][/plain][/font]. this is an empty tag, so don't put anything between them.
  240.                         [/div]
  241.                         [div class=post]
  242.                             [div class=title]title here[/div]
  243.                             you can use the title class to add a heading to each post. due to how it's coded, it will be automatically smaller than the name to the left to indicate hierarchy.
  244.                         [/div]
  245.                         [div class=emptyspace]put new posts for tab1 above this div![/div]
  246.                     [/div]
  247.                     [div class="tabcontents tabcontentstwo"]
  248.                         [div class=post]
  249.                             [div class=image][img]https://i.imgur.com/aq5DGoe.jpg[/img][/div]
  250.                         [/div]
  251.                         [div class=post]
  252.                             if you'd like to add an image, make sure to wrap it like [font=Courier][plain][div class=image][img]this[/img][/div][/plain][/font], as that runs it through filters to match the design. it also removes the gutter underneath.
  253.                         [/div]
  254.                         [div class=emptyspace]put new posts for tab2 above this div![/div]
  255.                     [/div]
  256.                     [div class="tabcontents tabcontentsthree"]
  257.                         [div class=post]
  258.                             [div class=title]auto-filter[/div]
  259.                             all images as slightly desaturated and brightened automatically; when hovering over a post, one can see the true colors. the trade off is that clicking on the image triggers the view large image. if you'd rather have it disabled, add a pointer-events: none to the image class. unfortunately, this will also disable the hover effect.
  260.                         [/div]
  261.                         [div class=post]
  262.                             [div class=title]auto-filter[/div]
  263.                             all images as slightly desaturated and brightened automatically; when hovering over a post, one can see the true colors. unlike most of my codes, clicking on the image will enable click to view larger version. if you'd rather have it disabled, add [font=Courier][plain]pointer-events: none;[/plain][/font] to [font=Courier][plain][class name="image"][/plain][/font]. unfortunately, this will also disable the hover effect.
  264.                         [/div]
  265.                         [div class=post]
  266.                             [div class=title]auto-filter[/div]
  267.                             all images as slightly desaturated and brightened automatically; when hovering over a post, one can see the true colors. unlike most of my codes, clicking on the image will enable click to view larger version. if you'd rather have it disabled, add [font=Courier][plain]pointer-events: none;[/plain][/font] to [font=Courier][plain][class name="image"][/plain][/font]. unfortunately, this will also disable the hover effect.
  268.                         [/div]
  269.                         [div class=emptyspace]put new posts for tab3 above this div![/div]
  270.                     [/div]
  271.                     [div class="tabcontents tabcontentsfour"]
  272.                         [div class=post]
  273.                             [div class=title]title here[/div]
  274.                             [div class=image][img]https://i.imgur.com/xY9q6SA.jpg[/img][/div]
  275.                         [/div]
  276.                         [div class=emptyspace]put new posts for tab4 above this div![/div]
  277.                     [/div]
  278.                     [div class="tabcontents tabcontentsfive"]
  279.                         [div class=post]
  280.                             [div class=title]artist[/div]
  281.                             [div class=img]i used hakusai's images for this sample[/div]
  282.                         [/div]
  283.                         [div class=emptyspace]put new posts for tab4 above this div![/div]
  284.                     [/div]
  285.                 [/div]
  286.             [/div]
  287.             [div class=navcolumn][div class="navbutton navbuttonone"]1[/div][div class="navbutton navbuttontwo"]2[/div][div class="navbutton navbuttonthree"]3[/div][div class="navbutton navbuttonfour"]4[/div][div class="navbutton navbuttonfive"]5[/div][/div]
  288.         [/div]
  289.     [/div]
  290.    
  291. [/nobr]
RAW Paste Data
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
 
Top