neocities tutorial #3 html

// first container
<div class="container">
     <div class="one"> <img src="PIXEL LINK HERE" style="width: 19px;"> frutiger aero~
     <br>
    <img src="IMG LINK HERE" style="width: 50px; margin-top: 15px;"><div class="oneone">Mood: Excited <img src="PIXEL LINK HERE"> <br><img src="IMG LINK HERE"></div></div>

// second container
<div class="two">
    <div class="twotwo">
  <input id="search" type="text" placeholder="Search" style="width: 160px; font-family: MS San Serif;"/>
<div class="hello">
<mark> about me </mark> <br>
<img src="PIXEL LINK HERE"> name
<br> and i go by pronouns! <br> <img src="PIXEL LINK HERE"> <age>age</age> years of age :3 welcome to my frutiger aero themed site <br> <img src="IMG LINK HERE" style="width:125px;">
</div>
    </div>
    <img src="IMG LINK HERE" style="width: 190px;">
    </div>

// third container
<div class="three">
    <div class="phone">
<light>1</light> <light>2</light> <light>3</light> <br>
<light>4</light> <light>5</light> <light>6</light> <br>
<light>7</light> <light>8</light> <light>9</light> <br>
<dark>*</dark> <light>0</light> <dark>#</dark>
<div class="icon"><img src="IMG LINK HERE" style="width:60px;"><img src="IMG LINK HERE" style="width:60px;">
    </div>
    </div>
    </div>
    </div>

// tabs
<section class="tabs">
  <menu role="tablist" aria-label="Tabs Template">
    <button role="tab" aria-controls="tab-A" aria-selected="true" style="font-family: MS San Serif;">TAB A TITLE</button>
    <button role="tab" aria-controls="tab-B" aria-selected="false" style="font-family: MS San Serif;">TAB B TITLE</button>
  </menu>
  <article role="tabpanel" id="tab-A"><div class="gray"><guest>Guest User (02:38)</guest><br>text goes here
  </div>
  <div class="white"> <name>Name (02:42)</name> <br>
  text goes here (add pixels if u would like, if not delete the following line)
<img src="PIXEL LINK HERE" style="width: 15px;">
  </div>
  <div class="gray"><guest>Guest User (02:45)</guest><br>text goes here
  </div>
  <div class="white"> <name>Name (02:59)</name> <br>  text goes here (add pixels if u would like, if not delete the following line)
<img src="PIXEL LINK HERE" style="width: 15px;">
  </div>
  <div class="gray"><guest>Guest User (03:01) <img src="https://i4.glitter-graphics.org/pub/1575/1575014z1cafzz3yq.gif"></guest><br> text goes here
  </div>
  </article>
  <article role="tabpanel" id="tab-B" hidden><div class="gray"><guest>Guest User (04:27)</guest><br>text goes here
  </div>
  <div class="white"> <name>Name (04:29)</name> <br>
  text goes here (add pixels if u would like, if not delete the following line)
<img src="PIXEL LINK HERE" style="width: 15px;">
  </div>
  <div class="gray"><guest>Guest User (05:02)</guest><br>text goes here
  </div>
  <div class="white"> <name>Name (05:18)</name> <br> text goes here (add pixels if u would like, if not delete the following line)
<img src="PIXEL LINK HERE" style="width: 15px;">
  </div>
  <div class="gray"><guest>New Friend (05:34) </guest><br> text goes here
  </div>
  </article>
</section>

// blinkie marquee
<div class="buttons-n-blinkers">
  <div>
    <img src="BLINKIE LINK HERE" style="margin-left: 3px;">
    <img src="BLINKIE LINK HERE">
    <img src="BLINKIE LINK HERE">
    <img src="BLINKIE LINK HERE">
    <img src="BLINKIE LINK HERE">
  </div>
    </div>

// copy and paste this after the music player (before /div, /body, and /html)
// this is javascript for the tabs and marquee elements
<script>
  document.querySelectorAll('[role="tablist"]').forEach(tablist => {
    const tabs = tablist.querySelectorAll('[role="tab"]');
    const panels = tablist.parentNode.querySelectorAll('[role="tabpanel"]');

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        tabs.forEach(t => t.setAttribute('aria-selected', 'false'));
        panels.forEach(p => p.hidden = true);

        tab.setAttribute('aria-selected', 'true');
        const panel = document.getElementById(tab.getAttribute('aria-controls'));
        if (panel) panel.hidden = false;
      });
    });
  });
  [...document.querySelectorAll(".buttons-n-blinkers")]
.map((div) => div.children[0])
.forEach((innerDiv) => {
  let follower = innerDiv.cloneNode(true);
  follower.classList.add("follower");
  innerDiv.parentElement.appendChild(follower);
  follower.classList.add("play");
  innerDiv.classList.add("play");
})
</script>