Improve navbar css and add product details page link

public/stylesheets/navbar.css

+
+  html {
+    font-size: 20px;
+  }
+  * body {
+    height: 100%;
+    font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
+    font-size: 20px;
+  }
+  nav {
+    width: 100%;
+    height: 50px;
+    background-color: black;
+    display: inline-block;
+    border-bottom: 1px solid #eaeaeb;
+  }
+
+  #nav_title {
+    color: white;
+    -ms-flex-item-align: center;
+    -ms-grid-row-align: center;
+    align-self: center;
+    font-size: 20px;
+    line-height: 50px;
+  }
+
+  nav li.dropdown {
+    margin-right: 0;
+    display: inline-block;
+    -ms-flex-item-align: center;
+    -ms-grid-row-align: center;
+    align-self: center;
+  }
+
+  nav .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 60px;
+    -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+  }
+
+  nav a {
+    font-size: 15px;
+    color: white;
+    text-decoration: none;
+  }
+  nav a:hover {
+    color: black;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+  }
+  nav .dropdown-content a {
+    color: black;
+    text-decoration: none;
+    display: block;
+    text-align: center;
+  }
+
+  nav .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  nav .active {
+    color: white;
+  }
+  nav .noactive {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  nav .noactive:hover {
+    color: white;
+  }
+  #logo {
+    background-image: url("https://1.bp.blogspot.com/-l8IAJUh3F-c/XP1Av6Jv0CI/AAAAAAAAXVI/DZMZyC_aR0EC0hqf9A2mgcHP2tQb4MkZQCLcBGAs/s320/farmer.png.png");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    float: left;
+    height: 90%;
+    aspect-ratio: 1/1;
+    -ms-flex-item-align: center;
+    -ms-grid-row-align: center;
+    align-self: center;
+    margin: 0px 10px;
+  }
+  #menu {
+    display: none;
+  }
+
+  #menu_label {
+    display: none;
+    font-size: 1.4em;
+    float: right;
+  }
+  @media (max-width: 700px) {
+    #menu_label {
+      display: block;
+    }
+    .ul {
+      clear: right;
+      position: fixed;
+      z-index: -2;
+      display: none;
+      right: -100%;
+      background-color: #7a7af8;
+      margin-right: 0px;
+      -webkit-transition: left 0.5s;
+      transition: left 0.5s;
+    }
+    #ul2 {
+      clear: right;
+      position: fixed;
+      z-index: -2;
+      display: none;
+      right: -100%;
+      background-color: #7a7af8;
+      margin-right: 0px;
+      -webkit-transition: left 0.5s;
+      transition: left 0.5s;
+    }
+    .li {
+      display: block;
+      width: 100vw;
+      margin-right: 0px;
+      text-align: center;
+    }
+    .dropdown-content {
+      display: block;
+      position: relative;
+    }
+    #menu:checked ~ ul ul.ul {
+      position: relative;
+      margin-right: 0;  
+      display: block;
+      z-index: 9;
+      top: 0;
+      right: 0;
+    }
+    #menu:checked ~ ul ul#ul2 {
+      position: relative;
+      display: block;
+      margin-right: 0;
+      z-index: 9;
+      top: 0;
+    }
+    .dropdown-content {
+      width: 100vw;
+    }
+  }
+  nav ul {
+    display: inline;
+  }
+  nav .ul {
+    font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
+    color: #2f00ff;
+    margin-right: 10px;
+    line-height: 50px;
+    list-style: none;
+  }
+
+  nav .li {
+    display: inline-block;
+    border-radius: 3px;
+    margin-right: 10px;
+  }
+
+  /* Add a gray background color and some padding to the footer */
+  img {
+    vertical-align: middle;
+  }
+
+  .intro {
+    float: left;
+    margin: 5px 15px;
+    color: white;
+  }
\ No newline at end of file

public/stylesheets/product.js

@@ -17,6 +17,9 @@ const contents = {
     "https://www.orfonline.org/wp-content/uploads/2015/12/150905-Onion-prices-and-Indian-politics-1280x720.jpg",
     "https://www.orfonline.org/wp-content/uploads/2015/12/150905-Onion-prices-and-Indian-politics-1280x720.jpg",
   ],
+  specificproductpage: [
+    "/product_details"
+  ],
   names: ["Rice", "SugarCane", "Corn", "Onion", "Onion2"],
   dates: ["26/10/2020", "01/02/2021", "02/02/2021", "04/06/2021", "05/06/2021"],
   rating: ["4.6", "4.5", "4.2", "4.4"],
@@ -76,11 +79,11 @@ contents.imagelinks.forEach(function (mov, ind) {
       rgb(155, 250, 176),
       rgb(133, 245, 235)
     ); cursor: pointer;">Add to Cart 🛒</button>
-    <button style="width:100%;font-size: 0.8em; float: right;border-radius:8px;  padding :0.2vw; background: linear-gradient(
+    <a href=${contents.specificproductpage}><button style="width:100%;font-size: 0.8em; float: right;border-radius:8px;  padding :0.2vw; background: linear-gradient(
       to top left,
       rgb(155, 250, 176),
       rgb(133, 245, 235)
-    ); cursor: pointer;">Buy</button>
+    ); cursor: pointer;">Buy</button></a>
     </div>
     </div>
     </div>

routes/index.js

@@ -21,11 +21,14 @@ router.get('/product', function (req, res, next) {
     res.render("product");
 });
 router.get('/createtrade', function (req, res, next) {
-    res.render("post");
+    res.render("createtrade");
 });
 router.get('/customer_login', function (req, res, next) {
     res.render("customer_login");
 });
+router.get('/product_details', function (req, res, next) {
+    res.render("product_details");
+});
 router.get('/customer_registration', function (req, res, next) {
     res.render("customer_registration");
 });

views/about.ejs

 <html>
-  <head>
-    <title>KISAN MARKET</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type" />
-    <link
-      rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
-    />
-    <link
-      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"
-      rel="stylesheet"
-    />
-    <link
-      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
-      integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
-      crossorigin="anonymous"
-    />
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
-    <style>
-      /* Remove the navbar's default rounded borders and increase the bottom margin */
-      * {
-        padding: 0px;
-        margin: 0px;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        text-decoration: none;
-      }
-
-      html {
-        font-size: 120%;
-      }
-      * body {
-        height: 100%;
-        z-index: 0px;
-        font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
-        list-style: none;
-        font-size: 20px;
-        background-color: #ede0d4;
-      }
-      nav {
-        width: 100%;
-        height: 50px;
-        background-color: black;
-        display: inline-block;
-        border-bottom: 1px solid #eaeaeb;
-      }
-
-      #nav_title {
-        color: white;
-        -ms-flex-item-align: center;
-        -ms-grid-row-align: center;
-        align-self: center;
-        font-size: 20px;
-        line-height: 50px;
-      }
-
-      li.dropdown {
-        display: inline-block;
-        -ms-flex-item-align: center;
-        -ms-grid-row-align: center;
-        align-self: center;
-      }
-
-      .dropdown-content {
-        display: none;
-        position: absolute;
-        background-color: #f9f9f9;
-        min-width: 60px;
-        -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-        z-index: 1;
-      }
-
-      a {
-        font-size: 15px;
-        color: white;
-        text-decoration: none;
-      }
-      a:hover {
-        color: black;
-        -webkit-transition: 0.5s;
-        transition: 0.5s;
-      }
-      .dropdown-content a {
-        color: black;
-        text-decoration: none;
-        display: block;
-        text-align: center;
-      }
-
-      .dropdown:hover .dropdown-content {
-        display: block;
-      }
-      .active {
-        color: white;
-      }
-      .noactive {
-        color: rgba(255, 255, 255, 0.6);
-      }
-      .noactive:hover {
-        color: white;
-      }
-      #logo {
-        background-image: url("https://1.bp.blogspot.com/-l8IAJUh3F-c/XP1Av6Jv0CI/AAAAAAAAXVI/DZMZyC_aR0EC0hqf9A2mgcHP2tQb4MkZQCLcBGAs/s320/farmer.png.png");
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-        float: left;
-        height: 90%;
-        aspect-ratio: 1/1;
-        -ms-flex-item-align: center;
-        -ms-grid-row-align: center;
-        align-self: center;
-        margin: 0px 10px;
-      }
-      #menu {
-        display: none;
-      }
-
-      #menu_label {
-        display: none;
-        font-size: 1.4em;
-        float: right;
-        line-height: 50px;
-      }
-      @media (max-width: 700px) {
-        #menu_label {
-          display: block;
-        }
-        .ul {
-          clear: right;
-          position: fixed;
-          z-index: -2;
-          display: none;
-          right: -100%;
-          background-color: #7a7af8;
-          margin-right: 0px;
-          -webkit-transition: left 0.5s;
-          transition: left 0.5s;
-        }
-        #ul2 {
-          clear: right;
-          position: fixed;
-          z-index: -2;
-          display: none;
-          right: -100%;
-          background-color: #7a7af8;
-          margin-right: 0px;
-          -webkit-transition: left 0.5s;
-          transition: left 0.5s;
-        }
-        .li {
-          display: block;
-          width: 100vw;
-          margin-right: 0px;
-          text-align: center;
-        }
-        .dropdown-content {
-          display: block;
-          position: relative;
-        }
-        #menu:checked ~ ul ul.ul {
-          position: relative;
-
-          display: block;
-          z-index: 9;
-          top: 0;
-          right: 0;
-        }
-        #menu:checked ~ ul ul#ul2 {
-          position: relative;
-          display: block;
-          z-index: 9;
-          right: -3%;
-          top: 0;
-        }
-        .dropdown-content {
-          width: 100vw;
-        }
-        .left_top {
-          position: static;
-          z-index: 15;
-          width: 100%;
-        }
-        .left_bottom {
-          position: static;
-          z-index: 15;
-          width: 100%;
-        }
-      }
-      ul {
-        display: inline;
-      }
-      @media (max-width: 1118px) {
-        html {
-          font-size: 1.5vw;
-        }
-        .box {
-          width: 30%;
-        }
-        #nav_title {
-          font-size: 1.5vw;
-        }
-      }
-
-      @media (max-width: 917px) {
-        html {
-          font-size: 2vw;
-        }
-      }
-
-      @media (max-width: 610px) {
-        html {
-          font-size: 4vw;
-        }
-        .box {
-          width: 47%;
-        }
-        #nav_title {
-          font-size: 3vw;
-        }
-      }
-
-      .ul {
-        font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
-        color: #2f00ff;
-        margin-right: 10px;
-        line-height: 50px;
-        list-style: none;
-      }
-
-      .li {
-        display: inline-block;
-        border-radius: 3px;
-        margin-right: 10px;
-      }
-
-      /* Add a gray background color and some padding to the footer */
-      footer {
-        background-color: #f2f2f2;
-        padding: 25px;
-      }
-      img {
-        vertical-align: middle;
-      }
-
-      .intro {
-        float: left;
-        margin: 5px 15px;
-        color: white;
-      }
-
-      @-webkit-keyframes fade {
-        from {
-          opacity: 0.2;
-        }
-
-        to {
-          opacity: 1;
-        }
-      }
-
-      @keyframes fade {
-        from {
-          opacity: 0.2;
-        }
-
-        to {
-          opacity: 1;
-        }
-      }
-
-      /* On smaller screens, decrease text size */
-      @media only screen and (max-width: 300px) {
-        .text {
-          font-size: 11px;
-        }
-      }
-
-      p {
-        text-align: center;
-        width: 90%;
-        margin-left: 50px;
-        margin-right: 50px;
-        padding: 10px;
-        text-align: justify;
-        word-break: keep-all;
-      }
-      .footer {
-        position: fixed;
-        height: 13%;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        background-color: lightgray;
-        color: black;
-        text-align: center;
-        padding: 10px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <nav>
-      <span id="logo" style="margin: 0px 15px 0px 50px"></span>
-      <span class="name" id="nav_title" style="margin-right: 30px"
-        >Kisan Market</span
-      >
-      <input type="checkbox" id="menu" />
-      <label for="menu" id="menu_label" style="color: white; margin-right: 10px"
-        >&#9776;</label
-      >
-      <ul>
-        <ul class="ul">
-          <li class="li"><a href="/" class="noactive">Home</a></li>
-          <li class="li"><a href="/about" class="active">About us</a></li>
-          <li class="li">
-            <a href="/product" class="noactive">Crop products</a>
-          </li>
-          <li class="li"><a href="/createtrade" class="noactive">Create Trade</a></li>
-        </ul>
-        <ul class="ul" style="float: right" id="ul2">
-          <li class="dropdown li">
-            <a href="javascript:void(0)" class="dropbtn noactive">FARMER</a>
-            <div class="dropdown-content">
-              <center>
-                <a href="/FARMER_LOGIN">Login</a>
-              </center>
-              <center>
-                <a href="/farmer_registration_form">Registration</a>
-              </center>
-            </div>
-          </li>
-          <li class="dropdown li">
-            <a href="javascript:void(0)" class="dropbtn noactive">CUSTOMER</a>
-            <div class="dropdown-content">
-              <center>
-                <a href="/customer_login"><center>Login</center></a>
-              </center>
-              <center><a href="/customer_registration">Registration</a></center>
-            </div>
-          </li>
-        </ul>
+<head>
+  <title>KISAN MARKET</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type" />
+  <link rel="stylesheet" type="text/css" href="../stylesheets/navbar.css" />
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
+    integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous" />
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
+  <style>
+    /* Remove the navbar's default rounded borders and increase the bottom margin */
+    * {
+      padding: 0px;
+      margin: 0px;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      text-decoration: none;
+    }
+
+    html {
+      font-size: 120%;
+    }
+
+    * body {
+      height: 100%;
+      z-index: 0px;
+      font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
+      list-style: none;
+      font-size: 20px;
+      background-color: #ede0d4;
+    }
+
+    p {
+      text-align: center;
+      width: 90%;
+      margin-left: 50px;
+      margin-right: 50px;
+      padding: 10px;
+      text-align: justify;
+      word-break: keep-all;
+    }
+
+    .footer {
+      position: fixed;
+      height: 13%;
+      left: 0;
+      bottom: 0;
+      width: 100%;