<?php include('header.php');?>


<section class="nfts-sec">
	<div class="container-fluid p-0">
		<div class="row">
			<div class="col-md-3 pr-0">
				<div class="left-side-panel-nft">
					<div class="close-filter-btn" style="display: none;">
						<a href="javascript:void(0);" id="close-filter-btn">
							<i class="fas fa-times"></i>
						</a>
					</div>
					<div class="panel-group" id="accordion">
						<div class="panel panel-default">
						    <div class="panel-heading">
						      <h4 class="panel-title">
						        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true">
						        	<i class="fas fa-th mr-2"></i>
						            Categories
						            <span><i class="fas fa-angle-down"></i></span>
						        </a>
						      </h4>
						    </div>
						    <div id="collapse2" class="panel-collapse in collapse show">
						      <div class="panel-body">
						      	<div class="input-group">
								  	<span class="input-group-addon">
								  		<i class="fas fa-search"></i>
								  	</span>
								    <input type="text" id="myInput" onkeyup="myFunction()" class="form-control" placeholder="Search">
								    <div class="input-group-btn">
								      <button class="btn btn-default" type="submit">
								        <i class="fas fa-times"></i>
								      </button>
								    </div>
								  </div>
								  <div>
								  	<ul id="myUL" class="nav nav-tabs category-new-tab">
									  <li class="active"><a data-toggle="tab" href="#catagory1" class="active show">
									  	<span><img src="assets/images/icons/nfts4.png"></span>
									  <span class="text">ART</span></a></li>
									  <li><a data-toggle="tab" href="#catagory2"><span><img src="assets/images/icons/nfts5.png"></span><span class="text">Domain Names</span></a></li>
									  <li><a data-toggle="tab" href="#catagory3"><span><img src="assets/images/icons/nfts1.png"></span><span class="text">Collectibles</span></a></li>
									  <li><a data-toggle="tab" href="#catagory4"><span><img src="assets/images/icons/nfts4.png"></span><span class="text">Virtual Worlds</span></a></li>
									  <li><a data-toggle="tab" href="#catagory5"><span><img src="assets/images/icons/nfts2.png"></span>
									  	<span class="text">Trading Cards</span></a></li>
									  <li><a data-toggle="tab" href="#catagory6"><span><img src="assets/images/icons/nfts3.png"></span>
									  	<span class="text">Sports</span></a></li>
									</ul>
								  </div>
						      </div>
						    </div>
						  </div>
						  <div class="panel panel-default">
						    <div class="panel-heading">
						      <h4 class="panel-title">
						        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true">
						        	<i class="fas fa-star mr-2"></i>
							        Status
							        <span><i class="fas fa-angle-down"></i></span>
						        </a>
						      </h4>
						    </div>
						    <div id="collapse1" class="panel-collapse in collapse show">
						      <div class="panel-body">
						      	 <div class="btn-box">
						      	 	   <!--  <a class="for-blue1" href="">Buy Now</a>
								      	<a class="for-blue2" href="">Auction</a> -->
								      	<a class="for-blue3" href="">New</a>
								      	<a class="for-blue4" href="">Offers</a>
								      	<a class="for-blue5" href="">Collections</a>
								      	<a class="for-blue6" href="">Artists</a>
						      	 </div>
						      </div>
						    </div>
						  </div>
<!-- 						  <div class="panel panel-default">
						    <div class="panel-heading">
						      <h4 class="panel-title">
						        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true">
						        	<i class="fas fa-th mr-2"></i>
						            Collections
						            <span><i class="fas fa-angle-down"></i></span>
						        </a>
						      </h4>
						    </div>
						    <div id="collapse2" class="panel-collapse in collapse show">
						      <div class="panel-body">
						      	<div class="input-group">
								  	<span class="input-group-addon">
								  		<i class="fas fa-search"></i>
								  	</span>
								    <input type="text" id="myInput" onkeyup="myFunction()" class="form-control" placeholder="Search">
								    <div class="input-group-btn">
								      <button class="btn btn-default" type="submit">
								        <i class="fas fa-times"></i>
								      </button>
								    </div>
								  </div>
								  <div>
								  	<ul id="myUL" class="collection-serch-list">
								  		<li id="inner-list-1">
								  			<div id="inner-1">
								  				<img src="assets/images/other/home-image3.png"> Yandere
								  			</div>
								  		</li>
								  		<li>
								  			<div>
								  				<img src="assets/images/other/home-image3.png"> Yandere
								  			</div>
								  		</li>
								  		<li>
								  			<div>
								  				<img src="assets/images/other/home-image3.png"> Yandere
								  			</div>
								  		</li>
								  		<li>
								  			<div>
								  				<img src="assets/images/other/home-image3.png"> Yandere
								  			</div>
								  		</li>
								  		<li>
								  			<div>
								  				<img src="assets/images/other/home-image3.png"> Yandere
								  			</div>
								  		</li>
								  		
								  	</ul>
								  </div>
						      </div>
						    </div>
						  </div> -->
						 <!--  <div class="panel panel-default">
						    <div class="panel-heading">
						      <h4 class="panel-title">
						        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true">
						        	<i class="fas fa-clipboard-check mr-2"></i>
						            On Sale In
						            <span><i class="fas fa-angle-down"></i></span>
						        </a>
						      </h4>
						    </div>
						    <div id="collapse3" class="panel-collapse in collapse show">
						       <div class="panel-body">
						      	<div class="input-group">
								  	<span class="input-group-addon">
								  		<i class="fas fa-search"></i>
								  	</span>
								    <input type="text" id="myInput" onkeyup="myFunction()" class="form-control" placeholder="Search">
								    <div class="input-group-btn">
								      <button class="btn btn-default" type="submit">
								        <i class="fas fa-times"></i>
								      </button>
								    </div>
								  </div>
								  <div>
								  	<ul id="myUL" class="collection-serch-list">
								  		<li id="inner-list-1">
								  			<div id="inner-1">
								  				<img src="assets/images/other/home-image3.png"> Yandere
								  			</div>
								  		</li>
								  		<li>
								  			<div>
								  				<img src="assets/images/other/home-image3.png"> Yandere
								  			</div>
								  		</li>
								  		<li>
								  			<div>
								  				<img src="assets/images/other/home-image3.png"> Yandere
								  			</div>
								  		</li>
								  		<li>
								  			<div>
								  				<img src="assets/images/other/home-image3.png"> Yandere
								  			</div>
								  		</li>
								  		<li>
								  			<div>
								  				<img src="assets/images/other/home-image3.png"> Yandere
								  			</div>
								  		</li>
								  		
								  	</ul>
								  </div>
						      </div>
						    </div>
						  </div> -->
						</div>
				</div>
			</div>
			<div class="col-md-9 pl-0">
				<div class="right-side-panel-nft">
					
					<div class="tab-content">
					  <div id="catagory1" class="tab-pane fade in active show">
					    <div>
					    	<div class="row">
					    		<div class="col-md-8">
					    			<div class="filter-result-line">
							    		<p>113,016 results</p>
							    		<button>Buy Now <i class="fas fa-times"></i></button>
							    		<a href="">Clear All</a>
							    	</div>
					    		</div>
					    	</div>
					    	<div class="row after-filter-images-row">
					    		<div class="col-md-12">
					    			<div class="flex-box-inner-img-set">
					    				<div class="inner-artist-box">
											<a href="">
												<img src="assets/images/other/home-image3.png">
											</a>
											<div class="art-actions"><i class="icon far fa-heart"></i></div>
											
											<span class="for-sale-strip">For Sale</span>
											
						    				<div class="row">
						    					<div class="col-md-6">
						    						<div class="art-detail-left">
						    							<h6 style="font-size:12px">SUR419551</h6>
															<p>painting</p>
															<div>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
															</div>
														</div>

													</div>
													<div class="col-md-6">
														<div class="art-detail-right">
																
															<p>122x91cm</p>
															
															<h6>Not for sale</h6>

															
						    						</div>
						    					</div>
						    				</div>
						    				<div class="row">
						    					<div class="col-md-12">
						    						<div class="text-right time-left-box">
						    							<i class="far fa-clock"></i> 3 Days Left
						    						</div>
						    					</div>
						    				</div>
										</div>
										<div class="inner-artist-box">
											<a href="">
												<img src="assets/images/other/home-image3.png">
											</a>
											<div class="art-actions"><i class="icon far fa-heart"></i></div>
											
											<span class="for-sale-strip">For Sale</span>
											
						    				<div class="row">
						    					<div class="col-md-6">
						    						<div class="art-detail-left">
						    							<h6 style="font-size:12px">SUR419551</h6>
															<p>painting</p>
															<div>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
															</div>
														</div>

													</div>
													<div class="col-md-6">
														<div class="art-detail-right">
																
															<p>122x91cm</p>
															
															<h6>Not for sale</h6>

															
						    						</div>
						    					</div>
						    				</div>
						    				<div class="row">
						    					<div class="col-md-12">
						    						<div class="text-right time-left-box">
						    							<i class="far fa-clock"></i> 42 Mints Left
						    						</div>
						    					</div>
						    				</div>
										</div>
										<div class="inner-artist-box">
											<a href="">
												<img src="assets/images/other/home-image3.png">
											</a>
											<div class="art-actions"><i class="icon far fa-heart"></i></div>
											
											<span class="for-sale-strip">For Sale</span>
											
						    				<div class="row">
						    					<div class="col-md-6">
						    						<div class="art-detail-left">
						    							<h6 style="font-size:12px">SUR419551</h6>
															<p>painting</p>
															<div>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
															</div>
														</div>

													</div>
													<div class="col-md-6">
														<div class="art-detail-right">
																
															<p>122x91cm</p>
															
															<h6>Not for sale</h6>

															
						    						</div>
						    					</div>
						    				</div>
										</div>
										<div class="inner-artist-box">
											<a href="">
												<img src="assets/images/other/home-image3.png">
											</a>
											<div class="art-actions"><i class="icon far fa-heart"></i></div>
											
											<span class="for-sale-strip">For Sale</span>
											
						    				<div class="row">
						    					<div class="col-md-6">
						    						<div class="art-detail-left">
						    							<h6 style="font-size:12px">SUR419551</h6>
															<p>painting</p>
															<div>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
															</div>
														</div>

													</div>
													<div class="col-md-6">
														<div class="art-detail-right">
																
															<p>122x91cm</p>
															
															<h6>Not for sale</h6>

															
						    						</div>
						    					</div>
						    				</div>
										</div>
										<div class="inner-artist-box">
											<a href="">
												<img src="assets/images/other/home-image3.png">
											</a>
											<div class="art-actions"><i class="icon far fa-heart"></i></div>
											
											<span class="for-sale-strip">For Sale</span>
											
						    				<div class="row">
						    					<div class="col-md-6">
						    						<div class="art-detail-left">
						    							<h6 style="font-size:12px">SUR419551</h6>
															<p>painting</p>
															<div>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
															</div>
														</div>

													</div>
													<div class="col-md-6">
														<div class="art-detail-right">
																
															<p>122x91cm</p>
															
															<h6>Not for sale</h6>

															
						    						</div>
						    					</div>
						    				</div>
										</div>
										<div class="inner-artist-box">
											<a href="">
												<img src="assets/images/other/home-image3.png">
											</a>
											<div class="art-actions"><i class="icon far fa-heart"></i></div>
											
											<span class="for-sale-strip">For Sale</span>
											
						    				<div class="row">
						    					<div class="col-md-6">
						    						<div class="art-detail-left">
						    							<h6 style="font-size:12px">SUR419551</h6>
															<p>painting</p>
															<div>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
															</div>
														</div>

													</div>
													<div class="col-md-6">
														<div class="art-detail-right">
																
															<p>122x91cm</p>
															
															<h6>Not for sale</h6>

															
						    						</div>
						    					</div>
						    				</div>
										</div>
										<div class="inner-artist-box">
											<a href="">
												<img src="assets/images/other/home-image3.png">
											</a>
											<div class="art-actions"><i class="icon far fa-heart"></i></div>
											
											<span class="for-sale-strip">For Sale</span>
											
						    				<div class="row">
						    					<div class="col-md-6">
						    						<div class="art-detail-left">
						    							<h6 style="font-size:12px">SUR419551</h6>
															<p>painting</p>
															<div>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
															</div>
														</div>

													</div>
													<div class="col-md-6">
														<div class="art-detail-right">
																
															<p>122x91cm</p>
															
															<h6>Not for sale</h6>

															
						    						</div>
						    					</div>
						    				</div>
										</div>
										<div class="inner-artist-box">
											<a href="">
												<img src="assets/images/other/home-image3.png">
											</a>
											<div class="art-actions"><i class="icon far fa-heart"></i></div>
											
											<span class="for-sale-strip">For Sale</span>
											
						    				<div class="row">
						    					<div class="col-md-6">
						    						<div class="art-detail-left">
						    							<h6 style="font-size:12px">SUR419551</h6>
															<p>painting</p>
															<div>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
																<span>
																	<img src="assets/images/other/tick-green.png">
																</span>
															</div>
														</div>

													</div>
													<div class="col-md-6">
														<div class="art-detail-right">
																
															<p>122x91cm</p>
															
															<h6>Not for sale</h6>

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

					    	</div>
					    </div>
					  </div>
					  <div id="catagory2" class="tab-pane fade">
					    <h3>Menu 2</h3>
					    <p>Some content in menu 2.</p>
					  </div>
					  <div id="catagory3" class="tab-pane fade">
					    <h3>Menu 3</h3>
					    <p>Some content in menu 3.</p>
					  </div>
					  <div id="catagory4" class="tab-pane fade">
					    <h3>Menu 4</h3>
					    <p>Some content in menu 4.</p>
					  </div>
					  <div id="catagory5" class="tab-pane fade">
					    <h3>Menu 5</h3>
					    <p>Some content in menu 5.</p>
					  </div>
					  <div id="catagory6" class="tab-pane fade">
					    <h3>Menu 6</h3>
					    <p>Some content in menu 6.</p>
					  </div>
					</div>
				</div>
			</div>
		</div>
		<div class="filter-btn" id="filter-btn" style="display: none;">
			<a href="javascript:void(0);" >Filters</a>
		</div>
	</div>
</section>













<?php include('footer.php');?>

<script>
function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("div")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
	$(document).ready(function(){
  $("#inner-list-1").click(function(){
    $("#inner-list-1").toggleClass("main");
  });
});
</script>

<script>
	$(document).ready(function(){
  $("#filter-btn").click(function(){
    $(".left-side-panel-nft").addClass("main-left");
  });
  $("#close-filter-btn").click(function(){
    $(".left-side-panel-nft").removeClass("main-left");
  });
});
</script>


<script type="text/javascript">

$(function () {

$('#addClass').click(function () {

$('.green-block').addClass('blue-block');

});

$('#removeClass').click(function () {

$('.green-block').removeClass('blue-block');

});

});

</script>