Commit 7f280b68 authored by Yash Saravgi's avatar Yash Saravgi
Browse files

Improve navbar css and add product details page link

parent d84a6327
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
......@@ -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>
......
......@@ -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");
});
......
<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%;