API tools faq
paste
ooksie

chanel (uxie x low fidelity)

ooksie
Oct 21st, 2020 (edited)
463
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.75 KB | None | 0 0
raw download clone embed print report
  1. [border=transparent;
  2. *biiiiig background colour;
  3. --bg-1: #CECAC4;
  4. *container background colour;
  5. --bg-2: #F3F3F3;
  6. *main title text colour;
  7. --title: #DCD2C8;
  8. *subtitle text colour;
  9. --h-color: #493e37;
  10. *light colour used for rounded container n tabs;
  11. --color-1: #CEAE9A;
  12. *accent colour on tabs;
  13. --color-2: #be8766;
  14. *tab contents header background colour;
  15. --color-3: #EDEDED;
  16. *text colour;
  17. --t-color: #0b0b0b;
  18.  
  19. *title page image;
  20. --img-1: url('https://i.pinimg.com/736x/6f/c0/d5/6fc0d5fa298830a69867ba813a4934b4.jpg');
  21.  
  22. *the following images are all in the tabs. images on tab 1 are labelled with a, tab 2 with b and so on;
  23. --aimg-1: url('https://64.media.tumblr.com/99df5db95ef51415a80c0dda39b61ff7/08666d536858c65e-25/s400x600/59824a5367b67f499345e449ceda03f6b6930c0f.png');
  24. --aimg-2: url('https://64.media.tumblr.com/490b71ffc67350fbe5c32bb90ee1683f/08666d536858c65e-2d/s400x600/9f571c65f70ccb053c4f25ba910451ca14609de0.png');
  25. --bimg-1: url('https://64.media.tumblr.com/99df5db95ef51415a80c0dda39b61ff7/08666d536858c65e-25/s400x600/59824a5367b67f499345e449ceda03f6b6930c0f.png');
  26. --bimg-2: url('https://64.media.tumblr.com/490b71ffc67350fbe5c32bb90ee1683f/08666d536858c65e-2d/s400x600/9f571c65f70ccb053c4f25ba910451ca14609de0.png');
  27. --bimg-3: url('https://64.media.tumblr.com/22b1e99e4fe8ff27350e12c3cdac72c2/08666d536858c65e-7b/s400x600/976b9d1899b140c3cf5206b555f3903de5d53f27.png');
  28. --cimg-1: url('https://64.media.tumblr.com/99df5db95ef51415a80c0dda39b61ff7/08666d536858c65e-25/s400x600/59824a5367b67f499345e449ceda03f6b6930c0f.png');
  29. --dimg-1: url('https://64.media.tumblr.com/99df5db95ef51415a80c0dda39b61ff7/08666d536858c65e-25/s400x600/59824a5367b67f499345e449ceda03f6b6930c0f.png');
  30. --dimg-2: url('https://64.media.tumblr.com/490b71ffc67350fbe5c32bb90ee1683f/08666d536858c65e-2d/s400x600/9f571c65f70ccb053c4f25ba910451ca14609de0.png');
  31.  
  32. height:fit-content; width:100%; position:relative; background-color: var(--bg-1); padding:70px; box-sizing:border-box; margin:auto; line-height:0; display:flex; align-items:center; justify-content:center;]
  33. [comment]----main container----[/comment]
  34. [border=transparent; height:420px; width:750px; background-color: var(--bg-2); padding:0 0 0 20px; box-sizing:border-box; display:flex; align-items:center; overflow:hidden; position:relative;]
  35. [border=transparent; height:8%; width:45%; overflow:hidden; padding:0; margin:140px 0 0 20px;][border=transparent; padding:0; margin-top:-25px;][tabs]
  36.  
  37. [comment]----title page----[/comment]
  38. [tab=.][border=transparent; height:100%; width:100%; padding:25px 60px 65px 55px; box-sizing:border-box; background-color: var(--bg-2); position:absolute; top:0; left:0; pointer-events:none; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:flex-end;]
  39.  
  40. [comment]----image----[/comment]
  41. [border=transparent; height:100%; width:73%; border:1px solid var(--color-1); border-radius:15px; padding:0; position:relative; z-index:1;]
  42. [border=transparent; height:100%; width:100%; border:5px solid var(--color-1); box-sizing:border-box; background: var(--img-1); background-size:cover; border-radius:15px; padding:0; position:absolute; top:20px; right:20px; /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%; ][/border]
  43. [/border]
  44.  
  45. [comment]----title text----[/comment]
  46. [border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:2; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:flex-start;][border=transparent; height:fit-content; width:fit-content; padding:0; position:relative; display:flex; flex-flow: column nowrap; align-items:center; justify-content:center; margin-bottom:100px; margin-left:58px;]
  47. [border=transparent; height:fit-content; width:100%; padding:0; font-size:22px; color: var(--h-color); line-height:120%; letter-spacing:1px; position:relative; z-index:3; pointer-events:auto; text-shadow:1px 1px var(--bg-2);][font=Raleway][comment]
  48. ---- * * * first line here -----
  49. [/comment]this is where you'll put your[/font][/border]
  50.  
  51. [border=transparent; height:fit-content; width:100%; padding:0; font-size:58px; color: var(--title); line-height:80%; text-transform:uppercase; letter-spacing:1px; margin:-3px 0 10px 0; position:relative; z-index:3;][font=Changa One][comment]
  52. ---- * * * big title here -----
  53. [/comment]main title[i]![/i][/font][/border]
  54.  
  55. [border=transparent; height:fit-content; width:100%; padding:0; font-size:8px; color: var(--h-color); line-height:100%; text-transform:uppercase; letter-spacing:2px; font-style:oblique; font-weight:bold; position:relative; z-index:3; pointer-events:auto; text-shadow:0.5px 0.5px var(--bg-2);][font=Roboto][comment]
  56. ---- * * * second line here -----
  57. [/comment]and this is the second, smaller subtitle. little bit.[/font][/border]
  58.  
  59. [/border][/border]
  60. [comment]----title text end----[/comment]
  61.  
  62. [/border][/tab]
  63. [comment]----title page end----[/comment]
  64.  
  65. [comment]----main content----[/comment]
  66. [tab=aaaaaaaaaaaaaaaaaaaaaaaaaaa][border=transparent; height:100%; width:100%; padding:0; background-color: var(--color-1); position:absolute; top:0; left:0; display:flex; justify-content:flex-end;]
  67.  
  68. [comment]----tabs cover----[/comment]
  69. [border=transparent; height:calc(10% + 12px); width:57%; padding:12px 0 0 0; box-sizing:border-box; background-color: var(--color-1); display:flex; justify-content:center; align-items:center; position:absolute; top:0; right:0; pointer-events:none;]
  70. [border=transparent; height:35px; width:40px; padding:0; border:1px solid var(--bg-2); display:flex; align-items:center; justify-content:center; color: var(--bg-2); font-weight:bold; font-size:15px; letter-spacing:1px; line-height:120%; margin:0 10px;][font=Changa One]01.[/font][/border]
  71. [border=transparent; height:35px; width:40px; padding:0; border:1px solid var(--bg-2); display:flex; align-items:center; justify-content:center; color: var(--bg-2); font-weight:bold; font-size:15px; letter-spacing:1px; line-height:120%; margin:0 10px;][font=Changa One]02.[/font][/border]
  72. [border=transparent; height:35px; width:40px; padding:0; border:1px solid var(--bg-2); display:flex; align-items:center; justify-content:center; color: var(--bg-2); font-weight:bold; font-size:15px; letter-spacing:1px; line-height:120%; margin:0 10px;][font=Changa One]03.[/font][/border]
  73. [border=transparent; height:35px; width:40px; padding:0; border:1px solid var(--bg-2); display:flex; align-items:center; justify-content:center; color: var(--bg-2); font-weight:bold; font-size:15px; letter-spacing:1px; line-height:120%; margin:0 10px;][font=Changa One]04.[/font][/border]
  74. [/border]
  75. [comment]----tabs cover end----[/comment]
  76.  
  77. [comment]----tabs----[/comment]
  78. [border=transparent; height:6%; width:47%; padding:0; overflow:hidden; margin-top:20px;][border=transparent; padding:0; margin-right:-25px;][tabs]
  79.  
  80. [comment]----tab one----[/comment]
  81. [tab=..][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; flex-flow: row nowrap; pointer-events:none;]
  82.  
  83. [comment]---- title----[/comment]
  84. [border=transparent; height:fit-content; width:45%; padding:0 0 0 35px; box-sizing:border-box; margin-top:-4%; font-size:90px; color: var(--color-2); letter-spacing:5px; line-height:100%; text-transform:uppercase; -webkit-text-stroke:8px var(--color-2); pointer-events:auto;][font=Heebo][comment]
  85. ---- * * * repeat your title here -----
  86. [/comment]title. title. title. title. title. title.[/font][/border]
  87.  
  88. [comment]---- body----[/comment]
  89. [border=transparent; height:100%; width:57%; padding:12px 20px 3px 20px; box-sizing:border-box; display:flex; flex-flow: row wrap; justify-content:center;]
  90.  
  91. [comment]----button select (ignore!)----[/comment]
  92. [border=transparent; height:10%; width:100%; padding:0;][/border]
  93. [border=transparent; height:calc(10% + 12px); width:57.8%; padding:12px 0 0 0; box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:absolute; top:0; right:0; pointer-events:none;]
  94. [border=transparent; height:35px; width:40px; padding:0; background-color: var(--color-1); border:1px solid var(--bg-2); box-shadow:3px 3px var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--bg-2); font-weight:bold; font-size:15px; letter-spacing:1px; line-height:120%; margin:0 10px; text-shadow:2px 2px var(--color-2);][font=Changa One]01.[/font][/border]
  95. [border=transparent; height:35px; width:40px; padding:0; margin:0 10px;][/border]
  96. [border=transparent; height:35px; width:40px; padding:0; margin:0 10px;][/border]
  97. [border=transparent; height:35px; width:40px; padding:0; margin:0 10px;][/border]
  98. [/border]
  99. [comment]----button select end----[/comment]
  100.  
  101. [comment]----body text----[/comment]
  102. [border=transparent; height:53%; width:82%; background: var(--bg-2); padding:0 0 5px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  103.  
  104. [comment]----make a new section by copying me in my entirety!!!!!----[/comment]
  105. [border=transparent; height:fit-content; width:52%; padding:8px 10px; box-sizing:border-box; background-color: var(--color-3); border:1px solid var(--bg-1); color: var(--h-color); font-size:12px; position:sticky; top:0; line-height:130%;][font=Roboto][comment]
  106. ---- * * * section header here! ----
  107. [/comment]some small header? i'll stay here even after you scroll.[/font][/border]
  108.  
  109. [border=transparent; height:fit-content; width:50%; padding:3px 5px 8px 8px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:130%;][font=Montserrat][comment]
  110. ---- * * * your content starts here! ----
  111. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet sapien ut sem tristique, id luctus magna faucibus. Morbi lacinia scelerisque metus, a varius eros congue at. Aliquam nec mauris rhoncus, scelerisque eros quis, tincidunt ipsum. Fusce leo sapien, egestas ut purus non, finibus suscipit magna. Donec elit ex, molestie in odio a, finibus bibendum ligula. Proin non volutpat ex, ut porta dui. Aenean nec dictum lacus. Integer vel libero consequat, elementum nisi vulputate, tempor dolor. Nunc posuere convallis dolor, at cursus felis. Vivamus viverra ac diam non porttitor. Suspendisse lacinia elit sed justo laoreet, non viverra tellus malesuada.
  112.  
  113. Fusce semper vitae leo ac bibendum. Fusce ultrices ligula eros, non consequat risus accumsan viverra. Morbi sed interdum felis. Praesent arcu nibh, feugiat vel finibus non, facilisis eget erat. Suspendisse eget odio metus. Phasellus nec ligula pharetra, sollicitudin augue quis, commodo diam. Quisque ac lobortis nulla.
  114.  
  115. Nullam hendrerit bibendum dictum. Aliquam molestie quis ante vitae sollicitudin. Sed porttitor commodo massa vitae imperdiet. Phasellus condimentum bibendum nunc, sed mollis lorem rhoncus non. Cras bibendum augue eu sem cursus, at posuere mauris ornare. Suspendisse mattis mauris eget mauris aliquam eleifend. Nulla vitae massa blandit, convallis libero vitae, tincidunt urna. Integer eu pretium magna, porta aliquet purus. Nullam vitae dolor eros. Curabitur eleifend dui sem, at tincidunt metus blandit placerat. Suspendisse nisl velit, pellentesque in lacinia at, fermentum quis odio. Nullam quis vestibulum ligula.
  116. [/font][/border]
  117. [comment]----copy me too!!!----[/comment]
  118.  
  119. [comment]----make a new section by copying me in my entirety!!!!!----[/comment]
  120. [border=transparent; height:fit-content; width:52%; padding:8px 10px; box-sizing:border-box; background-color: var(--color-3); border:1px solid var(--bg-1); color: var(--h-color); font-size:12px; position:sticky; top:0; line-height:130%;][font=Roboto][comment]
  121. ---- * * * section header here! ----
  122. [/comment]some small header?[/font][/border]
  123.  
  124. [border=transparent; height:fit-content; width:50%; padding:3px 5px 8px 8px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:130%;][font=Montserrat][comment]
  125. ---- * * * your content starts here! ----
  126. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet sapien ut sem tristique, id luctus magna faucibus. Morbi lacinia scelerisque metus, a varius eros congue at. Aliquam nec mauris rhoncus, scelerisque eros quis, tincidunt ipsum. Fusce leo sapien, egestas ut purus non, finibus suscipit magna. Donec elit ex, molestie in odio a, finibus bibendum ligula. Proin non volutpat ex, ut porta dui. Aenean nec dictum lacus. Integer vel libero consequat, elementum nisi vulputate, tempor dolor. Nunc posuere convallis dolor, at cursus felis. Vivamus viverra ac diam non porttitor. Suspendisse lacinia elit sed justo laoreet, non viverra tellus malesuada.
  127.  
  128. Fusce semper vitae leo ac bibendum. Fusce ultrices ligula eros, non consequat risus accumsan viverra. Morbi sed interdum felis. Praesent arcu nibh, feugiat vel finibus non, facilisis eget erat. Suspendisse eget odio metus. Phasellus nec ligula pharetra, sollicitudin augue quis, commodo diam. Quisque ac lobortis nulla.
  129. [/font][/border]
  130. [comment]----copy me too!!!----[/comment]
  131.  
  132. [/border][/border]
  133.  
  134. [comment]----images----[/comment]
  135. [border=transparent; height:27%; width:82%; padding:0; display:flex; flex-flow: row nowrap; justify-content:center;]
  136. [border=transparent; height:100%; width:48%; padding:0; background: var(--aimg-1); background-size:cover; flex-shrink:0;
  137. /*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border]
  138. [border=transparent; height:100%; flex-grow:1; padding:0; font-size:0;]filler (ignore!)[/border]
  139. [border=transparent; height:100%; width:48%; padding:0; background: var(--aimg-2); background-size:cover; flex-shrink:0;
  140. /*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border]
  141. [/border]
  142.  
  143. [/border]
  144. [comment]---- body end----[/comment]
  145.  
  146. [/border][/tab]
  147. [comment]----tab one end----[/comment]
  148.  
  149. [comment]----tab two----[/comment]
  150. [tab=..][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; flex-flow: row nowrap; pointer-events:none;]
  151.  
  152. [comment]---- title----[/comment]
  153. [border=transparent; height:fit-content; width:45%; padding:0 0 0 35px; box-sizing:border-box; margin-top:-4%; font-size:90px; color: var(--color-2); letter-spacing:5px; line-height:100%; text-transform:uppercase; -webkit-text-stroke:8px var(--color-2); pointer-events:auto;][font=Heebo][comment]
  154. ---- * * * repeat your title here -----
  155. [/comment]title. title. title. title. title. title.[/font][/border]
  156.  
  157. [comment]---- body----[/comment]
  158. [border=transparent; height:100%; width:57%; padding:12px 20px 3px 20px; box-sizing:border-box; display:flex; flex-flow: row wrap; justify-content:center;]
  159.  
  160. [comment]----button select (ignore!)----[/comment]
  161. [border=transparent; height:10%; width:100%; padding:0;][/border]
  162. [border=transparent; height:calc(10% + 12px); width:57.2%; padding:12px 0 0 0; box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:absolute; top:0; right:0; pointer-events:none;]
  163. [border=transparent; height:35px; width:40px; padding:0; margin:0 10px;][/border]
  164. [border=transparent; height:35px; width:40px; padding:0; background-color: var(--color-1); border:1px solid var(--bg-2); box-shadow:3px 3px var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--bg-2); font-weight:bold; font-size:15px; letter-spacing:1px; line-height:120%; margin:0 10px; text-shadow:2px 2px var(--color-2);][font=Changa One]02.[/font][/border]
  165. [border=transparent; height:35px; width:40px; padding:0; margin:0 10px;][/border]
  166. [border=transparent; height:35px; width:40px; padding:0; margin:0 10px;][/border]
  167. [/border]
  168. [comment]----button select end----[/comment]
  169.  
  170. [comment]----body text----[/comment]
  171. [border=transparent; height:53%; width:82%; background: var(--bg-2); padding:0 0 5px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  172.  
  173. [comment]----make a new section by copying me in my entirety!!!!!----[/comment]
  174. [border=transparent; height:fit-content; width:52%; padding:8px 10px; box-sizing:border-box; background-color: var(--color-3); border:1px solid var(--bg-1); color: var(--h-color); font-size:12px; position:sticky; top:0; line-height:130%;][font=Roboto][comment]
  175. ---- * * * section header here! ----
  176. [/comment]some small header?[/font][/border]
  177.  
  178. [border=transparent; height:fit-content; width:50%; padding:3px 5px 8px 8px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:130%;][font=Montserrat][comment]
  179. ---- * * * your content starts here! ----
  180. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet sapien ut sem tristique, id luctus magna faucibus. Morbi lacinia scelerisque metus, a varius eros congue at. Aliquam nec mauris rhoncus, scelerisque eros quis, tincidunt ipsum. Fusce leo sapien, egestas ut purus non, finibus suscipit magna. Donec elit ex, molestie in odio a, finibus bibendum ligula. Proin non volutpat ex, ut porta dui. Aenean nec dictum lacus. Integer vel libero consequat, elementum nisi vulputate, tempor dolor. Nunc posuere convallis dolor, at cursus felis. Vivamus viverra ac diam non porttitor. Suspendisse lacinia elit sed justo laoreet, non viverra tellus malesuada.
  181.  
  182. Fusce semper vitae leo ac bibendum. Fusce ultrices ligula eros, non consequat risus accumsan viverra. Morbi sed interdum felis. Praesent arcu nibh, feugiat vel finibus non, facilisis eget erat. Suspendisse eget odio metus. Phasellus nec ligula pharetra, sollicitudin augue quis, commodo diam. Quisque ac lobortis nulla.
  183.  
  184. Nullam hendrerit bibendum dictum. Aliquam molestie quis ante vitae sollicitudin. Sed porttitor commodo massa vitae imperdiet. Phasellus condimentum bibendum nunc, sed mollis lorem rhoncus non. Cras bibendum augue eu sem cursus, at posuere mauris ornare. Suspendisse mattis mauris eget mauris aliquam eleifend. Nulla vitae massa blandit, convallis libero vitae, tincidunt urna. Integer eu pretium magna, porta aliquet purus. Nullam vitae dolor eros. Curabitur eleifend dui sem, at tincidunt metus blandit placerat. Suspendisse nisl velit, pellentesque in lacinia at, fermentum quis odio. Nullam quis vestibulum ligula.
  185. [/font][/border]
  186. [comment]----copy me too!!!----[/comment]
  187.  
  188. [comment]----make a new section by copying me in my entirety!!!!!----[/comment]
  189. [border=transparent; height:fit-content; width:52%; padding:8px 10px; box-sizing:border-box; background-color: var(--color-3); border:1px solid var(--bg-1); color: var(--h-color); font-size:12px; position:sticky; top:0; line-height:130%;][font=Roboto][comment]
  190. ---- * * * section header here! ----
  191. [/comment]some small header?[/font][/border]
  192.  
  193. [border=transparent; height:fit-content; width:50%; padding:3px 5px 8px 8px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:130%;][font=Montserrat][comment]
  194. ---- * * * your content starts here! ----
  195. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet sapien ut sem tristique, id luctus magna faucibus. Morbi lacinia scelerisque metus, a varius eros congue at. Aliquam nec mauris rhoncus, scelerisque eros quis, tincidunt ipsum. Fusce leo sapien, egestas ut purus non, finibus suscipit magna. Donec elit ex, molestie in odio a, finibus bibendum ligula. Proin non volutpat ex, ut porta dui. Aenean nec dictum lacus. Integer vel libero consequat, elementum nisi vulputate, tempor dolor. Nunc posuere convallis dolor, at cursus felis. Vivamus viverra ac diam non porttitor. Suspendisse lacinia elit sed justo laoreet, non viverra tellus malesuada.
  196.  
  197. Fusce semper vitae leo ac bibendum. Fusce ultrices ligula eros, non consequat risus accumsan viverra. Morbi sed interdum felis. Praesent arcu nibh, feugiat vel finibus non, facilisis eget erat. Suspendisse eget odio metus. Phasellus nec ligula pharetra, sollicitudin augue quis, commodo diam. Quisque ac lobortis nulla.
  198. [/font][/border]
  199. [comment]----copy me too!!!----[/comment]
  200.  
  201. [/border][/border]
  202.  
  203. [comment]----images----[/comment]
  204. [border=transparent; height:27%; width:82%; padding:0; display:flex; flex-flow: row nowrap; justify-content:center;]
  205. [border=transparent; height:100%; width:30%; padding:0; background: var(--bimg-1); background-size:cover; flex-shrink:0;
  206. /*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border]
  207. [border=transparent; height:100%; flex-grow:1; padding:0; font-size:0;]filler (ignore!)[/border]
  208. [border=transparent; height:100%; width:30%; padding:0; background: var(--bimg-2); background-size:cover; flex-shrink:0;
  209. /*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border]
  210. [border=transparent; height:100%; flex-grow:1; padding:0; font-size:0;]filler (ignore!)[/border]
  211. [border=transparent; height:100%; width:30%; padding:0; background: var(--bimg-3); background-size:cover; flex-shrink:0;
  212. /*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border]
  213. [/border]
  214.  
  215. [/border]
  216. [comment]---- body end----[/comment]
  217.  
  218. [/border][/tab]
  219. [comment]----tab two end----[/comment]
  220.  
  221. [comment]----tab three----[/comment]
  222. [tab=..][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; flex-flow: row nowrap; pointer-events:none;]
  223.  
  224. [comment]---- title----[/comment]
  225. [border=transparent; height:fit-content; width:45%; padding:0 0 0 35px; box-sizing:border-box; margin-top:-4%; font-size:90px; color: var(--color-2); letter-spacing:5px; line-height:100%; text-transform:uppercase; -webkit-text-stroke:8px var(--color-2); pointer-events:auto;][font=Heebo][comment]
  226. ---- * * * repeat your title here -----
  227. [/comment]title. title. title. title. title. title.[/font][/border]
  228.  
  229. [comment]---- body----[/comment]
  230. [border=transparent; height:100%; width:57%; padding:12px 20px 3px 20px; box-sizing:border-box; display:flex; flex-flow: row wrap; justify-content:center;]
  231.  
  232. [comment]----button select (ignore!)----[/comment]
  233. [border=transparent; height:10%; width:100%; padding:0;][/border]
  234. [border=transparent; height:calc(10% + 12px); width:56.7%; padding:12px 0 0 0; box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:absolute; top:0; right:0; pointer-events:none;]
  235. [border=transparent; height:35px; width:40px; padding:0; margin:0 10px;][/border]
  236. [border=transparent; height:35px; width:40px; padding:0; margin:0 10px;][/border]
  237. [border=transparent; height:35px; width:40px; padding:0; background-color: var(--color-1); border:1px solid var(--bg-2); box-shadow:3px 3px var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--bg-2); font-weight:bold; font-size:15px; letter-spacing:1px; line-height:120%; margin:0 10px; text-shadow:2px 2px var(--color-2);][font=Changa One]03.[/font][/border]
  238. [border=transparent; height:35px; width:40px; padding:0; margin:0 10px;][/border]
  239. [/border]
  240. [comment]----button select end----[/comment]
  241.  
  242. [comment]----body text----[/comment]
  243. [border=transparent; height:53%; width:82%; background: var(--bg-2); padding:0 0 5px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  244.  
  245. [comment]----make a new section by copying me in my entirety!!!!!----[/comment]
  246. [border=transparent; height:fit-content; width:52%; padding:8px 10px; box-sizing:border-box; background-color: var(--color-3); border:1px solid var(--bg-1); color: var(--h-color); font-size:12px; position:sticky; top:0; line-height:130%;][font=Roboto][comment]
  247. ---- * * * section header here! ----
  248. [/comment]some small header?[/font][/border]
  249.  
  250. [border=transparent; height:fit-content; width:50%; padding:3px 5px 8px 8px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:130%;][font=Montserrat][comment]
  251. ---- * * * your content starts here! ----
  252. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet sapien ut sem tristique, id luctus magna faucibus. Morbi lacinia scelerisque metus, a varius eros congue at. Aliquam nec mauris rhoncus, scelerisque eros quis, tincidunt ipsum. Fusce leo sapien, egestas ut purus non, finibus suscipit magna. Donec elit ex, molestie in odio a, finibus bibendum ligula. Proin non volutpat ex, ut porta dui. Aenean nec dictum lacus. Integer vel libero consequat, elementum nisi vulputate, tempor dolor. Nunc posuere convallis dolor, at cursus felis. Vivamus viverra ac diam non porttitor. Suspendisse lacinia elit sed justo laoreet, non viverra tellus malesuada.
  253.  
  254. Fusce semper vitae leo ac bibendum. Fusce ultrices ligula eros, non consequat risus accumsan viverra. Morbi sed interdum felis. Praesent arcu nibh, feugiat vel finibus non, facilisis eget erat. Suspendisse eget odio metus. Phasellus nec ligula pharetra, sollicitudin augue quis, commodo diam. Quisque ac lobortis nulla.
  255.  
  256. Nullam hendrerit bibendum dictum. Aliquam molestie quis ante vitae sollicitudin. Sed porttitor commodo massa vitae imperdiet. Phasellus condimentum bibendum nunc, sed mollis lorem rhoncus non. Cras bibendum augue eu sem cursus, at posuere mauris ornare. Suspendisse mattis mauris eget mauris aliquam eleifend. Nulla vitae massa blandit, convallis libero vitae, tincidunt urna. Integer eu pretium magna, porta aliquet purus. Nullam vitae dolor eros. Curabitur eleifend dui sem, at tincidunt metus blandit placerat. Suspendisse nisl velit, pellentesque in lacinia at, fermentum quis odio. Nullam quis vestibulum ligula.
  257. [/font][/border]
  258. [comment]----copy me too!!!----[/comment]
  259.  
  260. [comment]----make a new section by copying me in my entirety!!!!!----[/comment]
  261. [border=transparent; height:fit-content; width:52%; padding:8px 10px; box-sizing:border-box; background-color: var(--color-3); border:1px solid var(--bg-1); color: var(--h-color); font-size:12px; position:sticky; top:0; line-height:130%;][font=Roboto][comment]
  262. ---- * * * section header here! ----
  263. [/comment]some small header?[/font][/border]
  264.  
  265. [border=transparent; height:fit-content; width:50%; padding:3px 5px 8px 8px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:130%;][font=Montserrat][comment]
  266. ---- * * * your content starts here! ----
  267. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet sapien ut sem tristique, id luctus magna faucibus. Morbi lacinia scelerisque metus, a varius eros congue at. Aliquam nec mauris rhoncus, scelerisque eros quis, tincidunt ipsum. Fusce leo sapien, egestas ut purus non, finibus suscipit magna. Donec elit ex, molestie in odio a, finibus bibendum ligula. Proin non volutpat ex, ut porta dui. Aenean nec dictum lacus. Integer vel libero consequat, elementum nisi vulputate, tempor dolor. Nunc posuere convallis dolor, at cursus felis. Vivamus viverra ac diam non porttitor. Suspendisse lacinia elit sed justo laoreet, non viverra tellus malesuada.
  268.  
  269. Fusce semper vitae leo ac bibendum. Fusce ultrices ligula eros, non consequat risus accumsan viverra. Morbi sed interdum felis. Praesent arcu nibh, feugiat vel finibus non, facilisis eget erat. Suspendisse eget odio metus. Phasellus nec ligula pharetra, sollicitudin augue quis, commodo diam. Quisque ac lobortis nulla.
  270. [/font][/border]
  271. [comment]----copy me too!!!----[/comment]
  272.  
  273. [/border][/border]
  274.  
  275. [comment]----images----[/comment]
  276. [border=transparent; height:27%; width:82%; padding:0; display:flex; flex-flow: row nowrap; justify-content:center;]
  277. [border=transparent; height:100%; width:100%; padding:0; background: var(--cimg-1); background-size:cover;
  278. /*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border]
  279. [/border]
  280.  
  281. [/border]
  282. [comment]---- body end----[/comment]
  283.  
  284. [/border][/tab]
  285. [comment]----tab three end----[/comment]
  286.  
  287. [comment]----tab four----[/comment]
  288. [tab=..][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; flex-flow: row nowrap; pointer-events:none;]
  289.  
  290. [comment]---- title----[/comment]
  291. [border=transparent; height:fit-content; width:45%; padding:0 0 0 35px; box-sizing:border-box; margin-top:-4%; font-size:90px; color: var(--color-2); letter-spacing:5px; line-height:100%; text-transform:uppercase; -webkit-text-stroke:8px var(--color-2); pointer-events:auto;][font=Heebo][comment]
  292. ---- * * * repeat your title here -----
  293. [/comment]title. title. title. title. title. title.[/font][/border]
  294.  
  295. [comment]---- body----[/comment]
  296. [border=transparent; height:100%; width:57%; padding:12px 20px 3px 20px; box-sizing:border-box; display:flex; flex-flow: row wrap; justify-content:center;]
  297.  
  298. [comment]----button select (ignore!)----[/comment]
  299. [border=transparent; height:10%; width:100%; padding:0;][/border]
  300. [border=transparent; height:calc(10% + 12px); width:56.2%; padding:12px 0 0 0; box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:absolute; top:0; right:0; pointer-events:none;]
  301. [border=transparent; height:35px; width:40px; padding:0; margin:0 10px;][/border]
  302. [border=transparent; height:35px; width:40px; padding:0; margin:0 10px;][/border]
  303. [border=transparent; height:35px; width:40px; padding:0; margin:0 10px;][/border]
  304. [border=transparent; height:35px; width:40px; padding:0; background-color: var(--color-1); border:1px solid var(--bg-2); box-shadow:3px 3px var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--bg-2); font-weight:bold; font-size:15px; letter-spacing:1px; line-height:120%; margin:0 10px; text-shadow:2px 2px var(--color-2);][font=Changa One]04.[/font][/border]
  305. [/border]
  306. [comment]----button select end----[/comment]
  307.  
  308. [comment]----body text----[/comment]
  309. [border=transparent; height:53%; width:82%; background: var(--bg-2); padding:0 0 5px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  310.  
  311. [comment]----make a new section by copying me in my entirety!!!!!----[/comment]
  312. [border=transparent; height:fit-content; width:52%; padding:8px 10px; box-sizing:border-box; background-color: var(--color-3); border:1px solid var(--bg-1); color: var(--h-color); font-size:12px; position:sticky; top:0; line-height:130%;][font=Roboto][comment]
  313. ---- * * * section header here! ----
  314. [/comment]some small header?[/font][/border]
  315.  
  316. [border=transparent; height:fit-content; width:50%; padding:3px 5px 8px 8px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:130%;][font=Montserrat][comment]
  317. ---- * * * your content starts here! ----
  318. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet sapien ut sem tristique, id luctus magna faucibus. Morbi lacinia scelerisque metus, a varius eros congue at. Aliquam nec mauris rhoncus, scelerisque eros quis, tincidunt ipsum. Fusce leo sapien, egestas ut purus non, finibus suscipit magna. Donec elit ex, molestie in odio a, finibus bibendum ligula. Proin non volutpat ex, ut porta dui. Aenean nec dictum lacus. Integer vel libero consequat, elementum nisi vulputate, tempor dolor. Nunc posuere convallis dolor, at cursus felis. Vivamus viverra ac diam non porttitor. Suspendisse lacinia elit sed justo laoreet, non viverra tellus malesuada.
  319.  
  320. Fusce semper vitae leo ac bibendum. Fusce ultrices ligula eros, non consequat risus accumsan viverra. Morbi sed interdum felis. Praesent arcu nibh, feugiat vel finibus non, facilisis eget erat. Suspendisse eget odio metus. Phasellus nec ligula pharetra, sollicitudin augue quis, commodo diam. Quisque ac lobortis nulla.
  321.  
  322. Nullam hendrerit bibendum dictum. Aliquam molestie quis ante vitae sollicitudin. Sed porttitor commodo massa vitae imperdiet. Phasellus condimentum bibendum nunc, sed mollis lorem rhoncus non. Cras bibendum augue eu sem cursus, at posuere mauris ornare. Suspendisse mattis mauris eget mauris aliquam eleifend. Nulla vitae massa blandit, convallis libero vitae, tincidunt urna. Integer eu pretium magna, porta aliquet purus. Nullam vitae dolor eros. Curabitur eleifend dui sem, at tincidunt metus blandit placerat. Suspendisse nisl velit, pellentesque in lacinia at, fermentum quis odio. Nullam quis vestibulum ligula.
  323. [/font][/border]
  324. [comment]----copy me too!!!----[/comment]
  325.  
  326. [comment]----make a new section by copying me in my entirety!!!!!----[/comment]
  327. [border=transparent; height:fit-content; width:52%; padding:8px 10px; box-sizing:border-box; background-color: var(--color-3); border:1px solid var(--bg-1); color: var(--h-color); font-size:12px; position:sticky; top:0; line-height:130%;][font=Roboto][comment]
  328. ---- * * * section header here! ----
  329. [/comment]some small header?[/font][/border]
  330.  
  331. [border=transparent; height:fit-content; width:50%; padding:3px 5px 8px 8px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:130%;][font=Montserrat][comment]
  332. ---- * * * your content starts here! ----
  333. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet sapien ut sem tristique, id luctus magna faucibus. Morbi lacinia scelerisque metus, a varius eros congue at. Aliquam nec mauris rhoncus, scelerisque eros quis, tincidunt ipsum. Fusce leo sapien, egestas ut purus non, finibus suscipit magna. Donec elit ex, molestie in odio a, finibus bibendum ligula. Proin non volutpat ex, ut porta dui. Aenean nec dictum lacus. Integer vel libero consequat, elementum nisi vulputate, tempor dolor. Nunc posuere convallis dolor, at cursus felis. Vivamus viverra ac diam non porttitor. Suspendisse lacinia elit sed justo laoreet, non viverra tellus malesuada.
  334.  
  335. Fusce semper vitae leo ac bibendum. Fusce ultrices ligula eros, non consequat risus accumsan viverra. Morbi sed interdum felis. Praesent arcu nibh, feugiat vel finibus non, facilisis eget erat. Suspendisse eget odio metus. Phasellus nec ligula pharetra, sollicitudin augue quis, commodo diam. Quisque ac lobortis nulla.
  336. [/font][/border]
  337. [comment]----copy me too!!!----[/comment]
  338.  
  339. [/border][/border]
  340.  
  341. [comment]----images----[/comment]
  342. [border=transparent; height:27%; width:82%; padding:0; display:flex; flex-flow: row nowrap; justify-content:center;]
  343. [border=transparent; height:100%; width:48%; padding:0; background: var(--dimg-1); background-size:cover; flex-shrink:0;
  344. /*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border]
  345. [border=transparent; height:100%; flex-grow:1; padding:0; font-size:0;]filler (ignore!)[/border]
  346. [border=transparent; height:100%; width:48%; padding:0; background: var(--dimg-2); background-size:cover; flex-shrink:0;
  347. /*edit the following to adjust the cropping of the image*/ background-position:50% 30%;][/border]
  348. [/border]
  349.  
  350. [/border]
  351. [comment]---- body end----[/comment]
  352.  
  353. [/border][/tab]
  354. [comment]----tab four end----[/comment]
  355.  
  356. [/tabs][/border][/border]
  357. [comment]----tabs end----[/comment]
  358.  
  359. [/border][/tab]
  360. [comment]----main content end----[/comment]
  361.  
  362. [/tabs][/border][/border]
  363. [/border]
  364. [comment]----main container end----[/comment]
  365.  
  366. [comment]----signature! do not remove!----[/comment][bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; left:0; bottom:60px; z-index:4;opacity:0.7;font-size:10px;text-align:center; line-height:130%; margin-top:3px; color: var(--color-2);][font=Open Sans]♡design by low fidelity, coded by uxie♡[/font][/bg]
  367. [/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!