搜索栏功能

如何解决搜索栏功能

这是我在这里的第一篇文章，也是 html、css 和 js 的新手。

我目前在做一个游戏评测网站，在里面你可以把那些游戏看成卡片，你可以点击每张卡片查看完整评论（底部有试用笔）。

您根本不需要查看 CSS 或 HTML，JS 具有使搜索栏真正起作用的代码。

我之前很少有游戏（卡片），但现在我添加了更多游戏，我发现添加一个搜索字段很实用，人们可以在其中搜索他们想要的游戏名称，然后会出现包含相似性的卡片.我这样做了，效果很好，但它只搜索同一页面中的卡片。

您可以通过搜索来尝试搜索字段（只是为了看看它是否有效）：

• 游戏
• 绝高
• 不是
• 一个人

所以我的目标是实现一些事情，但我不知道如何去做：

1.搜索栏会查找所有游戏，无论它们是否在您搜索的同一页面中

2.如果没有找到，请在搜索栏中的“自动完成”上添加文本

3.。如果您在自动完成结果上用鼠标单击，则不会执行任何操作，因为它不会检测到键盘活动（使用键盘箭头工作）

4.在卡片上添加与搜索栏上显示的结果相同的结果

我什至不确定这一切是否可行，但我真的很感谢您的帮助！

先谢谢你。

/**/
    function search_reviews() {
    let input = document.getElementById('searchbar').value
    input=input.toLowerCase();
    let x = document.getElementsByClassName('grid-item');

    for (i = 0; i < x.length; i++) {
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display="none";
        }
        else {
            x[i].style.display="";
        }
      }
    }

/*Fuente para toda la web*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
  font-family: 'Poppins',sans-serif !important;
}

/*Colores generales de la web*/
:root {
  /*Común*/
  --navbar: linear-gradient(to right,#D05050,#B43A3A);
  --efecto-navbar: #881612;
  --letrafooternavbar: white;
  --dropdown: black;
  --dropdown-hover: #D05050;
  --dropdown-hover-text: white;
  --fondo: white;
  --letra: black;
  --footer: linear-gradient(to right,#B43A3A);
  --botones-fondo: linear-gradient(to bottom right,#B74040,#992c2c);
  --botones-border: linear-gradient(to bottom right,#992c2c);
  --botones-text: white;
  --botones-hover: linear-gradient(to bottom right,#B43A3A);

  /*Especifico de página*/
  --header: linear-gradient(to right,#B43A3A);
  --pagination-fondo: linear-gradient(to right,#B43A3A);
  --pagination-letra: black;
  --pagination-letra-active: white;
  --pagination-hover: lightgrey;
  --card-background: white;
  --card-text: black;
  --card-shadow: #ccc;
  --card-border: rgba(0,.125);
  --label-cat-disabeled: lightgray;
  --boton-cat-fondo: #b74040;
  --boton-cat-hover: linear-gradient(to bottom,#B43A3A);
  --boton-cat-border: #8a0505;
  --boton-cat-shadow1: #8a0505;
  --boton-cat-shadow2: #ffe3e2;
  --cat-fondo: #eee;
  --cat-fondo-active: linear-gradient(to right,#D05050);
  --cat-text: black;
  --cat-text-active: white;
  --cat-hover: #ccc;
}

/*Colors darkmode*/
[data-theme=dark] {
  /*Común*/
  --navbar: #131313;
  --efecto-navbar: #404040;
  --letrafooternavbar: #d6d6d6;
  --dropdown: #1d1d1d;
  --dropdown-hover: #3c3c3c;
  --dropdown-hover-text: #d6d6d6;
  --fondo: #1d1d1d;
  --letra: #d6d6d6;
  --footer: #131313;
  --botones-fondo: #131313;
  --botones-border: #131313;
  --botones-text: #d6d6d6;
  --botones-hover: #0a0a0a;

  /*Especifico de página*/
  --header: #131313;
  --pagination-fondo: #131313;
  --pagination-letra: #d6d6d6;
  --pagination-hover: #404040;
  --card-background: #1d1d1d;
  --card-text: #d6d6d6;
  --card-shadow: black;
  --card-border: #3d3d3d;
  --label-cat-disabeled: #3d3d3d;
  --boton-cat-fondo: #171717;
  --boton-cat-hover: #1d1d1d;
  --boton-cat-border: #3d3d3d;
  --boton-cat-shadow1: #3d3d3d;
  --boton-cat-shadow2: #171717;
  --cat-fondo: #131313;
  --cat-fondo-active: #343434;
  --cat-text: #d6d6d6;
  --cat-text-active: #d6d6d6;
  --cat-hover: #343434;
}

/*Page loader*/
#loader {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.5;
  background-color: transparent;
  z-index: 99;
  text-align: center;
}

#loader-image {
  border: 12px solid lightgrey;
  border-radius: 50%;
  border-top: 12px solid #444444;
  width: 70px;
  height: 70px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.centrarLoader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/*Estilo body*/
body {
  background-color: var(--fondo);
  color: var(--letra);
}

/*Estilo navbar*/
.navbar-area {
  background: var(--navbar);
}

.site-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.site-navbar li:hover {
  opacity: 50%;
}

.site-navbar li {
  pointer-events: none;
}

.site-navbar a {
  pointer-events: all;
}

a.site-logo {
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.site-navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.toggleDark {
  font-style: normal;
  color: var(--leta);
}

/*Dropdown en navbar (Extras)*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 130px;
  box-shadow: 0px 8px 16px 0px rgba(0,0.2);
  z-index: 1;
}

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

.dropdown-divider {
  margin-top: -.1em;
}

.dropdown-content-2 {
  min-height: 36px;
  padding-top: 3px;
}

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

.dropdown:hover .dropdown-content {
  display: block;
  margin-left: -1em; /*Centrar dropdown*/
  margin-top: .2em;
}

.invisible {
  visibility: hidden;
}

.dropbtn {
  background-color: transparent;
  color: var(--letrafooternavbar);
  font-weight: bold;
  border: none;
  padding-top: .6em;
  padding-left: 1em;
  padding-right: 1em;
}

/*Efecto hover circulos*/
.site-navbar ul li a {
  color: var(--letrafooternavbar);
  display: block;
  text-decoration: none;
  text-transform: uppercase;
}

ul.container {
  margin: 0 auto;
    padding: 1em 41.3em; /*Distancia elementos navbar (derecha)*/
    text-align: center;
}

ul.container li {
  color: var(--letrafooternavbar);
  text-decoration: none;
  font: 20px;
  margin: 0px 10px;
  padding: 10px 10px;
  position: relative;
  z-index: 0;
  cursor: pointer;
}

ul.circleBehind li:before,ul.circleBehind li:after {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 50px;
  height: 50px;
  border: 4px solid var(--efecto-navbar);
  transform: translateX(-50%) translateY(-50%) scale(0.8);
  border-radius: 50%;
  background: transparent;
  content: "";
  opacity: 0;
  transition: all 0.3s;
  z-index: -1;
}

ul.circleBehind li:after {
  border-width: 2px;
  transition: all 0.4s;
}

ul.circleBehind li:hover:before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
}

ul.circleBehind li:hover:after {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1.3);
}

/*Estilo del header*/
.header {
  width: 100%;
  padding:140px;
  text-align: center;
  background: var(--header);
  color: var(--letrafooternavbar);
}

/*Estilo apartados de la web en home*/
.apartados {
  padding-top: 40px;
}

.apartadosTitle {
  padding-top: .3em;
}

.btn {
  box-shadow: 0 0 0 rgba(0,0) !important;
}

.btnHome {
  color: var(--botones-text);
  background: var(--botones-fondo);
  border-color: var(--botones-border);
  width: 10em;
  height: 3em;
  padding-top:10px;
  text-transform: uppercase;
  font-weight: 500;
}

.btnHome:hover {
  color: var(--botones-text);
  background: var(--botones-hover);
  border-color: var(--botones-hover);
}

/*Estilo de paginación (usado en reviews)*/
ul.pagination {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-size: 1.3em;
}

ul.pagination li {
  display: inline;
}

ul.pagination li a {
  color: var(--pagination-letra);
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

ul.pagination li a.active {
  background: var(--pagination-fondo);
  color: var(--pagination-letra-active);
}

ul.pagination li a:hover:not(.active) {
  background-color: var(--pagination-hover);
}

div.centerFooter {
  padding-top: .5em;
  text-align: center;
}

/*Estilo del footer*/
.footerMio {
  margin-top: 2em;
  background: var(--footer) !important;
}

.footerMio p {
  color: var(--letrafooternavbar);
}

.footerMio h5 {
  font-weight: bold;
  color: var(--letrafooternavbar);
}

.footerList a {
  color: var(--letrafooternavbar);
  text-decoration: none;
  text-transform: uppercase;
  padding: 3px 3px;
  position: relative;
  z-index: 0;
  cursor: pointer;
}

.footerList a:hover {
  opacity: 50%;
}

.footerSocial {
  padding-top: .5em;
}

.footerIcons {
  max-width: 1.8em;
}

/*Estilo redes sociales footer*/
.footerimagerow {
    display: inline-flex;
    flex-wrap: wrap;
    width: 75%;
  margin-top: -.5em;
  margin-left: -.15em;
    z-index: 0;
}

.footerimagecolumn {
    float: left;
    flex: 10%;
    background:url('') no-repeat 0 0;
    z-index: 0;
}

.swap-on-hover img {
  position: absolute;
}

.swap-on-hover .swap-on-hover__front-image {
  z-index: 9999;
  cursor: pointer;
}

.swap-on-hover:hover > .swap-on-hover__front-image{
  opacity: 0;
}

.swap-on-hover2 img {
  position: absolute;
}

.swap-on-hover2 .swap-on-hover__front-image2 {
  z-index: 9999;
  cursor: pointer;
}

.swap-on-hover2:hover > .swap-on-hover__front-image2{
  opacity: 0;
}

.swap-on-hover3 img {
  position: absolute;
}

.swap-on-hover3 .swap-on-hover__front-image3 {
  z-index: 9999;
  cursor: pointer;
}

.swap-on-hover3:hover > .swap-on-hover__front-image3{
  opacity: 0;
}

.swap-on-hover4 img {
  position: absolute;
}

.swap-on-hover4 .swap-on-hover__front-image4 {
  z-index: 9999;
  cursor: pointer;
}

.swap-on-hover4:hover > .swap-on-hover__front-image4{
  opacity: 0;
}

.swap-on-hover5 img {
  position: absolute;
}

.swap-on-hover5 .swap-on-hover__front-image5 {
  z-index: 9999;
  cursor: pointer;
}

.swap-on-hover5:hover > .swap-on-hover__front-image5{
  opacity: 0;
}

/*Preview test juegos*/
.previesTestBody {
  visibility: visible !important;
}

.previewTest {
  cursor: default;
}

.previewTitleTest {
  text-align: center;
  vertical-align: middle;
  color: var(--letra);
  margin-top: 5.3em;
  font-size: 5em;
}

/*Estilo del tag filter*/
.enabledLabel {
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  margin-top: 5px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  padding: 1.25em 2em;
  background: var(--boton-cat-hover);
  border: 2px solid var(--boton-cat-border);
  border-radius: 0.75em;
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0,0.58,1),background 150ms cubic-bezier(0,1);
}

.disabledLabel {
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  margin-top: 5px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  padding: 1.25em 2em;
  background: var(--label-cat-disabeled);
  border: 2px solid grey;
  border-radius: 0.75em;
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0,1);
  transform: translate(0em,0.75em);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}

label.enabledLabel::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--boton-cat-fondo);
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--boton-cat-shadow1),0 0.625em 0 0 var(--boton-cat-shadow2);
  transform: translate3d(0,0.75em,-1em);
  transition: transform 150ms cubic-bezier(0,box-shadow 150ms cubic-bezier(0,1);
}

label.enabledLabel:hover {
  background: var(--boton-cat-hover);
  transform: translate(0,0.25em);
}

label.enabledLabel:hover::before {
  box-shadow: 0 0 0 2px var(--boton-cat-shadow1),0 0.5em 0 0 var(--boton-cat-shadow2);
  transform: translate3d(0,0.5em,-1em);
}

label.enabledLabel:active {
  background: var(--boton-cat-hover);
  transform: translate(0em,0.75em);
}

label.enabledLabel:active::before {
  box-shadow: 0 0 0 2px var(--boton-cat-shadow1),0 0 var(--boton-cat-shadow2);
  transform: translate3d(0,-1em);
}

.fila1 {
  width: auto;
  height: auto;
  display:inline-block;
  padding-left: 7.2em;
  padding-top: 1em;
}

.fila2 {
  width: auto;
  height: auto;
  display:inline-block;
  padding-left: 4.2em;
  padding-top: 1em;
  padding-bottom: 1em;
}

/*Gird cards*/
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item {
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

/*Estilo cards*/
.card {
  border: 1px solid var(--card-border);
}

.card-title {
  color: var(--card-text);
  padding-top: 15px;
  font-weight: bold;
}

.card-text {
  font-size: 15px;
  padding-left: 1em;
  padding-right: 1em;
}

.card-filters {
  font-size: 15px;
}

.card-filters::before {
  content: 'Categoria/s: ';
  font-weight: bold;
}

.card-shadow {
  box-shadow: 10px 10px 5px var(--card-shadow);
  transition: all 0.3s;
}

.card-shadow:hover {
  transform: scale(1.05);
  transition: all 0.3s;
}

.card-body {
  padding: 0rem 0rem;
  background-color: var(--card-background);
}

.btn {
  border-radius: 0;
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: .25rem;
  box-shadow: 10px 10px 5px var(--card-shadow);
}

.boton {
  color: white;
  background: var(--botones-fondo);
  border-color: var(--botones-border);
  width: 100%;
  height: 3em;
  padding-top:10px;
  text-transform: uppercase;
  font-weight: 500;
}

.boton:hover {
  color: white;
  background: var(--botones-hover);
  border-color: var(--botones-hover);
}

.btn:focus {
  outline: none;
  box-shadow: none;
}

/*Efecto shine en card images*/
figure {
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}

figure:hover+span {
    bottom: -36px;
    opacity: 1;
}

.shine figure {
    position: relative;
}

.shine figure::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left,rgba(255,255,0) 0%,.3) 100%);
    background: linear-gradient(to right,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.shine figure:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}

/*Buscador*/
.buscador {
  display: grid;
  grid-template-columns: auto;
}

#searchbar{
  margin-left: 2em;
  margin-right: 2em;
  padding: 15px;
  border-radius: 10px;
  border-width: 1.5px;
  margin-top: 1em;
  width: 96.8%;
}

<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Borrar al finalizar el testing -->
  <script src="global.js"></script>
</head>

<body>
  <!-- Navbar -->
  <div class="navbar-area transparent">
    <div class="container">
      <nav class="site-navbar">
        <a href="#" class="site-logo">logo</a>
      </nav>
    </div>
  </div>

  <!-- Buscador -->
  <div class="buscador">
    <input id="searchbar" onkeyup="search_reviews()" type="text" name="search" placeholder="Buscar reviews...">
  </div>

  <!-- Cards -->
  <div class="grid-container">
    <div class="grid-item">
      <div class="card-shadow accion">
        <div class="card shine">
          <figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
          <div class="card-body">
            <h5 class="card-title">GAME1</h5>
            <p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
            <p class="card-filters">test</p>
            <a href="#" class="btn boton">Ver review</a>
          </div>
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="card-shadow">
        <div class="card shine">
          <figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
          <div class="card-body">
            <h5 class="card-title">NOT GAME2</h5>
            <p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
            <p class="card-filters">test</p>
            <a href="#" class="btn boton">Ver review</a>
          </div>
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="card-shadow">
        <div class="card shine">
          <figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
          <div class="card-body">
            <h5 class="card-title">JUEGO1</h5>
            <p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
            <p class="card-filters">test</p>
            <a href="#" class="btn boton">Ver review</a>
          </div>
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="card-shadow">
        <div class="card shine">
          <figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
          <div class="card-body">
            <h5 class="card-title">NOT JUEGO2</h5>
            <p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
            <p class="card-filters">test</p>
            <a href="#" class="btn boton">Ver review</a>
          </div>
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="card-shadow">
        <div class="card shine">
          <figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
          <div class="card-body">
            <h5 class="card-title">GAMEING3</h5>
            <p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
            <p class="card-filters">test</p>
            <a href="#" class="btn boton">Ver review</a>
          </div>
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="card-shadow">
        <div class="card shine">
          <figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
          <div class="card-body">
            <h5 class="card-title">JUEGO TEST3</h5>
            <p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
            <p class="card-filters">test</p>
            <a href="#" class="btn boton">Ver review</a>
          </div>
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="card-shadow">
        <div class="card shine">
          <figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
          <div class="card-body">
            <h5 class="card-title">ALONE</h5>
            <p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
            <p class="card-filters">test</p>
            <a href="#" class="btn boton">Ver review</a>
          </div>
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="card-shadow">
        <div class="card shine">
          <figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
          <div class="card-body">
            <h5 class="card-title">GAME TEST4</h5>
            <p class="card-text">test</p>
            <p class="card-filters">Individual,Terror,Puzzles</p>
            <a href="#" class="btn boton">Ver review</a>
          </div>
        </div>
      </div>
    </div>

    <div class="grid-item">
      <div class="card-shadow">
        <div class="card shine">
          <figure><img class="card-img-top" src="https://png.pngtree.com/back_origin_pic/00/01/44/8b4c243cf3026de20a451d05df6ee200.jpg" alt="Card image cap"></figure>
          <div class="card-body">
            <h5 class="card-title">NOT NOT</h5>
            <p class="card-text">Aqui estaría la descripción y breve explicación de la card</p>
            <p class="card-filters">test</p>
            <a href="#" class="btn boton">Ver review</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Pagination -->
  <div class="centerFooter">
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">1</a></li>
        <li><a class="active" href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">&raquo;</a></li>
      </ul>
    </div>

  <!-- Footer -->
  <footer class="bg-primary text-white text-center text-lg-start footerMio">
    <div class="container p-4">
      <div class="row">
        <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
          <h5 class="text-uppercase">Contenido de la web</h5>

          <p>
            Lorem ipsum dolor sit amet consectetur,adipisicing elit. Iste atque ea quis
            molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
            voluptatem veniam,est atque cumque eum delectus sint!
          </p>
        </div>

        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
          <h5 class="text-uppercase">VER</h5>

          <ul class="list-unstyled mb-0 footerList">
            <li>
              <a href="home.html" class="text-white">Home</a>
            </li>
            <li>
              <a href="reviews1.html" class="text-white">Reviews</a>
            </li>
            <li>
              <a href="juegos.html" class="text-white">Juegos</a>
            </li>
            <li>
              <a href="redes.html" class="text-white">Redes</a>
            </li>
          </ul>
        </div>

        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
          <h5 class="text-uppercase mb-0">REDES SOCIALES</h5>
          <ul class="list-unstyled">
            <li>
              <a href="#!" class="text-white">Link 1</a>
            </li>
            <li>
              <a href="#!" class="text-white">Link 2</a>
            </li>
            <li>
              <a href="#!" class="text-white">Link 3</a>
            </li>
            <li>
              <a href="#!" class="text-white">Link 4</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="text-center p-3" style="background-color: rgba(0,0.2)">
      © 2021 Copyright:
      <a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
    </div>
  </footer>

  <script>
    //Botón pulsado categorias
    var divSelected = null;
    function SelectOrUnSelect(x) {
         if (divSelected != null) divSelected.className = 'enabledLabel';
         divSelected = document.getElementById(x);
         document.getElementById(x).className = 'disabledLabel';
    }
  </script>
</body>
</html>