SHARE
TWEET

athena

SHADYACE Jul 5th, 2019 (edited) 188 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [nobr]
  2. [class=variables]
  3.     --color: #b7cfda;
  4.     cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important
  5. [/class]
  6.  
  7. [class=container]
  8.     width: 460px;
  9.     height: 300px;
  10.     display: flex;
  11.     margin: auto;
  12. [/class]
  13.  
  14. [class=left]
  15.     background-color: var(--color);
  16.     height: 300px;
  17.     width: 220px;
  18.     padding: 10px;
  19.     box-sizing: border-box;
  20. [/class]
  21.  
  22. [class name=left maxWidth=450px]
  23.     width: 135px;
  24.     padding: 5px;
  25.     height: 290px;
  26. [/class]
  27.  
  28. [class=img]
  29.     height: 280px;
  30.     width: 200px;
  31.     background-image: url('https://pbs.twimg.com/media/CkJHc2TWsAEQRCe.jpg');
  32.     filter: saturate(0%);
  33.     background-size: cover;
  34.     padding: 20px;
  35.     box-sizing: border-box;
  36.     background-position: 50% 50%;
  37. [/class]
  38.  
  39. [class name=img maxWidth=450px]
  40.     width: 125px;
  41. [/class]
  42.  
  43. [class=brackets]
  44.     height: 100%;
  45.     width: 100%;
  46.     background:
  47.         linear-gradient(to right, white 2px, transparent 2px) 0 100%,
  48.         linear-gradient(to left, white 2px, transparent 2px) 100% 0,
  49.         linear-gradient(to bottom, white 2px, transparent 2px) 100% 0,
  50.         linear-gradient(to top, white 2px, transparent 2px) 0 100%;
  51.     background-repeat: no-repeat;
  52.     background-size: 20px 20px;
  53. [/class]
  54.  
  55. [class name=brackets maxWidth=450px]
  56.     opacity: 0;
  57. [/class]
  58.  
  59. [class=right]
  60.     width: 240px;
  61.     height: 300px;
  62.     display: flex;
  63.     flex-direction: column;
  64. [/class]
  65.  
  66. [class=contentContainer]
  67.     position: relative;
  68.     width: 240px;
  69.     height: 270px;
  70. [/class]
  71.  
  72. [class name=contentContainer maxWidth=450px]
  73.     left: -5px;
  74. [/class]
  75.  
  76. [class=content]
  77.     position: absolute;
  78.     opacity: 0;
  79.     transition: 0.5s;
  80.     width: 240px;
  81.     height: 270px;
  82.     font-size: 12px;
  83.     padding-left: 10px;
  84.     box-sizing: border-box;
  85.     overflow: hidden;
  86. [/class]
  87.  
  88. [class=scroll]
  89.     width: 100%;
  90.     padding-right: 150px;
  91.     height: 100%;
  92.     overflow-y: scroll;
  93. [/class]
  94.  
  95. [class=name]
  96.     font-weight: 900;
  97.     text-align: center;
  98.     border-bottom: 4px solid var(--color);
  99.     width: 120px;
  100.     display: block;
  101.     margin: 10% auto;
  102.     font-size: 18px;
  103.     position: relative;
  104. [/class]
  105.  
  106. [class=textHome]
  107.     font-size: 12px;
  108.     text-align: center;
  109.     text-transform: uppercase;
  110.     width: 200px;
  111.     margin: 0 6.5%;
  112. [/class]
  113.  
  114. [class=title]
  115.     text-align: center;
  116.     font-size: 16px;
  117.     text-transform: uppercase;
  118.     font-weight: 900;
  119. [/class]
  120.  
  121. [class=tag]
  122.     display: inline-block;
  123.     border-bottom: 1px solid var(--color);
  124.     height: 15px;
  125.     font-size: 10px;
  126.     text-transform: uppercase;
  127. [/class]
  128.  
  129. [class=imgSmallContainer]
  130.     width: 80%;
  131.     height: 70px;
  132.     display: flex;
  133.     justify-content: space-between;
  134.     margin: 10px auto;
  135. [/class]
  136.  
  137. [class=imgSmall]
  138.     width: 70px;
  139.     height: 70px;
  140.     background-size: cover;
  141.     background-position: 50% 50%;
  142.     filter: saturate(70%);
  143. [/class]
  144.  
  145. [class=tabs]
  146.     display: flex;
  147.     width: 150px;
  148.     margin: 0 23%;
  149.     justify-content: space-between;
  150. [/class]
  151.  
  152. [class name=tabs maxWidth=450px]
  153.     position: relative;
  154.     left: -10px;
  155. [/class]
  156.  
  157. [class=tab]
  158.     border-radius: 50%;
  159.     height: 20px;
  160.     width: 20px;
  161.     border: 1px solid black;
  162.     transition: 0.5s;
  163. [/class]
  164.  
  165. [class name=tab state=hover]
  166.     cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
  167.     border: 1px solid var(--color);
  168. [/class]
  169.  
  170. [class=show]
  171.     z-index: 1;
  172.     opacity: 1;
  173. [/class]
  174.  
  175. [class=click]
  176.     border: 1px solid var(--color);
  177.     background-color: var(--color);
  178. [/class]
  179.  
  180. [script class=tab01 on=click]
  181.     addClass click tab01
  182.     removeClass click tab02
  183.     removeClass click tab03
  184.     removeClass click tab04
  185.  
  186.     addClass show content01
  187.     removeClass show content02
  188.     removeClass show content03
  189.     removeClass show content04
  190.     removeClass show contentHome
  191. [/script]
  192.  
  193. [script class=tab02 on=click]
  194.     addClass click tab02
  195.     removeClass click tab01
  196.     removeClass click tab03
  197.     removeClass click tab04
  198.  
  199.     addClass show content02
  200.     removeClass show content01
  201.     removeClass show content03
  202.     removeClass show content04
  203.     removeClass show contentHome
  204. [/script]
  205.  
  206. [script class=tab03 on=click]
  207.     addClass click tab03
  208.     removeClass click tab01
  209.     removeClass click tab02
  210.     removeClass click tab04
  211.  
  212.     addClass show content03
  213.     removeClass show content01
  214.     removeClass show content02
  215.     removeClass show content04
  216.     removeClass show contentHome
  217. [/script]
  218.  
  219. [script class=tab04 on=click]
  220.     addClass click tab04
  221.     removeClass click tab01
  222.     removeClass click tab02
  223.     removeClass click tab03
  224.  
  225.     addClass show content04
  226.     removeClass show content01
  227.     removeClass show content02
  228.     removeClass show content03
  229.     removeClass show contentHome
  230. [/script]
  231.  
  232. [div class=variables]
  233.  
  234. [div class=container]
  235.     [div class=left]
  236.         [div class=img]
  237.             [div class=brackets][/div]
  238.         [/div]
  239.     [/div]
  240.  
  241.     [div class=right]
  242.  
  243.     [div class=contentContainer]
  244.         [div class="show content contentHome"]
  245.             [div class=name][font=Playfair Display SC]NAME HERE.[/font][/div]
  246.             [div class=textHome][font=Work Sans]you can put some[br][/br][br][/br]words, quotes or lyrics here[br][/br][br][/br]idk go wild people (not too wild it'll look funky with too many words)[/font][/div]
  247.         [/div]
  248.  
  249.         [div class="content content01"]
  250.         [div class=scroll]
  251.             [div class=title][font=Playfair Display SC]basics[/font][/div]
  252.                 [div class=tag][font=Work Sans]name[/font][/div] here
  253.                     [br][/br]
  254.                 [div class=tag][font=Work Sans]nicknames[/font][/div] here
  255.                     [br][/br]
  256.                 [div class=tag][font=Work Sans]age[/font][/div] here
  257.                     [br][/br]
  258.                 [div class=tag][font=Work Sans]gender[/font][/div] here
  259.                     [br][/br]
  260.                 [div class=imgSmallContainer]
  261.                 [div class=imgSmall style="background-image: url('https://66.media.tumblr.com/5c6bdda06395918d539f1a74b461a4be/tumblr_inline_p2n1dpx7Gf1rbm3wd_500.gif');"][/div]
  262.                 [div class=imgSmall style="background-image: url('https://66.media.tumblr.com/237ccb779ff20060aefc3c39dbc184f5/tumblr_inline_p2n1dxKhwx1rbm3wd_500.gif');"][/div]
  263.                 [/div]
  264.             [div class=title][font=Playfair Display SC]appearance[/font][/div]
  265.                 [div class=tag][font=Work Sans]height[/font][/div] five foot, eight inches.
  266.                     [br][/br]
  267.                 [div class=tag][font=Work Sans]question[/font][/div] answer
  268.                     [br][/br]
  269.         [/div]
  270.         [/div]
  271.  
  272.  
  273.         [div class="content content02"]
  274.         [div class=scroll]
  275.             [div class=title][font=Playfair Display SC]persona[/font][/div]
  276.                 [div class=tag][font=Work Sans]question[/font][/div]  answer
  277.                 [div class=imgSmallContainer]
  278.                 [div class=imgSmall style="background-image: url('https://66.media.tumblr.com/68ded5bba4c841da1a78817d182c3fbf/tumblr_inline_p2n1dhnFmO1rbm3wd_500.gif');"][/div]
  279.                 [div class=imgSmall style="background-image: url('https://66.media.tumblr.com/5132a61d29baef25ff3bad70a27ca89d/tumblr_inline_p2n1cqTnmk1rbm3wd_500.gif');"][/div]
  280.                 [/div]
  281.                 [div class=tag][font=Work Sans]input/question[/font][/div] output/answer
  282.                     [br][/br]
  283.         [/div]
  284.         [/div]
  285.  
  286.  
  287.         [div class="content content03"]
  288.         [div class=scroll]
  289.             [div class=title][font=Playfair Display SC]special[/font][/div]
  290.                 [div class=imgSmallContainer]
  291.                 [div class=imgSmall style="background-image: url('https://66.media.tumblr.com/958523d0131f3fab9de7b99c9dcfab4e/tumblr_inline_p2n1cxOyQW1rbm3wd_500.gif');"][/div]
  292.                 [div class=imgSmall style="background-image: url('https://66.media.tumblr.com/125340aa07906c00b610fe3888e5936e/tumblr_inline_p2n1d8f6FE1rbm3wd_500.gif');"][/div]
  293.                 [/div]
  294.                 [div class=tag][font=Work Sans]input[/font][/div] output
  295.                     [br][/br]
  296.                 [div class=tag][font=Work Sans]input[/font][/div] output
  297.                     [br][/br]
  298.         [/div]
  299.         [/div]
  300.  
  301.  
  302.         [div class="content content04"]
  303.         [div class=scroll]
  304.             [div class=title][font=Playfair Display SC]background[/font][/div]
  305.                 [div class=tag][font=Work Sans]input[/font][/div] output
  306.                 [div class=imgSmallContainer]
  307.                 [div class=imgSmall style="background-image: url('https://66.media.tumblr.com/442a13a55bfbe3022553b68e25dadf73/tumblr_inline_p2n1feBvAr1rbm3wd_500.gif');"][/div]
  308.                 [div class=imgSmall style="background-image: url('https://66.media.tumblr.com/acb1a84e37ba3c0b6526e617ed806627/tumblr_inline_p2n1fmKjhS1rbm3wd_500.gif');"][/div]
  309.                 [/div]
  310.                 [div class=tag][font=Work Sans]question[/font][/div]  answer
  311.                     [br][/br]
  312.                 [div class=tag][font=Work Sans]misc. facts[/font][/div]
  313.                     [br][/br]
  314. [color=transparent]xx[/color] → can make a list of things like this, or whatever you want to do with arrows
  315.                     [br][/br]
  316. [color=transparent]xx[/color] → etc.
  317.         [/div]
  318.         [/div]
  319.  
  320.     [/div]
  321.  
  322.         [div class=tabs]
  323.             [div class="tab tab01"][/div]
  324.             [div class="tab tab02"][/div]
  325.             [div class="tab tab03"][/div]
  326.             [div class="tab tab04"][/div]
  327.         [/div]
  328.     [/div]
  329. [/div]
  330. [/div]
  331. [div=font-size: 9px; text-align: center; opacity: 0.8;]coded by shady.[/div]
  332. [/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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top