API tools faq
paste
Advertisement
doubly_magic

neocities help?

doubly_magic
May 2nd, 2025 (edited)
30
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.50 KB | None | 0 0
raw download clone embed print report
  1. HTML START!!!!!!!!!!!!!!!!!
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9. <title>doubly_magic</title>
  10.  
  11. <!--bootstrap CSS-->
  12. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  13. <!-- The style.css file allows you to change the look of your web pages.
  14. If you include the next line in all your web pages, they will all share the same look.
  15. This makes it easier to make new pages for your site. -->
  16. <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  17. <!--fontawesome JS-->
  18. <script defer src="/assets/fontawesome/all.js"></script>
  19.  
  20. <!--jquery-->
  21. <script defer src="/assets/jquery/jquery-3.7.1.min.js"></script>
  22. </head>
  23.  
  24.  
  25. <body style="margin: 0px; padding: 0px; height: 100vh">
  26. <div style="overflow-x: hidden; display: flex; flex-flow: column; height: 100%">
  27. <!--top header-->
  28. <header>
  29. <span style="font-size: 50px">
  30. doubly_magic
  31. </span>
  32. </header>
  33. <div style="position: sticky; top: 0px; z-index: 201; background-color: #95BF91; color: #0e2b0b; font-family: Monaco, monospace; justify-content: center; text-align: center; border-bottom: 2px solid #909d8f;">
  34. <ul class="nav main-nav">
  35. <li class="nav-item">
  36. <a class="nav-link main-nav-link" href="URL" style="text-decoration: underline;">test1</a>
  37. </li>
  38. <li class="nav-item">
  39. <a class="nav-link main-nav-link" href="URL" style="text-decoration: underline;">test2</a>
  40. </li>
  41. <li class="nav-item">
  42. <a class="nav-link main-nav-link" href="URL" style="text-decoration: underline;">test3</a>
  43. </li>
  44. </ul>
  45. </div>
  46.  
  47. <!--main body-->
  48. <div style="margin: 0px; padding: 0px; flex: 1 0 auto">
  49. <div class="row" style="width: 100%; padding: 0px; justify-items: start; height: 100%; margin: 0px">
  50. <!--side header-->
  51. <div class="col-3 collapse show" style="margin: 0px; float: left; padding: 0px; border-right: 1px solid #909d8f;" id="side-header">
  52. <div class="side-header">
  53. <div style="position: sticky; top: 40px; height: calc(100vh - 160px); overflow-y: auto">
  54. <p style="padding: 2px 10px;">
  55. lorem ipsum dolor sit amet lorem ipsum dolor....
  56. <br>
  57. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate diam vitae urna eleifend, et consectetur nisi pretium. Aenean varius ultrices mi tincidunt convallis. Nullam non efficitur est. Etiam ante mi, auctor in augue quis, euismod elementum ex. Nulla quis justo sed arcu aliquam malesuada. Vivamus at pulvinar nunc. Morbi ac ante urna. Etiam eget elementum nulla, eget imperdiet libero. Pellentesque gravida cursus posuere. Morbi sodales, neque a eleifend fermentum, ante ex convallis metus, et tempor erat tellus in nisi.
  58. <br>
  59. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate diam vitae urna eleifend, et consectetur nisi pretium. Aenean varius ultrices mi tincidunt convallis. Nullam non efficitur est. Etiam ante mi, auctor in augue quis, euismod elementum ex. Nulla quis justo sed arcu aliquam malesuada. Vivamus at pulvinar nunc. Morbi ac ante urna. Etiam eget elementum nulla, eget imperdiet libero. Pellentesque gravida cursus posuere. Morbi sodales, neque a eleifend fermentum, ante ex convallis metus, et tempor erat tellus in nisi.
  60. </p>
  61. </div>
  62. </div>
  63. </div>
  64. <div style="margin: 0px; float: left; padding: 0px; width: 30px; border-right: 2px solid #909d8f;">
  65. <div class="side-header">
  66. <p style="padding: 2px 0px; position: sticky; top: 40px; font-size: 20px" class="text-center">
  67. <a data-toggle="collapse" data-target="#side-header"><i class="fa-solid fa-arrow-right"></i></a>
  68. </p>
  69. </div>
  70. </div>
  71.  
  72. <main class="col" style="padding: 0px;">
  73. <div style="padding: 2px 0px 0px 10px">
  74. <p style="font-family: Monaco, monospace;">
  75. THIS PAGE IS A HUUUUGE WORK IN PROGRESS!!!!! STAY TUNED <i class="fa-solid fa-user"></i>
  76. <br>
  77. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate diam vitae urna eleifend, et consectetur nisi pretium. Aenean varius ultrices mi tincidunt convallis. Nullam non efficitur est. Etiam ante mi, auctor in augue quis, euismod elementum ex. Nulla quis justo sed arcu aliquam malesuada. Vivamus at pulvinar nunc. Morbi ac ante urna. Etiam eget elementum nulla, eget imperdiet libero. Pellentesque gravida cursus posuere. Morbi sodales, neque a eleifend fermentum, ante ex convallis metus, et tempor erat tellus in nisi.
  78. <br>
  79. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate diam vitae urna eleifend, et consectetur nisi pretium. Aenean varius ultrices mi tincidunt convallis. Nullam non efficitur est. Etiam ante mi, auctor in augue quis, euismod elementum ex. Nulla quis justo sed arcu aliquam malesuada. Vivamus at pulvinar nunc. Morbi ac ante urna. Etiam eget elementum nulla, eget imperdiet libero. Pellentesque gravida cursus posuere. Morbi sodales, neque a eleifend fermentum, ante ex convallis metus, et tempor erat tellus in nisi.
  80. <br>
  81. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate diam vitae urna eleifend, et consectetur nisi pretium. Aenean varius ultrices mi tincidunt convallis. Nullam non efficitur est. Etiam ante mi, auctor in augue quis, euismod elementum ex. Nulla quis justo sed arcu aliquam malesuada. Vivamus at pulvinar nunc. Morbi ac ante urna. Etiam eget elementum nulla, eget imperdiet libero. Pellentesque gravida cursus posuere. Morbi sodales, neque a eleifend fermentum, ante ex convallis metus, et tempor erat tellus in nisi.
  82. <br>
  83. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate diam vitae urna eleifend, et consectetur nisi pretium. Aenean varius ultrices mi tincidunt convallis. Nullam non efficitur est. Etiam ante mi, auctor in augue quis, euismod elementum ex. Nulla quis justo sed arcu aliquam malesuada. Vivamus at pulvinar nunc. Morbi ac ante urna. Etiam eget elementum nulla, eget imperdiet libero. Pellentesque gravida cursus posuere. Morbi sodales, neque a eleifend fermentum, ante ex convallis metus, et tempor erat tellus in nisi.
  84. <br>
  85. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate diam vitae urna eleifend, et consectetur nisi pretium. Aenean varius ultrices mi tincidunt convallis. Nullam non efficitur est. Etiam ante mi, auctor in augue quis, euismod elementum ex. Nulla quis justo sed arcu aliquam malesuada. Vivamus at pulvinar nunc. Morbi ac ante urna. Etiam eget elementum nulla, eget imperdiet libero. Pellentesque gravida cursus posuere. Morbi sodales, neque a eleifend fermentum, ante ex convallis metus, et tempor erat tellus in nisi.
  86. <br>
  87. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate diam vitae urna eleifend, et consectetur nisi pretium. Aenean varius ultrices mi tincidunt convallis. Nullam non efficitur est. Etiam ante mi, auctor in augue quis, euismod elementum ex. Nulla quis justo sed arcu aliquam malesuada. Vivamus at pulvinar nunc. Morbi ac ante urna. Etiam eget elementum nulla, eget imperdiet libero. Pellentesque gravida cursus posuere. Morbi sodales, neque a eleifend fermentum, ante ex convallis metus, et tempor erat tellus in nisi.
  88. </p>
  89. </div>
  90. </main>
  91. </div>
  92. </div>
  93. </div>
  94.  
  95. <!--footer-->
  96. <footer>
  97. © 2025-today. doubly_magic. All rights reserved. <a href="https://neocities.org"><img src="neocities.png" style="height: 25px"></a>
  98. </footer>
  99.  
  100. <!--bootstrap JS-->
  101. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  102. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  103. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  104. </body>
  105. </html>
  106.  
  107.  
  108. HTML END!!!!!!!!!!!!!!!!!!!!
  109.  
  110. --------------------------------------------------------------------------------------------------------------
  111.  
  112. CSS START!!!!!!!!!!!!!!!!!!
  113.  
  114. //* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
  115. HTML content. To learn how to do something, just try searching Google for questions like
  116. "how to change link color." */
  117.  
  118. body {
  119. background-color: #95BF91;
  120. }
  121.  
  122. a:link {
  123. text-decoration: underline;
  124. color: #1c4a75;
  125. }
  126.  
  127. a:visited {
  128. color:#072642;
  129. text-decoration: underline;
  130. }
  131.  
  132. a:hover {
  133. font-style: oblique;
  134. text-decoration: underline;
  135. color: #3c86cb;
  136. }
  137.  
  138. a:active {
  139. text-decoration: underline;
  140. font-style: oblique;
  141. color: #3c86cb;
  142. }
  143.  
  144. header {
  145. background-color: #95BF91;
  146. color: #0e2b0b;
  147. font-family: "Monaco", monospace;
  148. justify-content: center;
  149. text-align: center;
  150. padding: 5px 20px;
  151. border-bottom: 1px solid #909d8f;
  152. }
  153.  
  154. .side-header {
  155. text-align: justify;
  156. background-color: #95BF91;
  157. color: #0e2b0b;
  158. font-family: "Monaco", monospace;
  159. justify-content: center;
  160. padding: 0px;
  161. text-justify: inter-word;
  162. height: 100%;
  163. }
  164.  
  165. .main-nav-link {
  166. color:#0e2b0b;
  167. }
  168.  
  169. .main-nav {
  170. justify-content: center;
  171. }
  172.  
  173. main {
  174. padding: 0px;
  175. background-color: #0e2b0b;
  176. margin: 0px;
  177. width: 100%;
  178. }
  179.  
  180. main div {
  181. color: #95BF91;
  182. }
  183.  
  184. footer {
  185. background-color: #95BF91;
  186. color: #0e2b0b;
  187. font-family: Monaco, monospace;
  188. justify-content: center;
  189. text-align: center;
  190. padding: 5px 20px;
  191. position: absolute;
  192. bottom: 0px;
  193. width: 100%;
  194. border-top: 2px solid #909d8f;
  195. }
  196.  
  197. CSS END!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
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!