API tools faq
paste
hanthesunbeam1

mac and cheese (cs)

hanthesunbeam1
Sep 19th, 2020 (edited)
93
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.99 KB | None | 0 0
raw download clone embed print report
  1. [comment]ok, so these names are a bit weird lol. bg is the background/cream, mainy is the yellow/detail, maing is the grey/detail 2, and box1 is the white/main box. pic0-8 are the ones in the code, and gallery1-14 are the gallery. If you need to change any picture sizes or positioning, you cannot change them here. The pictures are labeled within the code so you can change that kind of stuff there. As always, don't remove credit, and enjoy c: [/comment]
  2.  
  3. [border=0; display: block; position: relative; box-sizing: border-box; background: var(--maing); width: 750px; height: 500px; line-height: 0px; margin: auto; overflow: hidden; padding:0px; border-radius: 0px;
  4. --bg: #f4f4f4;
  5. --mainy: #fddb3a;
  6. --maing: #52575d;
  7. --box1: #fff;
  8. --pic0: url(https://i.pinimg.com/originals/cc/6a/6a/cc6a6a56296103684092e88e7f598aba.gif);
  9. --pic1: url(https://i.pinimg.com/474x/e5/18/47/e51847536ceabe2693172507eb8de511.jpg);
  10. --pic2: url(https://64.media.tumblr.com/63ff4c9f5c29fe3bf25bab07bdc7a691/05aa1e6bac56aa28-59/s250x400/b52040b65958ae59789b4f4bd41401553dfcd160.gifv);
  11. --pic3: url(https://i.pinimg.com/474x/f7/db/1a/f7db1a29052975e6c31655f2e6cc6abb.jpg);
  12. --pic4: url(https://i.pinimg.com/474x/a1/4f/79/a14f79e7e8d80fdbf366e7cdd072ca27.jpg);
  13. --pic5: url(https://i.pinimg.com/474x/b5/18/e3/b518e349ec28cb05fa7959d125941c26.jpg);
  14. --pic6: url(https://i.pinimg.com/564x/02/2e/9c/022e9ca41690875da398345924a08f0f.jpg);
  15. --pic7: url(https://64.media.tumblr.com/430444d4f06bba902009cb205401502e/8b853c949e82c582-01/s250x400/0e492589c118daff8afd6e536892908a24a9c2da.jpg);
  16. --pic8: url(https://64.media.tumblr.com/114e005d3420b1ebd86be2cbb32f37e7/49a53ddb45721c5d-c8/s250x400/41f268269a33bcb4d8e76200e2ab93ec3de3d9ba.gifv);
  17. --gallery1: url(https://64.media.tumblr.com/fb0b6050ed954a458e98eda0131349bd/2652bfcd18f6a196-9c/s250x400/e5888249639a4bcf7b422351f1351a79583042d4.gifv);
  18. --gallery2: url(https://i.pinimg.com/474x/2b/33/e9/2b33e9ec266f417be9f3d4e7c5b3345e.jpg);
  19. --gallery3: url(https://i.pinimg.com/474x/d6/98/73/d698738a29e10003192075d592f1d6d5.jpg);
  20. --gallery4: url(https://i.pinimg.com/474x/00/3d/9a/003d9a314316a1d14ebbe587a65e7b0b.jpg);
  21. --gallery5: url(https://i.pinimg.com/474x/9a/a3/c3/9aa3c3382507e01a47127fee5318ebab.jpg);
  22. --gallery6: url(https://64.media.tumblr.com/feaf0c86504d1d7acfd48cc6a61bfb63/dac51cd037da2fd8-ef/s250x400/1f3c1af2425f2e7a49b344bf8e56163beadb4774.gifv);
  23. --gallery7: url(https://i.pinimg.com/474x/d3/09/04/d309043a90dcd6b6ceed1753439a0666.jpg);
  24. --gallery8: url(https://i.pinimg.com/474x/33/70/d2/3370d2056b31bc7c0fd3c8056374ca67.jpg);
  25. --gallery9: url(https://64.media.tumblr.com/040f6992ceda843de2ae9666f1eb6867/2cfe261afe200f01-a8/s500x750/b2ffba7f0d7fe868ac9727a87aefccf7b7aa6710.gifv);
  26. --gallery10: url(https://i.pinimg.com/474x/b7/bc/de/b7bcde58717216a43ef6dda9b3188952.jpg);
  27. --gallery11: url(https://i.pinimg.com/474x/be/12/8b/be128b2f8f38edf9917382ea9194bd3d.jpg);
  28. --gallery12: url(https://i.pinimg.com/474x/d4/42/f1/d442f1a8eac39b1e89deee5a26f9ed5b.jpg);
  29. --gallery13: url(https://i.pinimg.com/474x/3e/0e/a9/3e0ea9fbf230ec0cc7982e4c0ac82b00.jpg);
  30. --gallery14: url(https://64.media.tumblr.com/6cacf80871ece3b669a1a641b29908c2/8cf2cb4a66c2dce0-4f/s500x750/6a89ab953eea1794691de5754bd1ec26035fc7f4.gifv);]
  31.  
  32. [border=0; box-sizing: border-box; position: absolute; background: var(--maing); top: 100px; left: 670px; width: 80px; height: 400px; pointer-events: none; display: flex; align-items: center; justify-content: center; flex-flow: row nowrap;][border=0px; padding-bottom: 20px; box-sizing: border-box; padding: 0px; width: 5px; height: 100%; background: var(--mainy);][/border][/border]
  33.  
  34.  
  35. [comment]Tab icons-- you can change the [fa][/fa] icons here for your tabs [/comment]
  36. [border=0; box-sizing: border-box; position: absolute; top: 295px; left: 670px; width: 80px; height: 180px; pointer-events: none; display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap;][border=2.5px solid var(--mainy); box-sizing: border-box; color: var(--mainy); height: 40px; width: 40px; border-radius: 100px; background: var(--maing); display: flex; align-items: center; justify-content: center; flex-flow: column nowrap;][border=0; padding: 0px;][fa]fal fa-headphones fa-lg[/fa][/border][/border]
  37. [border=2.5px solid var(--mainy); box-sizing: border-box; color: var(--mainy); height: 40px; width: 40px; border-radius: 100px; background: var(--maing); padding: 0px; display: flex; align-items: center; justify-content: center; flex-flow: column nowrap;][border=0; padding: 0px;][fa]fal fa-music fa-lg[/fa][/border][/border]
  38. [border=2.5px solid var(--mainy); box-sizing: border-box; color: var(--mainy); height: 40px; width: 40px; border-radius: 100px; background: var(--maing); padding: 0px; display: flex; align-items: center; justify-content: center; flex-flow: column nowrap;][border=0; padding: 0px;][fa]fal fa-radio-alt fa-lg[/fa][/border][/border]
  39. [/border]
  40.  
  41. [border=0; box-sizing: border-box; position: absolute; width: 100px; height: 30px; top: 335px; left: 670px; ][/border]
  42. [border=0; box-sizing: border-box; position: absolute; width: 100px; height: 30px; top: 395px; left: 670px; ][/border]
  43. [border=0; box-sizing: border-box; position: absolute; width: 100px; height: 30px; top: 450px; left: 670px; ][/border]
  44.  
  45. [border=0; box-sizing: border-box; margin-top: 300px; margin-left: 650px; width: 100px;][tabs]
  46.  
  47.  
  48. [tab=1][comment]tab 1- basics & appearance[/comment]
  49. [border=0; box-sizing: border-box; position: absolute; background: var(--bg); top: 0px; left: 0px; width: 670px; height: 500px; display: flex; justify-content: center; flex-flow: row wrap; align-items: center; ]
  50.  
  51.  
  52. [comment]taggies --kind of a mess, just look for the [font= Cabin][/font] and you should find where to enter the text. it's also a scroll so add as many tags as you want[/comment]
  53. [border=0; box-sizing: border-box; height: 120px; width: 670px; background: var(--box1); border-radius: 0px; display: flex; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; padding: 0px;][border=0; box-sizing: border-box; width: 250px; height: 90%; display: flex; flex-direction: column; overflow: hidden; text-align: justify; padding:0px; margin-top: 0px;][border= 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto; margin-bottom: 0px;][border=0; box-sizing: border-box; left-padding: 10px; padding-right: 10px; padding-top: 0px; width: 250px; font-size: 12px; color: black; line-height: 16px; text-transform: lowercase;][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 13px; font-size: 13px; margin: 2.5px;][font=Cabin]given name[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px; margin: 2.5px;][font=Cabin]nickname[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px; margin: 2.5px;][font=Cabin]nickname 2?[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px; margin: 2.5px;][font=Cabin]age[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px ;margin: 2.5px;][font=Cabin]gender[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px; margin: 2.5px;][font=Cabin]sexuality[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px; margin: 2.5px;][font=Cabin]position[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px; margin: 2.5px;][font=Cabin]position[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px; margin: 2.5px;][font=Cabin]position[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px; margin: 2.5px;][font=Cabin]p.o.b[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px; margin: 2.5px;][font=Cabin]d.o.b[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px; margin: 2.5px;][font=Cabin]extra[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px; margin: 2.5px;][font=Cabin]extra[/font][/border][border=0; display: inline-block; padding: 0px; background: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px; margin: 2.5px;][font=Cabin]extra[/font][/border][/border][/border][/border]
  54.  
  55.  
  56.  
  57. [comment]top gif[/comment]
  58. [border=0px; height: 85px; width: 350px; background: var(--pic0); background-size: cover; background-position: top center;][/border]
  59. [/border]
  60.  
  61. [border=0; padding: 0px; margin-left: 60px; box-sizing: border-box; height: auto; width: 670px; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; flex-direction: row;]
  62.  
  63. [border=0; box-sizing: border-box; height: 350px; width: 150px; padding: 0px; margin-top: 5px; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; flex-direction: column;]
  64.  
  65.  
  66. [comment]3 pictures --top (to remove the black and white filter, change the filter: grayscale(100%); to 0% or delete it)[/comment]
  67. [border=0; filter: grayscale(100%); box-sizing: border-box; height: 33%; width: 150px; background: var(--pic1); background-size: cover; background-position: center; border-radius: 0px; margin-top: 0px;][/border]
  68.  
  69.  
  70. [comment]Middle[/comment]
  71. [border=0; filter: grayscale(0%); box-sizing: border-box; height: 33%; width: 150px; background: var(--pic2); background-size: cover; background-position: center; border-radius: 0px; margin-top: 5px;][/border]
  72.  
  73.  
  74. [comment]Bottom (to remove the black and white filter, change the filter: grayscale(100%); to 0% or delete it)[/comment]
  75. [border=0; filter: grayscale(100%); box-sizing: border-box; height: 33%; width: 150px; background: var(--pic3); background-size: cover; background-position: top center; border-radius: 0px; margin-top: 5px;][/border][/border]
  76.  
  77. [comment] scroll background picture [/comment]
  78. [border=0; box-sizing: border-box; padding-left: 5px; padding-top: 0px; padding-bottom: 0px; height: 350px; width: 280px; background: var(--pic4); background-size: cover; background-position: center; border-radius: 0px; margin-top: 5px; display: flex; flex-flow: column nowrap; overflow: hidden;]
  79.  
  80.  
  81. [comment]appearance scroll box[/comment]
  82. [border=0; box-sizing: border-box; width: 200%; flex:1; overflow-x: auto; padding: 0px; margin-bottom: 0px;][border=0; width: 250px; padding-left: 10px; padding-right: 10px; background: rgb(255, 255, 255, 0.75); font-size: 12px; line-height: 14px; color: #000; text-align: justify; border-radius: 0px; margin-top: 420px;][border=0; display: inline-block; padding: 0px; border-bottom: 3px solid var(--mainy); padding-left: 0px; padding-right: 20px; line-height: 26px; font-size: 30px; margin-bottom: 5px;][font=Oswald]visage[/font][/border]
  83. height:
  84. weight:
  85. hair color:
  86. eye color:
  87. build:
  88. body modifications:
  89. style:
  90. fc:
  91. [/border][/border][/border]
  92.  
  93. [comment]picture 5[/comment]
  94. [border=0; box-sizing: border-box; height: 350px; width: 150px; background: var(--pic5); background-size: cover; background-position: center; border-radius: 0px; margin-top: 5px;][/border]
  95.  
  96. [comment]name title[/comment]
  97. [border=0; position: absolute; box-sizing: border-box; font-size: 50px; width: 350px; height: auto; line-height: 30px; text-align: left; color: var(--name); transform: rotate(-90deg); left: -145px;][font= Oswald]name here[/font][/border]
  98. [/border]
  99.  
  100. [/border][/tab]
  101.  
  102. [tab=--]spacer tab dont touch[/tab]
  103.  
  104. [tab=2][comment]tab 2- persona and extras/interview[/comment]
  105. [border=0; box-sizing: border-box; position: absolute; background: var(--bg); top: 0px; left: 0px; width: 670px; height: 500px;display: flex; justify-content: space-between; flex-flow: row nowrap; align-items: center; padding: 0px; ]
  106.  
  107. [border=0; padding: 0px; box-sizing: border-box; height: 480px; width: 250px; display: flex; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; flex-direction: column;]
  108.  
  109. [comment]title[/comment]
  110. [border=0; box-sizing: border-box; font-size: 50px; width: 250px; height: 40px; text-align: left; color: var(--name); border-bottom: 5px solid var(--mainy); ][font= Oswald]persona[/font][/border]
  111.  
  112. [comment]persona text[/comment]
  113. [border=0; box-sizing: border-box; width: 250px; height: 230px; display: flex; flex-direction: column; overflow: hidden; text-align: justify; padding:0px; margin-top: 5px;][border= 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto; margin-bottom: 5px;][border=0; box-sizing: border-box; left-padding: 10px; padding-right: 10px; padding-top: 0px; width: 250px; font-size: 12px; color: black; line-height: 16px; text-transform: lowercase; display: flex; justify-content: space-between; flex-flow: row wrap; align-items: center;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis eget velit aliquet sagittis id consectetur purus ut. Pellentesque pulvinar pellentesque habitant morbi tristique. Et tortor consequat id porta nibh venenatis cras sed felis. Et sollicitudin ac orci phasellus egestas tellus rutrum. Lacus sed viverra tellus in hac habitasse platea. Vitae elementum curabitur vitae nunc. Velit ut tortor pretium viverra suspendisse potenti nullam. Ornare massa eget egestas purus viverra accumsan in. Arcu felis bibendum ut tristique et egestas quis ipsum. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Urna nunc id cursus metus aliquam eleifend. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Consectetur purus ut faucibus pulvinar elementum integer enim. Vel fringilla est ullamcorper eget.
  114.  
  115. Gravida arcu ac tortor dignissim convallis aenean et tortor at. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. Nascetur ridiculus mus mauris vitae. Purus non enim praesent elementum facilisis leo vel fringilla est. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Scelerisque fermentum dui faucibus in ornare quam viverra. Quis viverra nibh cras pulvinar. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Mi quis hendrerit dolor magna. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Lobortis feugiat vivamus at augue eget arcu dictum varius duis.
  116.  
  117. Dolor sit amet consectetur adipiscing elit pellentesque. Nibh sed pulvinar proin gravida hendrerit. Semper auctor neque vitae tempus quam pellentesque nec nam. Tincidunt ornare massa eget egestas purus viverra accumsan in nisl. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Tellus in metus vulputate eu scelerisque felis. Blandit massa enim nec dui nunc mattis enim ut tellus. Nec ullamcorper sit amet risus nullam eget. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Urna duis convallis convallis tellus id interdum velit laoreet. Viverra vitae congue eu consequat ac felis donec et.
  118.  
  119. Ultrices sagittis orci a scelerisque purus semper eget duis. At volutpat diam ut venenatis tellus in metus. Sed viverra tellus in hac habitasse platea dictumst vestibulum. At volutpat diam ut venenatis tellus in metus vulputate. Imperdiet massa tincidunt nunc pulvinar sapien. Dui vivamus arcu felis bibendum ut tristique et egestas quis. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Id volutpat lacus laoreet non curabitur gravida. Molestie a iaculis at erat. Feugiat pretium nibh ipsum consequat. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Consequat mauris nunc congue nisi vitae suscipit. Quis blandit turpis cursus in hac habitasse platea. Non blandit massa enim nec dui nunc mattis enim ut. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Id neque aliquam vestibulum morbi blandit cursus.
  120.  
  121. Ut venenatis tellus in metus vulputate eu. Est ultricies integer quis auctor elit sed vulputate mi. Turpis egestas integer eget aliquet nibh praesent tristique magna. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Pretium lectus quam id leo in vitae turpis massa sed. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec. Sed vulputate mi sit amet mauris commodo quis imperdiet. Volutpat diam ut venenatis tellus in. Tellus elementum sagittis vitae et leo duis ut diam quam. Elementum eu facilisis sed odio morbi quis commodo odio. Etiam non quam lacus suspendisse. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Viverra nam libero justo laoreet. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Sapien eget mi proin sed. Arcu non sodales neque sodales ut etiam sit. Sit amet nulla facilisi morbi tempus iaculis urna id. Purus non enim praesent elementum. Sodales ut eu sem integer vitae justo eget magna fermentum. Consequat nisl vel pretium lectus quam id leo in.[/border][/border][/border]
  122.  
  123. [comment]Picture right bottom[/comment]
  124. [border=0; box-sizing: border-box; padding-left: 5px; padding-top: 0px; padding-bottom: 0px; height: 230px; width: 250px; background: var(--pic6); background-size: cover; background-position: center; border-radius: 0px; margin-top: 5px; ][/border]
  125. [/border]
  126.  
  127. [border=0; padding: 0px; box-sizing: border-box; height: 485px; width: 220px; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; flex-direction: column;]
  128.  
  129. [comment]picture top middle (to remove the black and white filter, change the filter: grayscale(100%); to 0% or delete it)[/comment]
  130. [border=0; box-sizing: border-box; height: 300px; width: 220px; background: var(--pic7); filter: grayscale(100%); background-size: cover; background-position: center; border-radius: 0px; margin-top: -2px; ][/border]
  131.  
  132. [comment]interview/extras text[/comment]
  133. [border=0; box-sizing: border-box; width: 220px; height: 175px; display: flex; flex-direction: column; overflow: hidden; text-align: justify; padding:0px; margin-top: 5px;][border= 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto; margin-bottom: 5px;][border=0; box-sizing: border-box; left-padding: 10px; padding-right: 10px; padding-top: 0px; width: 220px; font-size: 12px; color: black; line-height: 16px; text-transform: lowercase;][border=0; display: inline-block; padding: 0px; color: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; padding-bottom: 5px; padding-top: 5px; line-height: 14px; font-size: 13px; margin-bottom: 5px; background: var(--maing);][font=Oswald]"question"[/font][/border]
  134. answer
  135.  
  136. [border=0; display: inline-block; padding: 0px; color: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; padding-bottom: 5px; padding-top: 5px; line-height: 14px; font-size: 13px; margin-bottom: 5px; background: var(--maing);][font=Oswald]"question"[/font][/border]
  137. answer
  138.  
  139. [border=0; display: inline-block; padding: 0px; color: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; padding-bottom: 5px; padding-top: 5px; line-height: 14px; font-size: 13px; margin-bottom: 5px; background: var(--maing);][font=Oswald]"question"[/font][/border]
  140. answer
  141.  
  142. [border=0; display: inline-block; padding: 0px; color: var(--mainy); border-radius: 3px; padding-left: 7px; padding-right: 7px; padding-bottom: 5px; padding-top: 5px; line-height: 14px; font-size: 13px; margin-bottom: 5px; background: var(--maing);][font=Oswald]"question"[/font][/border]
  143. answer
  144. [/border][/border][/border][/border]
  145.  
  146.  
  147. [comment]Tall right gif[/comment]
  148. [border=0; padding: 0px; box-sizing: border-box; height: 485px; width: 170px; background: var(--pic8); background-size: cover; background-position: center; ][/border]
  149. [/border]
  150. [/tab]
  151.  
  152. [tab=--]spacer tab (don't touch)[/tab]
  153.  
  154. [tab=3][comment]tab 3- history and gallery[/comment]
  155. [border=0; box-sizing: border-box; position: absolute; background: var(--bg); top: 0px; left: 0px; width: 670px; height: 500px;display: flex; justify-content: space-between; flex-flow: row nowrap; align-items: center; padding: 0px; ]
  156.  
  157.  
  158. [comment]history text[/comment]
  159. [border=0; padding: 0px; box-sizing: border-box; height: 480px; width: 300px; display: flex; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; flex-direction: column;]
  160. [border=0; box-sizing: border-box; width: 300px; height: 440px; display: flex; flex-direction: column; overflow: hidden; text-align: justify; padding:0px; margin-top: 5px;][border= 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto; margin-bottom: 5px;][border=0; box-sizing: border-box; left-padding: 10px; padding-right: 10px; padding-top: 0px; width: 300px; font-size: 12px; color: black; line-height: 16px; text-transform: lowercase;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis eget velit aliquet sagittis id consectetur purus ut. Pellentesque pulvinar pellentesque habitant morbi tristique. Et tortor consequat id porta nibh venenatis cras sed felis. Et sollicitudin ac orci phasellus egestas tellus rutrum. Lacus sed viverra tellus in hac habitasse platea. Vitae elementum curabitur vitae nunc. Velit ut tortor pretium viverra suspendisse potenti nullam. Ornare massa eget egestas purus viverra accumsan in. Arcu felis bibendum ut tristique et egestas quis ipsum. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Urna nunc id cursus metus aliquam eleifend. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Consectetur purus ut faucibus pulvinar elementum integer enim. Vel fringilla est ullamcorper eget.
  161.  
  162. Gravida arcu ac tortor dignissim convallis aenean et tortor at. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. Nascetur ridiculus mus mauris vitae. Purus non enim praesent elementum facilisis leo vel fringilla est. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Scelerisque fermentum dui faucibus in ornare quam viverra. Quis viverra nibh cras pulvinar. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Mi quis hendrerit dolor magna. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Lobortis feugiat vivamus at augue eget arcu dictum varius duis.
  163.  
  164. Dolor sit amet consectetur adipiscing elit pellentesque. Nibh sed pulvinar proin gravida hendrerit. Semper auctor neque vitae tempus quam pellentesque nec nam. Tincidunt ornare massa eget egestas purus viverra accumsan in nisl. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Tellus in metus vulputate eu scelerisque felis. Blandit massa enim nec dui nunc mattis enim ut tellus. Nec ullamcorper sit amet risus nullam eget. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Urna duis convallis convallis tellus id interdum velit laoreet. Viverra vitae congue eu consequat ac felis donec et.
  165.  
  166. Ultrices sagittis orci a scelerisque purus semper eget duis. At volutpat diam ut venenatis tellus in metus. Sed viverra tellus in hac habitasse platea dictumst vestibulum. At volutpat diam ut venenatis tellus in metus vulputate. Imperdiet massa tincidunt nunc pulvinar sapien. Dui vivamus arcu felis bibendum ut tristique et egestas quis. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Id volutpat lacus laoreet non curabitur gravida. Molestie a iaculis at erat. Feugiat pretium nibh ipsum consequat. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Consequat mauris nunc congue nisi vitae suscipit. Quis blandit turpis cursus in hac habitasse platea. Non blandit massa enim nec dui nunc mattis enim ut. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Id neque aliquam vestibulum morbi blandit cursus.
  167.  
  168. Ut venenatis tellus in metus vulputate eu. Est ultricies integer quis auctor elit sed vulputate mi. Turpis egestas integer eget aliquet nibh praesent tristique magna. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Pretium lectus quam id leo in vitae turpis massa sed. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec. Sed vulputate mi sit amet mauris commodo quis imperdiet. Volutpat diam ut venenatis tellus in. Tellus elementum sagittis vitae et leo duis ut diam quam. Elementum eu facilisis sed odio morbi quis commodo odio. Etiam non quam lacus suspendisse. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Viverra nam libero justo laoreet. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Sapien eget mi proin sed. Arcu non sodales neque sodales ut etiam sit. Sit amet nulla facilisi morbi tempus iaculis urna id. Purus non enim praesent elementum. Sodales ut eu sem integer vitae justo eget magna fermentum. Consequat nisl vel pretium lectus quam id leo in.[/border][/border][/border]
  169.  
  170.  
  171. [comment]title[/comment]
  172. [border=0; box-sizing: border-box; font-size: 50px; width: 300px; height: auto; height: 50px; text-align: left; color: var(--name); border-top: 5px solid var(--mainy); ][font= Oswald]history[/font][/border]
  173. [/border]
  174.  
  175. [border=0; padding: 0px; box-sizing: border-box; height: 480px; width: 300px; display: flex; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; flex-direction: column;]
  176.  
  177. [comment]title[/comment]
  178. [border=0; box-sizing: border-box; font-size: 50px; width: 300px; height: auto; height: 50px; text-align: left; color: var(--name); border-top: 5px solid var(--mainy); ][font= Oswald]gallery[/font][/border]
  179.  
  180. [comment]gallery images-- you can edit like the zoom/positioning of the pics inside the div here with background-position: ---; and background-size: ---; you can use percents for size and position. position can also be center, right, left, bottom, and top in any combination.[/comment]
  181. [border=0; box-sizing: border-box; width: 300px; height: 440px; display: flex; flex-direction: column; overflow: hidden; text-align: justify; padding:0px; margin-top: 5px;][border= 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto; margin-bottom: 5px;][border=0; box-sizing: border-box; left-padding: 10px; padding-right: 10px; padding-top: 0px; width: 300px; font-size: 12px; color: black; line-height: 16px; text-transform: lowercase; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; flex-direction: row;]
  182.  
  183. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery1); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  184.  
  185. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery2); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  186.  
  187. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery3); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  188.  
  189. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery4); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  190.  
  191. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery5); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  192.  
  193. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery6); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  194.  
  195. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery7); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  196.  
  197. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery8); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  198.  
  199. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery9); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  200.  
  201. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery10); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  202.  
  203. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery11); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  204.  
  205. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery12); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  206.  
  207. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery13); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  208.  
  209. [border=0; box-sizing: border-box; height: 135px; width: 135px; background: var(--gallery14); background-size: cover; background-position: center; border-radius: 0px; margin-bottom: 5px; ][/border]
  210. [/border][/border][/border]
  211.  
  212. [/border][/border][/tab][border=0; box-sizing: border-box; position: absolute; background: var(--bg); top: 0px; left: 0px; width: 670px; height: 500px;display: flex; justify-content: space-between; flex-flow: row nowrap; align-items: center; padding: 0px; ]
  213.  
  214. [tab=--]spacer tab, don't touch[/tab]
  215. [/border]
  216. [/tab]
  217. [/tabs][/border]
  218. [/border][comment]
  219.  
  220. credit, do not touch c:
  221. [/comment][border=0; position: relative; margin: auto; text-align: center; font-size: 10px; width: 500px; line-height: 12px;]coded by hanthesunbeam
  222. hidden scroll in the center[/border]
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!