neocities tutorial #1 html

// main container (everything NOT in the sections that change outside of music player & marquee)
<div class="main">
  <img src=""welcome to profile" IMG LINK HERE">
  <img src="DOLL IMG LINK HERE" style="position: absolute; left: 20em; top: 0em; width: 350px;">
  <img src=""i love purple" BLINKIE IMG LINK HERE" style="position: absolute; left: 22.2em; top: 22.5em; width: 250px;">
  <div class="button-container"><button><a onclick="loadPage('page1')"><img src="BUTTON PIXEL IMG LINK HERE" style="width: 30px;"></a></button><br><br><button><a onclick="loadPage('page2')"><img src="BUTTON PIXEL IMG LINK HERE" style="width: 30px;"></a></button><br><br><button><a onclick="loadPage('page3')"><img src="BUTTON PIXEL IMG LINK HERE" style="width: 30px;"></a></button><br><br>
  </div>

// MUST PUT THIS AFTER CODE ABOVE AND BEFORE CODE BELOW - allows for website to have "pages" and to change from section to section properly
 <div id="content">
  </div>

// 3 page outline
<script>
    const pages = {
      page1: `CODE HERE`,
      page2: `CODE HERE`,
      page3: `CODE HERE`
    };

// link format - target blank allows page to open in new tab
subscribe to me on <a href="LINK HERE" target="_blank"><mark>youtube</mark></a>

// js allowing page 1 to load by default and ensuring transition from section to section runs smoothly - js cannot be disabled on your browser for this to work (there are alternative methods but those are more complex/less efficient)
function loadPage(pageKey) {
      document.getElementById('content').innerHTML = pages[pageKey];
    }

    loadPage('page1');
  </script>