Skip to content

Commit cc94812

Browse files
alirezatayebinejadalirezatayebinejad
committed
featured product section done
1 parent d4d6760 commit cc94812

2 files changed

Lines changed: 181 additions & 8 deletions

File tree

‎index.html‎

Lines changed: 125 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
</ul>
3131
</nav>
3232
<div class="header-list-icon">
33-
<a href=""><i class="fa fa-bag-shopping"></i></a>
33+
<a href=""><i class="fa fa-bag-shopping"></i></a>
3434
</div>
3535
</div>
3636
</div>
@@ -39,7 +39,6 @@
3939
<!--main section-->
4040

4141
<main>
42-
4342
<section id="hero">
4443
<h4>Trade-in-offer</h4>
4544
<h2>Super value deals</h2>
@@ -50,31 +49,149 @@ <h1>On all products</h1>
5049

5150
<section id="features" class="section-p1">
5251
<div class="f-box">
53-
<img src="images/features/f1.png" alt="free shipping">
52+
<img src="images/features/f1.png" alt="free shipping" />
5453
<h6>Free shipping</h6>
5554
</div>
5655
<div class="f-box">
57-
<img src="images/features/f2.png" alt="online order">
56+
<img src="images/features/f2.png" alt="online order" />
5857
<h6>online order</h6>
5958
</div>
6059
<div class="f-box">
61-
<img src="images/features/f3.png" alt="save money">
60+
<img src="images/features/f3.png" alt="save money" />
6261
<h6>save money</h6>
6362
</div>
6463
<div class="f-box">
65-
<img src="images/features/f4.png" alt="promotions">
64+
<img src="images/features/f4.png" alt="promotions" />
6665
<h6>promotions</h6>
6766
</div>
6867
<div class="f-box">
69-
<img src="images/features/f5.png" alt="happy sell">
68+
<img src="images/features/f5.png" alt="happy sell" />
7069
<h6>happy sell</h6>
7170
</div>
7271
<div class="f-box">
73-
<img src="images/features/f6.png" alt="24/7 support">
72+
<img src="images/features/f6.png" alt="24/7 support" />
7473
<h6>24/7 support</h6>
7574
</div>
7675
</section>
7776

77+
<section id="f-products" class="section-p1">
78+
<h1>Featured Products</h1>
79+
<p>Summer Collection New Morden Design</p>
80+
<div class="pro-collection">
81+
<div class="product-cart">
82+
<img src="images/products/f1.jpg" alt="product image" />
83+
<span>adidas</span>
84+
<h4>Cartoon Astronaut T-Shirts</h4>
85+
<div class="stars">
86+
<i class="fa-solid fa-star"></i>
87+
<i class="fa-solid fa-star"></i>
88+
<i class="fa-solid fa-star"></i>
89+
<i class="fa-solid fa-star"></i>
90+
<i class="fa-solid fa-star"></i>
91+
</div>
92+
<h4 class="price">$78</h4>
93+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
94+
</div>
95+
<div class="product-cart">
96+
<img src="images/products/f2.jpg" alt="product image" />
97+
<span>adidas</span>
98+
<h4>Cartoon Astronaut T-Shirts</h4>
99+
<div class="stars">
100+
<i class="fa-solid fa-star"></i>
101+
<i class="fa-solid fa-star"></i>
102+
<i class="fa-solid fa-star"></i>
103+
<i class="fa-solid fa-star"></i>
104+
<i class="fa-solid fa-star"></i>
105+
</div>
106+
<h4 class="price">$78</h4>
107+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
108+
</div>
109+
<div class="product-cart">
110+
<img src="images/products/f3.jpg" alt="product image" />
111+
<span>adidas</span>
112+
<h4>Cartoon Astronaut T-Shirts</h4>
113+
<div class="stars">
114+
<i class="fa-solid fa-star"></i>
115+
<i class="fa-solid fa-star"></i>
116+
<i class="fa-solid fa-star"></i>
117+
<i class="fa-solid fa-star"></i>
118+
<i class="fa-solid fa-star"></i>
119+
</div>
120+
<h4 class="price">$78</h4>
121+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
122+
</div>
123+
<div class="product-cart">
124+
<img src="images/products/f4.jpg" alt="product image" />
125+
<span>adidas</span>
126+
<h4>Cartoon Astronaut T-Shirts</h4>
127+
<div class="stars">
128+
<i class="fa-solid fa-star"></i>
129+
<i class="fa-solid fa-star"></i>
130+
<i class="fa-solid fa-star"></i>
131+
<i class="fa-solid fa-star"></i>
132+
<i class="fa-solid fa-star"></i>
133+
</div>
134+
<h4 class="price">$78</h4>
135+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
136+
</div>
137+
<div class="product-cart">
138+
<img src="images/products/f5.jpg" alt="product image" />
139+
<span>adidas</span>
140+
<h4>Cartoon Astronaut T-Shirts</h4>
141+
<div class="stars">
142+
<i class="fa-solid fa-star"></i>
143+
<i class="fa-solid fa-star"></i>
144+
<i class="fa-solid fa-star"></i>
145+
<i class="fa-solid fa-star"></i>
146+
<i class="fa-solid fa-star"></i>
147+
</div>
148+
<h4 class="price">$78</h4>
149+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
150+
</div>
151+
<div class="product-cart">
152+
<img src="images/products/f6.jpg" alt="product image" />
153+
<span>adidas</span>
154+
<h4>Cartoon Astronaut T-Shirts</h4>
155+
<div class="stars">
156+
<i class="fa-solid fa-star"></i>
157+
<i class="fa-solid fa-star"></i>
158+
<i class="fa-solid fa-star"></i>
159+
<i class="fa-solid fa-star"></i>
160+
<i class="fa-solid fa-star"></i>
161+
</div>
162+
<h4 class="price">$78</h4>
163+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
164+
</div>
165+
<div class="product-cart">
166+
<img src="images/products/f7.jpg" alt="product image" />
167+
<span>adidas</span>
168+
<h4>Cartoon Astronaut T-Shirts</h4>
169+
<div class="stars">
170+
<i class="fa-solid fa-star"></i>
171+
<i class="fa-solid fa-star"></i>
172+
<i class="fa-solid fa-star"></i>
173+
<i class="fa-solid fa-star"></i>
174+
<i class="fa-solid fa-star"></i>
175+
</div>
176+
<h4 class="price">$78</h4>
177+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
178+
</div>
179+
<div class="product-cart">
180+
<img src="images/products/f8.jpg" alt="product image" />
181+
<span>adidas</span>
182+
<h4>Cartoon Astronaut T-Shirts</h4>
183+
<div class="stars">
184+
<i class="fa-solid fa-star"></i>
185+
<i class="fa-solid fa-star"></i>
186+
<i class="fa-solid fa-star"></i>
187+
<i class="fa-solid fa-star"></i>
188+
<i class="fa-solid fa-star"></i>
189+
</div>
190+
<h4 class="price">$78</h4>
191+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
192+
</div>
193+
</div>
194+
</section>
78195
</main>
79196

80197
<!--footer section-->

‎style.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ section#hero {
139139
}
140140

141141
/* feature section styles */
142+
142143
#features {
143144
display: flex;
144145
align-items: center;
@@ -185,3 +186,58 @@ section#hero {
185186
#features .f-box:nth-child(6) h6 {
186187
background-color: #fff2e5;
187188
}
189+
190+
/* feature section styles */
191+
#f-products .pro-collection{
192+
display: flex;
193+
flex-wrap: wrap;
194+
justify-content: space-around;
195+
margin: 0 60px;
196+
}
197+
#f-products h1, #f-products p{
198+
text-align: center;
199+
}
200+
#f-products .product-cart{
201+
width: 280px;
202+
border: 1px solid #d8d8d8;
203+
padding: 13px;
204+
margin-bottom: 30px;
205+
border-radius: 25px;
206+
position: relative;
207+
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
208+
transition: box-shadow 0.2s;
209+
}
210+
#f-products .product-cart:hover{
211+
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
212+
213+
}
214+
#f-products .product-cart img{
215+
width: 100%;
216+
border-radius: 25px;
217+
218+
}
219+
#f-products .product-cart span{
220+
color: #969696;
221+
font-weight: 500;
222+
line-height: 30px;
223+
}
224+
#f-products .product-cart h4{
225+
font-size: 18px;
226+
}
227+
#f-products .product-cart .stars{
228+
color: #e6ae2c;
229+
padding: 6px 0;
230+
}
231+
#f-products .product-cart .price{
232+
color: #088178;
233+
padding: 4px 0;
234+
}
235+
#f-products .product-cart .buy-icon{
236+
color: #088178;
237+
background-color: #c7e9e75e;
238+
padding: 15px;
239+
border-radius: 50px;
240+
position: absolute;
241+
right: 10px;
242+
bottom: 10px;
243+
}

0 commit comments

Comments
 (0)