Advertisement
glucoseguardian

river 1.0

Jan 10th, 2024 (edited)
162
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.51 KB | None | 0 0
  1. [nobr]
  2. [div=display: none;]
  3. [font=Times New Roman]fluticasone[/font]
  4. [font=Karla]fluticasone[/font]
  5. [/div]
  6. [div=
  7. --bgColor: #1c1c1c; /* color of text area */
  8. --accentColor: indianred; /* color of img bg */
  9. --textColor: ghostwhite; /* color of text itself */
  10. --imgIcon: url(https://placehold.co/400x600?text=image) no-repeat center center/cover; /* image */
  11. --bodyFont: 'Karla', sans-serif;
  12. --titleFont: 'Times New Roman', serif;
  13. display: flex;
  14. position: relative;
  15. flex-flow: row wrap;
  16. align-items: stretch;
  17. width: clamp(200px,100%,1000px);
  18. margin: 1em auto;
  19. background: var(--bgColor);
  20. color: var(--textColor);
  21. font-size: 1rem;
  22. font-family: var(--bodyFont);
  23. --titleShadow: drop-shadow(2px 1px 0px var(--bgColor)) drop-shadow(1px 1px 0px var(--accentColor));
  24. --headingBg: linear-gradient(180deg, var(--bgColor) 95%, rgba(225,225,225,0) 100%); ]
  25. [div=flex: 1 250px;
  26. background: var(--accentColor);
  27. position: relative;
  28. min-height: 15rem;]
  29. [div=position: absolute;
  30. right: 0px;
  31. bottom: 0px;
  32. width: 75%;
  33. height: 75%;
  34. background: var(--imgIcon);] [/div]
  35. [/div]
  36. [div=flex: 4 300px;
  37. position: relative;
  38. height: 30rem; /* height of text area */
  39. position: relative;
  40. box-sizing: border-box;
  41. overflow: hidden;]
  42. [div=position: absolute;
  43. overflow: hidden;
  44. height: calc(100% - 4rem);
  45. width: calc(100% - 4rem);
  46. top: 2rem;
  47. left: 2rem;]
  48. [div=display: block;
  49. box-sizing: border-box;
  50. position: relative;
  51. width: calc(100% + 50px);
  52. padding-right: 50px;
  53. height: 100%;
  54. scrollbar-gutter: stable both-edges;
  55. overflow-x: hidden;
  56. overflow-y: scroll;]
  57. [div=display: block;]
  58. [div=display: block;
  59. position: sticky;
  60. box-sizing: border-box;
  61. top: 0px;
  62. background: var(--headingBg);]
  63. [div=display: inline;
  64. padding: 0px 1rem;
  65. line-height: 1;
  66. font-family: var(--titleFont);
  67. letter-spacing: -.05em;
  68. font-size: 3.5rem;
  69. text-transform: lowercase;
  70. font-weight: bold;
  71. font-style: italic;
  72. filter: var(--titleShadow);]
  73. section one
  74. [/div]
  75. [/div]
  76. [comment]start of detail block div[/comment][div=display: block;
  77. box-sizing: border-box;
  78. padding: 1rem;]
  79. [div=display: block;]
  80. [div=display: inline-block; margin-left: 5px; font-family: var(--titleFont); text-transform: uppercase; font-size: 65%; font-weight: bold; letter-spacing: -.03em; color: var(--accentColor); width: 5rem; text-align: right;]name[/div]
  81. [div=display: inline-block; margin-left: 2px;]name here[/div]
  82. [/div]
  83. [div=display: block;]
  84. [div=display: inline-block; margin-left: 5px; font-family: var(--titleFont); text-transform: uppercase; font-size: 65%; font-weight: bold; letter-spacing: -.03em; color: var(--accentColor); width: 5rem; text-align: right;]nicknames[/div]
  85. [div=display: inline-block; margin-left: 2px;]nickname here[/div]
  86. [/div]
  87. [div=display: block;]
  88. [div=display: inline-block; margin-left: 5px; font-family: var(--titleFont); text-transform: uppercase; font-size: 65%; font-weight: bold; letter-spacing: -.03em; color: var(--accentColor); width: 5rem; text-align: right;]info[/div]
  89. [div=display: inline-block; margin-left: 2px;]answer[/div]
  90. [/div]
  91. [div=display: block;]
  92. [div=display: inline-block; margin-left: 5px; font-family: var(--titleFont); text-transform: uppercase; font-size: 65%; font-weight: bold; letter-spacing: -.03em; color: var(--accentColor); width: 5rem; text-align: right;]info[/div]
  93. [div=display: inline-block; margin-left: 2px;]answer[/div]
  94. [/div]
  95. [comment]start of detail copypaste[/comment][div=display: block;]
  96. [div=display: inline-block; margin-left: 5px; font-family: var(--titleFont); text-transform: uppercase; font-size: 65%; font-weight: bold; letter-spacing: -.03em; color: var(--accentColor); width: 5rem; text-align: right;]info[/div]
  97. [div=display: inline-block; margin-left: 2px;]answer[/div]
  98. [/div][comment]end of detail copypaste[/comment]
  99. [comment]insert detail div BEFORE this comment tag[/comment]
  100. [/div][comment]end of detail block div[/comment]
  101. [div=display: block;
  102. box-sizing: border-box;
  103. font-size: 1rem;
  104. text-align: justify;
  105. padding: .35rem 1.5rem;]
  106. [div=display: block;]
  107. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eros ex, interdum at tristique quis, dictum aliquam nisl. Duis vel nunc metus. Morbi nec eros quam. Vivamus sodales dui nunc, et condimentum neque ornare non. Curabitur facilisis viverra nulla, a mollis tellus vehicula lacinia.
  108. [/div]
  109. [comment]start of paragraph copypaste[/comment][div=display: block; margin-top: .5em;]
  110. Phasellus nec diam pretium, tristique leo ac, semper mauris. Sed vel turpis consequat, rutrum magna pharetra, suscipit libero. Etiam tristique, urna et pellentesque laoreet, magna sapien lacinia urna, eu tincidunt massa ligula et ligula. Quisque at dolor ligula. Mauris interdum euismod felis et condimentum. Fusce et congue neque.
  111. [/div][comment]end of paragraph copypaste[/comment]
  112. [comment]insert paragraph div BEFORE this comment tag[/comment]
  113. [/div]
  114. [/div]
  115. [comment]start of section copypaste[/comment][div=display: block;
  116. margin-top: 2rem;]
  117. [div=display: block;
  118. position: sticky;
  119. box-sizing: border-box;
  120. top: 0px;
  121. background: var(--headingBg);]
  122. [div=display: inline;
  123. padding: 0px 1rem;
  124. line-height: 1;
  125. font-family: var(--titleFont);
  126. letter-spacing: -.05em;
  127. font-size: 3.5rem;
  128. text-transform: lowercase;
  129. font-weight: bold;
  130. font-style: italic;
  131. filter: var(--titleShadow);]
  132. section two
  133. [/div]
  134. [/div]
  135. [comment]if you want to use the detail block div, insert it BEFORE or AFTER this comment tag[/comment]
  136. [div=display: block;
  137. box-sizing: border-box;
  138. font-size: 1rem;
  139. text-align: justify;
  140. padding: 1rem 1.25rem;]
  141. [div=display: block;]
  142. Praesent lacinia sem vel ante euismod, nec mollis nisi tincidunt. Cras semper justo a sapien aliquam rhoncus. Mauris facilisis suscipit mattis. Sed vitae ipsum a ipsum eleifend suscipit et ac quam. Praesent sed nibh quis turpis sodales dignissim. Mauris purus turpis, fermentum at scelerisque sodales, ornare nec ante.
  143. [/div]
  144. [div=display: block; margin-top: .5em;]
  145. Fusce at purus id dolor fringilla commodo quis a ipsum. Pellentesque dapibus consequat elit, imperdiet tincidunt purus auctor at. Sed eget lectus et lorem mattis rutrum sed ac orci. Cras a auctor ipsum. Vivamus eleifend nisi sed turpis venenatis, consectetur euismod ante viverra. Donec massa tortor, posuere lobortis ornare vel, semper in metus. Praesent non nulla et odio eleifend pharetra in vel dolor. Ut mauris leo, sollicitudin at aliquet non, ornare a velit. Fusce in urna metus.
  146. [/div]
  147. [comment]start of paragraph copypaste[/comment][div=display: block; margin-top: .5em;]
  148. Nunc non auctor lacus. Proin convallis, dolor at tincidunt euismod, nunc dolor bibendum elit, sit amet finibus ante dui elementum erat. In tristique at augue vitae fringilla. Integer consectetur massa vel mi tempor porta. Aliquam ut dui id nibh ornare sagittis. Fusce velit libero, hendrerit non leo id, ultricies malesuada dolor. In hac habitasse platea dictumst.
  149. [/div][comment]end of paragraph copypaste[/comment]
  150. [comment]start of paragraph copypaste[/comment][div=display: block; margin-top: .5em;]
  151. Nulla facilisi. Duis fermentum magna quis leo pretium, ac interdum felis scelerisque. Integer sed erat ex. Sed mattis vulputate massa. Nam dapibus accumsan dictum. Nulla in nisi elementum, elementum tellus eget, sollicitudin sapien. Proin vulputate condimentum quam et egestas. Duis aliquam, urna in elementum maximus, neque felis pharetra est, dapibus mattis justo nulla non erat. Curabitur mauris risus, accumsan id lectus semper, varius viverra mi.
  152. [/div][comment]end of paragraph copypaste[/comment]
  153. [comment]insert paragraph div BEFORE this comment tag[/comment]
  154. [/div]
  155. [/div][comment]end of section copypaste[/comment]
  156. [comment]start of section copypaste[/comment][div=display: block;
  157. margin-top: 2rem;]
  158. [div=display: block;
  159. position: sticky;
  160. box-sizing: border-box;
  161. top: 0px;
  162. background: var(--headingBg);]
  163. [div=display: inline;
  164. padding: 0px 1rem;
  165. line-height: 1;
  166. font-family: var(--titleFont);
  167. letter-spacing: -.05em;
  168. font-size: 3.5rem;
  169. text-transform: lowercase;
  170. font-weight: bold;
  171. font-style: italic;
  172. filter: var(--titleShadow);]
  173. section three
  174. [/div]
  175. [/div]
  176. [comment]if you want to use the detail block div, insert it BEFORE or AFTER this comment tag[/comment]
  177. [div=display: block;
  178. box-sizing: border-box;
  179. font-size: 1rem;
  180. text-align: justify;
  181. padding: 1rem 1.25rem;]
  182. [div=display: block;]
  183. Praesent lacinia sem vel ante euismod, nec mollis nisi tincidunt. Cras semper justo a sapien aliquam rhoncus. Mauris facilisis suscipit mattis. Sed vitae ipsum a ipsum eleifend suscipit et ac quam. Praesent sed nibh quis turpis sodales dignissim. Mauris purus turpis, fermentum at scelerisque sodales, ornare nec ante.
  184. [/div]
  185. [div=display: block; margin-top: .5em;]
  186. Fusce at purus id dolor fringilla commodo quis a ipsum. Pellentesque dapibus consequat elit, imperdiet tincidunt purus auctor at. Sed eget lectus et lorem mattis rutrum sed ac orci. Cras a auctor ipsum. Vivamus eleifend nisi sed turpis venenatis, consectetur euismod ante viverra. Donec massa tortor, posuere lobortis ornare vel, semper in metus. Praesent non nulla et odio eleifend pharetra in vel dolor. Ut mauris leo, sollicitudin at aliquet non, ornare a velit. Fusce in urna metus.
  187. [/div]
  188. [comment]start of paragraph copypaste[/comment][div=display: block; margin-top: .5em;]
  189. Etiam non nisl in sapien rutrum rhoncus. Maecenas ut ornare dui, cursus fermentum felis. Fusce sodales in magna at volutpat. Phasellus eu lectus at lectus tincidunt accumsan faucibus id nibh. Etiam tincidunt arcu in purus imperdiet, id malesuada ipsum accumsan. Nam mattis dolor sed ipsum tempor sagittis. Aliquam ut nisl nec enim feugiat ultrices at faucibus ipsum. Mauris et lorem ac nibh viverra feugiat.
  190. [/div][comment]end of paragraph copypaste[/comment]
  191. [comment]start of paragraph copypaste[/comment][div=display: block; margin-top: .5em;]
  192. Nulla facilisi. Duis fermentum magna quis leo pretium, ac interdum felis scelerisque. Integer sed erat ex. Sed mattis vulputate massa. Nam dapibus accumsan dictum. Nulla in nisi elementum, elementum tellus eget, sollicitudin sapien. Proin vulputate condimentum quam et egestas. Duis aliquam, urna in elementum maximus, neque felis pharetra est, dapibus mattis justo nulla non erat. Curabitur mauris risus, accumsan id lectus semper, varius viverra mi.
  193. [/div][comment]end of paragraph copypaste[/comment]
  194. [comment]insert paragraph div BEFORE this comment tag[/comment]
  195. [/div]
  196. [/div][comment]end of section copypaste[/comment]
  197. [comment]insert section div BEFORE this comment tag[/comment]
  198. [/div]
  199. [/div]
  200. [/div]
  201. [/div]
  202. [/nobr]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement