API tools faq
paste
iinkweed

sticky header test

iinkweed
Jan 8th, 2026 (edited)
28
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="shortcut icon" href="favicon.gif">
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
  8. <title>inkbook</title>
  9.  
  10. </head>
  11.  
  12.  
  13. <body>
  14.  
  15. <div id="container">
  16.  
  17. <div id="header" class="header">
  18. <div class="navbar">
  19. <a href="/">Home</a><img src="favicon.gif" align="right" height="20">
  20. </div>
  21. <img src="/assets/goop.gif" width=700px;>
  22. </div>
  23.  
  24.  
  25. <div id="introcontent">
  26. <div class="intro">
  27. baby's <s>first</s> <s>second</s> <s>third</s> <s>fourth</s> fifth coding attempt
  28. <br>
  29. i am learning backwards by breaking things. mwah
  30. <br>
  31. </div>
  32. </div>
  33.  
  34.  
  35. <div id="leftcolumn">
  36. <div class="lefttitle">
  37. to do <img src="/assets/close.png" align="right" height="10">
  38. </div>
  39. <div class="box">
  40. <ul>
  41. <li><s>style intro box</s>
  42. <li><s>pixels > percents</s>
  43. <li>font size
  44. <li>fix sticky header?????
  45. <li><s>upload gif</s> and fix margin
  46. <li>make mobile responsive > this one's gonna hurt
  47. </ul>
  48. </div>
  49.  
  50. <div class="lefttitle">
  51. navigation <img src="/assets/close.png" align="right" height="10">
  52. </div>
  53. <div class="box">
  54. <ul>
  55. <li>links
  56. </ul>
  57. </div>
  58.  
  59. <div class="lefttitle">
  60. blinkies <img src="/assets/close.png" align="right" height="10">
  61. </div>
  62. <div class="box">
  63. <center>
  64. <img src="https://blinkies.cafe/b/display/0210-werewolfmoonhowl.gif" width=200px;>
  65. </center>
  66. </div>
  67.  
  68. <div class="lefttitle">
  69. the moon today <img src="/assets/close.png" align="right" height="10">
  70. </div>
  71. <div class="box">
  72. <!-- © wdisseny --><div id="contain_moon" style="text-align:center;padding-bottom:5px;"><div style="font-weight:bold"></div><div style="margin-bottom:-15px;padding:30px;filter:drop-shadow(0 0 30px hsl(220,100%,15%))"></div><div>.</div><div style="font-size:small">.</div></div><script>(function(){var d=new Date().getDate();var m=document.querySelectorAll("#contain_moon div");var a=new XMLHttpRequest();var url="https://www.icalendar37.net/lunar/api/?lang=en&month="+(new Date().getMonth()+1)+"&year="+(new Date().getFullYear())+"&size=100&lightColor=rgb(245,245,245)&shadeColor=rgb(17,17,17)&LDZ="+new Date(new Date().getFullYear(),new Date().getMonth(),1)/1000+"";m[1].style.height="100px";a.onreadystatechange=function(){if(a.readyState==4&&a.status==200){var b=JSON.parse(a.responseText);m[1].innerHTML=b.phase[d].svg;if(typeof moon_widget_loaded=="function")moon_widget_loaded(b);m[2].innerHTML=b.phase[d].npWidget;m[3].innerHTML="Next full moon<br>"+b.nextFullMoon}};a.open("GET",url,true);a.send()})()</script>
  73. </div>
  74.  
  75. <div class="lefttitle">
  76. Resources <img src="/assets/close.png" align="right" height="10"></div>
  77. <div class="box">
  78. <ul>
  79. <li><a href="https://www.w3schools.com">w3schools</a>
  80. <li><a href="https://ribo.zone/free/">ribo.zone</a>
  81. <li><a href="https://itinerae.neocities.org/">itinerae</a>
  82. <li><a href="https://blinkies.cafe/">blinkies.cafe</a>
  83. </ul>
  84. </div>
  85.  
  86. </div>
  87.  
  88.  
  89. <div id="content">
  90. <div class="contenttitle">
  91. title <img src="/assets/close.png" align="right" height="10">
  92. </div>
  93. <div class="box">
  94. ough. text
  95. </div>
  96. </div>
  97.  
  98. <div id="content">
  99. <div class="contenttitle">
  100. title <img src="/assets/close.png" align="right" height="10">
  101. </div>
  102. <div class="box">
  103. ough. even more text
  104. <br><br><br><br><br><br>
  105. but longer
  106. </div>
  107. </div>
  108.  
  109. <div id="content">
  110. <div class="contenttitle">
  111. title <img src="/assets/close.png" align="right" height="10">
  112. </div>
  113. <div class="box">
  114. enought already
  115. </div>
  116. </div>
  117.  
  118. <div id="content">
  119. <div class="contenttitle">
  120. gifypet! <img src="/assets/close.png" align="right" height="10">
  121. </div>
  122. <div class="box">
  123. <center><iframe width="314" height="321" scrolling="no" src="https://gifypet.neocities.org/pet/pet.html?name=Razz&dob=886767600&gender=b&element=Slime&pet=https://plurfur.neocities.org/clickpets/razzpet.gif&map=https%3A//plurfur.neocities.org/clickpets/Murky_Forest_depths.png&background=https%3A//plurfur.neocities.org/clickpets/stars.gif&tablecolor=%2300ffff&textcolor=%2300ff00" frameborder="0"></iframe></center>
  124. </div>
  125. </div>
  126.  
  127. <div id="content">
  128. <div class="contenttitle">
  129. see you <img src="/assets/close.png" align="right" height="10">
  130. </div>
  131.  
  132. <div class="box">
  133. space cowboy
  134. </div>
  135. </div>
  136.  
  137.  
  138. <div id="footer" class="footer">
  139. footer?
  140. </div>
  141.  
  142.  
  143. </div>
  144. </body>
  145. </html>
  146.  
  147. <style type="text/css">
  148.  
  149. @font-face {
  150. font-family: PMD;
  151. src: url('/fonts/pmdfont.woff');
  152. }
  153.  
  154. body {
  155. background:#000 url(/assets/bg.png);
  156. background-repeat:repeat;
  157. background-attachment: fixed;
  158. text-align:left;
  159. letter-spacing:1px;
  160. font-family:'PMD';
  161. font:12px;
  162. color:#727068;
  163. }
  164.  
  165. a:link, a:visited, a:active {
  166. color:#111;text-decoration:none;
  167. }
  168. a:hover {
  169. color:#999;
  170. }
  171.  
  172. ::-webkit-scrollbar-thumb {
  173. background-color: #fff;
  174. border-radius: 0px;
  175. border:1px solid #999;
  176. }
  177. ::-webkit-scrollbar {
  178. width: 7px; height: 4px;
  179. background: #fff;
  180. }
  181.  
  182.  
  183.  
  184. #container {
  185. margin: 0 auto;
  186. width: 700px;
  187. }
  188.  
  189. #header {
  190. float: left;
  191. background: transparent;
  192. height: auto;
  193. width: 100%;
  194. margin-top: 2%;
  195. }
  196.  
  197. #content {
  198. float: left;
  199. background: transparent;
  200. width: 65%;
  201. margin-top:2%;
  202. }
  203.  
  204. #introcontent {
  205. float: left;
  206. background: transparent;
  207. width: 100%;
  208. margin-top:2%;
  209. }
  210.  
  211. #leftcolumn {
  212. background: transparent;
  213. width: 33%;
  214. float: left;
  215. padding-right:2%;
  216. margin-top:2%;
  217. }
  218.  
  219. #footer {
  220. float: left;
  221. background: transparent;
  222. height: auto;
  223. width: 100%;
  224. background: #FFF;
  225. }
  226.  
  227. .lefttitle {
  228. font:16px 'PMD';
  229. color:#444;
  230. text-transform:uppercase;
  231. background:#66FF33;
  232. padding:4px;
  233. padding-bottom:0px;
  234. border-top-right-radius:5px;
  235. border-top-left-radius:5px;
  236. letter-spacing:2px;
  237. }
  238. .contenttitle {
  239. font:16px 'PMD';
  240. color:#444;
  241. text-transform:uppercase;
  242. background:#66FF33;
  243. padding:4px;
  244. padding-bottom:0px;
  245. border-top-right-radius:5px;
  246. border-top-left-radius:5px;
  247. letter-spacing:2px;
  248. }
  249.  
  250. .box {
  251. background:#fff;
  252. border-bottom-left-radius:5px;
  253. border-bottom-right-radius:5px;
  254. padding:4px;
  255. border:2px solid #66CC33;
  256. border-top:0px;
  257. margin-bottom:12px;
  258. }
  259.  
  260. .intro {
  261. background:#fff;
  262. border-top-left-radius:5px;
  263. border-top-right-radius:5px;
  264. border-bottom-left-radius:5px;
  265. border-bottom-right-radius:5px;
  266. padding:4px;
  267. border:2px solid #66CC33;
  268. margin-bottom:12px;
  269. }
  270.  
  271. .navbar {
  272. font-size:16px 'PMD';
  273. color:#222;
  274. text-transform:uppercase;
  275. background:#66FF33;
  276. padding:4px;
  277. padding-bottom:1px;
  278. border-top-right-radius:5px;
  279. border-top-left-radius:5px;
  280. letter-spacing:2px;
  281. }
  282.  
  283. .header {
  284. position: sticky;
  285. top: 0;
  286. }
  287.  
  288. .footer {
  289. font-size:14px 'PMD';
  290. color:#222;
  291. text-transform:uppercase;
  292. background:#66FF33;
  293. padding:4px;
  294. padding-bottom:1px;
  295. border-top-right-radius:5px;
  296. border-top-left-radius:5px;
  297. letter-spacing:2px;
  298. }
  299.  
  300.  
  301. /* old header font> .bigtitle {
  302. /* font:'PMD';
  303. /* font-size:26px;
  304. /* color:#bbb;
  305. /* text-transform:uppercase;
  306. /* } */
  307.  
  308.  
  309. </style>
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!