API tools faq
paste
Advertisement
ooksie

divine arcana (uxie x terrorkitty)

ooksie
May 26th, 2022 (edited)
270
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 54.31 KB | None | 0 0
raw download clone embed print report
  1. [comment]designed by terrorkitty, coded by uxie!
  2.  
  3. [font=Hind]tarot details[/font]
  4. [font=Spectral]headers[/font]
  5. [font=Red Hat Text]body[/font]
  6. [font=Roboto]music[/font]
  7.  
  8. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  9.  
  10. [/comment][border=transparent;
  11.  
  12. /*main background colour*/
  13. --bg-color: #000000;
  14.  
  15. /*slide 1 background image*/
  16. --bg: url('https://i.imgur.com/HI7XhEX.png');
  17.  
  18. /*slide 1 accent colour -- tarot details, header*/
  19. --color-1: #F0DD9E;
  20. /*secondary accent colour -- contrast w/ bg-color*/
  21. --color-2: #fff;
  22. /*slide 3 accent colour -- icons, headers*/
  23. --color-3: #F0DD9E;
  24.  
  25. /*text colour*/
  26. --t-color: #fff;
  27.  
  28. /*music player title + artist colour*/
  29. --m1: #f8aec9;
  30. /*music player button, progress bar colour*/
  31. --m2: #fff;
  32.  
  33. /*customisable card images*/
  34. --c1: url('https://i.imgur.com/dwjfvKy.png');
  35. --c2: url('https://i.imgur.com/kko7e6V.png');
  36. --c3: url('https://i.imgur.com/87epTHW.png');
  37.  
  38. /*music player image*/
  39. --m-img: url('https://i.imgur.com/mS3QYGs.png');
  40.  
  41. /*slide 2 image*/
  42. --t-img: url('https://wallpapercave.com/wp/wp10491544.jpg');
  43.  
  44. /*fonts used*/
  45. --tarot: 'Hind', sans-serif;
  46. --header: 'Spectral', serif;
  47. --body: 'Red Hat Text', sans-serif;
  48. --music: 'Roboto', sans-serif;
  49.  
  50.  
  51. height:auto; width:100%; padding:0 0 20px 0; box-sizing:border-box; overflow-x:auto; overflow-y:hidden; margin:15px 0 10px 0; line-height:0; position:relative;][border=transparent; height:540px; width:100%; min-width:320px; max-width:850px; padding:10px 2px 10px 10px; box-sizing:border-box; margin:0 auto; background: var(--bg-color); position:relative;][border=transparent; height:100%; width:100%; padding:0; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y proximity;]
  52. [border=transparent; height:auto; width:auto; padding:2px 8px; box-sizing:border-box; background: var(--bg-color); display:flex; align-items:center; position:absolute; top:6px; right:2px; z-index:10; opacity:0.4; color: var(--color-2); line-height:100%;][border=transparent; height:auto; width:auto; padding:0; font-size:10px; text-transform:uppercase; font-family: var(--body); font-weight:bold; letter-spacing:0.5px;]scroll[/border][border=transparent; height:auto; width:auto; padding:0; font-size:13px; margin:0 0 2px 5px;][fa]fas fa-angle-down[/fa][/border][/border]
  53.  
  54.  
  55. [comment]----slide one (tarot cards)----[/comment]
  56. [border=transparent; height:auto; min-height:100%; width:50%; padding:0; scroll-snap-align:start; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; background: var(--bg); background-size:cover; position:relative;
  57.  
  58. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]
  59.  
  60. [comment]----music player----[/comment]
  61. [border=transparent; height:clamp(0px, -350px + 33vw, 95px); width:250px; padding:0; display:flex; flex-flow:row nowrap; position:absolute; bottom:10px; left:10px; overflow:hidden;]
  62.  
  63. [comment]----music image----[/comment]
  64. [border=transparent; height:95px; width:95px; padding:0; background: var(--m-img) 50% 50%; background-size:cover; border-radius:5px; flex-shrink:0;][/border]
  65.  
  66. [comment]----music contents----[/comment]
  67. [border=transparent; height:100%; flex:1; padding:0; margin-left:20px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; font-family: var(--music);]
  68.  
  69. [comment]----song title----[/comment]
  70. [border=transparent; height:auto; width:auto; max-width:90%; padding:0; color: var(--m1); font-size:14px; font-weight:bold; text-align:center; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  71.  
  72. ----* * * song title here----
  73.  
  74. [/comment]Gotta Go[/border]
  75.  
  76. [comment]----song artist----[/comment]
  77. [border=transparent; height:auto; width:auto; max-width:90%; padding:0; color: var(--m1); font-size:12px; text-align:center; line-height:100%; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  78.  
  79. ----* * * song artist here----
  80.  
  81. [/comment]CHUNG HA[/border]
  82.  
  83. [comment]----progress bar----[/comment]
  84. [border=transparent; height:auto; width:100%; padding:0; position:relative; display:flex; align-items:center; margin:auto 0;][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center;][border=transparent; height:0; width:100%; padding:0; border-top:2px solid var(--m2); opacity:0.6;][/border][/border][border=transparent; height:3px; padding:0;
  85.  
  86. /*edit the following to adjust progress of song. max 93%*/ width:35%;
  87.  
  88. border-radius:2px; background: var(--m2); margin-right:-2px;][/border][border=transparent; height:9px; width:9px; padding:0; background: var(--m2); border-radius:50%;][/border][/border]
  89.  
  90. [comment]----play button----[/comment]
  91. [border=transparent; height:auto; width:auto; padding:0; position:relative; margin:5px 0 2px 0;][border=transparent; height:auto; width:auto; padding:0; color: var(--m2); font-size:14px; position:relative; z-index:2; pointer-events:none;][fa]fas fa-play[/fa][/border]
  92.  
  93. [comment]----actual media player----[/comment]
  94. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; opacity:0.01%;][border=transparent; height:32px; width:32px; padding:0; overflow:hidden; position:relative;]
  95.  
  96. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  97. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  98. [media=soundcloud]soundcloud link[/media]
  99. [/border]
  100.  
  101. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  102. [border=transparent; height:500px; width:500px; margin-top:-173px; margin-left:-98px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  103. [media=googledrive]google file code[/MEDIA]
  104. [/border]
  105.  
  106. [/border][/border]
  107. [comment]----actual media player end----[/comment]
  108.  
  109. [/border]
  110. [comment]----play button end----[/comment]
  111.  
  112. [/border]
  113. [comment]----music contents end----[/comment]
  114. [/border]
  115. [comment]----music player end----[/comment]
  116.  
  117. [comment]----card 1----[/comment]
  118. [border=transparent; height:402px; width:246px; padding:0; display:flex; align-items:center; justify-content:center; margin:0 15px auto 0; position:relative;
  119.  
  120. /*if using an image of the tarot card, replace xx with your image link, otherwise just use the customisable card plz*/ background: url('xx');
  121.  
  122. background-size:cover; background-position:center;]
  123.  
  124. [comment]----customisable card----[/comment]
  125. [border=transparent; height:360px; width:200px; padding:0; border:2px solid var(--color-1); border-radius:10px; box-sizing:border-box; display:flex; flex-flow:column nowrap; position:relative;
  126.  
  127. /* if using an image, replace here; with display:none;*/ here; ]
  128.  
  129. [comment]----card number----[/comment]
  130. [border=transparent; height:auto; width:100%; padding:0; position:absolute; top:-34px; left:0; z-index:5;][border=transparent; height:60px; width:60px; background: var(--bg-color); padding:20px 0 0 0; box-sizing:border-box; border:2px solid var(--color-1); color: var(--color-1); font-family: var(--tarot); font-size:13px; letter-spacing:2px; font-weight:bold; text-transform:uppercase; border-radius:50%; display:flex; align-items:center; justify-content:center; clip-path: polygon(0 53%, 100% 53%, 100% 100%, 0% 100%); margin:auto;][comment]
  131.  
  132. ----* * * card number here----
  133.  
  134. [/comment]I[/border][/border]
  135.  
  136. [comment]----card image----[/comment]
  137. [border=transparent; flex:1; width:100%; padding:0; background: var(--c1); background-size:cover; border:2px solid var(--bg-color); box-sizing:border-box; border-radius:8px;
  138.  
  139. /*edit the cropping of the image here*/ background-position:50% 50%;
  140.  
  141. -webkit-filter: grayscale(1);][/border]
  142.  
  143. [comment]----card title placeholder----[/comment]
  144. [border=transparent; height:30px; width:100%; padding:0; border-top:2px solid var(--color-1); flex-shrink:0;][/border]
  145. [/border]
  146. [comment]----customisable card end----[/comment]
  147.  
  148. [comment]----card contents----[/comment]
  149. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:5; display:flex; justify-content:center;][border=transparent; height:360px; width:200px; padding:0; margin-top:20px; display:flex; flex-flow:column-reverse nowrap;]
  150.  
  151. [comment]----card title----[/comment]
  152. [border=transparent; height:24px; width:calc(100% - 10px); padding:0; flex-shrink:0; display:flex; align-items:center; justify-content:center; color: var(--color-1); text-transform:uppercase; font-family: var(--tarot); font-weight:bold; letter-spacing:2px; background: var(--bg-color); margin:3px 5px; border-radius:0 0 6px 6px;]
  153. [border=transparent; height:auto; width:auto; padding:0; font-size:9px; line-height:100%;][comment]
  154.  
  155. ----* * * first word----
  156.  
  157. [/comment]the[/border]
  158. [border=transparent; height:auto; width:auto; padding:0; font-size:11px; line-height:100%; margin-left:8px;][comment]
  159.  
  160. ----* * * title----
  161.  
  162. [/comment]magician[/border]
  163. [/border]
  164. [comment]----card title end----[/comment]
  165.  
  166. [comment]----scrollbox----[/comment]
  167. [border=transparent; height:330px; width:200px; padding:10px; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:207px; padding:0; overflow-y:scroll; scroll-snap-type:y mandatory;]
  168. [comment]----placeholder----[/comment]
  169. [border=transparent; height:310px; width:180px; padding:0 5px; box-sizing:border-box; scroll-snap-align:start;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; margin-left:auto; color: var(--color-2); font-size:20px; line-height:100%; opacity:0.6;][fa]far fa-angle-down[/fa][/border][/border]
  170.  
  171. [comment]----actual contents----[/comment]
  172. [border=transparent; height:310px; width:180px; padding:7px 10px; box-sizing:border-box; background: var(--bg-color); scroll-snap-align:start; overflow:hidden;][border=transparent; height:100%; width:187px; padding:0; overflow-y:scroll;]
  173.  
  174. [comment]----copy this whole thing for another section----[/comment]
  175. [border=transparent; height:auto; width:160px; padding:0;]
  176. [comment]----title----[/comment]
  177. [border=transparent; height:auto; width:100%; padding:4px 3px 10px 3px; box-sizing:border-box; background: var(--bg-color); position:sticky; top:0;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 6px; box-sizing:border-box; margin:0 auto; border-bottom:2px solid var(--color-1); font-family: var(--header); text-transform:uppercase; font-size:18px; line-height:100%; text-align:center; color: var(--color-1);][comment]
  178.  
  179. ----* * * title here----
  180.  
  181. [/comment]category[/border]
  182. [/border]
  183. [comment]----title end----[/comment]
  184.  
  185. [comment]----section contents----[/comment]
  186. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); --m-s: 12px; --m-i:9px;][border=transparent; height:0; width:100%; padding:0;
  187.  
  188. /*if you're starting off with the long text first, replace --m-i with --m-s here*/ margin-bottom: calc(var(--m-i) * -1);][/border]
  189.  
  190. [comment]----copy this whole thing to get another piece of info----[/comment]
  191. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top: var(--m-i);]
  192. [border=transparent; height:auto; width:auto; padding:2px 5px 3px 5px; box-sizing:border-box; border:1px solid var(--color-2); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:100%; margin:3px 8px 0 0; letter-spacing:1px;][comment]
  193.  
  194. ----* * * info title here----
  195.  
  196. [/comment]hello[/border]
  197. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:3px 0 0 0; box-sizing:border-box; font-size:12px; line-height:15px;][comment]
  198.  
  199. ----* * * info contents here----
  200.  
  201. [/comment]words[/border]
  202. [/border]
  203. [comment]----copy me too!----[/comment]
  204.  
  205. [comment]----copy this whole thing to get another piece of info----[/comment]
  206. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top: var(--m-i);]
  207. [border=transparent; height:auto; width:auto; padding:2px 5px 3px 5px; box-sizing:border-box; border:1px solid var(--color-2); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:100%; margin:3px 8px 0 0; letter-spacing:1px;][comment]
  208.  
  209. ----* * * info title here----
  210.  
  211. [/comment]hello[/border]
  212. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:3px 0 0 0; box-sizing:border-box; font-size:12px; line-height:15px;][comment]
  213.  
  214. ----* * * info contents here----
  215.  
  216. [/comment]words[/border]
  217. [/border]
  218. [comment]----copy me too!----[/comment]
  219.  
  220. [comment]----copy this whole thing to get another piece of info----[/comment]
  221. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top: var(--m-i);]
  222. [border=transparent; height:auto; width:auto; padding:2px 5px 3px 5px; box-sizing:border-box; border:1px solid var(--color-2); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:100%; margin:3px 8px 0 0; letter-spacing:1px;][comment]
  223.  
  224. ----* * * info title here----
  225.  
  226. [/comment]hello[/border]
  227. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:3px 0 0 0; box-sizing:border-box; font-size:12px; line-height:15px;][comment]
  228.  
  229. ----* * * info contents here----
  230.  
  231. [/comment]words[/border]
  232. [/border]
  233. [comment]----copy me too!----[/comment]
  234.  
  235. [comment]----copy this whole thing to get another piece of long text----[/comment]
  236. [border=transparent; height:auto; width:100%; padding:0; margin-top: var(--m-s); font-size:11px; line-height:15px; text-align:justify;][comment]
  237.  
  238. ----* * * text starts here----
  239.  
  240. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta lorem nec ligula varius vulputate. Cras mattis mauris id odio congue, sit amet faucibus purus congue. Ut justo felis, dignissim eu fermentum vestibulum, fringilla a mi. Proin vestibulum dignissim suscipit. Vivamus et vehicula orci. Sed nec velit a ipsum hendrerit bibendum. Proin blandit volutpat eros non convallis. Sed mauris purus, pulvinar sed dui euismod, tempus varius risus.
  241.  
  242. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis sagittis justo, at sagittis urna egestas ac. Sed fermentum fringilla lacinia. Maecenas euismod non ipsum ut feugiat. Quisque fermentum sem sem, ac lacinia justo varius quis. Aliquam auctor interdum ante, eget vestibulum tellus pharetra quis. Integer efficitur ultrices vulputate. Duis sed tortor augue. Vivamus id ultricies tellus. Nulla rhoncus hendrerit neque, quis scelerisque justo viverra sit amet. Nam dolor libero, egestas consectetur auctor a, placerat quis sem. Phasellus vel mi sit amet odio efficitur tincidunt ac vitae tellus.
  243. [/border]
  244. [comment]----copy me too!----[/comment]
  245.  
  246. [/border]
  247. [comment]----section contents end----[/comment]
  248.  
  249. [/border]
  250. [comment]----copy me too!----[/comment]
  251.  
  252. [/border][/border]
  253. [comment]----actual contents end----[/comment]
  254. [/border][/border]
  255. [comment]----scrollbox end----[/comment]
  256. [/border][/border]
  257. [comment]----card contents end----[/comment]
  258. [/border]
  259. [comment]----card 1 end----[/comment]
  260.  
  261. [comment]----card 2----[/comment]
  262. [border=transparent; height:402px; width:246px; padding:0; display:flex; align-items:center; justify-content:center; position:relative;
  263.  
  264. /*if using an image of the tarot card, replace xx with your image link, otherwise just use the customisable card plz*/ background: url('xx');
  265.  
  266. background-size:cover; background-position:center; margin:0 auto;]
  267.  
  268. [comment]----customisable card----[/comment]
  269. [border=transparent; height:360px; width:200px; padding:0; border:2px solid var(--color-1); border-radius:10px; box-sizing:border-box; display:flex; flex-flow:column nowrap; position:relative;
  270.  
  271. /* if using an image, replace here; with display:none;*/ here; ]
  272.  
  273. [comment]----card number----[/comment]
  274. [border=transparent; height:auto; width:100%; padding:0; position:absolute; top:-34px; left:0; z-index:5;][border=transparent; height:60px; width:60px; background: var(--bg-color); padding:20px 0 0 0; box-sizing:border-box; border:2px solid var(--color-1); color: var(--color-1); font-family: var(--tarot); font-size:13px; letter-spacing:2px; font-weight:bold; text-transform:uppercase; border-radius:50%; display:flex; align-items:center; justify-content:center; clip-path: polygon(0 53%, 100% 53%, 100% 100%, 0% 100%); margin:auto;][comment]
  275.  
  276. ----* * * card number here----
  277.  
  278. [/comment]XVIII[/border][/border]
  279.  
  280. [comment]----card image----[/comment]
  281. [border=transparent; flex:1; width:100%; padding:0; background: var(--c2); background-size:cover; border:2px solid var(--bg-color); box-sizing:border-box; border-radius:8px;
  282.  
  283. /*edit the cropping of the image here*/ background-position:50% 50%;
  284.  
  285. -webkit-filter: grayscale(1);][/border]
  286.  
  287. [comment]----card title placeholder----[/comment]
  288. [border=transparent; height:30px; width:100%; padding:0; border-top:2px solid var(--color-1); flex-shrink:0;][/border]
  289. [/border]
  290. [comment]----customisable card end----[/comment]
  291.  
  292. [comment]----card contents----[/comment]
  293. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:5; display:flex; justify-content:center;][border=transparent; height:360px; width:200px; padding:0; margin-top:20px; display:flex; flex-flow:column-reverse nowrap;]
  294.  
  295. [comment]----card title----[/comment]
  296. [border=transparent; height:24px; width:calc(100% - 10px); padding:0; flex-shrink:0; display:flex; align-items:center; justify-content:center; color: var(--color-1); text-transform:uppercase; font-family: var(--tarot); font-weight:bold; letter-spacing:2px; background: var(--bg-color); margin:3px 5px; border-radius:0 0 6px 6px;]
  297. [border=transparent; height:auto; width:auto; padding:0; font-size:9px; line-height:100%;][comment]
  298.  
  299. ----* * * first word----
  300.  
  301. [/comment]the[/border]
  302. [border=transparent; height:auto; width:auto; padding:0; font-size:11px; line-height:100%; margin-left:8px;][comment]
  303.  
  304. ----* * * title----
  305.  
  306. [/comment]moon[/border]
  307. [/border]
  308. [comment]----card title end----[/comment]
  309.  
  310.  
  311. [comment]----scrollbox----[/comment]
  312. [border=transparent; height:330px; width:200px; padding:10px; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:207px; padding:0; overflow-y:scroll; scroll-snap-type:y mandatory;]
  313. [comment]----placeholder----[/comment]
  314. [border=transparent; height:310px; width:180px; padding:0 5px; box-sizing:border-box; scroll-snap-align:start;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; margin-left:auto; color: var(--color-2); font-size:20px; line-height:100%; opacity:0.6;][fa]far fa-angle-down[/fa][/border][/border]
  315.  
  316. [comment]----actual contents----[/comment]
  317. [border=transparent; height:310px; width:180px; padding:7px 10px; box-sizing:border-box; background: var(--bg-color); scroll-snap-align:start; overflow:hidden;][border=transparent; height:100%; width:187px; padding:0; overflow-y:scroll;]
  318.  
  319. [comment]----copy this whole thing for another section----[/comment]
  320. [border=transparent; height:auto; width:160px; padding:0;]
  321. [comment]----title----[/comment]
  322. [border=transparent; height:auto; width:100%; padding:4px 3px 10px 3px; box-sizing:border-box; background: var(--bg-color); position:sticky; top:0;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 6px; box-sizing:border-box; margin:0 auto; border-bottom:2px solid var(--color-1); font-family: var(--header); text-transform:uppercase; font-size:18px; line-height:100%; text-align:center; color: var(--color-1);][comment]
  323.  
  324. ----* * * title here----
  325.  
  326. [/comment]category[/border]
  327. [/border]
  328. [comment]----title end----[/comment]
  329.  
  330. [comment]----section contents----[/comment]
  331. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); --m-s: 12px; --m-i:9px;][border=transparent; height:0; width:100%; padding:0;
  332.  
  333. /*if you're starting off with the long text first, replace --m-i with --m-s here*/ margin-bottom: calc(var(--m-i) * -1);][/border]
  334.  
  335. [comment]----copy this whole thing to get another piece of info----[/comment]
  336. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top: var(--m-i);]
  337. [border=transparent; height:auto; width:auto; padding:2px 5px 3px 5px; box-sizing:border-box; border:1px solid var(--color-2); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:100%; margin:3px 8px 0 0; letter-spacing:1px;][comment]
  338.  
  339. ----* * * info title here----
  340.  
  341. [/comment]hello[/border]
  342. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:3px 0 0 0; box-sizing:border-box; font-size:12px; line-height:15px;][comment]
  343.  
  344. ----* * * info contents here----
  345.  
  346. [/comment]words[/border]
  347. [/border]
  348. [comment]----copy me too!----[/comment]
  349.  
  350. [comment]----copy this whole thing to get another piece of info----[/comment]
  351. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top: var(--m-i);]
  352. [border=transparent; height:auto; width:auto; padding:2px 5px 3px 5px; box-sizing:border-box; border:1px solid var(--color-2); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:100%; margin:3px 8px 0 0; letter-spacing:1px;][comment]
  353.  
  354. ----* * * info title here----
  355.  
  356. [/comment]hello[/border]
  357. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:3px 0 0 0; box-sizing:border-box; font-size:12px; line-height:15px;][comment]
  358.  
  359. ----* * * info contents here----
  360.  
  361. [/comment]words[/border]
  362. [/border]
  363. [comment]----copy me too!----[/comment]
  364.  
  365. [comment]----copy this whole thing to get another piece of info----[/comment]
  366. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top: var(--m-i);]
  367. [border=transparent; height:auto; width:auto; padding:2px 5px 3px 5px; box-sizing:border-box; border:1px solid var(--color-2); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:100%; margin:3px 8px 0 0; letter-spacing:1px;][comment]
  368.  
  369. ----* * * info title here----
  370.  
  371. [/comment]hello[/border]
  372. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:3px 0 0 0; box-sizing:border-box; font-size:12px; line-height:15px;][comment]
  373.  
  374. ----* * * info contents here----
  375.  
  376. [/comment]words[/border]
  377. [/border]
  378. [comment]----copy me too!----[/comment]
  379.  
  380. [comment]----copy this whole thing to get another piece of long text----[/comment]
  381. [border=transparent; height:auto; width:100%; padding:0; margin-top: var(--m-s); font-size:11px; line-height:15px; text-align:justify;][comment]
  382.  
  383. ----* * * text starts here----
  384.  
  385. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta lorem nec ligula varius vulputate. Cras mattis mauris id odio congue, sit amet faucibus purus congue. Ut justo felis, dignissim eu fermentum vestibulum, fringilla a mi. Proin vestibulum dignissim suscipit. Vivamus et vehicula orci. Sed nec velit a ipsum hendrerit bibendum. Proin blandit volutpat eros non convallis. Sed mauris purus, pulvinar sed dui euismod, tempus varius risus.
  386.  
  387. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis sagittis justo, at sagittis urna egestas ac. Sed fermentum fringilla lacinia. Maecenas euismod non ipsum ut feugiat. Quisque fermentum sem sem, ac lacinia justo varius quis. Aliquam auctor interdum ante, eget vestibulum tellus pharetra quis. Integer efficitur ultrices vulputate. Duis sed tortor augue. Vivamus id ultricies tellus. Nulla rhoncus hendrerit neque, quis scelerisque justo viverra sit amet. Nam dolor libero, egestas consectetur auctor a, placerat quis sem. Phasellus vel mi sit amet odio efficitur tincidunt ac vitae tellus.
  388. [/border]
  389. [comment]----copy me too!----[/comment]
  390.  
  391. [/border]
  392. [comment]----section contents end----[/comment]
  393.  
  394. [/border]
  395. [comment]----copy me too!----[/comment]
  396.  
  397. [/border][/border]
  398. [comment]----actual contents end----[/comment]
  399. [/border][/border]
  400. [comment]----scrollbox end----[/comment]
  401. [/border][/border]
  402. [comment]----card contents end----[/comment]
  403. [/border]
  404. [comment]----card 2 end----[/comment]
  405.  
  406. [comment]----card 3----[/comment]
  407. [border=transparent; height:402px; width:246px; padding:0; display:flex; align-items:center; justify-content:center; margin:auto 15px 0 0; position:relative;
  408.  
  409. /*if using an image of the tarot card, replace xx with your image link, otherwise just use the customisable card plz*/ background: url('xx');
  410.  
  411. background-size:cover; background-position:center;]
  412.  
  413. [comment]----customisable card----[/comment]
  414. [border=transparent; height:360px; width:200px; padding:0; border:2px solid var(--color-1); border-radius:10px; box-sizing:border-box; display:flex; flex-flow:column nowrap; position:relative;
  415.  
  416. /* if using an image, replace here; with display:none;*/ here; ]
  417.  
  418. [comment]----card number----[/comment]
  419. [border=transparent; height:auto; width:100%; padding:0; position:absolute; top:-34px; left:0; z-index:5;][border=transparent; height:60px; width:60px; background: var(--bg-color); padding:20px 0 0 0; box-sizing:border-box; border:2px solid var(--color-1); color: var(--color-1); font-family: var(--tarot); font-size:13px; letter-spacing:2px; font-weight:bold; text-transform:uppercase; border-radius:50%; display:flex; align-items:center; justify-content:center; clip-path: polygon(0 53%, 100% 53%, 100% 100%, 0% 100%); margin:auto;][comment]
  420.  
  421. ----* * * card number here----
  422.  
  423. [/comment]III[/border][/border]
  424.  
  425. [comment]----card image----[/comment]
  426. [border=transparent; flex:1; width:100%; padding:0; background: var(--c3); background-size:cover; border:2px solid var(--bg-color); box-sizing:border-box; border-radius:8px;
  427.  
  428. /*edit the cropping of the image here*/ background-position:50% 50%;
  429.  
  430. -webkit-filter: grayscale(1);][/border]
  431.  
  432. [comment]----card title placeholder----[/comment]
  433. [border=transparent; height:30px; width:100%; padding:0; border-top:2px solid var(--color-1); flex-shrink:0;][/border]
  434. [/border]
  435. [comment]----customisable card end----[/comment]
  436.  
  437. [comment]----card contents----[/comment]
  438. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:5; display:flex; justify-content:center;][border=transparent; height:360px; width:200px; padding:0; margin-top:20px; display:flex; flex-flow:column-reverse nowrap;]
  439.  
  440. [comment]----card title----[/comment]
  441. [border=transparent; height:24px; width:calc(100% - 10px); padding:0; flex-shrink:0; display:flex; align-items:center; justify-content:center; color: var(--color-1); text-transform:uppercase; font-family: var(--tarot); font-weight:bold; letter-spacing:2px; background: var(--bg-color); margin:3px 5px; border-radius:0 0 6px 6px;]
  442. [border=transparent; height:auto; width:auto; padding:0; font-size:9px; line-height:100%;][comment]
  443.  
  444. ----* * * first word----
  445.  
  446. [/comment]the[/border]
  447. [border=transparent; height:auto; width:auto; padding:0; font-size:11px; line-height:100%; margin-left:8px;][comment]
  448.  
  449. ----* * * title----
  450.  
  451. [/comment]empress[/border]
  452. [/border]
  453. [comment]----card title end----[/comment]
  454.  
  455.  
  456. [comment]----scrollbox----[/comment]
  457. [border=transparent; height:330px; width:200px; padding:10px; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:207px; padding:0; overflow-y:scroll; scroll-snap-type:y mandatory;]
  458.  
  459. [comment]----placeholder----[/comment]
  460. [border=transparent; height:310px; width:180px; padding:0 5px; box-sizing:border-box; scroll-snap-align:start;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; margin-left:auto; color: var(--color-2); font-size:20px; line-height:100%; opacity:0.6;][fa]far fa-angle-down[/fa][/border][/border]
  461.  
  462. [comment]----actual contents----[/comment]
  463. [border=transparent; height:310px; width:180px; padding:7px 10px; box-sizing:border-box; background: var(--bg-color); scroll-snap-align:start; overflow:hidden;][border=transparent; height:100%; width:187px; padding:0; overflow-y:scroll;]
  464.  
  465. [comment]----copy this whole thing for another section----[/comment]
  466. [border=transparent; height:auto; width:160px; padding:0;]
  467. [comment]----title----[/comment]
  468. [border=transparent; height:auto; width:100%; padding:4px 3px 10px 3px; box-sizing:border-box; background: var(--bg-color); position:sticky; top:0;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 6px; box-sizing:border-box; margin:0 auto; border-bottom:2px solid var(--color-1); font-family: var(--header); text-transform:uppercase; font-size:18px; line-height:100%; text-align:center; color: var(--color-1);][comment]
  469.  
  470. ----* * * title here----
  471.  
  472. [/comment]category[/border]
  473. [/border]
  474. [comment]----title end----[/comment]
  475.  
  476. [comment]----section contents----[/comment]
  477. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); --m-s: 12px; --m-i:9px;][border=transparent; height:0; width:100%; padding:0;
  478.  
  479. /*if you're starting off with the long text first, replace --m-i with --m-s here*/ margin-bottom: calc(var(--m-i) * -1);][/border]
  480.  
  481. [comment]----copy this whole thing to get another piece of info----[/comment]
  482. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top: var(--m-i);]
  483. [border=transparent; height:auto; width:auto; padding:2px 5px 3px 5px; box-sizing:border-box; border:1px solid var(--color-2); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:100%; margin:3px 8px 0 0; letter-spacing:1px;][comment]
  484.  
  485. ----* * * info title here----
  486.  
  487. [/comment]hello[/border]
  488. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:3px 0 0 0; box-sizing:border-box; font-size:12px; line-height:15px;][comment]
  489.  
  490. ----* * * info contents here----
  491.  
  492. [/comment]words[/border]
  493. [/border]
  494. [comment]----copy me too!----[/comment]
  495.  
  496. [comment]----copy this whole thing to get another piece of info----[/comment]
  497. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top: var(--m-i);]
  498. [border=transparent; height:auto; width:auto; padding:2px 5px 3px 5px; box-sizing:border-box; border:1px solid var(--color-2); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:100%; margin:3px 8px 0 0; letter-spacing:1px;][comment]
  499.  
  500. ----* * * info title here----
  501.  
  502. [/comment]hello[/border]
  503. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:3px 0 0 0; box-sizing:border-box; font-size:12px; line-height:15px;][comment]
  504.  
  505. ----* * * info contents here----
  506.  
  507. [/comment]words[/border]
  508. [/border]
  509. [comment]----copy me too!----[/comment]
  510.  
  511. [comment]----copy this whole thing to get another piece of info----[/comment]
  512. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top: var(--m-i);]
  513. [border=transparent; height:auto; width:auto; padding:2px 5px 3px 5px; box-sizing:border-box; border:1px solid var(--color-2); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:100%; margin:3px 8px 0 0; letter-spacing:1px;][comment]
  514.  
  515. ----* * * info title here----
  516.  
  517. [/comment]hello[/border]
  518. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:3px 0 0 0; box-sizing:border-box; font-size:12px; line-height:15px;][comment]
  519.  
  520. ----* * * info contents here----
  521.  
  522. [/comment]words[/border]
  523. [/border]
  524. [comment]----copy me too!----[/comment]
  525.  
  526. [comment]----copy this whole thing to get another piece of long text----[/comment]
  527. [border=transparent; height:auto; width:100%; padding:0; margin-top: var(--m-s); font-size:11px; line-height:15px; text-align:justify;][comment]
  528.  
  529. ----* * * text starts here----
  530.  
  531. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta lorem nec ligula varius vulputate. Cras mattis mauris id odio congue, sit amet faucibus purus congue. Ut justo felis, dignissim eu fermentum vestibulum, fringilla a mi. Proin vestibulum dignissim suscipit. Vivamus et vehicula orci. Sed nec velit a ipsum hendrerit bibendum. Proin blandit volutpat eros non convallis. Sed mauris purus, pulvinar sed dui euismod, tempus varius risus.
  532.  
  533. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis sagittis justo, at sagittis urna egestas ac. Sed fermentum fringilla lacinia. Maecenas euismod non ipsum ut feugiat. Quisque fermentum sem sem, ac lacinia justo varius quis. Aliquam auctor interdum ante, eget vestibulum tellus pharetra quis. Integer efficitur ultrices vulputate. Duis sed tortor augue. Vivamus id ultricies tellus. Nulla rhoncus hendrerit neque, quis scelerisque justo viverra sit amet. Nam dolor libero, egestas consectetur auctor a, placerat quis sem. Phasellus vel mi sit amet odio efficitur tincidunt ac vitae tellus.
  534. [/border]
  535. [comment]----copy me too!----[/comment]
  536.  
  537. [/border]
  538. [comment]----section contents end----[/comment]
  539.  
  540. [/border]
  541. [comment]----copy me too!----[/comment]
  542.  
  543. [/border][/border]
  544. [comment]----actual contents end----[/comment]
  545. [/border][/border]
  546. [comment]----scrollbox end----[/comment]
  547. [/border][/border]
  548. [comment]----card contents end----[/comment]
  549. [/border]
  550. [comment]----card 3 end----[/comment]
  551.  
  552. [/border]
  553. [comment]----slide one end----[/comment]
  554.  
  555.  
  556. [comment]----slide two (transition background -- ignore)----[/comment]
  557. [border=transparent; height:100%; width:50%; padding:0; scroll-snap-align:start; background: var(--t-img) 50% 50%; background-size:cover; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; overflow:hidden; border:20px solid var(--bg-color); border-left:20px solid var(--bg-color); border-right:20px solid var(--bg-color); box-sizing:border-box; margin:25px 0; box-sizing:border-box;]
  558.  
  559. [border=transparent; height:100%; flex:18; min-width:80px; padding:0; border:20px solid var(--bg-color); border-top:80px solid var(--bg-color); border-bottom:50px solid var(--bg-color); transform:scale(1.02) skewY(-1deg); box-sizing:border-box;][/border]
  560. [border=transparent; height:100%; flex:22; min-width:80px; padding:0; border:10px solid var(--bg-color); border-top:20px solid var(--bg-color); border-bottom:20px solid var(--bg-color); box-sizing:border-box;][/border]
  561. [border=transparent; height:100%; flex:25; min-width:80px; padding:0; border:15px solid var(--bg-color); border-top:80px solid var(--bg-color); border-bottom:70px solid var(--bg-color); transform:scale(1.02) skewY(3deg); box-sizing:border-box;][/border]
  562. [border=transparent; height:100%; flex:16; min-width:80px; padding:0; border:20px solid var(--bg-color); border-top:50px solid var(--bg-color); border-bottom:50px solid var(--bg-color); transform:scale(1.02) skewY(-3deg); box-sizing:border-box;][/border]
  563. [border=transparent; height:100%; flex:22; min-width:80px; padding:0; border:10px solid var(--bg-color); border-top:60px solid var(--bg-color); border-bottom:60px solid var(--bg-color); transform:scale(1.02) skewY(1deg); box-sizing:border-box;][/border]
  564. [border=transparent; height:100%; flex:30; min-width:80px; padding:0; border:15px solid var(--bg-color); transform:scale(1.02) skewY(2deg); box-sizing:border-box;][/border]
  565. [border=transparent; height:100%; flex:24; min-width:80px; padding:0; border:10px solid var(--bg-color); border-top:40px solid var(--bg-color); border-bottom:40px solid var(--bg-color); transform:scale(1.02) skewY(-1deg); box-sizing:border-box;][/border]
  566. [border=transparent; height:100%; flex:18; min-width:80px; padding:0; border:20px solid var(--bg-color); border-top:60px solid var(--bg-color); border-bottom:70px solid var(--bg-color); transform:scale(1.02) skewY(4deg); box-sizing:border-box;][/border]
  567.  
  568. [/border]
  569. [comment]----slide two end----[/comment]
  570.  
  571. [comment]----slide three (details)----[/comment]
  572. [border=transparent; height:100%; width:50%; padding:8px 0; box-sizing:border-box; scroll-snap-align:start; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 0 0 8px; box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center;]
  573.  
  574. [comment]----copy this whole thing to make another detail----[/comment]
  575. [border=transparent; height:auto; flex:1; min-width:270px; padding:0; display:flex; flex-flow:column nowrap; margin:clamp(10px, -50px + 9vw, 20px);]
  576. [comment]----top----[/comment]
  577. [border=transparent; height:110px; width:100%; padding:0 8px 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:flex-end;]
  578. [border=transparent; height:auto; width:auto; padding:0; display:flex; flex-flow:column nowrap; margin-right:15px;]
  579. [comment]----icon----[/comment]
  580. [border=transparent; height:50px; width:51px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-3); font-size:23px; margin-left:15px;
  581.  
  582. /*put link here to replace with an image and leave the text area blank*/ background: URL('xx');
  583.  
  584. background-size:cover; background-position:50% 50%;][comment]
  585.  
  586. ----* * * fa icon here----
  587.  
  588. [/comment][fa]fas fa-leaf[/fa][/border]
  589. [comment]----detail title----[/comment]
  590. [border=transparent; height:auto; max-height:48px; width:auto; padding:0; color: var(--color-3); font-family: var(--header); font-size:22px; font-variant: small-caps; line-height:100%; margin-top:10px; overflow:hidden;][comment]
  591.  
  592. ----* * * detail title here (max two lines)----
  593.  
  594. [/comment]Environment[/border]
  595. [/border]
  596.  
  597. [comment]----image----[/comment]
  598. [border=transparent; height:100%; flex:1; padding:0; min-width:80px;
  599.  
  600. /*put image link between URL('')*/ background: URL('https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg');
  601.  
  602. background-size:cover;
  603.  
  604. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  605. [/border]
  606. [comment]----top end----[/comment]
  607.  
  608. [comment]----detail contents----[/comment]
  609. [border=transparent; height:85px; width:100%; padding:0; margin-top:20px; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:12px; text-align:justify; font-family: var(--body); line-height:17px;][comment]
  610.  
  611. ----* * * text starts here----
  612.  
  613. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta lorem nec ligula varius vulputate. Cras mattis mauris id odio congue, sit amet faucibus purus congue. Ut justo felis, dignissim eu fermentum vestibulum, fringilla a mi. Proin vestibulum dignissim suscipit. Vivamus et vehicula orci. Sed nec velit a ipsum hendrerit bibendum. Proin blandit volutpat eros non convallis. Sed mauris purus, pulvinar sed dui euismod, tempus varius risus.
  614. [/border][/border][/border]
  615. [comment]----detail contents end----[/comment]
  616. [/border]
  617. [comment]----copy me too!----[/comment]
  618.  
  619. [comment]----copy this whole thing to make another detail----[/comment]
  620. [border=transparent; height:auto; flex:1; min-width:270px; padding:0; display:flex; flex-flow:column nowrap; margin:clamp(10px, -50px + 9vw, 20px);]
  621. [comment]----top----[/comment]
  622. [border=transparent; height:110px; width:100%; padding:0 8px 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:flex-end;]
  623. [border=transparent; height:auto; width:auto; padding:0; display:flex; flex-flow:column nowrap; margin-right:15px;]
  624. [comment]----icon----[/comment]
  625. [border=transparent; height:50px; width:51px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-3); font-size:23px; margin-left:15px;
  626.  
  627. /*put link here to replace with an image and leave the text area blank*/ background: URL('xx');
  628.  
  629. background-size:cover; background-position:50% 50%;][comment]
  630.  
  631. ----* * * fa icon here----
  632.  
  633. [/comment][fa]fas fa-leaf[/fa][/border]
  634. [comment]----detail title----[/comment]
  635. [border=transparent; height:auto; max-height:48px; width:auto; padding:0; color: var(--color-3); font-family: var(--header); font-size:22px; font-variant: small-caps; line-height:100%; margin-top:10px; overflow:hidden;][comment]
  636.  
  637. ----* * * detail title here (max two lines)----
  638.  
  639. [/comment]Soil[/border]
  640. [/border]
  641.  
  642. [comment]----image----[/comment]
  643. [border=transparent; height:100%; flex:1; padding:0; min-width:80px;
  644.  
  645. /*put image link between URL('')*/ background: URL('https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg');
  646.  
  647. background-size:cover;
  648.  
  649. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  650. [/border]
  651. [comment]----top end----[/comment]
  652.  
  653. [comment]----detail contents----[/comment]
  654. [border=transparent; height:85px; width:100%; padding:0; margin-top:20px; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:12px; text-align:justify; font-family: var(--body); line-height:17px;][comment]
  655.  
  656. ----* * * text starts here----
  657.  
  658. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta lorem nec ligula varius vulputate. Cras mattis mauris id odio congue, sit amet faucibus purus congue. Ut justo felis, dignissim eu fermentum vestibulum, fringilla a mi. Proin vestibulum dignissim suscipit. Vivamus et vehicula orci. Sed nec velit a ipsum hendrerit bibendum. Proin blandit volutpat eros non convallis. Sed mauris purus, pulvinar sed dui euismod, tempus varius risus.
  659. [/border][/border][/border]
  660. [comment]----detail contents end----[/comment]
  661. [/border]
  662. [comment]----copy me too!----[/comment]
  663.  
  664. [comment]----copy this whole thing to make another detail----[/comment]
  665. [border=transparent; height:auto; flex:1; min-width:270px; padding:0; display:flex; flex-flow:column nowrap; margin:clamp(10px, -50px + 9vw, 20px);]
  666. [comment]----top----[/comment]
  667. [border=transparent; height:110px; width:100%; padding:0 8px 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:flex-end;]
  668. [border=transparent; height:auto; width:auto; padding:0; display:flex; flex-flow:column nowrap; margin-right:15px;]
  669. [comment]----icon----[/comment]
  670. [border=transparent; height:50px; width:51px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-3); font-size:23px; margin-left:15px;
  671.  
  672. /*put link here to replace with an image and leave the text area blank*/ background: URL('xx');
  673.  
  674. background-size:cover; background-position:50% 50%;][comment]
  675.  
  676. ----* * * fa icon here----
  677.  
  678. [/comment][fa]fas fa-leaf[/fa][/border]
  679. [comment]----detail title----[/comment]
  680. [border=transparent; height:auto; max-height:48px; width:auto; padding:0; color: var(--color-3); font-family: var(--header); font-size:22px; font-variant: small-caps; line-height:100%; margin-top:10px; overflow:hidden;][comment]
  681.  
  682. ----* * * detail title here (max two lines)----
  683.  
  684. [/comment]Equipment[/border]
  685. [/border]
  686.  
  687. [comment]----image----[/comment]
  688. [border=transparent; height:100%; flex:1; padding:0; min-width:80px;
  689.  
  690. /*put image link between URL('')*/ background: URL('https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg');
  691.  
  692. background-size:cover;
  693.  
  694. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  695. [/border]
  696. [comment]----top end----[/comment]
  697.  
  698. [comment]----detail contents----[/comment]
  699. [border=transparent; height:85px; width:100%; padding:0; margin-top:20px; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:12px; text-align:justify; font-family: var(--body); line-height:17px;][comment]
  700.  
  701. ----* * * text starts here----
  702.  
  703. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta lorem nec ligula varius vulputate. Cras mattis mauris id odio congue, sit amet faucibus purus congue. Ut justo felis, dignissim eu fermentum vestibulum, fringilla a mi. Proin vestibulum dignissim suscipit. Vivamus et vehicula orci. Sed nec velit a ipsum hendrerit bibendum. Proin blandit volutpat eros non convallis. Sed mauris purus, pulvinar sed dui euismod, tempus varius risus.
  704. [/border][/border][/border]
  705. [comment]----detail contents end----[/comment]
  706. [/border]
  707. [comment]----copy me too!----[/comment]
  708.  
  709. [comment]----copy this whole thing to make another detail----[/comment]
  710. [border=transparent; height:auto; flex:1; min-width:270px; padding:0; display:flex; flex-flow:column nowrap; margin:clamp(10px, -50px + 9vw, 20px);]
  711. [comment]----top----[/comment]
  712. [border=transparent; height:110px; width:100%; padding:0 8px 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:flex-end;]
  713. [border=transparent; height:auto; width:auto; padding:0; display:flex; flex-flow:column nowrap; margin-right:15px;]
  714. [comment]----icon----[/comment]
  715. [border=transparent; height:50px; width:51px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-3); font-size:23px; margin-left:15px;
  716.  
  717. /*put link here to replace with an image and leave the text area blank*/ background: URL('xx');
  718.  
  719. background-size:cover; background-position:50% 50%;][comment]
  720.  
  721. ----* * * fa icon here----
  722.  
  723. [/comment][fa]fas fa-leaf[/fa][/border]
  724. [comment]----detail title----[/comment]
  725. [border=transparent; height:auto; max-height:48px; width:auto; padding:0; color: var(--color-3); font-family: var(--header); font-size:22px; font-variant: small-caps; line-height:100%; margin-top:10px; overflow:hidden;][comment]
  726.  
  727. ----* * * detail title here (max two lines)----
  728.  
  729. [/comment]Picking[/border]
  730. [/border]
  731.  
  732. [comment]----image----[/comment]
  733. [border=transparent; height:100%; flex:1; padding:0; min-width:80px;
  734.  
  735. /*put image link between URL('')*/ background: URL('https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg');
  736.  
  737. background-size:cover;
  738.  
  739. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  740. [/border]
  741. [comment]----top end----[/comment]
  742.  
  743. [comment]----detail contents----[/comment]
  744. [border=transparent; height:85px; width:100%; padding:0; margin-top:20px; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:12px; text-align:justify; font-family: var(--body); line-height:17px;][comment]
  745.  
  746. ----* * * text starts here----
  747.  
  748. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta lorem nec ligula varius vulputate. Cras mattis mauris id odio congue, sit amet faucibus purus congue. Ut justo felis, dignissim eu fermentum vestibulum, fringilla a mi. Proin vestibulum dignissim suscipit. Vivamus et vehicula orci. Sed nec velit a ipsum hendrerit bibendum. Proin blandit volutpat eros non convallis. Sed mauris purus, pulvinar sed dui euismod, tempus varius risus.
  749. [/border][/border][/border]
  750. [comment]----detail contents end----[/comment]
  751. [/border]
  752. [comment]----copy me too!----[/comment]
  753.  
  754. [comment]----copy this whole thing to make another detail----[/comment]
  755. [border=transparent; height:auto; flex:1; min-width:270px; padding:0; display:flex; flex-flow:column nowrap; margin:clamp(10px, -50px + 9vw, 20px);]
  756. [comment]----top----[/comment]
  757. [border=transparent; height:110px; width:100%; padding:0 8px 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:flex-end;]
  758. [border=transparent; height:auto; width:auto; padding:0; display:flex; flex-flow:column nowrap; margin-right:15px;]
  759. [comment]----icon----[/comment]
  760. [border=transparent; height:50px; width:51px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-3); font-size:23px; margin-left:15px;
  761.  
  762. /*put link here to replace with an image and leave the text area blank*/ background: URL('xx');
  763.  
  764. background-size:cover; background-position:50% 50%;][comment]
  765.  
  766. ----* * * fa icon here----
  767.  
  768. [/comment][fa]fas fa-leaf[/fa][/border]
  769. [comment]----detail title----[/comment]
  770. [border=transparent; height:auto; max-height:48px; width:auto; padding:0; color: var(--color-3); font-family: var(--header); font-size:22px; font-variant: small-caps; line-height:100%; margin-top:10px; overflow:hidden;][comment]
  771.  
  772. ----* * * detail title here (max two lines)----
  773.  
  774. [/comment]Answer[/border]
  775. [/border]
  776.  
  777. [comment]----image----[/comment]
  778. [border=transparent; height:100%; flex:1; padding:0; min-width:80px;
  779.  
  780. /*put image link between URL('')*/ background: URL('https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg');
  781.  
  782. background-size:cover;
  783.  
  784. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  785. [/border]
  786. [comment]----top end----[/comment]
  787.  
  788. [comment]----detail contents----[/comment]
  789. [border=transparent; height:85px; width:100%; padding:0; margin-top:20px; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:12px; text-align:justify; font-family: var(--body); line-height:17px;][comment]
  790.  
  791. ----* * * text starts here----
  792.  
  793. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta lorem nec ligula varius vulputate. Cras mattis mauris id odio congue, sit amet faucibus purus congue. Ut justo felis, dignissim eu fermentum vestibulum, fringilla a mi. Proin vestibulum dignissim suscipit. Vivamus et vehicula orci. Sed nec velit a ipsum hendrerit bibendum. Proin blandit volutpat eros non convallis. Sed mauris purus, pulvinar sed dui euismod, tempus varius risus.
  794. [/border][/border][/border]
  795. [comment]----detail contents end----[/comment]
  796. [/border]
  797. [comment]----copy me too!----[/comment]
  798.  
  799. [comment]----copy this whole thing to make another detail----[/comment]
  800. [border=transparent; height:auto; flex:1; min-width:270px; padding:0; display:flex; flex-flow:column nowrap; margin:clamp(10px, -50px + 9vw, 20px);]
  801. [comment]----top----[/comment]
  802. [border=transparent; height:110px; width:100%; padding:0 8px 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:flex-end;]
  803. [border=transparent; height:auto; width:auto; padding:0; display:flex; flex-flow:column nowrap; margin-right:15px;]
  804. [comment]----icon----[/comment]
  805. [border=transparent; height:50px; width:51px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-3); font-size:23px; margin-left:15px;
  806.  
  807. /*put link here to replace with an image and leave the text area blank*/ background: URL('xx');
  808.  
  809. background-size:cover; background-position:50% 50%;][comment]
  810.  
  811. ----* * * fa icon here----
  812.  
  813. [/comment][fa]fas fa-leaf[/fa][/border]
  814. [comment]----detail title----[/comment]
  815. [border=transparent; height:auto; max-height:48px; width:auto; padding:0; color: var(--color-3); font-family: var(--header); font-size:22px; font-variant: small-caps; line-height:100%; margin-top:10px; overflow:hidden;][comment]
  816.  
  817. ----* * * detail title here (max two lines)----
  818.  
  819. [/comment]Answer[/border]
  820. [/border]
  821.  
  822. [comment]----image----[/comment]
  823. [border=transparent; height:100%; flex:1; padding:0; min-width:80px;
  824.  
  825. /*put image link between URL('')*/ background: URL('https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg');
  826.  
  827. background-size:cover;
  828.  
  829. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  830. [/border]
  831. [comment]----top end----[/comment]
  832.  
  833. [comment]----detail contents----[/comment]
  834. [border=transparent; height:85px; width:100%; padding:0; margin-top:20px; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:12px; text-align:justify; font-family: var(--body); line-height:17px;][comment]
  835.  
  836. ----* * * text starts here----
  837.  
  838. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta lorem nec ligula varius vulputate. Cras mattis mauris id odio congue, sit amet faucibus purus congue. Ut justo felis, dignissim eu fermentum vestibulum, fringilla a mi. Proin vestibulum dignissim suscipit. Vivamus et vehicula orci. Sed nec velit a ipsum hendrerit bibendum. Proin blandit volutpat eros non convallis. Sed mauris purus, pulvinar sed dui euismod, tempus varius risus.
  839. [/border][/border][/border]
  840. [comment]----detail contents end----[/comment]
  841. [/border]
  842. [comment]----copy me too!----[/comment]
  843.  
  844. [/border][/border]
  845. [comment]----slide three end----[/comment]
  846.  
  847. [/border][/border][/border][/border]
  848. [comment]----signature! (do not remove!)-----
  849. [/comment][bg=transparent; height:auto; width:100%; padding:0; position:absolute; bottom:12px; left:0; z-index:7; text-align:center; box-sizing:border-box; opacity:0.65;font-size:10px;text-align:center; line-height:100%;][font=Open Sans]♡design by terrorkitty, coded by uxie♡[/font][/bg][/border]
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!