API tools faq
paste
Advertisement
soxxx

009 - light

soxxx
Oct 20th, 2024
38
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.83 KB | None | 0 0
raw download clone embed print report
  1. [comment]code by sox
  2.  
  3. [font=Allura]titles[/font]
  4. [font=Montserrat]subtitles[/font]
  5. [font=Teachers]body[/font]
  6.  
  7. [/comment][div=height:auto; width:100%; overflow-x:auto; overflow-y:hidden;
  8.  
  9. /*colors*/
  10. --bkgd: #CCA385; /*peachy orange*/
  11. --shadow: rgba(0, 0, 0, 0.3); /*black - translucent*/
  12. --text: #000; /*black*/
  13.  
  14. --accent0: #fff; /*white - heavy contrast to --text color*/
  15. --accent1: #F0E7D8; /*pale yellow*/
  16. --accent2: #CB8080; /*salmon pink*/
  17. --accent3: #2B1E18; /*dark brown*/
  18. --accent4: var(--bkgd); /*same as --bkgd color*/
  19.  
  20.  
  21. /*values*/
  22. --border0: 3px solid var(--accent0); /*main border style*/
  23. --border1: 3px solid var(--accent2); /*picture border style*/
  24.  
  25. --titlesize: 60px; /*title text font size*/
  26. --titlelineheight: 40px; /*title text line height*/
  27. --titleshadow: -1.5px 1.5px 0px var(--accent2), -3px 3px 0px var(--accent0);
  28.  
  29. --subtitlesize: 8px; /*details text font size*/
  30. --subtitlelineheight: 9px; /*details text line height*/
  31.  
  32. --bodysize: 11px; /*body text font size*/
  33. --bodylineheight: 12px; /*body text line height*/
  34.  
  35. --bannerborder: 20px solid var(--accent0); /*body text cut off - don't adjust*/
  36.  
  37. --accentshadow: 0px 0px 10px var(--shadow);
  38. --accentweight: 0.5px;
  39. --accentrotate: -6deg;
  40.  
  41. --picshadow: 0px 0px 10px var(--accent0);
  42.  
  43.  
  44. /*fonts*/
  45. --font1: 'Allura', sans-serif;
  46. --font2: 'Montserrat', sans-serif;
  47. --font3: 'Teachers', sans-serif;
  48.  
  49.  
  50. /*pics*/
  51. --mainpic: url('https://i.imgur.com/WKVzQ4B.png');
  52. --texture: url('https://i.imgur.com/BISzhFq.png');
  53.  
  54.  
  55. ][div=margin:auto; position:relative; width:600px; height:450px; margin-top:10px; margin-bottom:10px; background: var(--bkgd); border:var(--border0); box-sizing:border-box; border-radius:40px; overflow:hidden; cursor: url(https://imgur.com/5ex8RXq.png), auto;][nobr]
  56.  
  57. [comment]---- BKGD GRAINY TEXTURE ----[/comment]
  58. [div=width:100%; height:100%; background:var(--texture); background-size:cover; background-position:50% 50%; opacity:1;][/div]
  59.  
  60. [comment]---- BKGD CROSS PATTERN START ----[/comment]
  61. [comment]---- horizontal ----[/comment]
  62. [div=position:absolute; left:-30px; top:0px; width:640px; height:var(--accentweight); box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  63. [div=position:absolute; left:-30px; top:22px; width:640px; height:var(--accentweight); box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  64. [div=position:absolute; left:-30px; top:44px; width:640px; height:var(--accentweight); box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  65. [div=position:absolute; left:-30px; top:393px; width:640px; height:var(--accentweight); box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  66. [div=position:absolute; left:-30px; top:415px; width:640px; height:var(--accentweight); box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  67. [div=position:absolute; left:-30px; top:437px; width:640px; height:var(--accentweight); box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  68. [div=position:absolute; left:-30px; top:459px; width:640px; height:var(--accentweight); box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  69.  
  70. [comment]---- vertical----[/comment]
  71. [div=position:absolute; left:182px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  72. [div=position:absolute; left:204px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  73. [div=position:absolute; left:226px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  74. [div=position:absolute; left:248px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  75. [div=position:absolute; left:270px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  76. [div=position:absolute; left:292px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  77. [div=position:absolute; left:314px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  78. [div=position:absolute; left:336px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  79. [div=position:absolute; left:358px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  80. [div=position:absolute; left:380px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  81. [div=position:absolute; left:402px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  82. [div=position:absolute; left:424px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  83. [div=position:absolute; left:446px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  84. [div=position:absolute; left:468px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  85. [div=position:absolute; left:490px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  86. [div=position:absolute; left:512px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  87. [div=position:absolute; left:534px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  88. [div=position:absolute; left:556px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  89. [div=position:absolute; left:578px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  90. [div=position:absolute; left:600px; top:-10px; width:var(--accentweight); height:500px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  91. [comment]---- BKGD CROSS PATTERN END ----[/comment]
  92.  
  93.  
  94.  
  95.  
  96. [comment]---- RIGHT PANEL START ----[/comment]
  97.  
  98. [comment]---- BODY BANNER ----[/comment]
  99. [/nobr][div=position:absolute; left:-30px; top:80px; width:640px; height:275px; border-top:var(--bannerborder); border-bottom:var(--bannerborder); box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate)); overflow:hidden;][div=position:absolute; top:-15px; left:400px; width:200px; height:260px; transform:rotate(6deg); overflow:hidden;][div=position:relative; padding:24px 30px 0px 0px; width:200px; height:260px; font-family:var(--font3); font-size:var(--bodysize); line-height:var(--bodylineheight); text-align:justify; overflow:scroll; color:var(--text);][comment]
  100.  
  101. ---- BODY TEXT HERE ----
  102. [/comment]Lorem ipsum odor amet, consectetuer adipiscing elit. Arcu in suspendisse nulla suspendisse habitant dapibus lectus ridiculus. Lacinia vivamus himenaeos orci; fringilla fusce maximus.
  103.  
  104. [div=display:inline; color:var(--accent2); font-weight:bold;]"Vitae amet leo eu dignissim."[/div] Lacus dapibus vivamus faucibus parturient fringilla ullamcorper curabitur. Adipiscing nisl purus vestibulum lacus auctor aliquam blandit. Placerat maximus primis tincidunt congue nullam? Non cras nec euismod penatibus a porttitor gravida pulvinar. Placerat inceptos sapien dui ultricies ad penatibus sodales. Class montes varius ligula parturient odio ligula dis. Netus lorem enim semper venenatis tellus porta. Dictum natoque leo ornare est habitasse magnis dolor?
  105.  
  106. [div=display:inline; color:var(--accent4); font-weight:bold;]"Turpis iaculis donec accumsan."[/div] Libero curabitur fringilla sagittis vulputate. Urna tellus curae eleifend, sagittis odio luctus facilisis dolor habitasse.
  107.  
  108. Inceptos pretium felis per finibus laoreet. Suscipit vitae parturient sociosqu curae justo venenatis lobortis. Torquent consequat maximus sem proin ipsum netus. Erat primis mollis fusce lacus vestibulum. Euismod commodo magna vehicula tellus nisi. Ipsum posuere aenean tellus sociosqu habitant nunc metus? Himenaeos rutrum at tortor sit et vitae praesent.
  109.  
  110. Ultricies egestas cursus habitasse fames a elit purus. Netus varius congue felis fermentum morbi penatibus parturient ultrices malesuada. Nec dapibus primis dolor eleifend cursus efficitur vivamus. Habitant adipiscing rutrum porttitor maecenas sem consectetur ridiculus nibh! Nibh morbi dolor eget; non libero sociosqu tincidunt. Tincidunt arcu consectetur mus inceptos tempor. Lacus quam taciti semper volutpat fringilla vulputate. Vel cubilia magnis senectus; aliquet class commodo? Urna proin varius curae orci donec facilisi mi. Sociosqu nec per lacus erat aliquam at eleifend placerat.
  111.  
  112. Sagittis sit rhoncus sagittis netus est molestie. Quisque taciti justo tortor dapibus platea rutrum.
  113.  
  114. Metus commodo morbi ligula, proin gravida adipiscing viverra. Vulputate eros montes est purus feugiat! Mollis congue luctus facilisi quisque duis purus. Bibendum enim turpis congue; ex hac massa lacus rutrum. Pharetra ad laoreet volutpat potenti suspendisse tortor laoreet ornare. Faucibus neque varius tincidunt luctus bibendum torquent penatibus. Netus natoque inceptos interdum eget purus vestibulum malesuada? Taciti nascetur porttitor montes euismod id congue commodo mollis curabitur. Nostra nisl commodo semper mattis interdum urna suspendisse. Consequat per sed sit adipiscing in tornat.
  115. [comment]---- BODY TEXT END ----[/comment]
  116.  
  117.  
  118. [/div][/div][/div][nobr]
  119.  
  120.  
  121.  
  122. [comment]---- DETAILS START ----[/comment]
  123.  
  124. [comment]---- TOP BANNER RIBBON ----[/comment]
  125. [div=position:absolute; left:-30px; top:59px; width:640px; height:20px; box-sizing:border-box; border-top:var(--border0); background:var(--accent2); transform:rotate(var(--accentrotate)); padding-right:40px; font-family:var(--font2); font-size:var(--subtitlesize); line-height:var(--subtitlelineheight); color:var(--accent3); text-transform:uppercase; text-align:right; font-weight:700; padding-top:5px;][div=display:inline; color:var(--accent0); margin-right:5px;]location:[/div][comment]
  126.  
  127. ---- LOCATION HERE ----
  128. [/comment]the abandoned greenhouse
  129.  
  130. [div=display:inline; color:var(--accent0); margin-left:20px; margin-right:5px;]outfit:[/div][comment]
  131.  
  132. ---- OUTFIT HERE ----
  133. [/comment][url='https://i.pinimg.com/control/564x/fb/49/0f/fb490fa15ef73db895a1590502e1d9c4.jpg'][div=display:inline; color:var(--accent3);][fa]far fa-shirt[/fa][/div][/url][/div]
  134.  
  135. [comment]---- BOTTOM BANNER RIBBON ----[/comment]
  136. [div=position:absolute; left:-30px; top:356px; width:640px; height:20px; box-sizing:border-box; border-bottom:var(--border0); background:var(--accent2); transform:rotate(var(--accentrotate)); overflow:hidden;][div=position:relative; padding-top:5px; margin-left: 340px; width:270px; height:10px; overflow-y:scroll; padding-right:40px; font-family:var(--font2); font-size:var(--subtitlesize); line-height:var(--subtitlelineheight); color:var(--accent3); text-transform:uppercase; text-align:right; font-weight:700; ][div=display:inline; color:var(--accent0); margin-right:5px;]interactions:[/div][comment]
  137.  
  138. ---- TAGS HERE - this scrolls! ----
  139. [/comment]name 1, name 2, name 3
  140. [/div][/div]
  141.  
  142. [comment]---- DETAILS END ----[/comment]
  143.  
  144. [comment]---- RIGHT PANEL END ----[/comment]
  145.  
  146.  
  147.  
  148.  
  149. [comment]---- LEFT PANEL START ----[/comment]
  150.  
  151. [comment]---- CURVE START ----[/comment]
  152. [div=position:absolute; left:-315px; top:-30px; width:640px; height:650px; border-radius:100%; border:var(--border0); box-sizing:border-box; background:var(--accent1); box-shadow:var(--accentshadow); overflow:hidden;]
  153.  
  154. [comment]---- PICTURE ----[/comment]
  155. [div=position:absolute; right:40px; top:135px; width:248px; height:248px; border-radius:100%; box-shadow:var(--picshadow); border:var(--border1); box-sizing:border-box; background:var(--mainpic); background-size:cover; background-position:50% 50%;][/div]
  156.  
  157. [comment]---- TOP RIBBON ----[/comment][div=position:absolute; right:0px; top:124px; width:400px; height:15px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  158. [comment]---- BOTTOM RIBBON ----[/comment][div=position:absolute; right:0px; top:385px; width:400px; height:15px; box-sizing:border-box; background:var(--accent0); transform:rotate(var(--accentrotate));][/div]
  159.  
  160. [/div][comment]---- CURVE END----[/comment]
  161.  
  162.  
  163. [comment]---- TOP NAME ----[/comment]
  164. [div=position:absolute; left:0px; top:83px; width:275px; height:40px; box-sizing:border-box; color:var(--accent3); text-shadow: var(--titleshadow); transform:rotate(var(--accentrotate)); font-family:var(--font1); font-size:var(--titlesize); line-height:var(--titlelineheight); text-align:center; font-weight:400;][comment]
  165.  
  166. ---- TOP NAME HERE ----
  167. [/comment]Broken[/div]
  168.  
  169.  
  170. [comment]---- BOTTOM NAME ----[/comment]
  171. [div=position:absolute; left:0px; top:340px; width:335px; height:40px; box-sizing:border-box; color:var(--accent3); text-shadow: var(--titleshadow); transform:rotate(var(--accentrotate)); font-family:var(--font1); font-size:var(--titlesize); line-height:var(--titlelineheight); text-align:center; font-weight:400;][comment]
  172.  
  173. ---- BOTTOM NAME HERE ----
  174. [/comment]Melodies[/div]
  175.  
  176.  
  177. [comment]---- TOP ACCENT ----[/comment]
  178. [div=position:absolute; left:15px; top:30px; width:50px; height:50px; color:var(--accent2); font-size:40px; transform:rotate(-20deg);][fa]fas fa-star[/fa][/div]
  179. [div=position:absolute; left:23px; top:35px; width:50px; height:50px; color:var(--accent0); font-size:30px; transform:rotate(-20deg);][fa]fas fa-star[/fa][/div]
  180.  
  181. [comment]---- BOTTOM ACCENT ----[/comment]
  182. [div=position:absolute; left:250px; top:375px; width:50px; height:50px; color:var(--accent2); font-size:30px; transform:rotate(20deg);][fa]fas fa-star[/fa][/div]
  183. [div=position:absolute; left:252.5px; top:384px; width:50px; height:50px; color:var(--accent0); font-size:20px; transform:rotate(20deg);][fa]fas fa-star[/fa][/div]
  184.  
  185. [comment]---- LEFT PANEL END ----[/comment]
  186.  
  187. [/nobr][/div][/div]
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!