API tools faq
paste
Advertisement
ooksie

every second (uxie x minajesty)

ooksie
Dec 11th, 2023 (edited)
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.91 KB | None | 0 0
raw download clone embed print report
  1. [comment]code machine // coded by uxie, design by minajesty
  2.  
  3. fonts used:
  4. [font=DM Serif Text]title[/font]
  5. [font=Fraunces]detail[/font]
  6. [font=Rethink Sans]body[/font]
  7.  
  8.  
  9. 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 ( ‾́ ◡ ‾́ )
  10.  
  11. [/comment][div=
  12.  
  13. /*leave blank to have a transparent bg*/
  14. --bg: ##;
  15.  
  16. /*main border colour*/
  17. --color-1: #fff;
  18. /*image shadow colour -- leave blank to remove; good for distinguishing icons on light mode*/
  19. --color-2: #292A2D;
  20. /*arrow and detail colours -- leave blank to let it change between dark/light mode*/
  21. --color-3: ##;
  22.  
  23. /*title text colour*/
  24. --t-color-1: #898989;
  25. --t-color-2: #5e5e5e;
  26.  
  27. /*body text colour*/
  28. --t-color-3: #fff;
  29.  
  30. /*fonts used*/
  31. --title: 'DM Serif Text', display;
  32. --detail: 'Fraunces', serif;
  33. --body: 'Rethink Sans', sans-serif;
  34.  
  35. /*right main image*/
  36. --img-1: URL('https://i.pinimg.com/564x/24/36/dd/2436dd6d4e49fe3ac849d62215d345c1.jpg');
  37. /*images within scroll*/
  38. --img-2: URL('https://i.pinimg.com/736x/4f/4f/58/4f4f58c934e8a98a5276ba0d0b2e3baf.jpg');
  39. --img-3: URL('https://i.pinimg.com/736x/4f/4f/58/4f4f58c934e8a98a5276ba0d0b2e3baf.jpg');
  40.  
  41. /*left gallery images*/
  42. --gimg-1: URL('https://i.pinimg.com/564x/71/9c/76/719c76952c9438c1a2b6e7275cacc40b.jpg');
  43. --gimg-2: URL('https://i.pinimg.com/564x/71/9c/76/719c76952c9438c1a2b6e7275cacc40b.jpg');
  44. --gimg-3: URL('https://i.pinimg.com/564x/71/9c/76/719c76952c9438c1a2b6e7275cacc40b.jpg');
  45.  
  46. height:auto; width:100%; overflow-x:auto; overflow-y:hidden; padding:0 0 18px 0; box-sizing:border-box; position:relative; margin:20px 0 30px 0; line-height:0;][div=height:auto; width:100%; max-width:460px; background: var(--bg); margin:0 auto; position:relative; padding:10px 15px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; align-items:center;]
  47.  
  48. [comment]----right container----[/comment]
  49. [div=height:410px; flex:67; padding:0 0 5px 0; box-sizing:border-box; min-width:220px; margin:10px; display:flex; flex-flow:column nowrap;]
  50. [comment]----title----[/comment]
  51. [div=height:auto; width:auto; padding:0 0 0 12px; flex-shrink:0; box-sizing:border-box; color: var(--t-color-1); text-shadow:-2.3px -2.5px var(--t-color-2); font-family: var(--title); font-size:40px; line-height:100%; margin-bottom:-14px; position:relative; z-index:5; letter-spacing:1px;][comment]
  52.  
  53. ----* * * title here----
  54.  
  55. [/comment]name here[/div]
  56.  
  57. [comment]----main content box----[/comment]
  58. [div=height:90%; width:100%; border:4px solid var(--color-1); box-sizing:border-box; box-shadow:-2px -2px var(--color-2); background: var(--img-1); overflow:hidden; display:flex; flex-direction:column; background-size:cover;
  59.  
  60. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  61.  
  62. ][div=height:100%; width:200%; overflow-y:scroll;][div=height:100%; width:100%; padding:5px; box-sizing:border-box; display:flex; align-items:flex-end;][div=height:auto; width:auto; color: var(--color-1); font-size:9px; font-family: var(--detail); text-transform:uppercase; display:flex; letter-spacing:0.5px; opacity:0.8;][div=margin-right:5px; font-size:8px;][fa]far fa-arrow-down[/fa][/div][div=line-height:100%;]scroll[/div][/div][/div]
  63.  
  64. [comment]----main contents----[/comment]
  65. [div=height:auto; min-height:100%; width:50%; padding:15px 7px 15px 15px; box-sizing:border-box; position:relative; display:flex; flex-flow:column nowrap;][div=height:100%; width:calc(100% + 18px); position:absolute; z-index:1; top:0; left:0; backdrop-filter:blur(3px) brightness(0.9);][/div]
  66.  
  67. [comment]----images----[/comment]
  68. [div=height:250px; width:100%; padding:0 10px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:center; position:relative; z-index:2;]
  69. [div=height:90px; width:clamp(80px, 60%, 140px); border:3px solid var(--color-1); margin:0 0 0 auto; background:var(--img-2); background-size:cover;
  70.  
  71. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/div]
  72.  
  73. [div=height:90px; width:clamp(80px, 60%, 140px); border:3px solid var(--color-1); margin:16px auto 0 0; background:var(--img-3); background-size:cover;
  74.  
  75. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/div]
  76.  
  77. [/div]
  78. [comment]----images end----[/comment]
  79.  
  80. [comment]----text box----[/comment]
  81. [div=height:auto; width:100%; margin-top:16px; font-family: var(--body); text-align:justify; font-size:12px; line-height:15px; color: var(--t-color-3); position:relative; z-index:2;][comment]
  82.  
  83. ----* * * text starts here----
  84.  
  85. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ex nisi, accumsan in sodales ac, tincidunt vel sapien. In non nisl at lectus lobortis placerat. Aenean pellentesque commodo mauris, id pellentesque erat blandit non. Duis quis elit felis. Donec bibendum luctus commodo. Aliquam ut vehicula turpis, vitae cursus eros. Donec nibh eros, semper vitae pellentesque et, elementum ut quam. Vivamus non feugiat tortor, vel hendrerit mauris. Donec molestie ultrices auctor. Suspendisse potenti. Aliquam erat volutpat.
  86. [/div]
  87. [comment]----text box end----[/comment]
  88. [/div]
  89. [comment]----main contents end----[/comment]
  90. [/div][/div]
  91. [comment]----main content box end----[/comment]
  92.  
  93. [comment]----click for more----[/comment]
  94. [div=height:auto; width:100%; flex-shrink:0; font-family:var(--detail); font-size:10px; display:flex; flex-flow:row-reverse nowrap; align-items:center; margin-top:8px;][div=margin:-1px 1px 0 10px; font-size:9px; color: var(--color-3);][fa]far fa-chevron-right[/fa][/div][div=line-height:100%; text-transform:uppercase; letter-spacing:0.5px;]click for more[/div][/div]
  95.  
  96. [/div]
  97. [comment]----right container end----[/comment]
  98.  
  99. [comment]----left showcase----[/comment]
  100. [div=height:auto; min-height:150px; flex:33; min-width:120px; margin:10px; display:flex; flex-flow:row wrap; align-items:space-between;]
  101. [div=height:auto; width:100%; color: var(--color-3); font-size:22px; line-height:100%; text-align:center; margin-bottom:auto;][fa]fas fa-chevron-up[/fa][/div]
  102.  
  103. [comment]----gallery image 1----[/comment]
  104. [div=flex:1; min-width:clamp(60px, 50%, 80px); margin:6px 8px;][div=padding-top:calc(100% - 6px); box-shadow:border-box; border:3px solid var(--color-1); box-shadow:-1px -1px var(--color-2); border-radius:10px; background: var(--gimg-1); background-size:cover;
  105.  
  106. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/div][/div]
  107.  
  108. [comment]----gallery image 2----[/comment]
  109. [div=flex:1; min-width:clamp(60px, 50%, 80px); margin:6px 8px;][div=padding-top:calc(100% - 6px); box-shadow:border-box; border:3px solid var(--color-1); box-shadow:-1px -1px var(--color-2); border-radius:10px; background: var(--gimg-2); background-size:cover;
  110.  
  111. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/div][/div]
  112.  
  113. [comment]----gallery image 3----[/comment]
  114. [div=flex:1; min-width:clamp(60px, 50%, 80px); margin:6px 8px;][div=padding-top:calc(100% - 6px); box-shadow:border-box; border:3px solid var(--color-1); box-shadow:-1px -1px var(--color-2); border-radius:10px; background: var(--gimg-3); background-size:cover;
  115.  
  116. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/div][/div]
  117.  
  118. [div=height:auto; width:100%; color: var(--color-3); font-size:22px; line-height:100%; text-align:center; margin-top:auto;][fa]fas fa-chevron-down[/fa][/div]
  119. [/div]
  120. [comment]----left showcase end----[/comment]
  121. [comment]----signature! (do not remove!)-----
  122. [/comment][div=height:auto; width:100%; padding:0; position:absolute; bottom:-15px; 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 minajesty, coded by uxie♡[/font][/div][/div][/div]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!