Skip to content

Commit 875a5cd

Browse files
solygambassolygambas
committed
add navbar
1 parent 6fc54ac commit 875a5cd

File tree

9 files changed

+78
-2
lines changed

9 files changed

+78
-2
lines changed

‎README.md‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
# CSS Frameworks
22

3-
This repo is made of 1 project:
3+
This repo is made of 2 projects:
44

55
1. [**Food Ninja**](#food): A recipe website to understand Tailwind CSS basics.
6-
<!-- 2. [**Star Wars Info**](#starwars): A web app about Star Wars to understand React Query basics. -->
6+
2. [**Ninja Coffee**](#coffee): A product page to understand Bulma basics.
77

88
## <a name="food"></a>1) Food Ninja - Tailwind CSS
99

@@ -29,3 +29,21 @@ A recipe website to understand Tailwind CSS basics.
2929
- adding effects and transitions on hover.
3030

3131
Based on [Tailwind CSS Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw) by Shaun Pelling - The Net Ninja (2020).
32+
33+
## <a name="coffee"></a>2) Ninja Coffee - Bulma
34+
35+
A product page to understand Bulma basics.
36+
37+
[See ninja-coffee folder](https://github.com/solygambas/html-css-frameworks/tree/master/ninja-coffee)
38+
39+
<p align="center">
40+
<a href="https://github.com/solygambas/html-css-frameworks/tree/master/ninja-coffee">
41+
<!-- <img src="ninja-coffee/screenshot.png"> -->
42+
</a>
43+
</p>
44+
45+
### Features
46+
47+
-
48+
49+
Based on [Bulma CSS Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a) by Shaun Pelling - The Net Ninja (2020).

‎ninja-coffee/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Ninja Coffee - Bulma
2+
3+
A product page to understand Bulma basics.
4+
5+
<p align="center">
6+
<!-- <img src="screenshot.png"> -->
7+
</p>
8+
9+
## Features
10+
11+
-
12+
13+
Based on [Bulma CSS Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a) by Shaun Pelling - The Net Ninja (2020).

‎ninja-coffee/assets/logo.png‎

13.9 KB
Loading

‎ninja-coffee/assets/p1.png‎

76.1 KB
Loading

‎ninja-coffee/assets/p2.png‎

97 KB
Loading

‎ninja-coffee/assets/p3.png‎

98.2 KB
Loading

‎ninja-coffee/assets/product.png‎

1.64 MB
Loading

‎ninja-coffee/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Ninja Coffee</title>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css"
10+
/>
11+
</head>
12+
<body>
13+
<!-- navbar -->
14+
<nav class="navbar has-shadow is-white">
15+
<div class="navbar-brand">
16+
<a class="navbar-item"
17+
><img
18+
src="assets/logo.png"
19+
alt="Ninja Coffee Logo"
20+
style="max-height: 70px"
21+
class="px-2 py-2"
22+
/></a>
23+
<a class="navbar-burger" id="burger">
24+
<span></span>
25+
<span></span>
26+
<span></span>
27+
</a>
28+
</div>
29+
<div class="navbar-menu" id="nav-links">
30+
<div class="navbar-end">
31+
<a class="navbar-item">My Account</a>
32+
<a class="navbar-item">Shopping Cart (0)</a>
33+
</div>
34+
</div>
35+
</nav>
36+
<script src="index.js"></script>
37+
</body>
38+
</html>

‎ninja-coffee/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// mobile menu
2+
const burgerIcon = document.querySelector("#burger");
3+
const navBarMenu = document.querySelector("#nav-links");
4+
5+
burgerIcon.addEventListener("click", () =>
6+
navBarMenu.classList.toggle("is-active")
7+
);

0 commit comments

Comments
 (0)