Skip to content

Zakhar / WTB1920_team1

Go to a project
Commit 5bbe50db by Yana
Options

added filters to food_page

parent da3154ed
Inline Side-by-side
Showing with 114 additions and 155 deletions
application-bootstrap_lab/css/style.css
......@@ -9033,4 +9033,84 @@ ul li a:hover::before {
margin: 0;
padding: 0;
display: inline-block;
}
.zoekbox {
font-size: 0.75em;
width: 105px;
margin-top: 15px;
padding: 5px;
border-radius: 5px;
}
h1 {
font-size: 2em;
}
.grid-item {
height: 150px;
box-sizing: border-box;
padding: 15px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
.grid-item a, .grid-item div a {
display: inline-block;
text-decoration: none;
font-size: 0.85em;
margin-bottom: 10px;
color: inherit;
line-height: 1.2em;
}
.grid-item a {
font-size: 1.1em;
}
.grid-item div {
display: none;
position: absolute;
bottom: 3px;
left: 15px;
}
.grid-item:hover > div, .grid-item:focus > div{
display: block;
}
.main div {
display: block;
position: static;
}
.main div a {
display: block;
}
header {
padding: 15px;
}
header a {
font-size: .85em;
margin-bottom: 0px;
margin-top: 10px;
text-decoration: none;
color: black;
margin-left: 15px;
}
.grid-sizer,
.grid-item {
width: 20%;
}
.is-checked {
background-color: black;
color: white;
padding: 5px;
border-radius: 5px;
}
\ No newline at end of file
application-bootstrap_lab/food_page.html
......@@ -22,6 +22,7 @@
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.timepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/flaticon.css">
......@@ -46,166 +47,43 @@
</nav>
<!-- Page Features -->
<div class="row text-center boxes">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<header>
<h1>Choose an order!</h1>
<a href="#"><span class="is-checked" data-filter="*">All</span></a>
<a href="#"><span data-filter=".Vegeterian">Vegeterian</span></a>
<a href="#"><span data-filter=".Deserts">Deserts</span></a>
<a href="#"><span data-filter=".Drinks">Drinks</span></a>
<a href="#"><span data-filter=".Special">Special offers</span></a>
</header>
<div class="grid">
<div class="grid-item Deserts Vegeterian" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/zKoXWX/">Nombre1</a></div>
<div class="grid-item Deserts" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/bwYwgx">Nombre2</a></div>
<div class="grid-item Deserts" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/KgRGdR">Nombre3</a></div>
<div class="grid-item Deserts" data-text-color="#000" data-image="https:" data-trans-color="#FFF"><a href="https://codepen.io/evalasters/pen/RGddRY">Nombre4</a></div>
<div class="grid-item Deserts Special Vegeterian" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/pEMaXV">Nombre5</a></div>
<div class="grid-item Drinks Vegeterian Special" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/xRqjaV">Nombre6</a></div>
<div class="grid-item Drinks Vegeterian Special" data-text-color="#000" data-image="https:"><a href="https://evalastersstudent.github.io/PortfolioEvaLasters/">Nombre9</a></div>
<div class="grid-item Deserts Special" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/oBvRMx">Nombre10</a></div>
<div class="grid-item Deserts Vegeterian Special" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/xReoXQ">Nombre11</a></div>
</div>
<!-- partial -->
<script src='https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js'></script><script src="./script.js"></script>
<!-- loader -->
<?php
include("include/block-parametrs.php);
?>
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment