Commit d84a6327 authored by Yash Saravgi's avatar Yash Saravgi
Browse files

Master merge request

parent 4fd6226e
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', 'sans-serif';
font-weight: 400;
}
a {
text-decoration: none;
}
.info-text {
text-align: left;
width: 100%;
}
header, form {
padding: 4em 10%;
}
.form-group {
margin-bottom: 20px;
}
h2.heading {
font-size: 18px;
text-transform: uppercase;
font-weight: 300;
text-align: left;
color: #506982;
border-bottom: 1px solid #506982;
padding-bottom: 3px;
margin-bottom: 20px;
}
.controls {
text-align: left;
position: relative;
}
.controls input[type="text"], .controls input[type="email"], .controls input[type="number"], .controls input[type="date"], .controls input[type="tel"], .controls textarea, .controls button, .controls select {
padding: 12px;
font-size: 14px;
border: 1px solid #c6c6c6;
width: 100%;
margin-bottom: 18px;
color: #888;
font-family: 'Lato', 'sans-serif';
font-size: 16px;
font-weight: 300;
border-radius: 2px;
transition: all 0.3s;
}
.controls input[type="text"]:focus, .controls input[type="email"]:focus, .controls input[type="number"]:focus, .controls input[type="date"]:focus, .controls input[type="tel"]:focus, .controls textarea:focus, .controls button:focus, .controls select:focus, .controls input[type="text"]:hover, .controls input[type="email"]:hover, .controls input[type="number"]:hover, .controls input[type="date"]:hover, .controls input[type="tel"]:hover, .controls textarea:hover, .controls button:hover, .controls select:hover {
outline: none;
border-color: #9fb1c1;
}
.controls input[type="text"]:focus + label, .controls input[type="email"]:focus + label, .controls input[type="number"]:focus + label, .controls input[type="date"]:focus + label, .controls input[type="tel"]:focus + label, .controls textarea:focus + label, .controls button:focus + label, .controls select:focus + label, .controls input[type="text"]:hover + label, .controls input[type="email"]:hover + label, .controls input[type="number"]:hover + label, .controls input[type="date"]:hover + label, .controls input[type="tel"]:hover + label, .controls textarea:hover + label, .controls button:hover + label, .controls select:hover + label {
color: #bdcc00;
cursor: text;
}
.controls .fa-sort {
position: absolute;
right: 10px;
top: 17px;
color: #999;
}
.controls select {
appearance: none;
cursor: pointer;
}
.controls label {
position: absolute;
left: 8px;
top: 12px;
width: 60%;
color: #999;
font-size: 16px;
display: inline-block;
padding: 4px 10px;
font-weight: 400;
background-color: rgba(255, 255, 255, 0);
transition: color 0.3s, top 0.3s, background-color 0.8s;
background-color: rgba(255, 255, 255, 1);
}
.controls label.active {
top: -11px;
color: #555;
background-color: rgba(255, 255, 255, 1);
width: auto;
}
.controls textarea {
resize: none;
height: 200px;
}
button {
cursor: pointer;
background-color: #1b3d4d;
border: none;
color: #fff;
padding: 12px 0;
float: right;
}
button:hover {
background-color: #224c60;
}
.clear:after {
content: "";
display: table;
clear: both;
}
.grid {
background: white;
}
.grid:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
}
[class*='col-'] {
float: left;
padding-right: 10px;
}
.grid [class*='col-']:last-of-type {
padding-right: 0;
}
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
.col-1-2 {
width: 50%;
}
.col-1-4 {
width: 25%;
}
@media (max-width: 760px) {
.col-1-4-sm, .col-1-3, .col-2-3 {
width: 100%;
}
[class*='col-'] {
padding-right: 0px;
}
}
.col-1-8 {
width: 12.5%;
}
......@@ -20,6 +20,9 @@ router.get('/farmer_registration_form', function (req, res, next) {
router.get('/product', function (req, res, next) {
res.render("product");
});
router.get('/createtrade', function (req, res, next) {
res.render("post");
});
router.get('/customer_login', function (req, res, next) {
res.render("customer_login");
});
......
......@@ -326,6 +326,7 @@
<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">
......
......@@ -355,6 +355,9 @@
<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">
......
<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 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>
<link rel="stylesheet" type="text/css" href="../stylesheets/post.css" />
<style>
* {
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;
}
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: 15px;
float: right;
line-height: 50px;
}
@media (max-width: 700px) {
#menu_label {
font-size: 1.4em;
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: 0;
display: block;
z-index: 9;
right: 0;
top: 0;
}
#menu:checked~ul ul#ul2 {
position: relative;
margin: 0;
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;
}
.mySlides {
display: none;
}
.mySlides img {
height: 300px;
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
display: none;
}
@media only screen and (min-width: 910px) {
.slideshow-container {
display: block;
position: relative;
margin: 20px 15px;
}
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.intro {
float: left;
margin: 5px 15px;
color: white;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 4s;
animation-name: fade;
animation-duration: 4s;
}
@-webkit-keyframes fade {
from {
opacity: .2
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .2
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
</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="active">Home</a></li>
<li class="li"><a href="/about" class="noactive">About us</a></li>
<li class="li">
<a href="/product" class="noactive">Crop products</a>
</li>
<li class="li"><a href="/createtrade" class="active">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>
</ul>
</nav>
<form action="">
<!-- General -->
<div class="form-group">
<h2 class="heading">Booking & contact</h2>
<div class="controls">
<input type="text" id="name" class="floatLabel" name="name">
<label for="name">Name</label>
</div>
<div class="controls">
<input type="text" id="email" class="floatLabel" name="email">
<label for="email">Email</label>
</div>
<div class="controls">
<input type="tel" id="phone" class="floatLabel" name="phone">
<label for="phone">Phone</label>
</div>
<div class="grid">
<div class="col-2-3">
<div class="controls">
<input type="text" id="street" class="floatLabel" name="street">
<label for="street">Street</label>
</div>
</div>
<div class="col-1-3">
<div class="controls">
<input type="number" id="street-number" class="floatLabel" name="street-number">
<label for="street-number">Number</label>
</div>
</div>
</div>
<div class="grid">
<div class="col-2-3">
<div class="controls">
<input type="text" id="city" class="floatLabel" name="city">
<label for="city">City</label>
</div>
</div>
<div class="col-1-3">
<div class="controls">
<input type="text" id="post-code" class="floatLabel" name="post-code">
<label for="post-code">Post Code</label>
</div>
</div>
</div>
<div class="controls">
<input type="text" id="country" class="floatLabel" name="country">
<label for="country">Country</label>