~The Code for Product Page~
2/19/2024
HTML
<h1>Watches</h1>
<nav class="product-filter">
<div class="sort">
<div class="collection-sort">
<label>Filter by:</label>
<select>
<option value="/">All Watches</option>
</select>
</div>
<div class="collection-sort">
<label>Sort by:</label>
<select>
<option value="/">Featured</option>
</select>
</div>
</div>
</nav>
<br>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="Images/Products/1.png">
</div>
<div class="product-info">
<h5>Olevs Man's Watch</h5>
<h6>$39.77</h6>
</div>
<div class="buttonContainer ">
<button class = "productButton" >Add To Cart </button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Images/Products/2.png">
</div>
<div class="product-info">
<h5>Lancardo Watch</h5>
<h6>$9.99</h6>
</div>
<div class="buttonContainer ">
<button class = "productButton" >Add To Cart </button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Images/Products/3.png">
</div>
<div class="product-info">
<h5>Casio Man's Watch</h5>
<h6>$21.92</h6>
</div>
<div class="buttonContainer ">
<button class = "productButton" >Add To Cart </button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Images/Products/4.png">
</div>
<div class="product-info">
<h5>Mil-Tec Watch</h5>
<h6>$85.95</h6>
</div>
<div class="buttonContainer ">
<button class = "productButton" >Add To Cart </button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Images/Products/5.png">
</div>
<div class="product-info">
<h5>Olev Man's Watch</h5>
<h6>$38.88</h6>
</div>
<div class="buttonContainer ">
<button class = "productButton" >Add To Cart </button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Images/Products/6.png">
</div>
<div class="product-info">
<h5>Fossil Man's Watch</h5>
<h6>$140.63</h6>
</div>
<div class="buttonContainer ">
<button class = "productButton" >Add To Cart </button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Images/Products/7.png">
</div>
<div class="product-info">
<h5>Disney Man's Watch</h5>
<h6>$24.82</h6>
</div>
<div class="buttonContainer ">
<button class = "productButton" >Add To Cart </button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Images/Products/8.png">
</div>
<div class="product-info">
<h5>Timex Man's Watch</h5>
<h6>$53.54</h6>
</div>
<div class="buttonContainer ">
<button class = "productButton" >Add To Cart </button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Images/Products/9.png">
</div>
<div class="product-info">
<h5>Invicta Man's Watch</h5>
<h6>$69.90</h6>
</div>
<div class="buttonContainer ">
<button class = "productButton" >Add To Cart </button>
</div>
</div>
</section>
The CSS
<style type="text/css">
.product-filter {
display: flex;
}
.sort {
display: flex;
}
.collection-sort{
display:flex;
flex-direction:column;
padding-right: 8px;
}
.products {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
flex-basis: 16%;
}
.product-card {
padding: 1%;
}
.product-image img {
max-width: 100%;
}
.buttonContainer {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
}
.productButton {
box-shadow: 3px 5px 10px black;
border-radius: 15px;
background-color:#417A8B;
color: white;
font-size: 12px;
font-weight: 800;
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
margin-bottom: 15px;
}
.product-info h5 {
font-size: 18px;
font-weight: 900;
}
.product-info h6 {
font-size: 16px;
}
.main h1 {
color: #272727;
text-shadow: 1px 1px 2px black;
font-family: Helvetica, Arial, sans-serif;
font-size: 30px;
font-weight: 900;
}
</style>