API tools faq
paste
Advertisement
Guest User

stacked on

a guest
Dec 4th, 2018
124
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.19 KB | None | 0 0
raw download clone embed print report
  1. [nobr][comment]--------------------------------------------------- template code by lambikins, please do not claim for your own! ---------------------------------------------------[/comment]
  2.  
  3.  
  4. [nobr]  
  5. [div class="majorContainer"]
  6.  
  7. [comment]------------------------------------------------------ character file --------------------------------------[/comment]
  8.  
  9.  
  10.      [div class="fileGridSize"]
  11.  
  12.           [div class="fileTitle"]
  13.                character file #001
  14.           [/div]
  15.  
  16.           [div class="fileQuote"]
  17.                one quick line of quote here
  18.           [/div]
  19.  
  20.      [/div]
  21.  
  22. [comment]------------------------------------------------------ important info --------------------------------------[/comment]
  23.  
  24.      [div class="infoGridOne"]
  25.  
  26.           [div class="infoBoxLeft"]
  27.                [div class="infoHeight"]
  28.                     [div class="infoNumber"]01[/div]
  29.                     [div class="infoTitle"]name[/div]
  30.                     [div class="infoField"]cecile lalond[/div]
  31.                [/div]
  32.           [/div]
  33.  
  34.           [div class="infoBoxLeft"]
  35.                [div class="infoHeight"]
  36.                     [div class="infoNumber"]02[/div]
  37.                     [div class="infoTitle"]age[/div]
  38.                     [div class="infoField"]here[/div]
  39.                [/div]
  40.           [/div]
  41.  
  42.  
  43.           [div class="infoBoxLeft"]
  44.                [div class="infoHeight"]
  45.                     [div class="infoNumber"]03[/div]
  46.                     [div class="infoTitle"]gender[/div]
  47.                     [div class="infoField"]here[/div]
  48.                [/div]
  49.           [/div]
  50.  
  51.           [div class="infoBoxLeft"]
  52.                [div class="infoHeight"]
  53.                     [div class="infoNumber"]04[/div]
  54.                     [div class="infoTitle"]sexuality[/div]
  55.                     [div class="infoField"]here[/div]
  56.                [/div]
  57.           [/div]
  58.      [/div]
  59.  
  60.      [div class="infoGridTwo"]
  61.  
  62.           [div class="infoBoxRight"]
  63.                [div class="infoHeight"]
  64.                     [div class="infoNumber"]05[/div]
  65.                     [div class="infoTitle"]occupation[/div]
  66.                     [div class="infoField"]cecile lalond[/div]
  67.                [/div]
  68.           [/div]
  69.  
  70.           [div class="infoBoxRight"]
  71.                [div class="infoHeight"]
  72.                     [div class="infoNumber"]06[/div]
  73.                     [div class="infoTitle"]height[/div]
  74.                     [div class="infoField"]here[/div]
  75.                [/div]
  76.           [/div]
  77.  
  78.  
  79.           [div class="infoBoxRight"]
  80.                [div class="infoHeight"]
  81.                     [div class="infoNumber"]07[/div]
  82.                     [div class="infoTitle"]weight[/div]
  83.                     [div class="infoField"]here[/div]
  84.                [/div]
  85.           [/div]
  86.  
  87.           [div class="infoBoxRight"]
  88.                [div class="infoHeight"]
  89.                     [div class="infoNumber"]08[/div]
  90.                     [div class="infoTitle"]sexuality[/div]
  91.                     [div class="infoField"]here[/div]
  92.                [/div]
  93.           [/div]
  94.  
  95.      [/div]
  96.  
  97.  
  98. [comment]------------------------------------------------------ aesthetic column --------------------------------------[/comment]
  99.  
  100.      [div class="aestheticGrid"]
  101.  
  102.           [div class="aestheticImage"][IMG]https://i.imgur.com/qmvBXuN.png[/IMG][/div]
  103.           [div class="aestheticImage"][IMG]https://i.imgur.com/97Q5bGH.png[/IMG][/div]
  104.           [div class="aestheticImage"][IMG]https://i.imgur.com/9dSwbqS.png[/IMG][/div]
  105.           [div class="aestheticImage"][IMG]https://i.imgur.com/CFPPvwX.png[/IMG][/div]
  106.  
  107.      [/div]
  108.  
  109. [comment]------------------------------------------------------ character image --------------------------------------[/comment]
  110.  
  111.      [div class="characterGrid"]
  112.  
  113.           [div class="characterImage"][IMG]https://i.imgur.com/Dq9iRbx.png[/IMG][/div]
  114.  
  115.      [/div]
  116.  
  117. [comment]------------------------------------------------------ overview --------------------------------------[/comment]
  118.  
  119.      [div class="overviewGrid"]
  120.  
  121.           [div class="overviewContainer"]
  122.  
  123.                [div class="overviewScroll"]
  124.                          Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore.Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since.
  125.                [/div]
  126.           [/div]
  127.      [/div]
  128.  
  129. [comment]------------------------------------------------------ personality --------------------------------------[/comment]
  130.      [div class="personalityColumn"]
  131.  
  132.           [div class="textContainer"]
  133.                [div class="textTitle"]personality[/div]
  134.                [div class="textNoscroll"]
  135.                     [div class="textScroll"]
  136.  
  137. Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore. Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.
  138.  
  139.                     [/div]
  140.                [/div]
  141.            [/div]
  142.  
  143.       [/div]
  144.  
  145. [comment]------------------------------------------------------ aesthetic divider --------------------------------------[/comment]
  146.  
  147.      [div class="dividerGrid"]
  148.  
  149.           [div class="dividerImage"][IMG]http://imagehost7.online-image-editor.com/oie_upload/images/414458Ug5gE/bPxI6A6NLeZt.jpg[/IMG][/div]
  150.  
  151.      [/div]
  152.  
  153.  
  154. [comment]------------------------------------------------------ history --------------------------------------[/comment]
  155.  
  156.      [div class="historyColumn"]
  157.  
  158.  
  159.           [div class="textContainer"]
  160.                [div class="textTitle"]history[/div]
  161.                [div class="textNoscroll"]
  162.                     [div class="textScroll"]
  163.  
  164. Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore. Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.
  165.  
  166.                     [/div]
  167.                [/div]
  168.            [/div]
  169.  
  170.       [/div]
  171.  
  172. [/div]
  173.  
  174.  
  175.  
  176.  
  177.  
  178.  
  179.  
  180.  
  181.  
  182.  
  183.  
  184.  
  185.  
  186.  
  187.  
  188.  
  189.  
  190. [class name="majorContainer" minWidth="900px"]
  191.     width:750px;
  192.     height:505px;
  193.     padding:25px;
  194.     margin:5px auto;
  195.     border:0.1px solid #f1f1f1;
  196.  
  197.     display:grid;
  198.     grid-gap:5px;
  199.     grid-template-columns: 120px 120px 120px 120px 120px 120px;
  200.     grid-template-rows: 120px 120px 120px 120px
  201.  
  202. [/class]
  203.  
  204. [class name="majorContainer"]
  205. --accent:#864052
  206. [/class]
  207.  
  208. [class name="majorContainer"  maxWidth="900px"]
  209.     width:245px;
  210.     height:1245px;
  211.     padding:25px;
  212.     margin:5px auto;
  213.     border:0.1px solid #f1f1f1;
  214.  
  215.     display:grid;
  216.     grid-gap:5px;
  217.     grid-template-columns: 120px 120px;
  218.     grid-template-rows: 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px;
  219.  
  220. [/class]
  221.  
  222. [comment]------------------------------------------------------ character file classes --------------------------------------[/comment]
  223.  
  224. [class name="fileGridSize" minWidth="900px"]
  225.     grid-column: 1 / span 3;
  226.     grid-row: 1 / 1;
  227. [/class]
  228.  
  229. [class name="fileGridSize" maxWidth="900px"]
  230.     grid-column: 1 / span 2;
  231.     grid-row: 1 / 1;
  232. [/class]
  233.  
  234.  
  235.  
  236. [class name="fileTitle"]
  237.     border:0.1px solid #f1f1f1;
  238.     border-bottom:0px;
  239.     padding:40px 50px 37px 50px;
  240.     font-size:10px;
  241.     font-weight:150;
  242.     text-transform:uppercase;
  243.     letter-spacing:1px;
  244.     height:calc(1.3em - 0.2px)
  245. [/class]
  246.  
  247. [class name="fileQuote"]
  248.     border-left:0.1px solid var(--accent);
  249.     border-right:0.1px solid var(--accent);
  250.     padding:10px;
  251.     background:var(--accent);
  252.     font-size:8px;
  253.     font-weight:150;
  254.     text-transform:uppercase;
  255.     color:#fff;
  256.     letter-spacing:1px;
  257.     height:1.3em;
  258. [/class]
  259.  
  260. [comment]------------------------------------------------------ important info classes --------------------------------------[/comment]
  261.  
  262. [class name="infoGridOne" minWidth="900px"]
  263.     grid-column: 4 / span 1;
  264.     grid-row: 1 / 3;
  265. [/class]
  266.  
  267. [class name="infoGridTwo" minWidth="900px"]
  268.     grid-column: 5 / span 1;
  269.     grid-row: 1 / 3;
  270. [/class]
  271.  
  272. [class name="infoGridOne" maxWidth="900px"]
  273.     grid-column: 1 / span 1;
  274.     grid-row: 3 / span 2;
  275. [/class]
  276.  
  277. [class name="infoGridTwo" maxWidth="900px"]
  278.     grid-column: 2 / span 1;
  279.     grid-row: 3 / span 2;
  280. [/class]
  281.  
  282. [class name="infoBoxLeft"]
  283.     width:100px;
  284.     padding:10px 5px 10px 15px;
  285. [/class]
  286.  
  287. [class name="infoHeight"]
  288.     height:40px
  289. [/class]
  290.  
  291. [class name="infoNumber"]
  292.     color:var(--accent);
  293.     font-family:serif;
  294.     font-size:20px;
  295.     font-weight:bold;
  296.     float:left;
  297.     margin-right:5px;
  298. [/class]
  299.  
  300. [class name="infoTitle"]
  301.     font-weight:bold;
  302.     font-size:10px;
  303.     text-transform:uppercase;
  304.     padding-top:2px;
  305. [/class]
  306.  
  307. [class name="infoField"]
  308.     font-size:10px;
  309.     text-transform:uppercase;
  310. [/class]
  311.  
  312. [class name="infoBoxRight"]
  313.     width:100px;
  314.     padding:10px 15px 10px 5px;
  315. [/class]
  316.  
  317. [comment]------------------------------------------------------ aesthetic column classes --------------------------------------[/comment]
  318.  
  319. [class name="aestheticGrid" minWidth="900px"]
  320.     grid-column: 6 / span 1;
  321.     grid-row: 1 / 5;
  322.     border:0.1px solid #f1f1f1;
  323. [/class]
  324.  
  325. [class name="aestheticGrid" maxWidth="900px"]
  326.     grid-column: 1 / span 2;
  327.     grid-row: 9 / span 2;
  328.     border:0.1px solid #f1f1f1;
  329.     display:flex;
  330.         flex-wrap:wrap;
  331.     justify-content:space-evenly;
  332. [/class]
  333.  
  334. [class name="aestheticImage" minWidth="900px"]
  335.     margin:35px 20px 30px 20px;
  336.     padding:10px;
  337.     pointer-events:none;
  338.     width:60px;
  339.     height:60px;
  340.     border:0.1px solid #f1f1f1;
  341. [/class]
  342.  
  343. [class name="aestheticImage" maxWidth="900px"]
  344.     margin:20px;
  345.     padding:10px;
  346.     pointer-events:none;
  347.     width:60px;
  348.     height:60px;
  349.     border:0.1px solid #f1f1f1;
  350. [/class]
  351.  
  352. [comment]------------------------------------------------------ character image classes --------------------------------------[/comment]
  353.  
  354. [class name="characterGrid"]
  355.     grid-column: 1 / span 1;grid-row: 2 / span 1;
  356.     border:0.1px solid #f1f1f1;
  357. [/class]
  358. [class name="characterImage"]
  359.     padding:20px;
  360.     pointer-events:none;
  361.     width:80px;
  362.     height:80px
  363. [/class]
  364.  
  365. [comment]------------------------------------------------------ overview classes --------------------------------------[/comment]
  366.  
  367. [class name="overviewGrid" minWidth="900px"]
  368.     grid-column: 2 / span 2;
  369.     grid-row: 2 / 2;
  370.     border:0.1px solid #f1f1f1;
  371. [/class]
  372.  
  373. [class name="overviewGrid" maxWidth="900px"]
  374.     grid-column: 2 / span 1;
  375.     grid-row: 2 / 2;
  376.     border:0.1px solid #f1f1f1;
  377. [/class]
  378.  
  379. [class name="overviewContainer"]
  380.     width:calc(100% - 50px);
  381.     height:calc(100% - 50px);
  382.     margin:15px;
  383.     padding:10px;
  384.     border:0.1px solid #f1f1f1;
  385.     overflow:hidden;
  386. [/class]
  387.  
  388. [class name="overviewScroll"]
  389.     font-size:11px;
  390.     width:calc(100% + 17px);
  391.     height:100%;
  392.     overflow:auto;
  393.     padding-right:100px;
  394.     text-align:justify;
  395. [/class]
  396.  
  397.  
  398. [comment]------------------------------------------------------ personality + history classes --------------------------------------[/comment]
  399.  
  400. [class name="personalityColumn" minWidth="900px"]
  401.     grid-column: 1 / span 2;
  402.     grid-row: 3 / span 2;
  403. [/class]
  404.  
  405. [class name="historyColumn" minWidth="900px"]
  406.     grid-column: 4 / span 2;
  407.     grid-row: 3 / span 2;
  408. [/class]
  409.  
  410. [class name="personalityColumn" maxWidth="900px"]
  411.     grid-column: 1 / span 2;
  412.     grid-row: 5 / span 2;
  413. [/class]
  414.  
  415. [class name="historyColumn" maxWidth="900px"]
  416.     grid-column: 1 / span 2;
  417.     grid-row: 7 / span 2;
  418. [/class]
  419.  
  420.  
  421.  
  422. [class name="textContainer" minWidth="900px"]
  423.     width:200px;
  424.     border:0.1px solid #f1f1f1;
  425.     padding:20px;
  426.     height:205px
  427. [/class]
  428.  
  429. [class name="textTitle" minWidth="900px"]
  430.     color:var(--accent);
  431.     font-family:serif;
  432.     font-size:25px;
  433.     font-weight:bold;
  434.     margin-left:5px;
  435.     margin-top:-10px;
  436. [/class]
  437.  
  438. [class name="textNoscroll" minWidth="900px"]
  439.     width:180px;
  440.     border:0.1px solid #f1f1f1;
  441.     padding:10px;
  442.     margin-top:-15px;
  443.     height:175px;
  444.     overflow:hidden;
  445. [/class]
  446. [class name="textScroll" minWidth="900px"]
  447.     width:197px;
  448.     height:175px;
  449.     overflow:auto;
  450.     font-size:11px;
  451.     padding-right:100px;
  452.     text-align:justify;
  453. [/class]
  454.  
  455.  
  456. [class name="textContainer" maxWidth="900px"]
  457.     width:205px;
  458.     border:0.1px solid #f1f1f1;
  459.     padding:20px;
  460.     height:205px
  461. [/class]
  462.  
  463. [class name="textTitle" maxWidth="900px"]
  464.     color:var(--accent);
  465.     font-family:serif;
  466.     font-size:25px;
  467.     font-weight:bold;
  468.     margin-left:5px;
  469.     margin-top:-10px;
  470. [/class]
  471.  
  472. [class name="textNoscroll" maxWidth="900px"]
  473.     width:185px;
  474.     border:0.1px solid #f1f1f1;
  475.     padding:10px;
  476.     margin-top:-15px;
  477.     height:175px;
  478.     overflow:hidden;
  479. [/class]
  480. [class name="textScroll" maxWidth="900px"]
  481.     width:202px;
  482.     height:175px;
  483.     overflow:auto;
  484.     font-size:11px;
  485.     padding-right:100px;
  486.     text-align:justify;
  487. [/class]
  488.  
  489. [comment]------------------------------------------------------ aesthetic divider classes --------------------------------------[/comment]
  490.  
  491. [class name="dividerGrid" minWidth="900px"]
  492.     grid-column: 3 / span 1;
  493.     grid-row:3 / span 2;
  494.     border:0.1px solid #f1f1f1;
  495. [/class]
  496.  
  497. [class name="dividerGrid" maxWidth="900px"]
  498.     display:none
  499. [/class]
  500.  
  501. [class name="dividerImage"]
  502.     margin:10px;
  503.     padding:10px;
  504.     pointer-events:none;
  505.     width:80px;
  506.     height:205px;
  507.     filter:brightness(120%);
  508. [/class][/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!