<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
	  
        <meta name="viewport" content="width-device-width, inital-scale=1.0">
        <title>Artifacts | Products</title>
        <link rel = "icon" href = "images/icon.jpg" type = "image/x-icon">
        <link rel="stylesheet" href="stylei.css">
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Poppins:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">

</head>
<body> 
	<section id="sec-a"> 
              <a href="about.jsp">
            <img src="images/logos1.png" class="logo-p">
            </a>
            
             <div class="navbar-p">
             
            <nav> 
                <ul> 
                    <li><a href="index.jsp">Home</a></li>
                    <li><a href="products.jsp">Products</a></li>
                    <li><a href="about.jsp">About</a></li>
                    <li><a href="#footer">Contact</a></li>
                    <li><a href="login.jsp">Account</a></li>
                </ul>     
            </nav>
                <a href="cart.jsp">
                 <i class="fa fa-shopping-bag"></i>
                 </a>
            </div>
        </section>
        
        
        <!-----------------single product details----------->
        <div class="small-container single-product">
        <div class="row-2">
            <div class="col-4">
                <img src="images/10.jpg" width="50%" ALIGN="left" id="Productimg">
                
            
            </div>
            <div class="col-4">
                <p>Home / HandBags</p>
            <h1>Fabric Cloth Handbag</h1>
            <h4>$114.00</h4>
            
            <h3>Product Details <i class="fa fa-indent"></i></h3>
            <p><br>Handmade designer Handbag made by tribal artisans of Mizoram (Lushai Tribe). Handbag/ purse to suit the utility preference of a contemporary woman. Each handbag is spacious and up to the mark as per multiple standards.</p>
                <select >
                <option>Select Type</option>
                <option>Select Type</option>
                <option>Select Type</option>
                <option>Select Type</option>
            </select>
            <input type="number" value="1">
            <a href="" class="btn">Add To Cart</a>
            </div>
            <div class="small-img-row" >
                    <div class="small-img-col">
                        <img src="images/h4.jpg" width="60%" class="small-img">
                    </div>
                    <div class="small-img-col">
                        <img src="images/h3.jpg" width="60%" class="small-img">
                    </div>
                    <div class="small-img-col">
                        <img src="images/h1.jpg" width="60%" class="small-img">
                    </div>
                    <div class="small-img-col">
                        <img src="images/h5.jpg" width="60%" class="small-img">
                    </div>
                </div>
        </div>
        </div>
        
        <!-------------title------------>
        
        <div class="small-container">
            <div class="row row-2">
                <h2>Related Products</h2>
                <p>View More</p>
            </div>
            
        </div>
        
        <!--------------------products--------------->
     
            <div class="row">
                <div class="col-2">
                    <img src="images/img11.jpg" >
                    <h4>Brass Horse Masterpeice</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
                   <div class="col-2">
                    <img src="images/ear11.jpg">
                    <h4>Oxidised Eargings</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                    </div>
                    <p>$150.00</p>
                </div>
                   <div class="col-2">
                    <img src="images/6.jpg">
                    <h4>Bamboo Baskets</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$320.00</p>
                </div>
                   <div class="col-2">
                    <img src="images/1.jpg">
                    <h4>Decorative Door Hanging</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$114.70</p>
                </div>
            </div>
      
        
     
     <!----------------------------footer-------------------------->
        <section id="footer">
        <img src="images/logos2.png" class="footer-img">
       <div class="title"> 
           <h3>CONTACT</h3>
        <h1>Connect &amp; Colaborate</h1>
        
        </div> 
        
        <div class="footer-row">
        <div class="footer-left">
          <h1>Get In Touch</h1>  
            <p><i class="fa fa-google-plus"></i>vaibhavigaur2001@gmail.com</p>
             <p><i class="fa fa-instagram"></i>_rashmishah@official_</p>
             <p><i class="fa fa-twitter"></i>tweet_to_onshi</p>
        </div>
        <div class="footer-right">
            <h1>Useful Links</h1>
                <ul>
                    <li>Coupons           <i class="fa fa-gift" ></i></li>
                     <li>Blog Post        <i class="fa fa-sticky-note" ></i></li>
                     <li>Return Policy    <i class="fa fa-refresh" ></i></li>
                     <li>Join Affiliate   <i class="fa fa-address-card-o"></i></li>
            
            </ul>
        </div>
        </div>
        
        <div class="social-links">
            <i class="fa fa-facebook"></i>
            <i class="fa fa-whatsapp"></i>
            <i class="fa fa-instagram"></i>
            <i class="fa fa-twitter"></i>
            <p>=============Copyright Artifact's &amp; Terms &amp; Conditions============</p>
            
        </div>
        
    </section>
        
        
        
        
   <!---------------productgallery------------------>
        
        
        <script> 
            var ProductImg = document.getElementById("Productimg");
            var SmallImg = document.getElementsByClassName("small-img");
                SmallImg[0].onclick = function()
                { 
                    ProductImg.src = SmallImg[0].src;
                }
                SmallImg[1].onclick = function()
                { 
                    ProductImg.src = SmallImg[1].src;
                }
                SmallImg[2].onclick = function()
                { 
                    ProductImg.src = SmallImg[2].src;
                }
                SmallImg[3].onclick = function()
                { 
                    ProductImg.src = SmallImg[3].src;
                }
        
        </script>
    

</body>
</html>