API tools faq
paste
amalfigin

Light and Dark neocities layout

amalfigin
Aug 26th, 2024 (edited)
140
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.47 KB | None | 1 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. Light and Dark neocities layout by amalfigin
  7.  
  8. If you need help, just ask me on my tumblr blog: https://www.tumblr.com/amalfigintonic/
  9.  
  10. Don't remove this credits!
  11.  
  12. Filter used for the banner: https://app.dithermark.com/
  13.  
  14. Theme switcher code: https://codepen.io/HugoSalazar/pen/RwzgxPg
  15.  
  16. !The banner needs to be 800 in width to fit perfectly in the box!
  17.  
  18. -->
  19.  
  20.  
  21. <meta charset="utf8">
  22. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  23.  
  24. <!-- favicon & title -->
  25. <title>Light and dark... ⟡ </title>
  26. <link rel="shortcut icon" href="https://i.postimg.cc/Y9sSkBHX/tumblr-afe890d2f7d925a901a4c94d6867d877-1e33920e-75.webp">
  27.  
  28.  
  29.  
  30. <style>
  31.  
  32. /****** cursor ******/
  33.  
  34. * {cursor: url('https://files.catbox.moe/v0upn5.cur'), auto}
  35.  
  36. /****** links ******/
  37.  
  38. a:link {
  39. color: var(--main-link);
  40. text-decoration:none;
  41. }
  42.  
  43. a:hover {
  44. color:var(--main-linkhover);
  45. text-decoration: none;
  46. box-shadow: 0 -6px var(--main-hover) inset;
  47. transition: .4s ease-in-out;
  48. }
  49.  
  50. a:visited {
  51. color: var(--main-visited);
  52. text-decoration:none;
  53. }
  54.  
  55. /****** misc ******/
  56.  
  57. hr{
  58. border-top: 1px solid var(--main-border);
  59. border-bottom: none;
  60. margin-top: 5px;
  61. margin-bottom: 5px;
  62. }
  63.  
  64. h1{
  65. color: var(--main-link);
  66. font-size: 18px;
  67. margin-top: auto;
  68. margin-bottom: 5px;
  69. text-decoration: underline;
  70. }
  71.  
  72. /****** light and dark theme (feel free to change it!) ******/
  73.  
  74. :root {
  75. &:has(option[value="light"]:checked) {
  76. --main-bg: #FCEDF2;
  77. --main-title: #d46e9f;
  78. --main-text: #f1a7d1;
  79. --main-outbg: #fff;
  80. --main-border: #F2B5D4;
  81. --main-hover: #9EABE8;
  82. --main-link:#BAC4F2;
  83. --main-linkhover: #C4CCF0;
  84. --main-visited: #7E8CCC;
  85. }
  86.  
  87. &:has(option[value="dark"]:checked){
  88. --main-bg: #8a0f44;
  89. --main-text: #d46e9f;
  90. --main-border: #f7d4eb;
  91. --main-outbg: #5F072D;
  92. --main-hover: #561B2E;
  93. --main-link:#BA4D70;
  94. --main-linkhover: #D45A81;
  95. --main-visited: #CA4972;
  96. }
  97.  
  98. /****** theme switch ******/
  99.  
  100. select {
  101. padding: 5px;
  102. text-transform: uppercase;
  103. background-color: var(--main-outbg);
  104. color: var(--custom-color);
  105. border: 2px solid var(--main-border);
  106. }
  107.  
  108. /****** body ******/
  109.  
  110. body{
  111. background-color: var(--main-bg);
  112. color: var(--main-text);
  113. font-size: 12px;
  114. font-family: Verdana;
  115. }
  116.  
  117. /****** containers ******/
  118.  
  119. .outbox{
  120. background-color: var(--main-outbg);
  121. width: 800px;
  122. padding:10px;
  123. border: 5px double var(--main-border);
  124. border-radius: 5px;
  125. margin-left: auto;
  126. margin-right: auto;
  127. margin-top: 50px;
  128. }
  129.  
  130. .innbox{
  131. background-color: var(--main-bg);
  132. width: 800px;
  133. border: 2px solid var(--main-border);
  134. border-radius: 5px;
  135. }
  136.  
  137. .sideboxone{
  138. width: 200px;
  139. padding: 10px;
  140. border-right: 1px solid var(--main-border);
  141. border-bottom: 1px solid var(--main-border);
  142. }
  143.  
  144. .thebigbox{
  145. width: 555px;
  146. height: 295px;
  147. padding: 10px;
  148. display: inline-block;
  149. float: right;
  150. overflow: auto;
  151. }
  152.  
  153. .thelongbox{
  154. width: 790px;
  155. border-bottom: 1px solid var(--main-border);
  156. padding: 5px;
  157. overflow:auto;
  158. display: inline-block;
  159. }
  160.  
  161.  
  162. .sideboxtwo{
  163. width: 200px;
  164. height: 100px;
  165. padding: 10px;
  166. border-right: 1px solid var(--main-border);
  167. overflow:auto;
  168. }
  169.  
  170. .endbox{
  171. background-color: var(--main-bg);
  172. width: 790px;
  173. padding: 5px;
  174. border: 2px solid var(--main-border);
  175. border-radius: 5px;
  176. margin-top: 10px;
  177. text-align: center;
  178. }
  179.  
  180. </style>
  181. </head>
  182.  
  183. <body>
  184. <div>
  185.  
  186. <select>
  187. <option value="light">Light Mode</option>
  188. <option value="dark">Dark Mode</option>
  189. </select>
  190.  
  191. <div class="outbox">
  192.  
  193. <div class="innbox">
  194. <img src="https://imgur.com/KgJez9Z.png" style="border-bottom: 2px solid var(--main-border);">
  195.  
  196. <div class="thelongbox">
  197. <marquee width="100%" direction="left">
  198. <img src="https://64.media.tumblr.com/cbc85b741695ee17a883ff4301f83f68/2bc0d81ea51b9c2e-ae/s250x400/9951e80b2c6c3cf36060962c9a8f121b3a1ecfca.gifv" width="150px" height="20px">
  199. <img src="https://64.media.tumblr.com/f9a52a353a883d7aedf3b4d3840b7a4b/b035b516dc88dd13-64/s250x400/85374c68a4833149b5acdd68fdb31e126fb0f036.gifv" width="150px" height="20px">
  200. <img src="https://64.media.tumblr.com/9341c6d1b961e2a7f355f21f2417c166/df1e2cfa91e2b56e-42/s250x400/9386799cf4ba2582ee0030e0688301952226ea8a.gifv" width="150px" height="20px">
  201. </marquee>
  202. </div>
  203.  
  204. <div class="thebigbox">
  205. <h1>Lorem ipsum:</h1>
  206. Lorem ipsum odor amet, consectetuer adipiscing elit. Faucibus porttitor est iaculis suscipit; at elit porttitor. Ridiculus rhoncus nunc rhoncus lacinia nec mauris lectus. Elit auctor maecenas fusce elementum nulla molestie. Est quisque sed maximus eros eros himenaeos. Est taciti et hendrerit; faucibus enim in.
  207. <br>
  208. Sem elementum tristique ut efficitur rutrum bibendum rhoncus duis. Sapien vehicula varius dapibus maecenas vel curabitur rutrum. Interdum feugiat purus nibh varius dapibus lacinia dictumst leo. Luctus efficitur porta efficitur rhoncus aliquam tortor ac maximus. Mus tempor et aptent ipsum consectetur rutrum cras diam. Semper fermentum scelerisque et; mus hendrerit malesuada mi. Posuere eget mauris litora sagittis ligula donec facilisis orci. Curabitur lacinia dignissim ad, finibus netus turpis.
  209. <br>
  210. Tempor taciti lorem enim pulvinar nisi iaculis. Iaculis orci accumsan, felis senectus ante ac risus convallis. Integer vulputate eros litora proin duis. Morbi nisl euismod justo est aliquet nisi. Dignissim ornare eros etiam vestibulum gravida hac. Egestas natoque dapibus convallis aliquam ad congue. Potenti primis quis tincidunt finibus efficitur conubia magna malesuada.
  211. <br>
  212. Convallis amet habitant curabitur eleifend vivamus et. Viverra sociosqu convallis; sociosqu tristique natoque ex aliquet ac. Accumsan nulla orci sociosqu phasellus, pulvinar consequat consequat. Blandit aptent rhoncus in in, leo velit. Pharetra felis faucibus scelerisque penatibus venenatis. Semper orci quam sapien lobortis mi curabitur.
  213. </div>
  214.  
  215. <div class="sideboxone">
  216. <h1>Links:</h1>
  217.  
  218. いち · <a href="">link</a>
  219. <hr>
  220. に · <a href="">link</a>
  221. <hr>
  222. さん · <a href="">link</a>
  223. <hr>
  224. し · <a href="">link</a>
  225. <hr>
  226. ご · <a href="">link</a>
  227. <hr>
  228. ろく · <a href="">link</a>
  229. </div>
  230.  
  231. <div class="sideboxtwo">
  232. <h1>Updates:</h1>
  233. <li>4.14: looking for something?</li>
  234. <li>4.14: ૮ ˶ᵔ ᵕ ᵔ˶ ა</li>
  235. <li>3.25: hello world!</li>
  236. <br><br><br>
  237. this box can scroll :p
  238. <br><br><br><br><br><br>
  239. you can add whatever you want in this box ^^
  240. </div>
  241.  
  242. </div>
  243.  
  244. <div class="endbox">
  245. made with love by <a href="">amalfigin</a> ♡ <a href="">link</a> ♡ <a href="">link</a>
  246. </div>
  247.  
  248. </div>
  249.  
  250.  
  251.  
  252. </div>
  253. </body>
  254. </html>
  255.  
  256.  
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!