<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The web site of anna-bundle</title>
    <link href="/coolstyle.css" rel="stylesheet" type="text/css" media="all">
    <div class="thewholethang">
    <style>
      .title {
        position: absolute;
        left: 20px;
        bottom: 20px;
        color: #80270;
        margin: 0; 
        z-index: 2; /* Higher than image */
        
      }
      
    </style>
  </head>
  <body>

<div id="header">
      <img src="https://i.postimg.cc/Mp8g5byN/tempheader.png">
      <h1 class="title">anna-bundle.neocities.org</h1>
    </div>
    
    <div class="box"></div>
    <h1>Welcome to my Website!</h1>

<!-- 
    <p>This is a paragraph! Here's how you make a link: <a href="https://neocities.org">Neocities</a>.</p>

<p>Here's how you can make <strong>bold</strong> and <em>italic</em> text.</p>

<p>Here's how you can add an image:</p>
    <img src="/neocities.png">
-->
    <p>Behold! My buttons!!!</p>
<div id="bundlebuttons">
<div class="bundlebuttons">
    <ul>

<li><div class="bundlebuttons">&nbsp;<a href="https://anna-bundle.neocities.org/about%20me/aboutme"> Webmaster! </a></div></liv>
      <li><div class="bundlebuttons">&nbsp;<a href="https://anna-bundle.neocities.org/random%20animal!/animals"> A random animal! </a></div></liv>
      <li><div class="bundlebuttons">&nbsp;<a href="https://anna-bundle.neocities.org/website%20helper%20sources/newguyindex">Credits for All This </a></div></liv>
      <li><div class="bundlebuttons">&nbsp<a href="https://anna-bundle.neocities.org/lua%20help/luahelp">Page for helping me learn lua</a> </div></li>
      
    </ul>
    </div>

<!-- This is the update log! 
     lemme just uhhh...
     
         <tr>
    <th>x/x/25: <li> <a href=LINK/>Summary of update.</a></li></th>
    <td>Commentary.</td>
  </tr>

https://ribo.zone/free/layouts/ (cyanobacteria)

--> 
    <div id= updatelog>
      <div class="updatelogtxt">
        
        <p>
          <h1> Update Log</h1>
          <table>

<tr>
    <th>7/18/25: <li> <a href=LINK/>Made a border!!!</a></li></th>
    <td>And now trying to make the background kind of white but not entirely white... and not making everything transparent when i try to make it transparent too!!! and make the header image centered. right now its slightly to the right and it's pissing me off!!! raaaaaah!!!!!!!!</td>
  </tr>
               <tr>
    <th>7/17/25: <li> <a href=https://www.youtube.com/watch?v=Z4pCqK-V_Wo/>Wrote some notes to learn how to id things in CSS.</a></li></th>
    <td>Also tried actually implementing them, but that didn't exactly work out......... :(</td>
  </tr>
    <th>7/14/25: <li> <a href=https://www.digitalocean.com/community/tutorials/how-to-style-the-body-of-a-website-with-css/>Changed the color of hyperlinks!</a></li></th>
    <td>Doesn't this look so much nicer? I also tried changing the header image to <a href= https://sentry.io/answers/how-do-i-auto-resize-an-image-to-fit-a-div-container/>fit the screen of</a> <a href=https://www.youtube.com/watch?v=fdGqK2-hVK8> whatever device you look at the site on,</a> but there's no way for me to test this properly until the neocities updates, and that can take a couple of hours sometimes.</td>
  </tr>
            <tr>
    <th>7/13/25: <li> Updated the lua page by like two lines.</a></li></th>
    <td>It's early in the morning, so I may update it more later today. We'll see.</td>
  </tr>

<th>7/11/25: <li> <a href=https://www.w3schools.com/css/css3_buttons.asp/>Try to make the buttons buttons,</a> give up, <a href=https://ribo.zone/free/layouts/>add a new css theme instead,</a> (Cyanobacteria) and <a href=https://www.magicpattern.design/tools/css-backgrounds/>make a neat background.</a></li></th>
    <td>one day im gonna learn to make buttons. and move them around. i swear on my life. also, this code is starting to get kind of big, it's worrying me. can't wait until i figure out how to move all of this as possible into the css file! </td>
  </tr>
          <th> 7/7/25: Make the roblox learning lua page.</th>
          <td> i'll be adding more to it as time goes on, including sample scripts from the studio lite game!!</td></tr>
                     <tr>
    <th>7/6/25: <li> Realize the font doesn't work. Also nothing except write this update.</a></li></th>
    <td>Life, man... At least I have this animal crossing noise maker whenever i type. It's kinda fun, it makes me want to type faster! hope it doesn't get too annoying at some point.</td>
  </tr>
            <tr>
    <th>7/5/25: <li> <a href=https://www.dafont.com/funhouse.font>Changed </a><a href=https://www.reddit.com/r/neocities/comments/p2ohhf/martindisks_messy_guide_to_having_custom_fonts_on/>font.</a></li></th>
    <td>Also with help from my friend Nails!! i was gonna say i'm running out of steam on what to add, but now that i think of it, that can be my next new thing tomorrow! a place to find my neocities friends... yesss.....</td>
  </tr>
             <tr>
    <th>7/3/25: <li><a href=https://www.w3schools.com/css/exercise.asp?x=xrcise_border5/>Learned how to make CSS borders</a> and <a href=https://www.w3schools.com/html/html_colors.asp/>made them orange.</a></li></th>
    <td>Remember when I tried making an update every day? I sure do. And then I got busy, and then I crashed out with pms the next day. I'm still trying to keep the momentum tho, despite missing a couple days.</td>
  </tr>
                     <tr>
    <th>6/30/25: <li> <a href=https://kidpix.app//>Made a header.</a></li></th>
    <td>I was inspired by <a href=https://burgeritchi.neocities.org//>this site</a>, and after consulting my dad a bunch, i figured out how to make a photo the header! it doesn't look as cool (yet), but it's a start.</td>
  </tr>
    <th>6/29/25: <li> Tried to add a <a href=https://ishimori.crd.co/#codes/>supposedly rainbow gradient</a> to the background.</li></th>
    <td>Yeahhhh i was busy af but i told myself yesterday if i kept updating this until friday i would buy myself a pie, so..... wait Holy shit. Custom tumblr themes also work as a jumping off point to a neocities site. Holy shit this is a game changer, I think.</td>
  </tr>
             <tr>
    <th>6/28/25: <li> <a href=https://www.goatlings.com/forumguide/>Basic HTML.</a></li></th>
    <td>Yeah, I gave up on the whole "top left"-ing text in this for now. Aw well.</td>
  </tr>
  <tr>
    <th>6/27/25: <li> <a href=https://www.w3schools.com/html/html_tables.asp>Made this a table so there's even columns.</a></li></th>
    <td>Okay cool, this automatically splits these evenly. Very nice!! Let's see what the rest of this looks like in a table... Let's see what this looks like without a link for the left side, though!</td>
  </tr>
  <tr>
    <th>6/26/25: I MADE THIS A SCROLLBOX!!!!</th>
    <td>i can learn to bold text later. for now.... check this out dude. this is amazing. as long as i don't make super long words, it won't scroll horizontally either! i wonder how this looks on the phone...</td>
  </tr>
  </table>
          <p> 6/25/25: Made a to-do list.</p>
          <p> 6/24/25: Added an update log. I hope it doesn't explode everything. See, I could make an extra column for TLDR stuff and all my thoughts using <a href="https://goblin-heart.net/sadgrl/learn/articles/text-columns">this thing</a>, but i'm scared my brain will die if i put too much code on this page, which ik is something i need to get used to, but that'll come with time. Idk if you guys can tell, but i'm not exactly the best at html and css yet, so I'm going to try adding updates every day. Wish me luck, hopefully tomorrow I can implement a to-do list!</p>
        </p>
      </div>

<div id= todo>
      <div class="todolist">
          <h1> To Do List:</h1>
        <ul>
          <li> Get rid of the shadow on my banner, link it to my homepage, and add an oatmeal (that's the bunny's name) to all pages with a link to go back.</li>
          <li> Make a page that's literally just a playlist to browse nostalgic internet stuff to, with some cool links to get started.</li>
          <li> Make a page to help with learning roblox lua!</li>
          <li> Add my friends here.</li>
          <li> center the border, add a background behind it, </li>
          <li> Add an about page</li>
          <li> Design what the website's gonna look like</li>
          <li> Keep using <li></li> for everything (idk if you guys can see it and that's okay)</li>
        </ul>
      </div>

<p>To learn more HTML/CSS, check out these <a href="https://neocities.org/tutorials">tutorials</a>!</p>
    
    <script>
      // Your JavaScript code would go here
    </script>
  </body>
  </div>
</html>

/* so you CAN put multiple css scripts in the same css file, as long as it's predecessed by '.(name of div class here). that is so fucking awesome." */
.thewholethang {
  border: 5px solid green;
  padding: 5px 5px; /* Add some space between the border and content */
  margin: 20px; /* Add some space between the border and browser edges */

}

#header {
  width: 100%; /* Make header fill its container */
  max-width: 100%; /* Prevent overflow */
  position: relative;
  margin-bottom: 20px;
  border: 3px solid orange;
  
}

#header img {
  width: 100%; /* Make image fill the header */
  height: auto; /* Maintain aspect ratio */
  max-height: 300px; /* Keep your preferred max height */
  object-fit: contain; /* Ensure whole image is visible */
  z-index: 1;
}

body {
  background-color: white;
  color: green;
  font-family: Times;

}

h1 {
   border-style: dashed; 
  border-color: orange;
}

.updatelogtxt {max-width: 45%; max-height: 150px; overflow-y: auto;}
#th {
  vertical-align: top;
	border-style: double;
	text-align: left;
	padding: 10px

}

body {
	padding: 10px;
	/* page background pattern */
	background-color: #fffaed;
background-image: radial-gradient(#975100 0.5px, #fffaed 0.5px);
background-size: 10px 10px;
}

.todolist {
	max-width: 55rem;
  min-width: 600px;
	margin: 5vw auto 12px auto;
  border-style: double;
	border: 6px ridge var(--border);
	outline: 3px solid var(--gradientTop);
	outline-offset: 4px;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  border-style: double;
  text-align: left;
  vertical-align: top; /* This makes the content align to the top */
  width: 20%; /* Adjust this percentage as needed */
  position: sticky;
  left: 0;
 
  z-index: 2; /* Ensure it stays above other content */
}

td {
  vertical-align: top; 
  padding: 10px;
}

/* Send help. I have no idea if this .header img thing actually works... also this is what a comment looks like in CSS.*/

.header img {
	object-fit: fill;
	overflow-y: clip
  }

a {
  color: #d2a134; 
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground