<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="static/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="static/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="static/css/owl.carousel.min.css">
<link rel="stylesheet" href="static/css/magnific-popup.css">
<link rel="stylesheet" href="static/css/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" href="static/css/linearicons.css">
<link rel="stylesheet" href="static/css/paymentfont.min.css">
<link rel="stylesheet" href="static/css/main.css">
<!-- Favicons -->
<link rel="apple-touch-icon" href="static/picture/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://demo.demohuo.top/modals/63/6336/demo/icon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://demo.demohuo.top/modals/63/6336/demo/icon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://demo.demohuo.top/modals/63/6336/demo/icon/apple-touch-icon-144x144.png">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Dmitry Volkov">
<title>SHUM - eCommerce HTML Template</title>
</head>
<body class="body">
<!-- header -->
<header class="header">
<div class="container">
<div class="row">
<div class="col-12">
<div class="header__content">
<div class="header__bar header__bar--left">
<button class="header__catalog" type="button">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="title">catalog</span>
</button>
</div>
<div class="header__bar header__bar--center">
<a href="index.html" class="header__logo">
<img src="static/picture/logo.svg" alt="">
</a>
</div>
<div class="header__bar header__bar--right">
<a href="#" class="header__phone">
8 800 333 00 44
</a>
<button class="header__search" type="button">
<i class="lnr lnr-magnifier"></i>
</button>
<a href="cart.html" class="header__cart">
<i class="lnr lnr-cart"></i>
<span>2</span>
</a>
<button class="header__menu" type="button">
<span></span>
<span></span>
<span></span>
</button>
</div>
<form action="#" class="header__form">
<input type="text" placeholder="Press enter to search">
<button type="button">
<span></span>
<span></span>
</button>
</form>
</div>
</div>
</div>
</div>
</header>
<!-- end header -->
<!-- menu -->
<div class="menu">
<div class="menu__actions">
<a href="#city" class="menu__location">
<i class="lnr lnr-location"></i>
<span>Minsk</span>
</a>
<button class="menu__search" type="button">
<i class="lnr lnr-magnifier"></i>
</button>
<button class="menu__btn" type="button">
<span></span>
<span></span>
<span></span>
</button>
</div>
<nav class="menu__nav">
<a href="account.html">Account</a>
<a href="">Catalog</a>
<a href="news.html">News</a>
<a href="about.html">About</a>
<a class="menu__drop" href="#">Pages</a>
<a href="authorization.html">Log In / Sign Up</a>
</nav>
<div class="menu__submenu">
<button type="button"><i class="lnr lnr-arrow-left"></i> Back</button>
<nav>
<a href="product.html">Product style 1</a>
<a href="product2.html">Product style 2</a>
<a href="cart.html">Cart</a>
<a href="checkout.html">Checkout</a>
<a href="delivery.html">Delivery</a>
<a href="getintouch.html">Get in touch</a>
<a href="payment.html">Payment</a>
<a href="privacy.html">Privacy</a>
<a href="refund.html">Refund</a>
<a href="article.html">Article</a>
</nav>
</div>
</div>
<!-- end menu -->
<!-- catmenu -->
<div class="catmenu">
<div class="catmenu__actions">
<button class="catmenu__btn" type="button">
<span></span>
<span></span>
<span></span>
</button>
</div>
<nav class="catmenu__nav">
<a href="">Kitchen</a>
<a href="">Home & Climate</a>
<a href="">Health & Beauty</a>
<a href="">Accessories</a>
</nav>
</div>
<!-- end catmenu -->
<!-- catalog-head -->
<div class="catalog-head" data-bg="static/picture/catalog-bg.jpg">
<div class="container">
<div class="row">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
<div class="catalog-head__content">
<h2 class="catalog-head__title">Catalog</h2>
<p class="catalog-head__text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form by injected.</p>
</div>
</div>
</div>
</div>
</div>
<!-- end catalog-head -->
<!-- content -->
<div class="section">
<div class="container">
<div class="row">
<!-- sidebar -->
<div class="col-12 col-xl-3">
<div class="catalog-menu">
<button class="catalog-menu__btn" type="button" data-toggle="collapse" data-target="#collapse0" aria-expanded="false" aria-controls="collapse0">Menu</button>
<div class="collapse catalog-menu__wrap" id="collapse0">
<div class="catalog-menu__item">
<button type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">Drinks</button>
<div class="collapse show" id="collapse1">
<div class="catalog-menu__collapse">
<a href="#">Kettles</a>
<a class="active" href="#">Coffee stations</a>
<a href="#">Coffee makers</a>
<a href="#">Blenders</a>
<a href="#">Juicers</a>
<a href="#">Coffee grinders</a>
<a href="#">Wine Decanters</a>
<a href="#">Coffee makers</a>
</div>
</div>
</div>
<div class="catalog-menu__item">
<button type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Deserts</button>
<div class="collapse" id="collapse2">
<div class="catalog-menu__collapse">
<a href="#">Kettles</a>
<a href="#">Coffee stations</a>
<a href="#">Coffee makers</a>
<a href="#">Blenders</a>
<a href="#">Juicers</a>
<a href="#">Coffee grinders</a>
<a href="#">Wine Decanters</a>
<a href="#">Coffee makers</a>
</div>
</div>
</div>
<div class="catalog-menu__item">
<button type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">Other</button>
<div class="collapse" id="collapse3">
<div class="catalog-menu__collapse">
<a href="#">Kettles</a>
<a href="#">Coffee stations</a>
<a href="#">Coffee makers</a>
<a href="#">Blenders</a>
<a href="#">Juicers</a>
<a href="#">Coffee grinders</a>
<a href="#">Wine Decanters</a>
<a href="#">Coffee makers</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end sidebar -->
<!-- product-grid -->
<div class="col-12 col-xl-9">
<div class="product-grid row">
<div class="col-6 col-md-4 col-xl-4">
<article class="product">
<a href="product.html" class="product__link"></a>
<div class="product__img">
<img src="static/picture/product2.png" alt="">
</div>
<a href="#" class="product__add"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px"><path fill-rule="evenodd" d="M15.000,8.000 L8.000,8.000 L8.000,15.000 L7.000,15.000 L7.000,8.000 L-0.000,8.000 L-0.