Skip to content

Commit 12a4009

Browse files
alirezatayebinejadalirezatayebinejad
committed
new arrival section done
1 parent d9bb336 commit 12a4009

2 files changed

Lines changed: 136 additions & 13 deletions

File tree

‎index.html‎

Lines changed: 120 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ <h6>24/7 support</h6>
7474
</div>
7575
</section>
7676

77-
<section id="f-products" class="section-p1">
77+
<section class="product-section" class="section-p1">
7878
<h1>Featured Products</h1>
7979
<p>Summer Collection New Morden Design</p>
8080
<div class="pro-collection">
@@ -193,12 +193,130 @@ <h4 class="price">$78</h4>
193193
</div>
194194
</section>
195195

196-
<section id="off-banner">
196+
<section id="off-banner" class="section-m1">
197197
<h4>Repaire Services</h4>
198198
<h2>Up to 70% Off - All t-Shirts & Accessories</h2>
199199
<button class="normal">Explore More</button>
200200
</section>
201201

202+
<section class="product-section" class="section-p1">
203+
<h1>New Arrivals</h1>
204+
<p>Summer Collection New Morden Design</p>
205+
<div class="pro-collection">
206+
<div class="product-cart">
207+
<img src="images/products/n1.jpg" alt="product image" />
208+
<span>adidas</span>
209+
<h4>Cartoon Astronaut T-Shirts</h4>
210+
<div class="stars">
211+
<i class="fa-solid fa-star"></i>
212+
<i class="fa-solid fa-star"></i>
213+
<i class="fa-solid fa-star"></i>
214+
<i class="fa-solid fa-star"></i>
215+
<i class="fa-solid fa-star"></i>
216+
</div>
217+
<h4 class="price">$78</h4>
218+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
219+
</div>
220+
<div class="product-cart">
221+
<img src="images/products/n2.jpg" alt="product image" />
222+
<span>adidas</span>
223+
<h4>Cartoon Astronaut T-Shirts</h4>
224+
<div class="stars">
225+
<i class="fa-solid fa-star"></i>
226+
<i class="fa-solid fa-star"></i>
227+
<i class="fa-solid fa-star"></i>
228+
<i class="fa-solid fa-star"></i>
229+
<i class="fa-solid fa-star"></i>
230+
</div>
231+
<h4 class="price">$78</h4>
232+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
233+
</div>
234+
<div class="product-cart">
235+
<img src="images/products/n3.jpg" alt="product image" />
236+
<span>adidas</span>
237+
<h4>Cartoon Astronaut T-Shirts</h4>
238+
<div class="stars">
239+
<i class="fa-solid fa-star"></i>
240+
<i class="fa-solid fa-star"></i>
241+
<i class="fa-solid fa-star"></i>
242+
<i class="fa-solid fa-star"></i>
243+
<i class="fa-solid fa-star"></i>
244+
</div>
245+
<h4 class="price">$78</h4>
246+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
247+
</div>
248+
<div class="product-cart">
249+
<img src="images/products/n4.jpg" alt="product image" />
250+
<span>adidas</span>
251+
<h4>Cartoon Astronaut T-Shirts</h4>
252+
<div class="stars">
253+
<i class="fa-solid fa-star"></i>
254+
<i class="fa-solid fa-star"></i>
255+
<i class="fa-solid fa-star"></i>
256+
<i class="fa-solid fa-star"></i>
257+
<i class="fa-solid fa-star"></i>
258+
</div>
259+
<h4 class="price">$78</h4>
260+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
261+
</div>
262+
<div class="product-cart">
263+
<img src="images/products/n5.jpg" alt="product image" />
264+
<span>adidas</span>
265+
<h4>Cartoon Astronaut T-Shirts</h4>
266+
<div class="stars">
267+
<i class="fa-solid fa-star"></i>
268+
<i class="fa-solid fa-star"></i>
269+
<i class="fa-solid fa-star"></i>
270+
<i class="fa-solid fa-star"></i>
271+
<i class="fa-solid fa-star"></i>
272+
</div>
273+
<h4 class="price">$78</h4>
274+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
275+
</div>
276+
<div class="product-cart">
277+
<img src="images/products/n6.jpg" alt="product image" />
278+
<span>adidas</span>
279+
<h4>Cartoon Astronaut T-Shirts</h4>
280+
<div class="stars">
281+
<i class="fa-solid fa-star"></i>
282+
<i class="fa-solid fa-star"></i>
283+
<i class="fa-solid fa-star"></i>
284+
<i class="fa-solid fa-star"></i>
285+
<i class="fa-solid fa-star"></i>
286+
</div>
287+
<h4 class="price">$78</h4>
288+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
289+
</div>
290+
<div class="product-cart">
291+
<img src="images/products/n7.jpg" alt="product image" />
292+
<span>adidas</span>
293+
<h4>Cartoon Astronaut T-Shirts</h4>
294+
<div class="stars">
295+
<i class="fa-solid fa-star"></i>
296+
<i class="fa-solid fa-star"></i>
297+
<i class="fa-solid fa-star"></i>
298+
<i class="fa-solid fa-star"></i>
299+
<i class="fa-solid fa-star"></i>
300+
</div>
301+
<h4 class="price">$78</h4>
302+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
303+
</div>
304+
<div class="product-cart">
305+
<img src="images/products/n8.jpg" alt="product image" />
306+
<span>adidas</span>
307+
<h4>Cartoon Astronaut T-Shirts</h4>
308+
<div class="stars">
309+
<i class="fa-solid fa-star"></i>
310+
<i class="fa-solid fa-star"></i>
311+
<i class="fa-solid fa-star"></i>
312+
<i class="fa-solid fa-star"></i>
313+
<i class="fa-solid fa-star"></i>
314+
</div>
315+
<h4 class="price">$78</h4>
316+
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
317+
</div>
318+
</div>
319+
</section>
202320
</main>
203321

204322
<!--footer section-->

‎style.css‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -206,51 +206,51 @@ section#hero {
206206

207207
/* feature section styles */
208208

209-
#f-products .pro-collection{
209+
.product-section .pro-collection{
210210
display: flex;
211211
flex-wrap: wrap;
212212
justify-content: space-around;
213213
margin: 0 60px;
214214
}
215-
#f-products h1, #f-products p{
215+
.product-section h1, .product-section p{
216216
text-align: center;
217217
}
218-
#f-products .product-cart{
218+
.product-section .product-cart{
219219
width: 280px;
220-
border: 1px solid #d8d8d8;
220+
border: 1px solid #ebebeb;
221221
padding: 13px;
222222
margin-bottom: 30px;
223223
border-radius: 25px;
224224
position: relative;
225225
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
226226
transition: box-shadow 0.2s;
227227
}
228-
#f-products .product-cart:hover{
228+
.product-section .product-cart:hover{
229229
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
230230

231231
}
232-
#f-products .product-cart img{
232+
.product-section .product-cart img{
233233
width: 100%;
234234
border-radius: 25px;
235235

236236
}
237-
#f-products .product-cart span{
237+
.product-section .product-cart span{
238238
color: #969696;
239239
font-weight: 500;
240240
line-height: 30px;
241241
}
242-
#f-products .product-cart h4{
242+
.product-section .product-cart h4{
243243
font-size: 18px;
244244
}
245-
#f-products .product-cart .stars{
245+
.product-section .product-cart .stars{
246246
color: #e6ae2c;
247247
padding: 6px 0;
248248
}
249-
#f-products .product-cart .price{
249+
.product-section .product-cart .price{
250250
color: #088178;
251251
padding: 4px 0;
252252
}
253-
#f-products .product-cart .buy-icon{
253+
.product-section .product-cart .buy-icon{
254254
color: #088178;
255255
background-color: #c7e9e75e;
256256
padding: 15px;
@@ -280,3 +280,8 @@ section#hero {
280280
padding: 20px 0;
281281
}
282282

283+
/* new arrival section styles
284+
this section gets the same styles
285+
in featured products section
286+
*/
287+

0 commit comments

Comments
 (0)