Upload New File
views/product1.ejs
0 → 100644
<!DOCTYPE html> | ||
<html> | ||
<title>KISAN MARKET</title> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> | ||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> | ||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
<style> | ||
.w3-sidebar a {font-family: "Roboto", sans-serif} | ||
body,h1,h2,h3,h4,h5,h6,.w3-wide {font-family: "Montserrat", sans-serif;} | ||
</style> | ||
<body class="w3-content" style="max-width:1700px"> | ||
<style> | ||
<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 */ | ||
ul { | ||
list-style-type: none; | ||
margin: 0; | ||
padding: 0; | ||
overflow: hidden; | ||
background-color: #333; | ||
} | ||
li { | ||
float: left; | ||
} | ||
li a, .dropbtn { | ||
display: inline-block; | ||
color: white; | ||
text-align: center; | ||
padding: 14px 16px; | ||
text-decoration: none; | ||
} | ||
li a:hover, .dropdown:hover .dropbtn { | ||
background-color: #f2f2f2; | ||
} | ||
li.dropdown { | ||
display: inline-block; | ||
} | ||
.dropdown-content { | ||
display: none; | ||
position: absolute; | ||
background-color: #f9f9f9; | ||
min-width: 160px; | ||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
z-index: 1; | ||
} | ||
.dropdown-content a { | ||
color: black; | ||
padding: 12px 16px; | ||
text-decoration: none; | ||
display: block; | ||
text-align: left; | ||
} | ||
.dropdown-content a:hover {background-color: #f1f1f1;} | ||
.dropdown:hover .dropdown-content { | ||
display: block; | ||
} | ||
/* Remove the jumbotron's default bottom margin */ | ||
.jumbotron { | ||
margin-bottom: 0; | ||
} | ||
/* Add a gray background color and some padding to the footer */ | ||
footer { | ||
background-color: #f2f2f2; | ||
padding: 25px; | ||
} | ||
* {box-sizing: border-box;} | ||
body {font-family: Verdana, sans-serif;} | ||
.mySlides {display: none;} | ||
img {vertical-align: middle;} | ||
/* Slideshow container */ | ||
.slideshow-container { | ||
max-width: 1000px; | ||
position: relative; | ||
margin: auto; | ||
} | ||
/* 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; | ||
} | ||
/* 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; | ||
} | ||
.active { | ||
background-color: #717171; | ||
} | ||
/* Fading animation */ | ||
.fade { | ||
-webkit-animation-name: fade; | ||
-webkit-animation-duration: 3s; | ||
animation-name: fade; | ||
animation-duration: 3s; | ||
} | ||
@-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> | ||
<!-- Sidebar/menu --> | ||
<nav class="w3-sidebar w3-bar-block w3-white w3-collapse w3-top" style="z-index:3;width:250px" id="mySidebar"> | ||
<div class="w3-container w3-display-container w3-padding-16"> | ||
<i onclick="w3_close()" class="fa fa-remove w3-hide-large w3-button w3-display-topright"></i> | ||
<img src="https://1.bp.blogspot.com/-l8IAJUh3F-c/XP1Av6Jv0CI/AAAAAAAAXVI/DZMZyC_aR0EC0hqf9A2mgcHP2tQb4MkZQCLcBGAs/s320/farmer.png.png" style="height:100px;width:100px"> | ||
</div> | ||
<div class="w3-padding-64 w3-large w3-text-grey" style="font-weight:bold"> | ||
<div class="w3-container"> | ||
<div class="w3-dropdown-hover"> | ||
<button class="w3-button w3-white">paddy <i class="fa fa-caret-down"></i></button> | ||
<div class="w3-dropdown-content w3-bar-block w3-border"> | ||
<a href="#" class="w3-bar-item w3-button">basmati</a> | ||
<a href="#" class="w3-bar-item w3-button">brown rice</a> | ||
<a href="#" class="w3-bar-item w3-button">boiled rice</a> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="w3-container"> | ||
<div class="w3-dropdown-hover"> | ||
<button class="w3-button w3-white">onions <i class="fa fa-caret-down"></i></button> | ||
<div class="w3-dropdown-content w3-bar-block w3-border"> | ||
<a href="#" class="w3-bar-item w3-button">white onions</a> | ||
<a href="#" class="w3-bar-item w3-button">red onions</a> | ||
<a href="#" class="w3-bar-item w3-button">yellow onions</a> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="w3-container"> | ||
<div class="w3-dropdown-hover"> | ||
<button class="w3-button w3-white">Cotton<i class="fa fa-caret-down"></i></button> | ||
<div class="w3-dropdown-content w3-bar-block w3-border"> | ||
<a href="#" class="w3-bar-item w3-button">white cotton</a> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="w3-container"> | ||
<div class="w3-dropdown-hover"> | ||
<button class="w3-button w3-white">Chilli<i class="fa fa-caret-down"></i></button> | ||
<div class="w3-dropdown-content w3-bar-block w3-border"> | ||
<a href="#" class="w3-bar-item w3-button">Jwala Chilli</a> | ||
<a href="#" class="w3-bar-item w3-button">Guntur Chilli</a> | ||
<a href="#" class="w3-bar-item w3-button">Capsicum</a> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="w3-container"> | ||
<div class="w3-dropdown-hover"> | ||
<button class="w3-button w3-white">Sugarcane<i class="fa fa-caret-down"></i></button> | ||
<div class="w3-dropdown-content w3-bar-block w3-border"> | ||
<a href="#" class="w3-bar-item w3-button">Nizam Deccan Sugars</a> | ||
<a href="#" class="w3-bar-item w3-button">Kakatiya Cement Sugars</a> | ||
<a href="#" class="w3-bar-item w3-button">Gayatri Sugars</a> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="w3-container"> | ||
<div class="w3-dropdown-hover"> | ||
<button class="w3-button w3-white">Maize<i class="fa fa-caret-down"></i></button> | ||
<div class="w3-dropdown-content w3-bar-block w3-border"> | ||
<a href="#" class="w3-bar-item w3-button">Yellow Maize Seeds</a> | ||
<a href="#" class="w3-bar-item w3-button">Hybrid Corn Seeds</a> | ||
<a href="#" class="w3-bar-item w3-button"> Penna-405+ Hybrid Maize Seeds | ||
</a> | ||
</div> | ||
</div> | ||
</div> | ||
<a href="#footer" class="w3-bar-item w3-button w3-padding">Contact</a> | ||
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-padding" onclick="document.getElementById('newsletter').style.display='block'">Newsletter</a> | ||
<a href="#footer" class="w3-bar-item w3-button w3-padding">Subscribe</a> | ||
</nav> | ||
<!-- Top menu on small screens --> | ||
<header class="w3-bar w3-top w3-hide-large w3-black w3-xlarge"> | ||
<div class="w3-bar-item w3-padding-24 w3-wide"><img src="https://1.bp.blogspot.com/-l8IAJUh3F-c/XP1Av6Jv0CI/AAAAAAAAXVI/DZMZyC_aR0EC0hqf9A2mgcHP2tQb4MkZQCLcBGAs/s320/farmer.png.png" style="height:100px;width:100px"></div> | ||
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-padding-24 w3-right" onclick="w3_open()"><i class="fa fa-bars"></i></a> | ||
</header> | ||
<!-- Overlay effect when opening sidebar on small screens --> | ||
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div> | ||
<!-- !PAGE CONTENT! --> | ||
<div class="w3-main" style="margin-left:250px"> | ||
<!-- Push down content on small screens --> | ||
<div class="w3-hide-large" style="margin-top:83px"></div> | ||
<!-- Top header --> | ||
<header class="w3-container w3-xlarge"> | ||
<p class="w3-left">KISAN MARKET</p> | ||
<p class="w3-right"> | ||
<i class="fa fa-shopping-cart w3-margin-right"></i> | ||
<i class="fa fa-search"></i> | ||
</p> | ||
</header> | ||
<!-- Image header --> | ||
<div class="slideshow-container"> | ||
<div class="mySlides fade"> | ||
<div class="numbertext">1 / 3</div> | ||
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYvWliEz4livzGcvUAiRHhjTJrae4c8XfUf6XzF4mE0aagom3S" style="width:100%"> | ||
<div class="text"></div> | ||
</div> | ||
<div class="mySlides fade"> | ||
<div class="numbertext">2 / 3</div> | ||
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYvWliEz4livzGcvUAiRHhjTJrae4c8XfUf6XzF4mE0aagom3S" style="width:100%"> | ||
<div class="text"></div> | ||
</div> | ||
<div class="mySlides fade"> | ||
<div class="numbertext">3 / 3</div> | ||
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYvWliEz4livzGcvUAiRHhjTJrae4c8XfUf6XzF4mE0aagom3S" style="width:100%"> | ||
<div class="text"></div> | ||
</div> | ||
</div> | ||
<br> | ||
<div style="text-align:center"> | ||
<span class="dot"></span> | ||
<span class="dot"></span> | ||
<span class="dot"></span> | ||
</div> | ||
<script> | ||
var slideIndex = 0; | ||
showSlides(); | ||
function showSlides() { | ||
var i; | ||
var slides = document.getElementsByClassName("mySlides"); | ||
var dots = document.getElementsByClassName("dot"); | ||
for (i = 0; i < slides.length; i++) { | ||
slides[i].style.display = "none"; | ||
} | ||
slideIndex++; | ||
if (slideIndex > slides.length) {slideIndex = 1} | ||
for (i = 0; i < dots.length; i++) { | ||
dots[i].className = dots[i].className.replace(" active", ""); | ||
} | ||
slides[slideIndex-1].style.display = "block"; | ||
dots[slideIndex-1].className += " active"; | ||
setTimeout(showSlides, 2000); // Change image every 3 seconds | ||
} | ||
</script> | ||
<div class="container"> | ||
<div class="row"> | ||
<div class="col-sm-4"> | ||
<div class="panel panel-danger"> | ||
<div class="panel-heading">JOWAR</div> | ||
<div class="rating"> | ||
<div class="stars"> | ||
<span class="fa fa-star checked"></span> | ||
<span class="fa fa-star checked"></span> | ||
<span class="fa fa-star checked"></span> | ||
<span class="fa fa-star checked"></span> | ||
<span class="fa fa-star"></span> | ||
<span class="fa fa-star"></span> | ||
</div> | ||
<span class="review-no">63 reviews</span> | ||
</div> | ||
<div class="panel-body"><img src="https://images-na.ssl-images-amazon.com/images/I/61Wu8zDwTGL.jpg" class="img-responsive" style="height:250px;width:250px" alt="Image"></div> | ||
<div class="panel-footer">JOWAR<br>PRICE:2430(per quintal)</br>POSTED BY:FARMER<br>UPDATED DATE:10-06-19</br></div> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<div class="action"> | ||
<button class="add-to-cart btn btn-default" type="button">add to cart</button> | ||
<button class="like btn btn-default" type="button"><span class="fa fa-heart"></span></button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="container"> | ||
<div class="col-sm-4"> | ||
<div class="panel panel-success"> | ||
<div class="panel-heading">ONIONS</div> | ||
<div class="rating"> | ||
<div class="stars"> | ||
<span class="fa fa-star checked"></span> | ||
<span class="fa fa-star checked"></span> | ||
<span class="fa fa-star checked"></span> | ||
<span class="fa fa-star checked"></span> | ||
<span class="fa fa-star"></span> | ||
<span class="fa fa-star"></span> | ||
</div> | ||
<span class="review-no">48 reviews</span> | ||
</div> | ||
<div class="panel-body"><img src="https://5.imimg.com/data5/TP/GN/MY-35703403/red-onion-250x250.jpg" style="width:75%" alt="Image"></div> | ||
<div class="panel-footer">ONIONS<br>PRICE:1100(per quintal)</br>POSTED BY:FARMER<br>UPDATED DATE:10-06-19</br></div> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<div class="action"> | ||
<button class="add-to-cart btn btn-default" type="button">add to cart</button> | ||
<button class="like btn btn-default" type="button"><span class="fa fa-heart"></span></button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div><br> | ||
<!-- Subscribe section --> | ||
<div class="w3-container w3-black w3-padding-32"> | ||
<h1>Subscribe</h1> | ||
<p>To get special offers and VIP treatment:</p> | ||
<p><input class="w3-input w3-border" type="text" placeholder="Enter e-mail" style="width:100%"></p> | ||
<button type="button" class="w3-button w3-red w3-margin-bottom">Subscribe</button> | ||
</div> | ||
<!-- Footer --> | ||
<footer class="w3-padding-64 w3-light-grey w3-small w3-center" id="footer"> | ||
<div class="w3-row-padding"> | ||
<div class="w3-col s4"> | ||
<h4>Contact</h4> | ||
<p>Questions? Go ahead.</p> | ||
<form action="/action_page.php" target="_blank"> | ||
<p><input class="w3-input w3-border" type="text" placeholder="Name" name="Name" required></p> | ||
<p><input class="w3-input w3-border" type="text" placeholder="Email" name="Email" required></p> | ||
<p><input class="w3-input w3-border" type="text" placeholder="Subject" name="Subject" required></p> | ||
<p><input class="w3-input w3-border" type="text" placeholder="Message" name="Message" required></p> | ||
<button type="submit" class="w3-button w3-block w3-black">Send</button> | ||
</form> | ||
</div> | ||
<div class="w3-col s4"> | ||
<h4>About</h4> | ||
<p><a href="#">About us</a></p> | ||
<p><a href="#">We're hiring</a></p> | ||
<p><a href="#">Support</a></p> | ||
<p><a href="#">Find store</a></p> | ||
<p><a href="#">Shipment</a></p> | ||
<p><a href="#">Payment</a></p> | ||
<p><a href="#">Gift card</a></p> | ||
<p><a href="#">Return</a></p> | ||
<p><a href="#">Help</a></p> | ||
</div> | ||
<div class="w3-col s4 w3-justify"> | ||
<h4>Store</h4> | ||
<p><i class="fa fa-fw fa-map-marker"></i> Company Name</p> | ||
<p><i class="fa fa-fw fa-phone"></i> 0044123123</p> | ||
<p><i class="fa fa-fw fa-envelope"></i> [email protected]</p> | ||
<h4>We accept</h4> | ||
<p><i class="fa fa-fw fa-cc-amex"></i> Amex</p> | ||
<p><i class="fa fa-fw fa-credit-card"></i> Credit Card</p> | ||
<br> | ||
<i class="fa fa-facebook-official w3-hover-opacity w3-large"></i> | ||
<i class="fa fa-instagram w3-hover-opacity w3-large"></i> | ||
<i class="fa fa-snapchat w3-hover-opacity w3-large"></i> | ||
<i class="fa fa-pinterest-p w3-hover-opacity w3-large"></i> | ||
<i class="fa fa-twitter w3-hover-opacity w3-large"></i> | ||
<i class="fa fa-linkedin w3-hover-opacity w3-large"></i> | ||
</div> | ||
</div> | ||
</footer> | ||
<div class="w3-black w3-center w3-padding-24">Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-opacity">w3.css</a></div> | ||
<!-- End page content --> | ||
</div> | ||
<!-- Newsletter Modal --> | ||
<div id="newsletter" class="w3-modal"> | ||
<div class="w3-modal-content w3-animate-zoom" style="padding:32px"> | ||
<div class="w3-container w3-white w3-center"> | ||
<i onclick="document.getElementById('newsletter').style.display='none'" class="fa fa-remove w3-right w3-button w3-transparent w3-xxlarge"></i> | ||
<h2 class="w3-wide">NEWSLETTER</h2> | ||
<p>Join our mailing list to receive updates on new arrivals and special offers.</p> | ||
<p><input class="w3-input w3-border" type="text" placeholder="Enter e-mail"></p> | ||
<button type="button" class="w3-button w3-padding-large w3-red w3-margin-bottom" onclick="document.getElementById('newsletter').style.display='none'">Subscribe</button> | ||
</div> | ||
</div> | ||
</div> | ||
<script> | ||
// Accordion | ||
function myAccFunc() { | ||
var x = document.getElementById("demoAcc"); | ||
if (x.className.indexOf("w3-show") == -1) { | ||
x.className += " w3-show"; | ||
} else { | ||
x.className = x.className.replace(" w3-show", ""); | ||
} | ||
} | ||
// Click on the "Jeans" link on page load to open the accordion for demo purposes | ||
document.getElementById("myBtn").click(); | ||
// Open and close sidebar | ||
function w3_open() { | ||
document.getElementById("mySidebar").style.display = "block"; | ||
document.getElementById("myOverlay").style.display = "block"; | ||
} | ||
function w3_close() { | ||
document.getElementById("mySidebar").style.display = "none"; | ||
document.getElementById("myOverlay").style.display = "none"; | ||
} | ||
</script> | ||
</body> | ||
</html> | ||
Please register or sign in to comment