-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (121 loc) · 3.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home Town</title>
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.1/css/all.css" integrity="sha384-wxqG4glGB3nlqX0bi23nmgwCSjWIW13BdLUEYC4VIMehfbcro/ATkyDsF/AbIOVe" crossorigin="anonymous">
<!-- custom css -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- navbar -->
<nav class="navbar">
<div class="navbar-center">
<span class="nav-icon">
<i class="fas fa-bars"></i>
</span>
<img src="./images/logo.svg" class="logo-img" alt="">
<div class="cart-btn">
<span class="nav-icon">
<i class="fas fa-cart-plus"></i>
</span>
<div class="cart-items">0</div>
</div>
</div>
</nav>
<!-- end of navbar -->
<!-- hero -->
<header class="hero">
<div class="banner">
<h1 class="banner-title">furniture collection</h1>
<button class="banner-btn">shop now</button>
</div>
</header>
<!-- end of hero -->
<!--products -->
<section class="products">
<div class="section-title">
<h2>our products</h2>
</div>
<div class="products-center">
<!-- single product -->
<article class="product">
<div class="img-container">
<img src= "./images/product-1.jpeg" alt="product" class="product-img">
<button class="bag-btn" data-id="1">
<i class="fas fa-shopping-cart"></i>
add to bag
</button>
</div>
<h3>queen bed</h3>
<h4>$16</h4>
</article>
<!-- end of single product -->
<!-- single product -->
<article class="product">
<div class="img-container">
<img src= "./images/product-2.jpeg" alt="product" class="product-img">
<button class="bag-btn" data-id="2">
<i class="fas fa-shopping-cart"></i>
add to bag
</button>
</div>
<h3>white wooden table with chairs</h3>
<h4>$12.99</h4>
</article>
<!-- end of single product -->
<!-- single product -->
<article class="product">
<div class="img-container">
<img src= "./images/product-3.jpeg" alt="product" class="product-img">
<button class="bag-btn" data-id="3">
<i class="fas fa-shopping-cart"></i>
add to bag
</button>
</div>
<h3>round tufted ottoman</h3>
<h4>$16</h4>
</article>
<!-- end of single product -->
</div>
</section>
<!--end of products -->
<!--- cart- -->
<div class="cart-overlay">
<div class="cart">
<span class="close-cart">
<i class="fas fa-window-close"></i>
</span>
<h2>Your cart</h2>
<div class="cart-content">
<!--####################cart item######################-->
<!-- <div class="cart-item">
<img src="./images/product-1.jpeg" alt="product">
<div>
<h4>queen bed</h4>
<h5>$16.00</h5>
<span class="remove-item">remove</span>
</div>
<div>
<i class="fas fa-chevron-up"></i>
<p class="item-amount">1</p>
<i class="fas fa-chevron-down"></i>
</div>
</div> -->
<!--############ end of cart item ########################### -->
</div>
<div class="cart-footer">
<h3>your total: $ <span class="cart-total">0</span></h3>
<button class="clear-cart banner-btn">clear cart</button>
</div>
</div>
<!---end of cart----->
<!-- contentful -->
<script src="https://cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.browser.min.js"></script>
<!-- app js -->
<script src="app.js"></script>
</body>
</html>