How to move a div next to other divs with arrow keys (and make enter click a link)

Question

I am working on redoing my homepage for my Web Design class. I want to recreate the style of the apple II for the project, although I do not want to have the titles of the projects as simply links, as I believe the Apple II did not even have a mouse.

My main plan is to recreate the way that Five Nights at Freddy's 3 did the menu, namely, moving a cursor over the various options and pressing enter to go through that link. I have searched far and wide on the internet, and, since the class mostly goes over HTML and CSS, I don't have much skill in terms of Javascript, meaning I don't really have any idea how to do this at all.

Here is my code

  <div class="crt">
  <div class="title">
  <h1> DIRECTORIES </h1>
  </div>
  <div class="projects">
  <br>
  <a href="Alien.html"> <h1 class="directory"> ] NOUN</h1> </a> <div class="cursor">  </div>
  <br>
  <a href="Convince.html"> <h1 class="directory"> ] CONVINCE</h1> </a>
  <br>
  <a href="Restaurant.html"> <h1 class="directory"> ] RESTAURANT</h1> </a>
  <br>
  <a href="Event/Event.html"> <h1 class="directory"> ] EVENT </h1> </a>
  </div>
  </div>

I have put the div ".cursor" next to the first link option for now, but I am unsure how, if I even can, move it down next to the one for the "convince" project or further, as well as back up.