File tree Expand file tree Collapse file tree 9 files changed +78
-2
lines changed Expand file tree Collapse file tree 9 files changed +78
-2
lines changed Original file line number Diff line number Diff line change 1
1
# CSS Frameworks
2
2
3
- This repo is made of 1 project :
3
+ This repo is made of 2 projects :
4
4
5
5
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.
7
7
8
8
## <a name =" food " ></a >1) Food Ninja - Tailwind CSS
9
9
@@ -29,3 +29,21 @@ A recipe website to understand Tailwind CSS basics.
29
29
- adding effects and transitions on hover.
30
30
31
31
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).
Original file line number Diff line number Diff line change
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).
Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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
+ ) ;
You can’t perform that action at this time.
0 commit comments