Search Bar showing footer when any word is typed in thats not on the product cards

Question

I have implemented a search bar on my website and when a name of a product card is typed in it works. However, if you was to type in a word such as "lol' or any other word that is not included on the product cards the footer begins to show. I'm wanting the footer to stay in its current place which is at the bottom of the page.

I will be uploading code snippets and the files to my server so you can view the entire website and the problems I am experiencing.

I hope all of the information provided shows the problem I am experiencing.

[Click the product page to see the problem I am experiencing or click run snippet below][1] [1]: https://kipplo.co.uk/kipplov2

// JavaScript code
function search_products() {
    let input = document.getElementById('searchbar').value
    input=input.toLowerCase();
    let x = document.getElementsByClassName('products');
      
    for (i = 0; i < x.length; i++) { 
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display="none";
        }
        else {
            x[i].style.display="list-item";                 
        }
    }
}

 body {
        background-color: black;
      }

* {

font-family: Verdana;

}


      /* Announcment bar */
      .alert {
        padding: 20px;
        background-color: #2a7a85;
        color: white;
      }
      
      .alertcontainer {
        display: flex;
        flex-direction: column;
        height:100vh;
      }


      .closebtn {
        margin-left: 15px;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
      }

      .closebtn:hover {
        color: black;
      }

      body {
        margin: 0;
      }

      /* Navigation bar */
      ul.topnav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: rgb(248, 248, 248);
      }

      ul.topnav li {
        float: left;
      }

      ul.topnav li a {
        display: block;
        color: black;
        text-align: center;
        font-weight: bold;
        padding: 25px 32px;
        text-decoration: none;
      }

      ul.topnav li a:hover:not(.active) {
        background-color: rgb(139, 185, 255);
      }

      ul.topnav li a.active {
        background-color: #0cc0d8;
      }

      ul.topnav li.right {
        float: right;
      }

      @media screen and (max-width: 600px) {
        ul.topnav li.right,
        ul.topnav li {
          float: none;
        }
      }

      /* On smaller screens, decrease text size */

      @media only screen and (max-width: 300px) {
        .text {
          font-size: 11px;
        }
      }

      /* Homepage button */
      .glow-on-hover {
        width: 220px;
        height: 35px;
        border: none;
        outline: none;
        color: rgb(0, 0, 0);
        font-weight: bold;
        font-size: 20px;
        background: #111;
        cursor: pointer;
        position: relative;

        z-index: 0;
        border-radius: 10px;
      }

      .glow-on-hover:before {
        content: "";
        background: linear-gradient(
          45deg,
          #ff0000,
          #ff7300,
          #fffb00,
          #48ff00,
          #00ffd5,
          #002bff,
          #7a00ff,
          #ff00c8,
          #ff0000
        );
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 20s linear infinite;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        border-radius: 10px;
      }

      .glow-on-hover:active {
        color: #000;
      }

      .glow-on-hover:active:after {
        background: transparent;
      }

      .glow-on-hover:hover:before {
        opacity: 1;
      }

      .glow-on-hover:after {
        z-index: -1;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgb(11, 78, 223);
        left: 0;
        top: 0;
        border-radius: 10px;
      }

      @keyframes glowing {
        0% {
          background-position: 0 0;
        }
        50% {
          background-position: 400% 0;
        }
        100% {
          background-position: 0 0;
        }
      }

      /* kipplo heading on homepage */

      h1 {
        font-size: 10vw;
        margin: 0;
        padding: 0;
        color: blue;
        word-wrap: break-word;
        text-align: center;
      }

      /* for the heading and the button alignment*/

      
      .btn-centering {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      /* product cards*/

      h3 {
        text-align: center;
        font-size: 30px;
        margin: 0;
        padding-top: 10px;
      }
      a {
        text-decoration: none;
      }
      .gallery {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin: 50px 0;
      }
      .content {
        width: 24%;
        margin: 15px;
        box-sizing: border-box;
        float: left;
        text-align: center;
        border-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        padding-top: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        transition: 0.4s;
        background-color: whitesmoke;
      }
      .content:hover {
        box-shadow: 0 0 11px rgb(0, 217, 255);
        transform: translate(0px, -8px);
        transition: 0.6s;
      }
      .productcard-image {
        width: 200px;
        height: 200px;
        text-align: center;
        margin: 0 auto;
        display: block;
      }
      p {
        text-align: center;
        color: #b2bec3;
        padding: 0 8px;
      }
      h6 {
        font-size: 26px;
        text-align: center;
        color: #222f3e;
        margin: 0;
      }
      .product-card {
        list-style-type: none;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
      }
      .productcard-list {
        padding: 5px;
      }
      .fa {
        color: #ff9f43;
        font-size: 26px;
        transition: 0.4s;
      }
      .fa:hover {
        transform: scale(1.3);
        transition: 0.6s;
      }
      .productcardbutton {
        text-align: center;
        font-size: 24px;
        color: #fff;
        width: 100%;
        padding: 15px;
        border: 0px;
        outline: none;
        cursor: pointer;
        margin-top: 5px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
      }
      .buy-1 {
        background-color: #2183a2;
      }
      .buy-2 {
        background-color: #3b3e6e;
      }
      .buy-3 {
        background-color: #0b0b0b;
      }
      @media (max-width: 1000px) {
        .content {
          width: 46%;
        }
      }
      @media (max-width: 750px) {
        .content {
          width: 100%;
        }
      }

      /* Footer */
      .footer__container {
        background-color: #141414;
        padding: 5rem 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      #footer__logo {
        color: #fff;
        display: flex;
        align-items: center;
        cursor: pointer;
        text-decoration: none;
        font-size: 2rem;
      }

      .footer__links {
        width: 100%;
        max-width: 1000px;
        display: flex;
        justify-content: center;
      }

      .footer__link--wrapper {
        display: flex;
      }

      .footer__link--items {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 16px;
        text-align: left;
        width: 160px;
        box-sizing: border-box;
      }

      .footer__link--items h2 {
        margin-bottom: 16px;
      }

      .footer__link--items > h2 {
        color: #fff;
      }

      .footer__link--items a {
        color: #fff;
        text-decoration: none;
        margin-bottom: 0.5rem;
      }

      .footer__link--items a:hover {
        color: #e9e9e9;
        transition: 0.3s ease-out;
      }

      /* Social Icons */
      .social__icon--link {
        color: #fff;
        font-size: 24px;
      }

      .social__media {
        max-width: 1000px;
        width: 100%;
      }

      .social__media--wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        max-width: 1000px;
        margin: 40px auto 0 auto;
      }

      .website__rights {
        color: #fff;
      }

      @media screen and (max-width: 820px) {
        .footer__links {
          padding-top: 2rem;
        }

        #footer__logo {
          margin-bottom: 2rem;
        }

        .website__rights {
          padding: 2rem;
        }

        .footer__link--wrapper {
          flex-direction: column;
        }

        .social__media--wrap {
          flex-direction: column;
        }
      }

      @media screen and (max-width: 480px) {
        .footer__link--items {
          margin: 0;
          padding: 10px;
          width: 100%;
        }
      }
      /* Text above the form*/
      
      
      .boxed {
 
 box-shadow: 0 0 15px rgb(24, 143, 190);
  border-radius: 15px;
  text-align:center;
  padding: 4%;
  margin: 10vh;
  font-size:20px;
  color:#00ffd5;
      }


      /* Feedback form*/

      .form1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 500px;
        margin: 15vh auto;
        height: auto;
        border-radius: 15px;
        border: none;
        box-shadow: 0 0 15px rgb(24, 143, 190);
      }

      form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
      }

      input {
        width: 100%;
        margin: 5px 0;
        height: 35px;
        font-size: 17px;
        text-align: center;
        outline: none;
        border-radius: 15px;
        border: none;
        background: rgb(235, 228, 228);
      }

      textarea {
        width: 100%;
        margin: 5px 0;
        font-size: 17px;
        text-align: center;
        outline: none;
        border-radius: 15px;
        border: none;
        background: rgb(235, 228, 228);
      }
      input[type="submit"] {
        margin: 10px auto;
        width: 120px;
        background: rgb(24, 143, 190);
        color: white;
        cursor: pointer;
      }
      input[type="submit"]:hover {
        background: rgb(19, 41, 238);
      }
      @media screen and (max-width: 600px) {
        .form1 {
          width: 90%;
          height: auto;
        }
      }

      h2 {
        color: #00ffd5;
        font-size: 30px;
      }

      p4 {
        color: #00ffd5;
        font-size: 20px;
      }
      
      /* Scroll bar */

::-webkit-scrollbar {
  background: transparent;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  background: #606060;
  border-radius: 100px;
}

/* search bar */

#searchbar{
  margin-left: 15%;
  padding:15px;
  border-radius: 10px;
}

input[type=text] {
   width: 30%;
   -webkit-transition: width 0.15s ease-in-out;
   transition: width 0.15s ease-in-out;
}

/* When the input field gets focus,
     change its width to 100% */
input[type=text]:focus {
  width: 70%;
}

#list{
 font-size:  1.5em;
 margin-left: 90px;
}

.products{
display: list-item;    
} 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Products</title>
<style>


p1 {

color: whitesmoke;

}

</style>
</head>
<body>

<!-- Alert Bar -->
<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <center><strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center></div>

<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png">
<div>
  <li><a href="index.html">Home</a></li>
  <li><a class="active" href="products.html">Products</a></li>
  <li><a href="contactus.html">Contact Us</a></li>
  <li><a href="aboutus.html">About Us</a></li>
</ul>
</div>

<!-- input tag  copy this-->
<input id="searchbar" onkeyup="search_products()" type="text"
name="search" placeholder="Search Products..">
  
<!-- Product Card -->
<div class="gallery">
  <div class="content products">
    <img src="shoes.png" class="productcard-image">
    <h3>Product 1</h3>
    <p3>Test product line</p3>
    <h6>&#163;100</h6>
    <ul class="product-card">
      <li class="productcard-list">
       <li> <i class="fa fa-star" aria-hidden="true"></i></li>
       <li> <i class="fa fa-star" aria-hidden="true"></i></li>
       <li><i class="fa fa-star" aria-hidden="true"></i></li>
       <li><i class="fa fa-star" aria-hidden="true"></i></li>
       <li></li> <i class="fa fa-star" aria-hidden="true"></i></li>
      </ul>
   
      <button class="buy-1 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
  </div>
  <div class="content products">
    <img src="earphone.png" class="productcard-image">
    <h3>Product 2</h3>
    <p3>Test product line</p3>
    <h6>&#163;40.00</h6>
    <ul class="product-card">
      <li class="productcard-list">
        <li> <i class="fa fa-star" aria-hidden="true"></i></li>
        <li><i class="fa fa-star" aria-hidden="true"></i></li>
        <li><i class="fa fa-star" aria-hidden="true"></i></li>
        <li><i class="fa fa-star" aria-hidden="true"></i></li>
        <li><i class="fa fa-star" aria-hidden="true"></i></li>
    </ul>

    <button class="buy-2 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
  </div>
  <div class="content products">
    <img src="watch.png" class="productcard-image">
    <h3>Product 3</h3>
    <p3>Test product line</p2>
    <h6>&#163;70</h6>
    <ul class="product-card">
      <li class="productcard-list">
        <li> <i class="fa fa-star" aria-hidden="false"></i></li>
        <li> <i class="fa fa-star" aria-hidden="true"></i></li>
        <li> <i class="fa fa-star" aria-hidden="true"></i></li>
        <li></li><i class="fa fa-star" aria-hidden="true"></i></li>
       <li> <i class="fa fa-star" aria-hidden="true"></i></li>
      </ul>
    <button class="buy-3 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
  
    <script src="products.js"></script>

  
  </div>
</div>


<!-- Footer -->
<div class="footer__container">
  <div class="footer__links">
    <div class="footer__link--wrapper">
      <div class="footer__link--items">
        <a href="/sign__up">About Us</a> 
      </div>
      <div class="footer__link--items">
        <a href="/">Contact Us</a> 
      </div>
    </div>
    <div class="footer__link--wrapper">
      
      <div class="footer__link--items">
        <a href="/">Youtube</a> 
      </div>
      <div class="footer__link--items">
        <a href="/">TikTok</a> 
      </div>
    </div>
  </div>
  <section class="social__media">
    <div class="social__media--wrap">
      <div class="footer__logo">
          
          <!-- Kipplo Footer Logo -->
          <a href="index.html">
          <img src="img/logo2.png"  id="footer__logo" ></a>
      </div>

      <!-- Creative Commmons Logo -->
      <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">
        <img src="img/88x31.png" id="footer__logo"></a>  
      <p class="website__rights">
       Creative Commons -  KIPPLO.CO.UK 2022.</p> 
      
      </div>
    </div>
  </section>
</div>

</body>
</html>

Answer 1

I would just wrap it with id or class and set it min-height:100vh;. Its the easiest way, not the cleanest code. Hope it helped!

// JavaScript code
function search_products() {
    let input = document.getElementById('searchbar').value
    input=input.toLowerCase();
    let x = document.getElementsByClassName('products');
      
    for (i = 0; i < x.length; i++) { 
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display="none";
        }
        else {
            x[i].style.display="list-item";                 
        }
    }
}

body {
        background-color: black;
      }

* {

font-family: Verdana;

}

     .wrap-nav-and-main {
      min-height: 100vh;
     }
      /* Announcment bar */
      .alert {
        padding: 20px;
        background-color: #2a7a85;
        color: white;
      }
      
      .alertcontainer {
        display: flex;
        flex-direction: column;
        height:100vh;
      }


      .closebtn {
        margin-left: 15px;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
      }

      .closebtn:hover {
        color: black;
      }

      body {
        margin: 0;
      }

      /* Navigation bar */
      ul.topnav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: rgb(248, 248, 248);
      }

      ul.topnav li {
        float: left;
      }

      ul.topnav li a {
        display: block;
        color: black;
        text-align: center;
        font-weight: bold;
        padding: 25px 32px;
        text-decoration: none;
      }

      ul.topnav li a:hover:not(.active) {
        background-color: rgb(139, 185, 255);
      }

      ul.topnav li a.active {
        background-color: #0cc0d8;
      }

      ul.topnav li.right {
        float: right;
      }

      @media screen and (max-width: 600px) {
        ul.topnav li.right,
        ul.topnav li {
          float: none;
        }
      }

      /* On smaller screens, decrease text size */

      @media only screen and (max-width: 300px) {
        .text {
          font-size: 11px;
        }
      }

      /* Homepage button */
      .glow-on-hover {
        width: 220px;
        height: 35px;
        border: none;
        outline: none;
        color: rgb(0, 0, 0);
        font-weight: bold;
        font-size: 20px;
        background: #111;
        cursor: pointer;
        position: relative;

        z-index: 0;
        border-radius: 10px;
      }

      .glow-on-hover:before {
        content: "";
        background: linear-gradient(
          45deg,
          #ff0000,
          #ff7300,
          #fffb00,
          #48ff00,
          #00ffd5,
          #002bff,
          #7a00ff,
          #ff00c8,
          #ff0000
        );
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 20s linear infinite;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        border-radius: 10px;
      }

      .glow-on-hover:active {
        color: #000;
      }

      .glow-on-hover:active:after {
        background: transparent;
      }

      .glow-on-hover:hover:before {
        opacity: 1;
      }

      .glow-on-hover:after {
        z-index: -1;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgb(11, 78, 223);
        left: 0;
        top: 0;
        border-radius: 10px;
      }

      @keyframes glowing {
        0% {
          background-position: 0 0;
        }
        50% {
          background-position: 400% 0;
        }
        100% {
          background-position: 0 0;
        }
      }

      /* kipplo heading on homepage */

      h1 {
        font-size: 10vw;
        margin: 0;
        padding: 0;
        color: blue;
        word-wrap: break-word;
        text-align: center;
      }

      /* for the heading and the button alignment*/

      
      .btn-centering {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      /* product cards*/

      h3 {
        text-align: center;
        font-size: 30px;
        margin: 0;
        padding-top: 10px;
      }
      a {
        text-decoration: none;
      }
      .gallery {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin: 50px 0;
      }
      .content {
        width: 24%;
        margin: 15px;
        box-sizing: border-box;
        float: left;
        text-align: center;
        border-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        padding-top: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        transition: 0.4s;
        background-color: whitesmoke;
      }
      .content:hover {
        box-shadow: 0 0 11px rgb(0, 217, 255);
        transform: translate(0px, -8px);
        transition: 0.6s;
      }
      .productcard-image {
        width: 200px;
        height: 200px;
        text-align: center;
        margin: 0 auto;
        display: block;
      }
      p {
        text-align: center;
        color: #b2bec3;
        padding: 0 8px;
      }
      h6 {
        font-size: 26px;
        text-align: center;
        color: #222f3e;
        margin: 0;
      }
      .product-card {
        list-style-type: none;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
      }
      .productcard-list {
        padding: 5px;
      }
      .fa {
        color: #ff9f43;
        font-size: 26px;
        transition: 0.4s;
      }
      .fa:hover {
        transform: scale(1.3);
        transition: 0.6s;
      }
      .productcardbutton {
        text-align: center;
        font-size: 24px;
        color: #fff;
        width: 100%;
        padding: 15px;
        border: 0px;
        outline: none;
        cursor: pointer;
        margin-top: 5px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
      }
      .buy-1 {
        background-color: #2183a2;
      }
      .buy-2 {
        background-color: #3b3e6e;
      }
      .buy-3 {
        background-color: #0b0b0b;
      }
      @media (max-width: 1000px) {
        .content {
          width: 46%;
        }
      }
      @media (max-width: 750px) {
        .content {
          width: 100%;
        }
      }

      /* Footer */
      .footer__container {
        background-color: #141414;
        padding: 5rem 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      #footer__logo {
        color: #fff;
        display: flex;
        align-items: center;
        cursor: pointer;
        text-decoration: none;
        font-size: 2rem;
      }

      .footer__links {
        width: 100%;
        max-width: 1000px;
        display: flex;
        justify-content: center;
      }

      .footer__link--wrapper {
        display: flex;
      }

      .footer__link--items {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 16px;
        text-align: left;
        width: 160px;
        box-sizing: border-box;
      }

      .footer__link--items h2 {
        margin-bottom: 16px;
      }

      .footer__link--items > h2 {
        color: #fff;
      }

      .footer__link--items a {
        color: #fff;
        text-decoration: none;
        margin-bottom: 0.5rem;
      }

      .footer__link--items a:hover {
        color: #e9e9e9;
        transition: 0.3s ease-out;
      }

      /* Social Icons */
      .social__icon--link {
        color: #fff;
        font-size: 24px;
      }

      .social__media {
        max-width: 1000px;
        width: 100%;
      }

      .social__media--wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        max-width: 1000px;
        margin: 40px auto 0 auto;
      }

      .website__rights {
        color: #fff;
      }

      @media screen and (max-width: 820px) {
        .footer__links {
          padding-top: 2rem;
        }

        #footer__logo {
          margin-bottom: 2rem;
        }

        .website__rights {
          padding: 2rem;
        }

        .footer__link--wrapper {
          flex-direction: column;
        }

        .social__media--wrap {
          flex-direction: column;
        }
      }

      @media screen and (max-width: 480px) {
        .footer__link--items {
          margin: 0;
          padding: 10px;
          width: 100%;
        }
      }
      /* Text above the form*/
      
      
      .boxed {
 
 box-shadow: 0 0 15px rgb(24, 143, 190);
  border-radius: 15px;
  text-align:center;
  padding: 4%;
  margin: 10vh;
  font-size:20px;
  color:#00ffd5;
      }


      /* Feedback form*/

      .form1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 500px;
        margin: 15vh auto;
        height: auto;
        border-radius: 15px;
        border: none;
        box-shadow: 0 0 15px rgb(24, 143, 190);
      }

      form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
      }

      input {
        width: 100%;
        margin: 5px 0;
        height: 35px;
        font-size: 17px;
        text-align: center;
        outline: none;
        border-radius: 15px;
        border: none;
        background: rgb(235, 228, 228);
      }

      textarea {
        width: 100%;
        margin: 5px 0;
        font-size: 17px;
        text-align: center;
        outline: none;
        border-radius: 15px;
        border: none;
        background: rgb(235, 228, 228);
      }
      input[type="submit"] {
        margin: 10px auto;
        width: 120px;
        background: rgb(24, 143, 190);
        color: white;
        cursor: pointer;
      }
      input[type="submit"]:hover {
        background: rgb(19, 41, 238);
      }
      @media screen and (max-width: 600px) {
        .form1 {
          width: 90%;
          height: auto;
        }
      }

      h2 {
        color: #00ffd5;
        font-size: 30px;
      }

      p4 {
        color: #00ffd5;
        font-size: 20px;
      }
      
      /* Scroll bar */

::-webkit-scrollbar {
  background: transparent;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  background: #606060;
  border-radius: 100px;
}

/* search bar */

#searchbar{
  margin-left: 15%;
  padding:15px;
  border-radius: 10px;
}

input[type=text] {
   width: 30%;
   -webkit-transition: width 0.15s ease-in-out;
   transition: width 0.15s ease-in-out;
}

/* When the input field gets focus,
     change its width to 100% */
input[type=text]:focus {
  width: 70%;
}

#list{
 font-size:  1.5em;
 margin-left: 90px;
}

.products{
display: list-item;    
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Products</title>
<style>


p1 {

color: whitesmoke;

}

</style>
</head>
<body>
<section class="wrap-nav-and-main">

<!-- Alert Bar -->
<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <center><strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center></div>

<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png">
<div>
  <li><a href="index.html">Home</a></li>
  <li><a class="active" href="products.html">Products</a></li>
  <li><a href="contactus.html">Contact Us</a></li>
  <li><a href="aboutus.html">About Us</a></li>
</ul>
</div>

<!-- input tag  copy this-->
<input id="searchbar" onkeyup="search_products()" type="text"
name="search" placeholder="Search Products..">
  
<!-- Product Card -->
<div class="gallery">
  <div class="content products">
    <img src="shoes.png" class="productcard-image">
    <h3>Product 1</h3>
    <p3>Test product line</p3>
    <h6>&#163;100</h6>
    <ul class="product-card">
      <li class="productcard-list">
       <li> <i class="fa fa-star" aria-hidden="true"></i></li>
       <li> <i class="fa fa-star" aria-hidden="true"></i></li>
       <li><i class="fa fa-star" aria-hidden="true"></i></li>
       <li><i class="fa fa-star" aria-hidden="true"></i></li>
       <li></li> <i class="fa fa-star" aria-hidden="true"></i></li>
      </ul>
   
      <button class="buy-1 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
  </div>
  <div class="content products">
    <img src="earphone.png" class="productcard-image">
    <h3>Product 2</h3>
    <p3>Test product line</p3>
    <h6>&#163;40.00</h6>
    <ul class="product-card">
      <li class="productcard-list">
        <li> <i class="fa fa-star" aria-hidden="true"></i></li>
        <li><i class="fa fa-star" aria-hidden="true"></i></li>
        <li><i class="fa fa-star" aria-hidden="true"></i></li>
        <li><i class="fa fa-star" aria-hidden="true"></i></li>
        <li><i class="fa fa-star" aria-hidden="true"></i></li>
    </ul>

    <button class="buy-2 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
  </div>
  <div class="content products">
    <img src="watch.png" class="productcard-image">
    <h3>Product 3</h3>
    <p3>Test product line</p2>
    <h6>&#163;70</h6>
    <ul class="product-card">
      <li class="productcard-list">
        <li> <i class="fa fa-star" aria-hidden="false"></i></li>
        <li> <i class="fa fa-star" aria-hidden="true"></i></li>
        <li> <i class="fa fa-star" aria-hidden="true"></i></li>
        <li></li><i class="fa fa-star" aria-hidden="true"></i></li>
       <li> <i class="fa fa-star" aria-hidden="true"></i></li>
      </ul>
    <button class="buy-3 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
  
    <script src="products.js"></script>

  
  </div>
</div>
</section>

<!-- Footer -->
<div class="footer__container">
  <div class="footer__links">
    <div class="footer__link--wrapper">
      <div class="footer__link--items">
        <a href="/sign__up">About Us</a> 
      </div>
      <div class="footer__link--items">
        <a href="/">Contact Us</a> 
      </div>
    </div>
    <div class="footer__link--wrapper">
      
      <div class="footer__link--items">
        <a href="/">Youtube</a> 
      </div>
      <div class="footer__link--items">
        <a href="/">TikTok</a> 
      </div>
    </div>
  </div>
  <section class="social__media">
    <div class="social__media--wrap">
      <div class="footer__logo">
          
          <!-- Kipplo Footer Logo -->
          <a href="index.html">
          <img src="img/logo2.png"  id="footer__logo" ></a>
      </div>

      <!-- Creative Commmons Logo -->
      <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">
        <img src="img/88x31.png" id="footer__logo"></a>  
      <p class="website__rights">
       Creative Commons -  KIPPLO.CO.UK 2022.</p> 
      
      </div>
    </div>
  </section>
</div>

</body>
</html>