<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="col search">
<section class="panel">
<div class="panel-body">
<div class="pull-right">
<ul class="pagination pagination-sm pro-page-list">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">ยป</a></li>
</ul>
</div>
</div>
</section>
<section class="panel">
<div class="panel-body">
<input type="text" placeholder="Keyword Search" class="form-control" />
</div>
</section>
<section class="panel">
<header class="panel-heading">Category</header>
<div class="panel-body">
<ul class="nav prod-cat">
<li>
<a href="#" class="active"><i class="fa fa-angle-right"></i> Dress</a>
<ul class="nav">
<li class="active"><a href="#">- Shirt</a></li>
<li><a href="#">- Pant</a></li>
<li><a href="#">- Shoes</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-angle-right"></i> Bags & Purses</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Beauty</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Coat & Jacket</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Jeans</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Jewellery</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Electronics</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Sports</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Technology</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Watches</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Accessories</a></li>
</ul>
</div>
</section>
<section class="panel">
<header class="panel-heading">Price Range</header>
<div class="panel-body">
<div class="slider-info">
<span id="slider-range-amount">Price Range: $0 - $1000</span>
</div>
</div>
</section>
<section class="panel">
<header class="panel-heading">Filter</header>
<div class="panel-body">
<form role="form product-form">
<div class="form-group">
<label>Brand</label>
<select class="form-control">
<option>Wallmart</option>
<option>Catseye</option>
<option>Moonsoon</option>
<option>Textmart</option>
</select>
</div>
<div class="form-group">
<label>Color</label>
<select class="form-control">
<option>White</option>
<option>Black</option>
<option>Red</option>
<option>Green</option>
</select>
</div>
<div class="form-group">
<label>Type</label>
<select class="form-control">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>Extra Large</option>
</select>
</div>
<button class="btn" type="submit">Filter</button>
</form>
</div>
</section>
<section class="panel">
<header class="panel-heading">Best Seller</header>
<div class="panel-body">
<div class="best-seller">
<article class="media">
<a class="pull-left thumb p-thumb">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/cropped-codezillaye-high-resolution-logo.png" />
</a>
<div class="media-body">
<a href="#" class="p-head">Item One Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
<article class="media">
<a class="pull-left thumb p-thumb">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/cropped-codezillaye-high-resolution-logo.png" />
</a>
<div class="media-body">
<a href="#" class="p-head">Item Two Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
<article class="media">
<a class="pull-left thumb p-thumb">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/cropped-codezillaye-high-resolution-logo.png" />
</a>
<div class="media-body">
<a href="#" class="p-head">Item Three Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
</div>
</div>
</section>
</div>
<div class="col">
<div class="row product-list">
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/cropped-codezillaye-high-resolution-logo.png" alt="" />
<a href="#" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4><a href="#" class="pro-title">Item One</a></h4>
<p class="price">$100.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/cropped-codezillaye-high-resolution-logo.png" alt="" />
<a href="#" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4><a href="#" class="pro-title">Item Two</a></h4>
<p class="price">$200.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/cropped-codezillaye-high-resolution-logo.png" alt="" />
<a href="#" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4><a href="#" class="pro-title">Item Three</a></h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/cropped-codezillaye-high-resolution-logo.png" alt="" />
<a href="#" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4><a href="#" class="pro-title">Item Four</a></h4>
<p class="price">$400.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/cropped-codezillaye-high-resolution-logo.png" alt="" />
<a href="#" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4><a href="#" class="pro-title">Item Five</a></h4>
<p class="price">$500.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/cropped-codezillaye-high-resolution-logo.png" alt="" />
<a href="#" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4><a href="#" class="pro-title">Item Six</a></h4>
<p class="price">$600.00</p>
</div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
.container {
display: flex;
flex-direction: row;
width: 1550px;
margin: 0 .5rem;
row-gap: 1rem;
flex-wrap: wrap;
padding: 20px;
}
.col-md-3, .col-md-9 {
/* padding: 0 15px; */
}
/* .col-md-3 {
flex: 0 0 25%;
max-width: 25%;
} */
.col{
/* padding: 10px; */
/* flex: 0 0 50%; */
max-width: 50%;
/* width: 768px; */
margin: 0;
}
.col {
/* flex: 0 0 75%; */
/* max-width: 50%; */
}
.panel {
background: #fff;
border: 1px solid #ddd;
margin-bottom: 20px;
}
.panel-heading {
background: #f5f5f5;
padding: 10px;
font-weight: bold;
}
.panel-body {
padding: 10px;
}
.nav {
list-style: none;
padding: 0;
}
.nav li {
margin-bottom: 5px;
}
.nav li a {
text-decoration: none;
color: #333;
}
.nav .active > a {
color: #007bff;
}
.product-form .form-group {
margin-bottom: 15px;
}
.form-control {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.btn {
display: inline-block;
padding: 8px 12px;
color: #fff;
background-color: #007bff;
border: none;
cursor: pointer;
text-align: center;
}
.best-seller .media {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
}
.best-seller .media img {
margin-right: 10px;
width: 50px;
}
.product-list {
display: flex;
flex-wrap: wrap;
/* max-width: 50%; */
/* margin-right: -15px; */
margin-left: 15px;
}
.product-list .col-md-4 {
flex: 0 0 33.333%;
max-width: 33.333%;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px;
}
.pro-img-box {
position: relative;
overflow: hidden;
}
.pro-img-box img {
width: 100%;
height: auto;
}
.adtocart {
position: absolute;
top: 10px;
right: 10px;
background: #007bff;
color: #fff;
padding: 10px;
border-radius: 50%;
text-decoration: none;
-webkit-border-radius:;
-moz-border-radius:;
-ms-border-radius:;
-o-border-radius:;
}
.panel-body.text-center h4 {
margin: 10px 0;
font-size: 16px;
}
.col.search {
display: flex;
flex-direction: column;
}
.panel-body .pull-right ul {
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-body .pull-right ul li {
margin: 1rem;
}
.panel-body .pull-right ul li a {
padding: 1rem;
background-color: #007bff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
}
.panel-body.text-center .price {
font-size: 14px;
color: #333;
}