API tools faq
paste
Advertisement
werevolf

#1 - Thrills, Chills, Kills!

werevolf
Jun 6th, 2019
61
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.64 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [class name="cardbase"]
  3.     position: relative;
  4.     z-index: 0;
  5.     background: linear-gradient( rgba(229,90,34,0.7), rgba(78,113,126,0.7) 20%, rgba(4,14,30,0.9) ),
  6.     url('https://i.imgur.com/2QivGiK.png') no-repeat center;
  7.     background-size: cover;
  8.     border-radius: 15px;
  9.     border-style: groove ridge groove groove;
  10.     border-width: 5px;
  11.     border-color: white #374853 #5a7691 #5a7691;
  12.     max-width: 720px;
  13.     width: 90%;
  14.     margin: auto;
  15. [/class]
  16. [class name="horizontalLine"]
  17.     position: absolute;
  18.     z-index: 1;
  19.     border: solid #fff;
  20.     background: #fff;
  21.     border-width: 0.75px;
  22.     width: 85%;
  23.     margin: 33px 1px;
  24. [/class]
  25. [class name="header"]
  26.     display: inline-block;
  27.     position: relative;
  28.     z-index: 2;
  29.     float: left;
  30.     letter-spacing: 5px;
  31.     font-size: 35px;
  32.     transform: scaleY(0.7);
  33.     font-weight: bold;
  34.     color: white;
  35.     line-height: 1.1;
  36.     text-shadow: 0 0 10px #44545e,0 0 10px #44545e,0 0 10px #44545e, 0 0 20px #44545e, 0 0 30px #44545e, 0 0 40px #44545e;
  37.     margin: 12px 0px 5px 25px;
  38. [/class]
  39. [class name="academyHeader"]
  40.     display: inline-block;
  41.     position: relative;
  42.     z-index: 2;
  43.     float: right;
  44.     top: 13px;
  45.     max-width: 250px;
  46.     width: 100%;
  47.     text-align: right;
  48.     font-size: 1.1em;
  49.     line-height: 1.2;
  50.     letter-spacing: 3px;
  51.     color: white;
  52.     font-family: garamond, serif;
  53.     text-shadow: 0 0 10px #000;
  54.     transform: scale(0.9,1);
  55.     right: 13%;
  56. [/class]
  57. [class name="academyLogo"]
  58.     position: absolute;
  59.     right:0;
  60.     max-width: 100px;
  61.     max-height: 100px;
  62.     width: 15%;
  63.     overflow: hidden;
  64.     margin: 8px 8px 0px 0px;
  65.     opacity: 0.6;
  66. [/class]
  67. [class name="subheader"]
  68.     position: relative;
  69.     max-width: 400px;
  70.     width: 100%;
  71.     font-size: 28px;
  72.     font-weight: bold;
  73.     color: white;
  74.     margin-left: 3%;
  75. [/class]
  76. [class name="flexcontainer"]
  77.     display: flex;
  78.     flex-wrap: wrap;
  79.     justify-content: center;
  80. [/class]
  81. [comment]This is where you change the character picture.[/comment]
  82. [class name="charportrait"]
  83.     display: inline-block;
  84.     background: url('http://placehold.it/200x275') center top no-repeat, linear-gradient(rgba(0,0,0,0), rgba(179,29,29,0.55) 50%);
  85.     background-size: cover;
  86.     border-radius: 8px;
  87.     border: solid 1.5px white;
  88.     max-width: 200px;
  89.     max-height: 275px;
  90.     width: 30%;
  91.     height: auto;
  92.     min-width: 180px;
  93.     min-height: 248px;
  94.     margin-top: 3px;
  95.     margin-bottom: 10px;
  96.     margin-right: 1%;
  97.     margin-left: 3%;
  98.     overflow:hidden;
  99. [/class]
  100. [class name="information"]
  101.     position: relative;
  102.     display: inline-block;
  103.     max-width: 460px;
  104.     width: 60%;
  105.     line-height: 1.8;
  106.     color: white;
  107.     font-size: 20px;
  108.     font-family: Lucida sans unicode, sans-serif;
  109.     margin: 2px 0px 0px 12px;
  110.     max-height: 300px;
  111.     overflow:hidden;
  112.     order: 1;
  113.     flex-grow: 2;
  114.     align-self: stretch;
  115.     right: 5px;
  116. [/class]
  117. [class name="label"]
  118.     background: #ff6000;
  119.     border-radius: 20px;
  120.     padding-left: 10px;
  121.     line-height: 1.6;
  122.     margin-left: -5px;
  123.     margin-right: 10vw;
  124. [/class]
  125. [class name="label2"]
  126.     background: #ff6000;
  127.     border-radius: 20px;
  128.     padding-left: 10px;
  129.     font-size: 17px;
  130.     line-height: 1.6;
  131.     margin-top: 4px;
  132.     margin-left: 2.5px;
  133.     margin-right: 45%;
  134. [/class]
  135. [class name="pagination"]
  136.     position: relative;
  137.     color: white;
  138.     font-size: 25px;
  139.     float:right;
  140.     margin: 5px;
  141. [/class]
  142. [class name=sbutton]
  143.     cursor: pointer;
  144.     font-size: 25px;
  145.     color: rgba(0,0,0,0);
  146.     -webkit-text-stroke: 1.5px yellow;
  147.     text-align: center;
  148.     margin: 0px 5px 0px 5px;
  149.     float: right;
  150. [/class]
  151. [class name=stab]
  152.     display: block;
  153.     box-sizing: content-box;
  154.     width: 100%;
  155.     height: 300px;
  156.     padding-right: 200px;
  157.     overflow-y: auto;
  158.     overflow-x: hidden;
  159. [/class]
  160. [class name=credit]
  161.     transform: rotate(-90deg);
  162.     position: absolute;
  163.     top: 250px;
  164.     left: -35px;
  165.     font-size: 10px;
  166.     color: white;
  167.     opacity: 0.6;
  168. [/class]
  169.  
  170. [script class=sbutton version=2]
  171.     (hide "stab")
  172.     (show "onetab")
  173.     (addClass "onebtn")
  174. [/script]
  175. [script class=sbutton version=2 on=click]
  176.     (hide "stab")
  177.     (= currenttab (index (split (getText) "#") 0 ))
  178.     (show (+ currenttab "tab"))
  179.     (addClass (+ currenttab "btn"))
  180. [/script]
  181.  
  182. [div class=cardbase]
  183.  
  184. [div class=academyLogo][img]https://i.imgur.com/pDNvyQN.png[/img][/div]
  185. [div class=flexbox
  186. [div class=header]Report Card[/div]
  187. [div class=academyHeader]Hope's Peak Academy[br][/br]e-Handbook[/div]
  188. [div class=horizontalLine][/div]
  189.  
  190. [div class=subheader][table=none]
  191. [td]0000[/td]
  192. [td][div=width: 25px; float:left;][img]https://i.imgur.com/oBhhfUZ.png[/img][/div][div=transform: scaleY(0.7);]Firstname Lastname[/div][/td]
  193. [/table][/div]
  194.  
  195. [div class=flexcontainer]
  196. [div class=charportrait]
  197. [comment]In order to change the picture here, go to the class charportrait and change the url found in the background section.[/comment]
  198. [/div]
  199. [div class="information"]
  200.  
  201. [div class="stab onetab"]
  202. [table=none]
  203. [tr]
  204. [td][div class=label]Name[/div][/td]
  205. [td][right]Firstname Lastname[/right][/td]
  206. [/tr]
  207. [tr]
  208. [td][div class=label]Height[/div][/td]
  209. [td][right]X ft. X in. (X cm)[/right][/td]
  210. [/tr]
  211. [tr]
  212. [td][div class=label]Weight[/div][/td]
  213. [td][right]X lbs. (X kg.)[/right][/td]
  214. [/tr]
  215. [tr]
  216. [td][div class=label]Chest[/div][/td]
  217. [td][right]X in. (X cm.)[/right][/td]
  218. [/tr]
  219. [/table]
  220. [div class=label2]Special Ability[/div]
  221. [div=top: 3px; text-indent: 15px; position: relative; font-size: 17px;]
  222. Ultimate ???
  223. [/div]
  224.  
  225. [div=margin: 28px 10px 0px 0px][div class=pagination]1/5[div class="sbutton twobtn"][div=display: none;]two#[/div][fa]fas fa-angle-right[/fa][/div][/div][/div]
  226. [/div]
  227.  
  228. [div class="stab twotab"]
  229. [div class=label2]Information[/div]
  230. [div=top: 3px; position: relative; font-size: 15px; padding-left: 15px;]
  231. If you have the knowledge to do so, you are free to change this layout in whatever way suits you. It does not have to be a profile card for a Danganronpa character, as the text and images provided can be changed to whatever is suitable for your roleplay character. Both the code used to create a 'page turning' effect and the hidden scroll effect are modified codes sourced from the [div=text-shadow: 0 0 3px black; display: inline-block;][URL='https://www.rpnation.com/threads/%E2%98%82-snippets.411246/']snippets thread[/URL][/div]. This code was designed to not totally screw over mobile users.
  232. [/div]
  233. [div class=pagination][div=float:left;][div class="sbutton onebtn"][div=display: none;]one#[/div][fa]fas fa-angle-left[/fa][/div][/div]2/5[div class="sbutton threebtn"][div=display: none;]three#[/div][fa]fas fa-angle-right[/fa][/div][/div]
  234. [/div]
  235.  
  236. [div class="stab threetab"]
  237. [div class=label2]Information2[/div]
  238. [div=top: 3px; position: relative; font-size: 15px; padding-left: 15px;]
  239. This page showcases the hidden scroll built into the profile, which was put there in order to keep the "card" effect. Unlike some hidden scrolls that can be easily missed, the page turning function gives someone an incentive to attempt to scroll down. In order to make a linebreak, the use of a [div=display: inline-block; color: red;][ICODE][br][/br][/ICODE][/div] tag is necessary.
  240. [br][/br][br][/br]
  241. Et pharetra pharetra massa massa ultricies mi quis. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Magna fringilla urna porttitor rhoncus dolor. Eu augue ut lectus arcu bibendum at varius vel pharetra. At tellus at urna condimentum mattis pellentesque id nibh tortor. Purus in massa tempor nec. Iaculis urna id volutpat lacus laoreet non curabitur. Consequat nisl vel pretium lectus quam id leo in vitae. In mollis nunc sed id.
  242. [/div]
  243. [div class=pagination][div=float:left;][div class="sbutton twobtn"][div=display: none;]two#[/div][fa]fas fa-angle-left[/fa][/div][/div]3/5[div class="sbutton fourbtn"][div=display: none;]four#[/div][fa]fas fa-angle-right[/fa][/div][/div]
  244. [/div]
  245.  
  246. [div class="stab fourtab"]
  247. [div class=label2]Information3[/div]
  248. [div=top: 3px; position: relative; font-size: 15px; padding-left: 15px;]
  249. In theory, you should be able to make as many pages as you want. Examine the code for each of these 'stab' sections and change some of the values in order to create extra pages, or to remove unneeded ones entirely. If you need any help, just DM me and I'll probably do it for you lol. The same goes for any other changes that you may find difficult to do on your own. If you are willing to take a crack at messing with the code, make sure to liberally use ctrl+f.
  250. [/div]
  251. [div class=pagination][div=float:left;][div class="sbutton threebtn"][div=display: none;]three#[/div][fa]fas fa-angle-left[/fa][/div][/div]4/5[div class="sbutton fourbtn"][div=display: none;]five#[/div][fa]fas fa-angle-right[/fa][/div][/div]
  252. [/div]
  253.  
  254. [div class="stab fivetab"]
  255. [div class=label2]Information4[/div]
  256. [div=top: 3px; position: relative; font-size: 15px; padding-left: 15px;padding-bottom:5px;]
  257. This code is probably a little janky. The scripts may take a few seconds to load in properly.
  258. [/div]
  259. [div class=label2]Add More Labels[/div]
  260. [div=top: 3px; position: relative; font-size: 15px; padding-left: 15px;]
  261. You can add as much bottom padding on the paragraph above, or you can just delete this section entirely. This is just here to showcase how you could add multiple labels on one page.
  262. [/div]
  263. [div=margin-right: 10px;][div class=pagination][div=float:left;][div class="sbutton twobtn"][div=display: none;]four#[/div][fa]fas fa-angle-left[/fa][/div][/div]5/5[/div][/div][/div]
  264. [/div][/div]
  265.  
  266. [div class=credit]code by [USER=48301]@Carnage[/USER][/div]
  267. [/div][/nobr]
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!