<!DOCTYPE html>
<html lang="en">

<head>
	<title>Company name</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="Colo Shop Template">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
	<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
	<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
	<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
	<link rel="stylesheet" type="text/css" href="styles/main_styles.css">
	<link rel="stylesheet" type="text/css" href="styles/responsive.css">
</head>

<body>

	<div class="super_container">

		<!-- Header -->

		<header class="header trans_300">

			<!-- Top Navigation -->

			<div class="top_nav">
				<div class="container">
					<div class="row">
						<div class="col-md-6">
							<div class="top_nav_left">This website is powered by shopsheet</div>
						</div>
						<div class="col-md-6 text-right">
							<div class="top_nav_right">
								<ul class="top_nav_menu">

									<!-- Currency / Language / My Account -->

									<!---<li class="currency">
									<a href="#">
										usd
										<i class="fa fa-angle-down"></i>
									</a>
									<ul class="currency_selection">
										<li><a href="#">cad</a></li>
										<li><a href="#">aud</a></li>
										<li><a href="#">eur</a></li>
										<li><a href="#">gbp</a></li>
									</ul>
								</li>
								<li class="language">
									<a href="#">
										English
										<i class="fa fa-angle-down"></i>
									</a>
									<ul class="language_selection">
										<li><a href="#">French</a></li>
										<li><a href="#">Italian</a></li>
										<li><a href="#">German</a></li>
										<li><a href="#">Spanish</a></li>
									</ul>
								</li>
								<li class="account">
									<a href="#">
										My Account
										<i class="fa fa-angle-down"></i>
									</a>
									<ul class="account_selection">
										<li><a href="#"><i class="fa fa-sign-in" aria-hidden="true"></i>Sign In</a></li>
										<li><a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>Register</a></li>
									</ul>
								</li>-->
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Main Navigation -->

			<div class="main_nav_container">
				<div class="container">
					<div class="row">
						<div class="col-lg-12 text-right">
							<div class="logo_container">
								<a href="#"><img
										src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/1200px-Adidas_Logo.svg.png"
										class="img-fluid" style="height:5rem;" /></a>
							</div>
							<nav class="navbar">
								<ul class="navbar_menu">
									<li><a href="#">home</a></li>
									<li><a href="contact.html">contact</a></li>
								</ul>
								<ul class="navbar_user">
									<li class="checkout">
										<a href="cart.html">
											<i class="fa fa-shopping-cart" aria-hidden="true"></i>
											<span id="checkout_items" class="checkout_items">2</span>
										</a>
									</li>
								</ul>
								<div class="hamburger_container">
									<i class="fa fa-bars" aria-hidden="true"></i>
								</div>
							</nav>
						</div>
					</div>
				</div>
			</div>

		</header>

		<div class="fs_menu_overlay"></div>
		<div class="hamburger_menu">
			<div class="hamburger_close"><i class="fa fa-times" aria-hidden="true"></i></div>
			<div class="hamburger_menu_content text-right">
				<ul class="menu_top_nav">
					<li class="menu_item"><a href="#">home</a></li>
					<li class="menu_item"><a href="#">cart</a></li>
					<li class="menu_item"><a href="#">contact</a></li>
				</ul>
			</div>
		</div>

		<!-- Slider -->

		<div class="main_slider"
			style="background-image:url(https://i.pinimg.com/originals/5c/f1/b0/5cf1b0f37f9ea84d8dfadc65ddd9f4a7.jpg)">
			<div class="container fill_height">
				<div class="row align-items-center fill_height">

				</div>
			</div>
		</div>

		<!-- New Arrivals -->

		<div class="new_arrivals">
			<div class="container">
				<div class="row">
					<div class="col text-center">
						<div class="section_title new_arrivals_title">
							<h2>Our Products</h2>
						</div>
					</div>

				</div>
				<!---<div class="row align-items-center">
				<div class="col text-center">
					<div class="new_arrivals_sorting">
						<ul class="arrivals_grid_sorting clearfix button-group filters-button-group">
							<li class="grid_sorting_button button d-flex flex-column justify-content-center align-items-center active is-checked" data-filter="*">all</li>
							<li class="grid_sorting_button button d-flex flex-column justify-content-center align-items-center" data-filter=".women">women's</li>
							<li class="grid_sorting_button button d-flex flex-column justify-content-center align-items-center" data-filter=".accessories">accessories</li>
							<li class="grid_sorting_button button d-flex flex-column justify-content-center align-items-center" data-filter=".men">men's</li>
						</ul>
					</div>
				</div>
			</div>-->
				<div class="row">
					<div class="col">
						<div class="product-grid"
							data-isotope='{ "itemSelector": ".product-item", "layoutMode": "fitRows" }'>

							<!-- Product 3 -->

							<div class="product-item women">
								<div class="product product_filter">
									<div class="product_image">
										<img src="images/product_3.png" alt="">
									</div>
									<div class="favorite"></div>
									<div class="product_info">
										<h6 class="product_name"><a href="single.html">Blue Yeti USB Microphone Blackout
												Edition</a></h6>
										<div class="product_price">$120.00</div>
									</div>
								</div>
								<div class="red_button add_to_cart_button"><a onClick="additem('Akilan', 12)" style="color:white">Add to cart</a></div>
							</div>

							<!-- Product 8 -->

							<div class="product-item accessories">
								<div class="product product_filter">
									<div class="product_image">
										<img src="images/product_8.png" alt="">
									</div>
									<div class="favorite"></div>
									<div class="product_info">
										<h6 class="product_name"><a href="single.html">Blue Yeti USB Microphone Blackout
												Edition</a></h6>
										<div class="product_price">$120.00</div>
									</div>
								</div>
								<div class="red_button add_to_cart_button"><a href="#">Add to cart</a></div>
							</div>

							<!-- Product 9 -->

							<div class="product-item men">
								<div class="product product_filter">
									<div class="product_image">
										<img src="images/product_9.png" alt="">
									</div>
									<div
										class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center">
										<span>sale</span></div>
									<div class="favorite favorite_left"></div>
									<div class="product_info">
										<h6 class="product_name"><a href="single.html">DYMO LabelWriter 450 Turbo
												Thermal Label Printer</a></h6>
										<div class="product_price">$410.00</div>
									</div>
								</div>
								<div class="red_button add_to_cart_button"><a href="#">add to cart</a></div>
							</div>

							<!-- Product 10 -->

							<div class="product-item men">
								<div class="product product_filter">
									<div class="product_image">
										<img src="images/product_10.png" alt="">
									</div>
									<div class="favorite"></div>
									<div class="product_info">
										<h6 class="product_name"><a href="single.html">Pryma Headphones, Rose Gold &
												Grey</a></h6>
										<div class="product_price">$180.00</div>
									</div>
								</div>
								<div class="red_button add_to_cart_button"><a href="#">add to cart</a></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<br>
		<br>


		<!-- Footer -->

		<footer class="footer">
			<div class="container">
				<div class="row">
					<div class="col-lg-12">
						<div class="footer_nav_container">
							<div class="cr">©2018 All Rights Reserverd. This template is made with <i
									class="fa fa-heart-o" aria-hidden="true"></i> by <a href="#">Colorlib</a></div>
						</div>
					</div>
				</div>
			</div>
		</footer>

	</div>

	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="styles/bootstrap4/popper.js"></script>
	<script src="styles/bootstrap4/bootstrap.min.js"></script>
	<script src="plugins/Isotope/isotope.pkgd.min.js"></script>
	<script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
	<script src="plugins/easing/easing.js"></script>
	<script src="js/custom.js"></script>

	<script>
		$(document).ready(function () {

			if (localStorage.getItem("items") === null) {
				console.log("here");
				var arr = new Array();
				localStorage.setItem("items", JSON.stringify(arr));
			}

			var arr_json = JSON.parse(localStorage.getItem("items"));

			$("#checkout_items").html(arr_json.length);
			console.log(arr_json.length);

		});

		function additem(name, price) {
			var data = { 'name': name, 'price': price };
			var arr_json = JSON.parse(localStorage.getItem("items"));
			console.log(typeof (arr_json));
			arr_json.push(data);
			localStorage.setItem("items", JSON.stringify(arr_json));
			console.log(JSON.parse(localStorage.getItem("items")));
			$("#checkout_items").html(arr_json.length);
		}
	</script>

</body>

</html>