Skip to content

Commit 7c4982a

Browse files
solygambassolygambas
committed
add finished product page
1 parent 9ce8ea6 commit 7c4982a

File tree

10 files changed

+144
-6
lines changed

10 files changed

+144
-6
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,13 @@ Based on [Tailwind CSS Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGk
3434

3535
A product page to understand Bulma basics.
3636

37+
[See Demo on CodePen](https://codepen.io/solygambas/full/KKWzKxw)
38+
3739
[See ninja-coffee folder](https://github.com/solygambas/html-css-frameworks/tree/master/ninja-coffee)
3840

3941
<p align="center">
4042
<a href="https://github.com/solygambas/html-css-frameworks/tree/master/ninja-coffee">
41-
<!-- <img src="ninja-coffee/screenshot.png"> -->
43+
<img src="ninja-coffee/screenshot.png">
4244
</a>
4345
</p>
4446

‎ninja-coffee/README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22

33
A product page to understand Bulma basics.
44

5+
[See Demo on CodePen](https://codepen.io/solygambas/full/KKWzKxw)
6+
57
<p align="center">
6-
<!-- <img src="screenshot.png"> -->
8+
<img src="screenshot.png">
79
</p>
810

911
## Features

‎ninja-coffee/assets/logo.png

-13.9 KB
Binary file not shown.

‎ninja-coffee/assets/p1.png

-76.1 KB
Binary file not shown.

‎ninja-coffee/assets/p2.png

-97 KB
Binary file not shown.

‎ninja-coffee/assets/p3.png

-98.2 KB
Binary file not shown.

‎ninja-coffee/assets/product.png

-1.64 MB
Binary file not shown.

‎ninja-coffee/index.html

Lines changed: 125 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<div class="navbar-brand">
1616
<a class="navbar-item"
1717
><img
18-
src="assets/logo.png"
18+
src="https://i.ibb.co/vkT9Xds/logo.png"
1919
alt="Ninja Coffee Logo"
2020
style="max-height: 70px"
2121
class="px-2 py-2"
@@ -60,7 +60,7 @@ <h2 class="is-size-4-mobile is-size-2-desktop subtitle">
6060
</div>
6161
<div class="column is-6-tablet is-5-desktop has-text-centered">
6262
<img
63-
src="assets/product.png"
63+
src="https://i.ibb.co/R6vG0fg/product.png"
6464
alt="docker coffee image"
6565
class="px-6"
6666
/>
@@ -71,7 +71,21 @@ <h2 class="is-size-4-mobile is-size-2-desktop subtitle">
7171
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid,
7272
repellendus?
7373
</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>
7589
</div>
7690
</div>
7791
</div>
@@ -129,14 +143,121 @@ <h3 class="is-size-5 title">Delivery Information</h3>
129143
repellat illum!
130144
</p>
131145
<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>
133153
</div>
134154
</div>
135155
</div>
136156
</div>
137157
</div>
138158
</div>
139159
</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 &copy;
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+
140261
<script src="index.js"></script>
141262
</body>
142263
</html>

‎ninja-coffee/index.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,16 @@ tabs.forEach((tab) => {
2222
});
2323
});
2424
});
25+
26+
// modal
27+
const signupButton = document.querySelector("#signup");
28+
const modalBackground = document.querySelector(".modal-background");
29+
const modal = document.querySelector(".modal");
30+
31+
signupButton.addEventListener("click", () => {
32+
modal.classList.add("is-active");
33+
});
34+
35+
modalBackground.addEventListener("click", () => {
36+
modal.classList.remove("is-active");
37+
});

‎ninja-coffee/screenshot.png

120 KB
Loading

0 commit comments

Comments
 (0)