neocities tutorial #4 html

// note - codes will not look correct until ALL css and html has been copied in
// container positioning and top css title bar
<div class="container">

  <link rel="stylesheet" href="https://unpkg.com/xp.css">
  <div class="title-bar">
  <div class="title-bar-text">text goes here</div>
  <div class="title-bar-controls">
  <a href="link goes here" target="_blank"><button aria-label="Close"></button></a>
  </div>
  </div>

// main and menu containers, text, and images
// width of images can be adjusted
  <div class="main">
  Select a picture to represent you that others will see in instant message conversations:
  <div class="top">Display picture</div>
  <div class="bottom">
  <div class="images">
  <img src="IMG LINK HERE" style="width: 75px; display: block;">
  <img src="IMG LINK HERE" style="width: 75px; display: block;">
  <img src="IMG LINK HERE" style="width: 75px; display: block;">
  <img src="IMG LINK HERE" style="width: 75px; display: block;">
  <img src="IMG LINK HERE" style="width: 75px; display: block;">
  </div>

// menu text leading to pages of site
// if more or less pages needed, add more lines or delete lines
<div class="text">
  <a onclick="loadPage('page1')"><highlight>text goes here</highlight></a><br>
  <a onclick="loadPage('page2')"><highlight>text goes here</highlight></a><br>
  <a onclick="loadPage('page3')"><highlight>text goes here</highlight></a><br>
  <a onclick="loadPage('page4')"><highlight>text goes here</highlight></a><br>
  <a onclick="loadPage('page5')"><highlight>text goes here</highlight></a></div>

</div>

// buttons and preview text on the side, "download more pictures" linked text below the scrollbox
<div class="next">
  <button style="color: black !important;">Browse...</button><br><br>
  <button style="color: black !important;">Remove</button><br><br>
  Preview
  </div>

  <div class="link">
  <a href="link goes here" target="_blank">Download more pictures...</a>
  </div>

// all 5 scrollbox pages, add or delete as desired, only thing u need to edit is the picture/text
<div id="content">
  </div>

  <script>
    const pages = {
      page1: `<div class="lyrics"><figure class="blurfilter slidey">
<img src="IMG LINK HERE">
<figcaption>
text goes here (use <br> for line breaks)
</figcaption>
</figure></div>`,
      page2: `<div class="lyrics"><figure class="blurfilter slidey">
<img src="IMG LINK HERE">
<figcaption>
text goes here (use <br> for line breaks)
</figcaption>
</figure></div>`,
      page3: `<div class="lyrics"><figure class="blurfilter slidey">
<img src="IMG LINK HERE">
<figcaption>
text goes here (use <br> for line breaks)
</figcaption>
</figure></div>`,
page4: `<div class="lyrics"><figure class="blurfilter slidey">
<img src="IMG LINK HERE">
<figcaption>
text goes here (use <br> for line breaks)
</figcaption>
</figure></div>`,
page5: `<div class="lyrics"><figure class="blurfilter slidey">
<img src="IMG LINK HERE">
<figcaption>
text goes here (use <br> for line breaks)
</figcaption>
</figure></div>`,
    };

    function loadPage(pageKey) {
      document.getElementById('content').innerHTML = pages[pageKey];
    }

    loadPage('page1');
  </script>

// end divs and 3 buttons at the bottom (margins can be adjusted)
<div class="buttons">
  <button style="margin-right: 155px; color: black !important;">OK</button><button style="margin-right: 155px; color: black !important;">Cancel</button><button style="color: black !important;">Help</button>
  </div>

  </div>

  </div>