<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/slider.css" rel="stylesheet">
</head>
<style>
<style>
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
@media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
</style>
<body class="">
<div class="topnav" style=" margin-bottom: 20px;" >
<a style="padding-top:0px; padding-bottom: 0px"><img src="images/62001386_2260555617606414_5230749208469831680_n.jpg" width="140px" height="46px"></a>
<a href="index.html">Home</a>
<a href="gallery.html">Gallery</a>
<a class="active" href="products.html">Products</a>
<a href="fruitsandvegitables.html">Fruits and Vegitables</a>
<a href="aboutus.html">About us</a>
<a href="contactus.html">Contact us</a>
<a href="login.php">Log In</a>
<a href="register.php">Register</a>
<div class="search-container">
<form action="search.php" method="POST">
<input type="text" placeholder="Search.." name="name">
<button type="submit" value="submit" name="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="section1" style=" margin-bottom: 20px;">
<h2 style="text-align:center">Prices</h2>
<div class="columns">
<ul class="price">
<li class="header">Cereal porridge</li>
<li class="grey">Rs 250/= </li>
<li><img src="images/10.jpg" width="300px" height="300px"></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Gotukola and karapincha porridge</li>
<li class="grey">Rs 350/= </li>
<li><img src="images/11.jpg" width="300px" height="300px"></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Traditional porridge</li>
<li class="grey">Rs 200/= </li>
<li><img src="images/12.jpg" width="300px" height="300px"></li>
</ul>
</div>
</div>
<div class="section2" style=" margin-bottom: 20px;">
<div class="left">
<div id="order">
<div class="container">
<div id="order-row" class="row justify-content-center align-items-center">
<div id="order-column" class="col-md-6">
<div id="order-box" class="col-md-12">
<div class="row"
<div class="col_3">
<form method="POST" action="order.php" onsubmit="return validateForm()">
<div class="form-group">
<label for="ProductName" class="col-sm-3 control-label">Product Name</label><br>
<input name="name" type="text" required><br>
</div>
<div class="form-group">
<label>Quantity</label><br>
<input name="Quantity" type="Quantity" required><br>
</div>
<hr>
<div class="form-group">
<input name="Order" type="submit" value="Order" onClick='conf()'>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function conf()
{
var con=confirm("order successful!");
}
</script>
<footer class="footer-distributed">
<div class="footer-left">
<a><img src="images/62001386_2260555617606414_5230749208469831680_n.jpg" alt="" width="300px" height="" ></a>
<p class="footer-links">
<a href="index.html" class="link-1">Home</a>
<a href="gallery.html">Gallery</a>
<a href="products.html">Products</a>
<a href="aboutus.html">About us</a>
<a href="contactus.html">Contact us</a>
</p>
<p class="footer-company-name">Mackfab Name © 2015</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p>Mackfab Industries (PVT) LTD,<br> Thimbirigaskatuwa, Negambo</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>077 786 1863</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="Mackfab:support@company.com">support@Mackfab.com</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the company</span>
The thing is, I don’t want to be sold to when I walk into a store. I want to be welcomed.
– Angela Ahrendts, Senior Vice President of Retail at Limoni Inc.
</p>
<div class="footer-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
</div>
</div>
</footer>
<script src="js/slider.js"></script>
<script>
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>