15
15
< div class ="navbar-brand ">
16
16
< a class ="navbar-item "
17
17
> < img
18
- src ="assets /logo.png "
18
+ src ="https://i.ibb.co/vkT9Xds /logo.png "
19
19
alt ="Ninja Coffee Logo "
20
20
style ="max-height: 70px "
21
21
class ="px-2 py-2 "
@@ -60,7 +60,7 @@ <h2 class="is-size-4-mobile is-size-2-desktop subtitle">
60
60
</ div >
61
61
< div class ="column is-6-tablet is-5-desktop has-text-centered ">
62
62
< img
63
- src ="assets /product.png "
63
+ src ="https://i.ibb.co/R6vG0fg /product.png "
64
64
alt ="docker coffee image "
65
65
class ="px-6 "
66
66
/>
@@ -71,7 +71,21 @@ <h2 class="is-size-4-mobile is-size-2-desktop subtitle">
71
71
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid,
72
72
repellendus?
73
73
</ p >
74
- < button class ="button is-primary "> Add to Cart</ button >
74
+ < form >
75
+ < div class ="field ">
76
+ < div class ="control mb-6 ">
77
+ < div class ="select is-dark ">
78
+ < select >
79
+ < option > Small (250g)</ option >
80
+ < option > Large (500g)</ option >
81
+ </ select >
82
+ </ div >
83
+ </ div >
84
+ </ div >
85
+ < button class ="button is-primary " onclick ="return false; ">
86
+ Add to Cart
87
+ </ button >
88
+ </ form >
75
89
</ div >
76
90
</ div >
77
91
</ div >
@@ -129,14 +143,121 @@ <h3 class="is-size-5 title">Delivery Information</h3>
129
143
repellat illum!
130
144
</ p >
131
145
< div class ="has-text-centered ">
132
- < button class ="button mt-5 "> Sign Up</ button >
146
+ < button
147
+ class ="button mt-5 "
148
+ id ="signup "
149
+ onclick ="return false; "
150
+ >
151
+ Sign Up
152
+ </ button >
133
153
</ div >
134
154
</ div >
135
155
</ div >
136
156
</ div >
137
157
</ div >
138
158
</ div >
139
159
</ section >
160
+ <!-- cards -->
161
+ < section class ="section is-hidden-mobile ">
162
+ < div class ="container ">
163
+ < h3 class ="title has-text-centered is-size-4 "> Related Products</ h3 >
164
+ < div class ="columns mt-5 is-8 is-variable is-centered ">
165
+ < div class ="column is-4-tablet is-3-desktop ">
166
+ < div class ="card ">
167
+ < div class ="card-image has-text-centered px-6 ">
168
+ < img src ="https://i.ibb.co/CWXwHDK/p1.png " alt ="product " />
169
+ </ div >
170
+ < div class ="card-content ">
171
+ < p > €12.95</ p >
172
+ < p class ="title is-size-5 "> Cortado Cup</ p >
173
+ </ div >
174
+ < footer class ="card-footer ">
175
+ < p class ="card-footer-item ">
176
+ < a class ="has-text-grey "> View</ a >
177
+ </ p >
178
+ </ footer >
179
+ </ div >
180
+ </ div >
181
+ < div class ="column is-4-tablet is-3-desktop ">
182
+ < div class ="card ">
183
+ < div class ="card-image has-text-centered px-6 ">
184
+ < img src ="https://i.ibb.co/1Kf8sj2/p2.png " alt ="product " />
185
+ </ div >
186
+ < div class ="card-content ">
187
+ < p > €13.95</ p >
188
+ < p class ="title is-size-5 "> Docker Light</ p >
189
+ </ div >
190
+ < footer class ="card-footer ">
191
+ < p class ="card-footer-item ">
192
+ < a class ="has-text-grey "> View</ a >
193
+ </ p >
194
+ </ footer >
195
+ </ div >
196
+ </ div >
197
+ < div class ="column is-4-tablet is-3-desktop ">
198
+ < div class ="card ">
199
+ < div class ="card-image has-text-centered px-6 ">
200
+ < img src ="https://i.ibb.co/rd9RN3R/p3.png " alt ="product " />
201
+ </ div >
202
+ < div class ="card-content ">
203
+ < p > €11.95</ p >
204
+ < p class ="title is-size-5 "> Coffee Crush</ p >
205
+ </ div >
206
+ < footer class ="card-footer ">
207
+ < p class ="card-footer-item ">
208
+ < a class ="has-text-grey "> View</ a >
209
+ </ p >
210
+ </ footer >
211
+ </ div >
212
+ </ div >
213
+ </ div >
214
+ </ div >
215
+ </ section >
216
+ <!-- footer -->
217
+ < footer class ="footer ">
218
+ < div class ="content has-text-centered ">
219
+ < p >
220
+ Copyright ©
221
+ < script >
222
+ document . write ( new Date ( ) . getFullYear ( ) ) ;
223
+ </ script >
224
+ Coffee Ninja
225
+ </ p >
226
+ </ div >
227
+ </ footer >
228
+ <!-- modal -->
229
+ < div class ="modal ">
230
+ < div class ="modal-background "> </ div >
231
+ < div class ="modal-content has-background-white py-5 px-5 ">
232
+ < h3 class ="title mb-6 "> Join the Club</ h3 >
233
+ < form >
234
+ < div class ="field ">
235
+ < label class ="label "> Name</ label >
236
+ < div class ="control ">
237
+ < input type ="text " class ="input " placeholder ="Name " />
238
+ </ div >
239
+ </ div >
240
+ < div class ="field ">
241
+ < label class ="label "> Email</ label >
242
+ < div class ="control ">
243
+ < input type ="email " class ="input " placeholder ="Email " />
244
+ </ div >
245
+ </ div >
246
+ < div class ="field ">
247
+ < div class ="control ">
248
+ < label class ="checkbox ">
249
+ < input type ="checkbox " />
250
+ I agree to the < a > terms & conditions</ a >
251
+ </ label >
252
+ </ div >
253
+ </ div >
254
+ < div class ="mt-6 has-text-centered ">
255
+ < button class ="button is-primary "> Sign Up</ button >
256
+ </ div >
257
+ </ form >
258
+ </ div >
259
+ </ div >
260
+
140
261
< script src ="index.js "> </ script >
141
262
</ body >
142
263
</ html >
0 commit comments