javascript - 为什么我的 javascript 在我的导航部分中不起作用？

Question

所以我制作了一个 JavaScript 按钮来在我的页面上切换暗模式。问题是它在任何地方都可以使用，除了页面顶部的“导航菜单”部分。理想情况下，我希望此区域中的所有文本（包括子菜单/链接等）的白色文本变为黑色，就像页面上的所有其他内容一样，以及浅灰色背景（只是顶部的部分）导航栏 RGB(59, 58, 58) ) 在切换到“灯光模式”时变为蓝色。我还没有对灰色到蓝色背景部分进行编码，但我无法弄清楚为什么文本甚至没有从白色变为黑色。有人能告诉我什么是错的，并且可能是让它工作的最简单方法吗？

我的代码：

// 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>

标签： javascripthtmlcssdarkmode

Answer 1

使用 CSS 类。

问题是您没有在导航栏上应用暗模式类。您需要做的就是为导航栏创建一个暗模式类并将其应用到toggleDarkMode函数中。

现在，您需要使用此暗模式类覆盖所有默认样式。

让我们在您的函数中添加一个nav-dark类。toggleDarkMode

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

现在使用这个nav-dark类让我们覆盖css中的样式。为简洁起见，我只展示了下面的color和background-color样式。

.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>

---

使用 JS 和 CSS 变量。

如果您想使用 JavaScript 实现这一点，您可以使用 css 变量，color然后background-color使用 css 更改它。

因此，导航栏所需的唯一三个变量如下：

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

然后你可以像这样在函数内部更改这些变量toggleDarkMode：

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>