Search code examples
javascripthtmlcssdarkmode

Why is my javascript not working in my navigation section?

So I made a JavaScript button to toggle dark mode on my page. The problem is that it works everywhere except for in my "navigation menu" section at the top of the page. Ideally, I would want the white text to change to black for all text in this area, including sub-menus/links, etc, like it does for everything else on the page, and the light gray background (just the part in the top navigation bar RGB(59, 58, 58) ) to change to blue, when switched over to "light mode". I don't have the gray to blue background part coded yet, but I can't figure out why the text isn't even changing from white to black. Can someone tell me what is wrong and possibly the easiest way to get it working?

My code:

// dark mode button onchange call multiple functions //
function myFunction() {
  toggleDarkMode();
  swapText();
}

// toggle dark mode//
function toggleDarkMode() {

  var element = document.body;
  element.classList.toggle("dark-mode");
}

// change dark mode button text //
function swapText() {
  var x = document.getElementById("mode");
  if (x.innerHTML === "DARK MODE") {
    x.innerHTML = "LIGHT MODE";
  } else {
    x.innerHTML = "DARK MODE";
  }
}

document.querySelector('#copyright-year').innerText = new Date().getFullYear();
/* My external CSS style sheet */


/* Defaults background color */

body {
  background-color: #222
}


/* CSS for my Links Section / Navigation Menu */

.navbar {
  overflow: hidden;
  background-color: rgb(59, 58, 58);
}

.navbar a {
  float: left;
  font-size: 24px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 24px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #222;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(59, 58, 58);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #222;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.intro {
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 50px;
}

.bio {
  font-size: 24px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.pics {
  font-size: 24px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 25px;
}

a {
  text-decoration: none;
}

.container {
  width: 100%;
  text-align: center;
}

.vids {
  display: inline-block;
}


/* The switch - the box around the slider */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: rgb(59, 58, 58);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: rgb(14, 112, 224);
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/*dark mode button styling and position */

.button {
  text-align: right
}

.dark-mode {
  background-color: white;
  color: black;
}

footer {
  padding: 1px 1px;
  margin: auto;
  width: 50%;
  text-align: center;
}


/* Internal CSS from here */


/* CSS to make ToolTip*/

.tooltip {
  position: relative;
  margin: auto;
  width: 50%;
  text-align: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 100%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.video-iframe {
  height: 100vh;
  width: 100vw;
}


/*default body styling */

body {
  font-size: 24px;
  font-family: 'Courier New';
  font-weight: bold;
  color: white;
}
<header>

  <nav>
    <div class="navbar">
      <a href="index.html">Home</a>
      <div class="dropdown">
        <button style="font-weight: bold;" class="dropbtn">Past Assignments
            <i class-"fa fa-caret-down"></i>
          </button>
        <div class="dropdown-content">
          <a href="FirstPage.html">First Page</a>
          <a href="FavoriteFood.html">Favorite Food Assignment</a>
          <a href="LinksAssignment.html">Links Assignment</a>
          <a href="Tables.html">Tables Assignment</a>
          <a href="Forms.html">Forms Assignment</a>
        </div>
      </div>
      <div class="dropdown">
        <button style="font-weight: bold;" class="dropbtn">Current Assignment 
            <i class="fa fa-caret-down"></i>
          </button>
        <div class="dropdown-content">
          <a href="JavaScript.html">JavaScript Assignment</a>
        </div>
      </div>

      <a href="">Atlas</a>
      <a href="">Canvas</a>
      <a href="">Contact</a>
      <!-- New email link -->

    </div>
  </nav>
</header>


<div style="text-align:right;" id="mode">DARK MODE</div>


<div class="button">
  <label class="switch">
      <input type="checkbox" onchange="myFunction()">
      <span class="slider round"></span>
    </label>
</div>



<div class="intro">
  <h3>Hi. Intro goes here.
    <br><br> More intro goes here.</h3>
</div>


<div class="bio">
  <img src="" alt="none" style="border-radius: 50%;">
  <!-- rounded image -->
  <p>BIO goes here<br><span style="font-size: 14pt;">More BIO goes here.</span><br>
    <span style="font-size: 14pt;">Even more Bio goes here.</span><br>
    <a href="">
      <img src="" alt="none" style="border-radius: 5px 5px 5px 5px" ;>
    </a>
    <a href="">
      <img src="" alt="none">
    </a>


  </p>
</div>


<!-- Paragraph with tooltip text when you hover over it -->
<div class="pics">
  <p>
    <div class="tooltip">Picture and video descriptions go here.</p><br>
  <span class="tooltiptext">ToolTip text goes here</span></div>
</div>

<!-- More images and videos -->
<div class="container">
  <div class="vids">
    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none"><br>

    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none">

    <!-- Video with player and controls -->
    <video style="height: 267px; width: 200px; object-fit: cover;" controls> 
      <source src="pics/Luna5.MP4" type="video/mp4">
    </video></div>

</div>

<br><br><br><br>

<footer>

  <p>Copyright <span id="copyright-year">2021</span>. All Rights Reserved.</p>

</footer>

Solution

  • Using CSS class.

    The problem is you're not applying the dark mode class on the navbar. All you need to do is create a dark mode class for navbar and apply it inside the toggleDarkMode function.

    Now, you need to overwrite all default styles using this dark mode class.

    Let's add a nav-dark class in your toggleDarkMode function.

    var navbar = document.querySelector(".navbar");
navbar.classList.toggle("nav-dark-mode");

    Now using this nav-dark class let's overwrite the styles in css. For brevity I've only showed the color and background-color styles below.

    .navbar {
  background-color: rgb(59, 58, 58);
}

/* DARK MODE */
.nav-dark {
  background-color: steelblue;
}

.navbar a {
  color: white;
}

/* DARK MODE */
.nav-dark a {
  color: black;
}

.dropdown .dropbtn {
  color: inherit; /* Make this inherit */
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #222;
}

/* DARK MODE */
.nav-dark a:hover,
.nav-dark .dropdown:hover .dropbtn{
  background-color: rgba(255, 255, 255, 0.3);
}

.dropdown-content {
  background-color: rgb(59, 58, 58);
}

/* DARK MODE */
.nav-dark .dropdown-content {
  background-color: steelblue;
}

.dropdown-content a {
  color: white;
}

/* DARK MODE */
.nav-dark .dropdown-content a {
  color: black;
}

.dropdown-content a:hover {
  background-color: #222;
}

/* DARK MODE */
.nav-dark .dropdown-content a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}


    // dark mode button onchange call multiple functions //
function myFunction() {
  toggleDarkMode();
  swapText();
}

// toggle dark mode//
function toggleDarkMode() {

  var element = document.body;
  element.classList.toggle("dark-mode");
  
  var navbar = document.querySelector(".navbar");
  navbar.classList.toggle("nav-dark");
}

// change dark mode button text //
function swapText() {
  var x = document.getElementById("mode");
  if (x.innerHTML === "DARK MODE") {
    x.innerHTML = "LIGHT MODE";
  } else {
    x.innerHTML = "DARK MODE";
  }
}

document.querySelector('#copyright-year').innerText = new Date().getFullYear();
    /* My external CSS style sheet */


/* Defaults background color */

body {
  background-color: #222
}


/* CSS for my Links Section / Navigation Menu */

.navbar {
  overflow: hidden;
  background-color: rgb(59, 58, 58);
}

/*dark mode for navbar*/
.nav-dark {
  background-color: steelblue;
}

.navbar a {
  float: left;
  font-size: 24px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/*dark mode for navbar*/
.nav-dark a {
  color: black;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 24px;
  border: none;
  outline: none;
  color: inherit;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #222;
}

/*dark mode for navbar*/
.nav-dark a:hover,
.nav-dark .dropdown:hover .dropbtn{
  background-color: rgba(255, 255, 255, 0.3);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(59, 58, 58);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.nav-dark .dropdown-content {
  background-color: steelblue;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.nav-dark .dropdown-content a {
  color: black;
}

.dropdown-content a:hover {
  background-color: #222;
}

.nav-dark .dropdown-content a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.intro {
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 50px;
}

.bio {
  font-size: 24px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.pics {
  font-size: 24px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 25px;
}

a {
  text-decoration: none;
}

.container {
  width: 100%;
  text-align: center;
}

.vids {
  display: inline-block;
}


/* The switch - the box around the slider */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: rgb(59, 58, 58);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: rgb(14, 112, 224);
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/*dark mode button styling and position */

.button {
  text-align: right
}

.dark-mode {
  background-color: white;
  color: black;
}

footer {
  padding: 1px 1px;
  margin: auto;
  width: 50%;
  text-align: center;
}


/* Internal CSS from here */


/* CSS to make ToolTip*/

.tooltip {
  position: relative;
  margin: auto;
  width: 50%;
  text-align: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 100%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.video-iframe {
  height: 100vh;
  width: 100vw;
}


/*default body styling */

body {
  font-size: 24px;
  font-family: 'Courier New';
  font-weight: bold;
  color: white;
}
    <header>

  <nav>
    <div class="navbar">
      <a href="index.html">Home</a>
      <div class="dropdown">
        <button style="font-weight: bold;" class="dropbtn">Past Assignments
            <i class-"fa fa-caret-down"></i>
          </button>
        <div class="dropdown-content">
          <a href="FirstPage.html">First Page</a>
          <a href="FavoriteFood.html">Favorite Food Assignment</a>
          <a href="LinksAssignment.html">Links Assignment</a>
          <a href="Tables.html">Tables Assignment</a>
          <a href="Forms.html">Forms Assignment</a>
        </div>
      </div>
      <div class="dropdown">
        <button style="font-weight: bold;" class="dropbtn">Current Assignment 
            <i class="fa fa-caret-down"></i>
          </button>
        <div class="dropdown-content">
          <a href="JavaScript.html">JavaScript Assignment</a>
        </div>
      </div>

      <a href="">Atlas</a>
      <a href="">Canvas</a>
      <a href="">Contact</a>
      <!-- New email link -->

    </div>
  </nav>
</header>


<div style="text-align:right;" id="mode">DARK MODE</div>


<div class="button">
  <label class="switch">
      <input type="checkbox" onchange="myFunction()">
      <span class="slider round"></span>
    </label>
</div>



<div class="intro">
  <h3>Hi. Intro goes here.
    <br><br> More intro goes here.</h3>
</div>


<div class="bio">
  <img src="" alt="none" style="border-radius: 50%;">
  <!-- rounded image -->
  <p>BIO goes here<br><span style="font-size: 14pt;">More BIO goes here.</span><br>
    <span style="font-size: 14pt;">Even more Bio goes here.</span><br>
    <a href="">
      <img src="" alt="none" style="border-radius: 5px 5px 5px 5px" ;>
    </a>
    <a href="">
      <img src="" alt="none">
    </a>


  </p>
</div>


<!-- Paragraph with tooltip text when you hover over it -->
<div class="pics">
  <p>
    <div class="tooltip">Picture and video descriptions go here.</p><br>
  <span class="tooltiptext">ToolTip text goes here</span></div>
</div>

<!-- More images and videos -->
<div class="container">
  <div class="vids">
    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none"><br>

    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none">

    <!-- Video with player and controls -->
    <video style="height: 267px; width: 200px; object-fit: cover;" controls> 
      <source src="pics/Luna5.MP4" type="video/mp4">
    </video></div>

</div>

<br><br><br><br>

<footer>

  <p>Copyright <span id="copyright-year">2021</span>. All Rights Reserved.</p>

</footer>

    Using JS and CSS variables.

    If you want to achieve this using JavaScript, you can use css variables for color and background-color and then change it using css.

    So, the only three varibles you need for navbar are the following:

    :root {
  --nav-bg: rgb(59, 58, 58);
  --nav-clr: #fff;
  --nav-item-hover: #222;
}

    Then you can change these variables inside toggleDarkMode function like this:

    document.querySelector(":root").style.setProperty('--nav-bg', 'steelblue');
document.querySelector(":root").style.setProperty('--nav-clr', '#000');
document.querySelector(":root").style.setProperty('--nav-item-hover', 'rgba(255, 255, 255, 0.3)');


    // dark mode button onchange call multiple functions //
function myFunction() {
  toggleDarkMode();
  swapText();
}

// toggle dark mode//
function toggleDarkMode() {

  var element = document.body;
  element.classList.toggle("dark-mode");
  
  document.querySelector(":root").style.setProperty('--nav-bg', 'steelblue');
  document.querySelector(":root").style.setProperty('--nav-clr', '#000');
  document.querySelector(":root").style.setProperty('--nav-item-hover', 'rgba(255, 255, 255, 0.3)');
}

// change dark mode button text //
function swapText() {
  var x = document.getElementById("mode");
  if (x.innerHTML === "DARK MODE") {
    x.innerHTML = "LIGHT MODE";
  } else {
    x.innerHTML = "DARK MODE";
  }
}

document.querySelector('#copyright-year').innerText = new Date().getFullYear();
    /* My external CSS style sheet */
:root {
  --nav-bg: rgb(59, 58, 58);
  --nav-clr: #fff;
  --nav-item-hover: #222;
}

/* Defaults background color */

body {
  background-color: #222;
}

/* CSS for my Links Section / Navigation Menu */

.navbar {
  overflow: hidden;
  background-color: var(--nav-bg);
}

.navbar a {
  float: left;
  font-size: 24px;
  color: var(--nav-clr);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 24px;
  border: none;
  outline: none;
  color: inherit;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: var(--nav-item-hover);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--nav-bg);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: var(--nav-clr);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: var(--nav-item-hover);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.intro {
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 50px;
}

.bio {
  font-size: 24px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.pics {
  font-size: 24px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 25px;
}

a {
  text-decoration: none;
}

.container {
  width: 100%;
  text-align: center;
}

.vids {
  display: inline-block;
}


/* The switch - the box around the slider */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: rgb(59, 58, 58);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: rgb(14, 112, 224);
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/*dark mode button styling and position */

.button {
  text-align: right
}

.dark-mode {
  background-color: white;
  color: black;
}

footer {
  padding: 1px 1px;
  margin: auto;
  width: 50%;
  text-align: center;
}


/* Internal CSS from here */


/* CSS to make ToolTip*/

.tooltip {
  position: relative;
  margin: auto;
  width: 50%;
  text-align: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 100%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.video-iframe {
  height: 100vh;
  width: 100vw;
}


/*default body styling */

body {
  font-size: 24px;
  font-family: 'Courier New';
  font-weight: bold;
  color: white;
}
    <header>

  <nav>
    <div class="navbar">
      <a href="index.html">Home</a>
      <div class="dropdown">
        <button style="font-weight: bold;" class="dropbtn">Past Assignments
            <i class-"fa fa-caret-down"></i>
          </button>
        <div class="dropdown-content">
          <a href="FirstPage.html">First Page</a>
          <a href="FavoriteFood.html">Favorite Food Assignment</a>
          <a href="LinksAssignment.html">Links Assignment</a>
          <a href="Tables.html">Tables Assignment</a>
          <a href="Forms.html">Forms Assignment</a>
        </div>
      </div>
      <div class="dropdown">
        <button style="font-weight: bold;" class="dropbtn">Current Assignment 
            <i class="fa fa-caret-down"></i>
          </button>
        <div class="dropdown-content">
          <a href="JavaScript.html">JavaScript Assignment</a>
        </div>
      </div>

      <a href="">Atlas</a>
      <a href="">Canvas</a>
      <a href="">Contact</a>
      <!-- New email link -->

    </div>
  </nav>
</header>


<div style="text-align:right;" id="mode">DARK MODE</div>


<div class="button">
  <label class="switch">
      <input type="checkbox" onchange="myFunction()">
      <span class="slider round"></span>
    </label>
</div>



<div class="intro">
  <h3>Hi. Intro goes here.
    <br><br> More intro goes here.</h3>
</div>


<div class="bio">
  <img src="" alt="none" style="border-radius: 50%;">
  <!-- rounded image -->
  <p>BIO goes here<br><span style="font-size: 14pt;">More BIO goes here.</span><br>
    <span style="font-size: 14pt;">Even more Bio goes here.</span><br>
    <a href="">
      <img src="" alt="none" style="border-radius: 5px 5px 5px 5px" ;>
    </a>
    <a href="">
      <img src="" alt="none">
    </a>


  </p>
</div>


<!-- Paragraph with tooltip text when you hover over it -->
<div class="pics">
  <p>
    <div class="tooltip">Picture and video descriptions go here.</p><br>
  <span class="tooltiptext">ToolTip text goes here</span></div>
</div>

<!-- More images and videos -->
<div class="container">
  <div class="vids">
    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none"><br>

    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none">

    <!-- Video with player and controls -->
    <video style="height: 267px; width: 200px; object-fit: cover;" controls> 
      <source src="pics/Luna5.MP4" type="video/mp4">
    </video></div>

</div>

<br><br><br><br>

<footer>

  <p>Copyright <span id="copyright-year">2021</span>. All Rights Reserved.</p>

</footer>