levinmejia

{% if customer.tags contains 'Wholesale' and cart.total_price < 20000 %}
    <p> Your wholesale total must be $200 or more.</p>
   {% else %}
    <input type="submit" name="update" class="btn--secondary update-cart" value="{{ 'cart.general.update' | t }}">
    <input type="submit" name="checkout" class="btn checkout" value="{{ 'cart.general.checkout' | t }}">
{% endif %}

levinmejia

 <div class="units_in_case_packs"> 
   <p> Quantity (units in case pack increments)</p></div>
   <div class="quantity_dropdown"><!--style class for the dropdown>-->
   	<label for="qty"></label>
	<select id="quantity" name="quantity">
		{% for i in (1..12) %} <!-- i is the interval value that we are going to multiplying. -->
          	<option value="{{ i | times:6}}">{{ i | times:6 }}</option> <!-- we use a multiple that corresponds to your case pack in this case we have packs of 6 but you can use any multiple.--> 
		{% endfor %}
	</select></div>
        <input type="submit" name="add" class="btn_c" id="addToCart" value="{{ 'products.product.add_to_cart' | t }}">

levinmejia

<style>
.animate-blur {
  -webkit-animation: blur-animated 2s forwards;
}

@-webkit-keyframes blur-animated {
  0% {
    -webkit-filter: blur(0);
  }
  

levinmejia

.grayscale {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  transition: 2s;
  animation-timing-function:ease-in-out;
}

.grayscale:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);

levinmejia

-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);

levinmejia

.linear-gradient-blend {
	width: 100%;
	height: 300px;
	background: linear-gradient(45deg, #3AC9F5 0%, #BF4DD7 49%, #FC5E57 100%), url('../img/backpack-lake.jpg');
	background-position: center center;
  background-blend-mode: screen;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

levinmejia

.solid-colour-blend {
	width: 100%;
	height: 300px;
	background-color: #F05B6F;
	background-image: url('../img/backpack-lake.jpg');
	background-position: center center;
  background-blend-mode: multiply;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

levinmejia

<div class="filter-img">
  <div class="hello">hello</div>
  <img src="img/backpack-lake.jpg">
</div>

<style>
.hello {
	position: absolute;
  top: 50%;
  left: 50%;

levinmejia

<div class="filter-img">
  <div class="circle multiply"></div>
  <img src="img/backpack-lake.jpg">
</div>

<style>
.filter-img {
	position: relative;
	width: 100%;
	height: 100%;

levinmejia

<figure class="aden">
<img src="../img.png">
</figure>