15 |
16 |
17 |
18 |
19 |
20 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/navbar-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Navbar 1
8 |
9 |
10 |
14 |
18 |
19 |
20 |
21 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/navbar-13/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | background: rgb(27 32 44 / 100%);
4 | color: #f9f9f9;
5 | font-family: "Euclid Circular A", "Poppins";
6 | }
7 |
8 | * {
9 | box-sizing: border-box;
10 | }
11 |
12 | nav {
13 | position: sticky;
14 | z-index: 1;
15 | top: 0;
16 | width: 100%;
17 | height: 88px;
18 | padding: 0 30px;
19 | display: flex;
20 | align-items: center;
21 | justify-content: space-between;
22 | background: rgb(27 32 44 / 70%);
23 | -webkit-backdrop-filter: blur(5px);
24 | -moz-backdrop-filter: blur(5px);
25 | -ms-backdrop-filter: blur(5px);
26 | backdrop-filter: blur(5px);
27 | backface-visibility: hidden;
28 | transform: translateZ(0px);
29 | transition: 0.3s;
30 | }
31 |
32 | nav img {
33 | height: 40px;
34 | }
35 |
36 | nav i {
37 | font-size: 30px;
38 | color: #f9f9f9;
39 | }
40 |
41 | main {
42 | padding: 10px 30px;
43 | }
44 |
45 | article {
46 | display: flex;
47 | gap: 16px;
48 | padding: 20px;
49 | max-width: 400px;
50 | margin: 0 auto 32px;
51 | border-radius: 16px;
52 | background-color: #272e3c;
53 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1),
54 | inset 0 1px 1px rgba(255, 255, 255, 0.1);
55 | }
56 |
57 | article img {
58 | height: 60px;
59 | }
60 |
61 | article name {
62 | color: rgb(255 255 255 / 50%);
63 | }
64 |
65 | article p {
66 | margin: 8px 0 10px;
67 | font-size: 14px;
68 | line-height: 1.6;
69 | }
70 |
--------------------------------------------------------------------------------
/navbar-12/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Navbar 12
8 |
9 |
10 |
14 |
15 |
16 |
17 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/navbar-5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Navbar 1
8 |
9 |
10 |
14 |
18 |
19 |
20 |
21 |
40 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/navbar-3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Navbar 1
8 |
9 |
10 |
14 |
18 |
19 |
20 |
21 |
22 |
26 |
27 |
34 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/navbar-10/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Navbar 10
8 |
12 |
13 |
14 |
15 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/navbar-6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Navbar 6
8 |
9 |
10 |
14 |
18 |
19 |
20 |
21 |
24 |
46 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/navbar-7/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Navbar 7
8 |
9 |
10 |
14 |
18 |
19 |
20 |
21 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/navbar-14/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | :root {
6 | --color-primary: #2f67ec;
7 | }
8 |
9 | body {
10 | font-family: "Euclid Circular A", "Poppins";
11 | background: #12161f;
12 | color: white;
13 | margin: 0;
14 | height: 94vh;
15 | display: grid;
16 | place-items: center;
17 | }
18 |
19 | nav {
20 | position: relative;
21 | background: #1f2635;
22 | font-weight: 400;
23 | font-size: 0;
24 | display: flex;
25 | padding: 0;
26 | width: 80%;
27 | }
28 |
29 | nav .item {
30 | font-size: 0.8rem;
31 | display: inline-block;
32 | position: relative;
33 | padding: 0 20px;
34 | cursor: pointer;
35 | z-index: 5;
36 | min-width: 25%;
37 | height: 60px;
38 | line-height: 60px;
39 | text-align: center;
40 | }
41 |
42 | .dropdown {
43 | overflow: hidden;
44 | list-style: none;
45 | position: absolute;
46 | padding: 0;
47 | width: 100%;
48 | left: 0;
49 | top: 62px;
50 | }
51 | .dropdown > div {
52 | transform: translate(0, -100%);
53 | transition: all 0.5s 0.1s;
54 | position: relative;
55 | }
56 |
57 | .dropdown a {
58 | display: block;
59 | padding: 0;
60 | width: 100%;
61 | height: 40px;
62 | line-height: 40px;
63 | background: var(--color-primary);
64 | }
65 |
66 | .dropdown a:hover {
67 | background: #254fb5;
68 | }
69 |
70 | .underline {
71 | height: 6px;
72 | background: var(--color-primary);
73 | position: absolute;
74 | bottom: 0;
75 | width: 25%;
76 | z-index: 2;
77 | pointer-events: none;
78 | transition: 0.35s;
79 | }
80 |
81 | nav .item:hover > .dropdown > div {
82 | transform: translate(0);
83 | }
84 |
85 | nav .item:nth-child(1):hover ~ .underline {
86 | transform: translate(0, 0);
87 | }
88 |
89 | nav .item:nth-child(2):hover ~ .underline {
90 | transform: translate(100%, 0);
91 | }
92 |
93 | nav .item:nth-child(3):hover ~ .underline {
94 | transform: translate(200%, 0);
95 | }
96 |
97 | nav .item:nth-child(4):hover ~ .underline {
98 | transform: translate(300%, 0);
99 | }
100 |
--------------------------------------------------------------------------------
/navbar-15/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "Euclid Circ.menuar A", "Poppins";
3 | font-size: 18px;
4 | margin: 0;
5 | display: grid;
6 | place-items: center;
7 | height: 100vh;
8 | background: #1a2027;
9 | }
10 |
11 | ul {
12 | margin: 0;
13 | padding: 0;
14 | list-style: none;
15 | }
16 |
17 | nav {
18 | width: 100%;
19 | }
20 |
21 | a {
22 | cursor: pointer;
23 | }
24 |
25 | .menu {
26 | margin: 0;
27 | padding: 0;
28 | display: flex;
29 | justify-content: center;
30 | align-items: stretch;
31 | height: 70px;
32 | }
33 |
34 | .menu li {
35 | display: inline-block;
36 | width: 90px;
37 | transition: all 0.3s ease-in-out;
38 | }
39 |
40 | .menu li:hover .submenu {
41 | height: 85px;
42 | }
43 |
44 | .menu > li:hover > a {
45 | color: #3e95ff;
46 | }
47 |
48 | .menu > li:hover > a::before {
49 | visibility: visible;
50 | scale: 1 1;
51 | }
52 |
53 | .submenu {
54 | overflow: hidden;
55 | position: absolute;
56 | left: 0;
57 | display: flex;
58 | justify-content: center;
59 | align-items: stretch;
60 | width: 100%;
61 | background-color: #3e95ff;
62 | height: 0;
63 | line-height: 40px;
64 | box-sizing: border-box;
65 | transition: height 0.3s ease-in-out;
66 | }
67 | .menu li .submenu a {
68 | color: #fff;
69 | opacity: 0;
70 | font-size: 16px;
71 | transition: opacity 0.25s;
72 | }
73 |
74 | .menu > li:hover .submenu a {
75 | opacity: 1;
76 | }
77 |
78 | .menu > li .submenu a:hover {
79 | background: rgb(0 0 0 / 20%);
80 | }
81 |
82 | .menu > li a {
83 | color: #999;
84 | display: flex;
85 | align-items: center;
86 | justify-content: center;
87 | padding: 0 7px;
88 | text-decoration: none;
89 | position: relative;
90 | height: 100%;
91 | }
92 |
93 | .menu > li > a::before {
94 | content: "";
95 | position: absolute;
96 | width: 100%;
97 | height: 3px;
98 | bottom: 3px;
99 | left: 0px;
100 | background-color: #3e95ff;
101 | transition: all 0.2s ease-in-out;
102 | scale: 0 0;
103 | visibility: hidden;
104 | }
105 |
--------------------------------------------------------------------------------
/navbar-2/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | background: #3b3d43;
7 | }
8 |
9 | button {
10 | border: 0;
11 | padding: 0;
12 | font-family: inherit;
13 | background: transparent;
14 | color: inherit;
15 | cursor: pointer;
16 | }
17 |
18 | .navbar {
19 | position: fixed;
20 | z-index: 1;
21 | top: 0;
22 | left: 0;
23 | display: flex;
24 | align-items: center;
25 | justify-content: space-between;
26 | width: 100%;
27 | height: 72px;
28 | padding: 0 20px;
29 | background: #19191c;
30 | color: #f9f9f9;
31 | }
32 |
33 | .navbar-logo {
34 | display: flex;
35 | align-items: center;
36 | gap: 12px;
37 | width: 120px;
38 | }
39 |
40 | .navbar-logo-icon {
41 | height: 28px;
42 | }
43 |
44 | @media only screen and (min-width: 400px) {
45 | .navbar-logo-icon {
46 | height: 24px;
47 | }
48 | }
49 |
50 | .navbar-logo-text {
51 | display: none;
52 | height: 19px;
53 | }
54 |
55 | @media only screen and (min-width: 400px) {
56 | .navbar-logo-text {
57 | display: block;
58 | }
59 | }
60 |
61 | .navbar-menu {
62 | display: flex;
63 | transition: 0.3s;
64 | }
65 |
66 | @media only screen and (min-width: 600px) {
67 | .navbar-menu {
68 | flex: 1 1 auto;
69 | justify-content: center;
70 | margin-right: 120px;
71 | }
72 | }
73 |
74 | .navbar-menu > button {
75 | position: relative;
76 | flex: 0 0 36px;
77 | display: grid;
78 | place-items: center;
79 | font-size: 28px;
80 | height: 72px;
81 | width: 36px;
82 | opacity: 0.3;
83 | }
84 |
85 | .navbar-menu > button.active {
86 | opacity: 1;
87 | }
88 |
89 | .navbar-menu > button.active::after {
90 | content: "";
91 | display: block;
92 | position: absolute;
93 | top: 18px;
94 | left: 50%;
95 | translate: -50% 0;
96 | width: 4px;
97 | height: 4px;
98 | border-radius: 50%;
99 | background: #36b7ee;
100 | }
101 |
102 | @media only screen and (min-width: 600px) {
103 | .navbar-menu > button:last-child {
104 | position: absolute;
105 | right: 20px;
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/navbar-4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Navbar 1
8 |
9 |
10 |
14 |
18 |
19 |
20 |
21 |
60 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/navbar-10/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body,
7 | .wrapper {
8 | height: 100%;
9 | }
10 |
11 | body {
12 | margin: 0;
13 | background: #f0f2f5;
14 | font-family: system-ui, -apple-system, BlinkMacSystemFont;
15 | }
16 |
17 | button {
18 | display: grid;
19 | place-items: center;
20 | background: transparent;
21 | color: #606770;
22 | border: 0;
23 | }
24 |
25 | button > i {
26 | font-size: 20px;
27 | }
28 |
29 | .navbar {
30 | position: fixed;
31 | top: 0;
32 | left: 0;
33 | display: flex;
34 | align-items: center;
35 | justify-content: space-between;
36 | height: 72px;
37 | width: 100%;
38 | padding: 0 20px;
39 | border-bottom: 1px solid #e8e8e8;
40 | background: #ffffff;
41 | box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
42 | }
43 |
44 | .navbar-logo,
45 | .navbar-avatar {
46 | width: 40px;
47 | height: 40px;
48 | }
49 |
50 | .navbar-end {
51 | display: flex;
52 | gap: 6px;
53 | flex: 0 0 178px;
54 | }
55 |
56 | .icon-button {
57 | width: 40px;
58 | height: 40px;
59 | border-radius: 50%;
60 | background: #f0f2f5;
61 | }
62 |
63 | .navbar-badge {
64 | position: absolute;
65 | z-index: 1;
66 | top: 8px;
67 | right: 54px;
68 | background: #e41e3f;
69 | color: #f9f9f9;
70 | font-size: 12px;
71 | padding: 1px 4px;
72 | border-radius: 10px;
73 | transition: 0.3s;
74 | }
75 |
76 | .navbar-center {
77 | display: flex;
78 | flex: 1 1 auto;
79 | padding: 0 10px;
80 | }
81 |
82 | .navbar-center > button {
83 | flex: 1 1 auto;
84 | height: 72px;
85 | padding-top: 4px;
86 | border-bottom: 4px solid transparent;
87 | }
88 |
89 | .navbar-center > button.active {
90 | border-bottom-color: #1a74e5;
91 | }
92 |
93 | .navbar-center > button.active > i {
94 | color: #1a74e5;
95 | }
96 |
97 | .navbar-center > button > i {
98 | font-size: 24px;
99 | }
100 |
101 | .navbar .navbar-end:last-child > button > i {
102 | color: #050505;
103 | }
104 |
105 | @media (width <= 600px) {
106 | .navbar-end {
107 | flex: 0 0 auto;
108 | }
109 |
110 | .navbar-center > button {
111 | display: none;
112 | }
113 |
114 | .navbar-center > button:last-child {
115 | display: block;
116 | position: absolute;
117 | left: 110px;
118 | top: 50%;
119 | translate: 0 -50%;
120 | }
121 | }
122 |
123 | @media (width <= 400px) {
124 | .navbar .navbar-end:last-child > button:nth-child(n + 2) {
125 | display: none;
126 | }
127 |
128 | .navbar-badge {
129 | right: 10px;
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/navbar-1/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | background: #3b3d43;
7 | }
8 |
9 | button {
10 | border: 0;
11 | padding: 0;
12 | font-family: inherit;
13 | background: transparent;
14 | color: inherit;
15 | cursor: pointer;
16 | }
17 |
18 | .navbar {
19 | position: fixed;
20 | z-index: 1;
21 | top: 0;
22 | left: 0;
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 | width: 100%;
27 | height: 64px;
28 | background: #19191c;
29 | color: #f9f9f9;
30 | font-family: "Poppins";
31 | box-sizing: border-box;
32 | }
33 |
34 | @media only screen and (min-width: 600px) {
35 | .navbar {
36 | justify-content: space-between;
37 | padding: 0 0 0 16px;
38 | }
39 | }
40 |
41 | .navbar-overlay {
42 | position: fixed;
43 | z-index: 2;
44 | top: 0;
45 | left: 0;
46 | width: 100%;
47 | height: 100%;
48 | background: rgba(0, 0, 0, 0.5);
49 | visibility: hidden;
50 | opacity: 0;
51 | transition: 0.3s;
52 | }
53 |
54 | body.open .navbar-overlay {
55 | visibility: visible;
56 | opacity: 1;
57 | }
58 |
59 | @media only screen and (min-width: 600px) {
60 | .navbar-overlay {
61 | display: none;
62 | }
63 | }
64 |
65 | .navbar-burger {
66 | position: absolute;
67 | top: 0;
68 | left: 0;
69 | display: grid;
70 | place-items: center;
71 | width: 64px;
72 | height: 64px;
73 | padding: 0;
74 | }
75 |
76 | @media only screen and (min-width: 600px) {
77 | .navbar-burger {
78 | display: none;
79 | }
80 | }
81 |
82 | .navbar-title {
83 | margin: 0;
84 | font-size: 16px;
85 | }
86 |
87 | .navbar-menu {
88 | position: fixed;
89 | z-index: 3;
90 | top: 0;
91 | left: 0;
92 | translate: -100% 0;
93 | width: 270px;
94 | height: 100%;
95 | padding: 20px;
96 | display: flex;
97 | gap: 8px;
98 | flex-direction: column;
99 | align-items: flex-start;
100 | background: #000000;
101 | visibility: hidden;
102 | transition: translate 0.3s;
103 | }
104 |
105 | body.open .navbar-menu {
106 | translate: 0 0;
107 | visibility: visible;
108 | }
109 |
110 | @media only screen and (min-width: 600px) {
111 | .navbar-menu {
112 | position: static;
113 | translate: 0 0;
114 | width: auto;
115 | background: transparent;
116 | flex-direction: row;
117 | visibility: visible;
118 | }
119 | }
120 |
121 | .navbar-menu > button {
122 | color: rgba(255, 255, 255, 0.5);
123 | background: transparent;
124 | padding: 0 8px;
125 | }
126 |
127 | .navbar-menu > button.active {
128 | color: inherit;
129 | }
130 |
--------------------------------------------------------------------------------
/navbar-11/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body,
7 | .wrapper {
8 | height: 100%;
9 | }
10 |
11 | body {
12 | margin: 0;
13 | background: #0d1117;
14 | font-family: system-ui, -apple-system, BlinkMacSystemFont;
15 | }
16 |
17 | nav {
18 | display: flex;
19 | align-items: center;
20 | justify-content: space-between;
21 | gap: 20px;
22 | height: 60px;
23 | padding: 0 20px;
24 | background: #161b22;
25 | }
26 |
27 | nav img {
28 | width: 30px;
29 | height: 30px;
30 | }
31 |
32 | .burger {
33 | display: none;
34 | cursor: pointer;
35 | }
36 |
37 | .menu-items,
38 | .menu {
39 | display: flex;
40 | gap: 16px;
41 | }
42 |
43 | .menu-right {
44 | position: relative;
45 | margin-left: auto;
46 | gap: 6px;
47 | }
48 |
49 | .menu-right img {
50 | width: 30px;
51 | height: 30px;
52 | padding: 5px;
53 | }
54 |
55 | .menu-right .badge {
56 | position: absolute;
57 | top: 0;
58 | left: 14px;
59 | width: 14px;
60 | height: 14px;
61 | border-radius: 50%;
62 | border: 2px solid #161b22;
63 | background: linear-gradient(#54a3ff, #006eed);
64 | }
65 |
66 | a,
67 | a:is(:visited, :active) {
68 | color: #ffffff;
69 | text-decoration: none;
70 | line-height: 24px;
71 | }
72 |
73 | .search {
74 | display: flex;
75 | align-items: center;
76 | justify-content: space-between;
77 | background: #0d1117;
78 | border: 1px solid #30363d;
79 | border-radius: 6px;
80 | padding-right: 4px;
81 | }
82 |
83 | .search input {
84 | padding: 4px 10px;
85 | color: #c9d1d9;
86 | font-size: 13px;
87 | font-family: inherit;
88 | border: 0;
89 | background: transparent;
90 | }
91 |
92 | .search button {
93 | border: inherit;
94 | border-radius: inherit;
95 | background: transparent;
96 | color: #8b949e;
97 | }
98 |
99 | @media (width <= 580px) {
100 | .menu-right img:nth-child(n + 3) {
101 | display: none;
102 | }
103 |
104 | .menu-items {
105 | display: none;
106 | width: 100%;
107 | flex-direction: column;
108 | gap: 16px;
109 | position: absolute;
110 | top: 60px;
111 | left: 0;
112 | padding: 0 20px 20px;
113 | background: #161b22;
114 | }
115 |
116 | .menu-left {
117 | flex-direction: column;
118 | gap: 12px;
119 | }
120 |
121 | .menu-left a {
122 | border-bottom: 1px solid #30363d;
123 | padding-bottom: 10px;
124 | }
125 |
126 | .menu-right {
127 | margin-left: 0;
128 | }
129 |
130 | .burger {
131 | display: block;
132 | }
133 | }
134 |
135 | body.open .menu-items {
136 | display: flex;
137 | }
138 |
--------------------------------------------------------------------------------
/navbar-8/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | :root {
6 | --color-primary: #2ebdff;
7 | }
8 |
9 | html,
10 | body,
11 | .wrapper {
12 | height: 100%;
13 | }
14 |
15 | body {
16 | margin: 0;
17 | font-family: "Euclid Circular A";
18 | background: #f9f9f9;
19 | color: #f9f9f9;
20 | }
21 |
22 | .navbar {
23 | position: fixed;
24 | bottom: 0;
25 | left: 0;
26 | display: flex;
27 | align-items: center;
28 | justify-content: space-between;
29 | height: 72px;
30 | background: #17181a;
31 | width: 100%;
32 | }
33 |
34 | .navbar h1 {
35 | display: none;
36 | flex: 2 1 auto;
37 | font-weight: 500;
38 | font-size: 16px;
39 | margin: 0 0 0 16px;
40 | }
41 |
42 | @media (width >= 440px) {
43 | .navbar {
44 | top: 0;
45 | bottom: auto;
46 | }
47 |
48 | .tabs {
49 | scale: 0.8;
50 | width: 200px;
51 | }
52 |
53 | .navbar h1 {
54 | display: block;
55 | }
56 | }
57 |
58 | .tabs {
59 | flex: 1 1 auto;
60 | }
61 |
62 | .tabs > input {
63 | display: none;
64 | }
65 |
66 | h2 {
67 | margin: 0 0 10px;
68 | font-size: 18px;
69 | font-weight: 400;
70 | }
71 |
72 | label {
73 | position: relative;
74 | z-index: 2;
75 | padding: 20px;
76 | font-size: 15px;
77 | flex: 1 1 auto;
78 | min-width: 58px;
79 | opacity: 0.35;
80 | cursor: pointer;
81 | text-align: center;
82 | transition: 0.3s;
83 | }
84 |
85 | .buttons {
86 | position: relative;
87 | display: flex;
88 | }
89 |
90 | .underline {
91 | position: absolute;
92 | z-index: 1;
93 | left: 0;
94 | bottom: -3px;
95 | width: 25%;
96 | display: grid;
97 | place-items: center;
98 | transition: 0.3s;
99 | }
100 |
101 | .underline::after {
102 | content: "";
103 | display: block;
104 | translate: 0 -15px;
105 | width: 40px;
106 | height: 40px;
107 | border-radius: 50%;
108 | background: var(--color-primary);
109 | }
110 |
111 | .tabs input:nth-child(1):checked ~ .buttons .underline {
112 | translate: 0 0;
113 | }
114 |
115 | .tabs input:nth-child(2):checked ~ .buttons .underline {
116 | translate: 100% 0;
117 | }
118 |
119 | .tabs input:nth-child(3):checked ~ .buttons .underline {
120 | translate: 200% 0;
121 | }
122 |
123 | .tabs input:nth-child(4):checked ~ .buttons .underline {
124 | translate: 300% 0;
125 | }
126 |
127 | .tabs input:nth-child(1):checked ~ .buttons label:nth-child(1),
128 | .tabs input:nth-child(2):checked ~ .buttons label:nth-child(2),
129 | .tabs input:nth-child(3):checked ~ .buttons label:nth-child(3),
130 | .tabs input:nth-child(4):checked ~ .buttons label:nth-child(4) {
131 | opacity: 1;
132 | color: black;
133 | }
134 |
--------------------------------------------------------------------------------
/navbar-5/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | background: #3b3d43;
7 | }
8 |
9 | button {
10 | border: 0;
11 | padding: 0;
12 | font-family: inherit;
13 | background: transparent;
14 | color: inherit;
15 | cursor: pointer;
16 | }
17 |
18 | .navbar {
19 | position: fixed;
20 | z-index: 1;
21 | top: 0;
22 | left: 0;
23 | display: flex;
24 | align-items: center;
25 | justify-content: flex-end;
26 | width: 100%;
27 | height: 72px;
28 | padding: 0 20px;
29 | background: #19191c;
30 | color: #f9f9f9;
31 | }
32 |
33 | @media only screen and (min-width: 600px) {
34 | .navbar {
35 | justify-content: space-between;
36 | }
37 | }
38 |
39 | .search {
40 | position: relative;
41 | z-index: 1;
42 | flex: 1 1 auto;
43 | height: 44px;
44 | padding-left: 46px;
45 | font-size: 16px;
46 | border: 0;
47 | border-radius: 8px;
48 | background: #3b3d43;
49 | color: #f9f9f9;
50 | font-family: "Euclid Circular A";
51 | visibility: hidden;
52 | opacity: 0;
53 | outline: none;
54 | }
55 |
56 | .search:focus {
57 | background: #494c54;
58 | }
59 |
60 | body.open .search {
61 | position: fixed;
62 | top: 0;
63 | left: 0;
64 | opacity: 1;
65 | border-radius: 0;
66 | visibility: visible;
67 | background: #19191c;
68 | width: 100%;
69 | height: 72px;
70 | margin: 0;
71 | padding-left: 76px;
72 | }
73 |
74 | @media only screen and (min-width: 600px) {
75 | .search {
76 | opacity: 1;
77 | visibility: visible;
78 | flex: 0 0 360px;
79 | margin-right: auto;
80 | transition-property: opacity, visibility;
81 | transition-duration: 0.3s;
82 | }
83 | }
84 |
85 | .search::placeholder {
86 | color: #939393;
87 | }
88 |
89 | .search-toggle {
90 | position: fixed;
91 | left: 16px;
92 | z-index: 2;
93 | width: 40px;
94 | height: 40px;
95 | background-image: url("search.svg");
96 | background-repeat: no-repeat;
97 | background-position: center;
98 | transition: 0.3s;
99 | }
100 |
101 | body.open .search-toggle {
102 | background-image: url("close.svg");
103 | }
104 |
105 | @media only screen and (min-width: 600px) {
106 | .search-toggle {
107 | translate: 10px 0;
108 | scale: 0.65;
109 | pointer-events: none;
110 | }
111 | }
112 |
113 | .navbar-menu {
114 | display: flex;
115 | }
116 |
117 | .navbar-menu > button {
118 | position: relative;
119 | flex: 0 0 40px;
120 | display: grid;
121 | place-items: center;
122 | font-size: 28px;
123 | height: 72px;
124 | width: 40px;
125 | opacity: 0.3;
126 | }
127 |
128 | .navbar-menu > button.active {
129 | opacity: 1;
130 | }
131 |
--------------------------------------------------------------------------------
/navbar-3/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | button {
6 | border: 0;
7 | padding: 0;
8 | background: transparent;
9 | cursor: pointer;
10 | }
11 |
12 | .navbar,
13 | .navbar-burger,
14 | .menu,
15 | .background {
16 | position: fixed;
17 | }
18 |
19 | .background {
20 | z-index: 1;
21 | top: -10%;
22 | left: -10%;
23 | width: 120%;
24 | height: 120%;
25 | background-image: url("assets/bg.jpeg");
26 | background-size: cover;
27 | background-repeat: no-repeat;
28 | background-position: center;
29 | transition: 0.5s;
30 | }
31 |
32 | body.open .background {
33 | filter: blur(20px);
34 | }
35 |
36 | .navbar {
37 | z-index: 1;
38 | top: 0;
39 | left: 0;
40 | display: flex;
41 | align-items: center;
42 | justify-content: space-between;
43 | width: 100%;
44 | height: 72px;
45 | padding-left: 20px;
46 | padding-right: 72px;
47 | background: #19191c;
48 | color: #f9f9f9;
49 | }
50 |
51 | .navbar > button {
52 | font-size: 28px;
53 | }
54 |
55 | .navbar-logo {
56 | height: 25px;
57 | }
58 |
59 | .navbar-burger {
60 | z-index: 3;
61 | top: 0;
62 | right: 0;
63 | display: grid;
64 | place-items: center;
65 | width: 72px;
66 | height: 72px;
67 | background-image: url("./assets/menu.svg");
68 | background-repeat: no-repeat;
69 | background-position: center;
70 | }
71 |
72 | body.open .navbar-burger {
73 | background-image: url("./assets/close.svg");
74 | }
75 |
76 | .navbar-search {
77 | border: 0;
78 | height: 40px;
79 | background: #2f3339 url("assets/search.svg");
80 | background-repeat: no-repeat;
81 | background-position: 10px 50%;
82 | border: 0;
83 | border-radius: 6px;
84 | padding-left: 36px;
85 | width: 180px;
86 | font-size: 16px;
87 | font-family: "Euclid Circular A";
88 | }
89 |
90 | .navbar-search::placeholder {
91 | color: #a7a7a7;
92 | }
93 |
94 | .menu {
95 | z-index: 2;
96 | top: 0;
97 | left: 0;
98 | display: flex;
99 | flex-direction: column;
100 | justify-content: center;
101 | align-items: center;
102 | gap: 32px;
103 | width: 100%;
104 | height: 100%;
105 | background: rgba(0, 0, 0, 0.8);
106 | opacity: 0;
107 | visibility: hidden;
108 | transition: 0.5s;
109 | }
110 |
111 | body.open .menu {
112 | opacity: 1;
113 | visibility: visible;
114 | }
115 |
116 | .menu > a {
117 | color: #f9f9f9;
118 | font-size: 32px;
119 | font-family: "Euclid Circular A";
120 | text-decoration: none;
121 | }
122 |
123 | body.open .menu > a {
124 | animation: appear 0.3s both;
125 | }
126 |
127 | @keyframes appear {
128 | 0% {
129 | opacity: 0;
130 | translate: 0 50px;
131 | }
132 | 100% {
133 | opacity: 1;
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/navbar-3/assets/settings.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/navbar-6/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | background: #e6edf2;
7 | font-family: "Euclid Circular A";
8 | }
9 |
10 | button {
11 | display: grid;
12 | place-items: center;
13 | width: 40px;
14 | height: 72px;
15 | border: 0;
16 | padding: 0;
17 | font-family: inherit;
18 | background: transparent;
19 | color: #585c62;
20 | cursor: pointer;
21 | }
22 |
23 | .burger {
24 | position: fixed;
25 | z-index: 2;
26 | top: 0;
27 | left: 0;
28 | width: 72px;
29 | }
30 |
31 | .navbar {
32 | position: fixed;
33 | z-index: 1;
34 | top: 0;
35 | left: 0;
36 | height: 100%;
37 | padding: 20px 24px 0;
38 | translate: -100% 0;
39 | display: flex;
40 | gap: 10px;
41 | flex-direction: column;
42 | align-items: center;
43 | justify-content: flex-start;
44 | background: #ffffff;
45 | box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
46 | opacity: 0;
47 | visibility: hidden;
48 | transition-property: translate, opacity, visibility;
49 | transition-duration: 0.5s;
50 | }
51 |
52 | body.open .navbar {
53 | opacity: 1;
54 | visibility: visible;
55 | translate: 0 0;
56 | }
57 |
58 | @media (width >= 500px) {
59 | .navbar {
60 | translate: 0 0;
61 | flex-direction: row;
62 | align-items: center;
63 | justify-content: flex-end;
64 | gap: 0;
65 | width: 100%;
66 | height: 72px;
67 | padding: 0 0 0 72px;
68 | }
69 | }
70 |
71 | @media (width >= 600px) {
72 | .navbar {
73 | opacity: 1;
74 | visibility: visible;
75 | }
76 | }
77 |
78 | .logo {
79 | display: flex;
80 | align-items: center;
81 | gap: 8px;
82 | width: 108px;
83 | padding-right: 10px;
84 | margin-bottom: 10px;
85 | }
86 |
87 | @media (width >= 500px) {
88 | .logo {
89 | margin-bottom: 0;
90 | }
91 | }
92 |
93 | .logo img {
94 | width: 32px;
95 | }
96 |
97 | .logo span {
98 | font-size: 18px;
99 | color: #606468;
100 | }
101 |
102 | .search {
103 | margin: 0 auto;
104 | position: relative;
105 | color: #888989;
106 | }
107 |
108 | @media (width >= 500px) {
109 | .search {
110 | flex: 1 1 auto;
111 | }
112 | }
113 |
114 | @media (width >= 550px) {
115 | .search {
116 | flex: 0 0 auto;
117 | }
118 | }
119 |
120 | .search span {
121 | position: absolute;
122 | top: 50%;
123 | left: 16px;
124 | translate: 0 -50%;
125 | z-index: 1;
126 | font-size: 20px;
127 | color: inherit;
128 | }
129 |
130 | .search input {
131 | width: 100%;
132 | height: 44px;
133 | padding-left: 46px;
134 | font-size: 16px;
135 | border: 0;
136 | border-radius: 8px;
137 | background: #eff1f2;
138 | color: inherit;
139 | font-family: inherit;
140 | outline: none;
141 | }
142 |
143 | @media (width >= 650px) {
144 | .search input {
145 | width: 280px;
146 | }
147 | }
148 |
149 | .navbar nav {
150 | display: flex;
151 | align-items: center;
152 | padding-right: 20px;
153 | }
154 |
155 | .navbar nav img {
156 | flex: 0 32px;
157 | width: 32px;
158 | height: 32px;
159 | margin-left: 8px;
160 | }
161 |
--------------------------------------------------------------------------------
/navbar-12/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | .navbar {
6 | position: fixed;
7 | top: 0;
8 | left: 0;
9 | display: flex;
10 | gap: 20px;
11 | align-items: center;
12 | justify-content: space-between;
13 | width: 100%;
14 | height: 72px;
15 | padding: 0 20px;
16 | color: #222222;
17 | background: #ffffff;
18 | border-bottom: 1px solid #f2f2f2;
19 | font-family: "Euclid Circular A", "Poppins";
20 | }
21 |
22 | .logo,
23 | .links {
24 | display: flex;
25 | align-items: center;
26 | }
27 |
28 | .logo {
29 | gap: 12px;
30 | }
31 |
32 | .logo img {
33 | width: 40px;
34 | height: 40px;
35 | border-radius: 6px;
36 | }
37 |
38 | .logo h2 {
39 | font-size: 20px;
40 | font-weight: 400;
41 | }
42 |
43 | .links {
44 | display: flex;
45 | gap: 20px;
46 | align-items: center;
47 | padding-left: 20px;
48 | }
49 |
50 | .navbar a {
51 | color: inherit;
52 | text-decoration: none;
53 | transition: 0.25s;
54 | }
55 |
56 | a.join-link {
57 | display: grid;
58 | place-items: center;
59 | height: 40px;
60 | padding: 0 12px;
61 | border-radius: 6px;
62 | color: #f9f9f9;
63 | background: #01a081;
64 | }
65 |
66 | .search {
67 | flex: 1 1 auto;
68 | position: relative;
69 | margin-left: 10px;
70 | }
71 |
72 | .search input {
73 | background: #f2f2f2;
74 | border-radius: 6px;
75 | border: 0;
76 | width: 100%;
77 | height: 40px;
78 | padding-left: 34px;
79 | font-family: inherit;
80 | font-size: 16px;
81 | }
82 |
83 | .search input::placeholder {
84 | color: #9d9d9d;
85 | }
86 |
87 | .search img {
88 | position: absolute;
89 | top: 50%;
90 | left: 10px;
91 | translate: 0 -50%;
92 | width: 20px;
93 | height: 20px;
94 | }
95 |
96 | .burger {
97 | display: grid;
98 | place-items: center;
99 | background: transparent;
100 | border: 0;
101 | }
102 |
103 | @media (width >= 320px) {
104 | .burger {
105 | display: none;
106 | }
107 | }
108 |
109 | .dropdown {
110 | position: relative;
111 | cursor: pointer;
112 | }
113 |
114 | .dropdown > a {
115 | display: flex;
116 | align-items: center;
117 | gap: 2px;
118 | height: 72px;
119 | }
120 | .dropdown > a > img {
121 | width: 20px;
122 | }
123 |
124 | .dropdown:hover .menu {
125 | opacity: 1;
126 | visibility: visible;
127 | }
128 |
129 | .menu {
130 | position: absolute;
131 | top: 60px;
132 | right: -20px;
133 | display: grid;
134 | width: 180px;
135 | padding: 8px 0;
136 | background: #ffffff;
137 | border-radius: 10px;
138 | border: 1px solid #e1e1e1;
139 | box-shadow: 0 40px 40px rgb(0 0 0 / 6%);
140 | opacity: 0;
141 | visibility: hidden;
142 | transition: 0.25s;
143 | }
144 |
145 | .menu::before {
146 | content: "";
147 | background: inherit;
148 | border-top: 1px solid #e1e1e1;
149 | border-right: 1px solid #e1e1e1;
150 | position: absolute;
151 | top: -7px;
152 | right: 22px;
153 | width: 12px;
154 | height: 12px;
155 | rotate: -45deg;
156 | }
157 |
158 | .menu.open {
159 | opacity: 1;
160 | visibility: visible;
161 | }
162 |
163 | .menu > a {
164 | font-size: 14px;
165 | padding: 12px 20px;
166 | }
167 |
168 | .menu > a:hover {
169 | background: #f5f5f5;
170 | }
171 |
--------------------------------------------------------------------------------
/navbar-7/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | background: #202124;
7 | font-family: Roboto;
8 | }
9 |
10 | button {
11 | position: relative;
12 | display: grid;
13 | place-items: center;
14 | width: 40px;
15 | height: 72px;
16 | border: 0;
17 | padding: 0;
18 | font-family: inherit;
19 | background: transparent;
20 | color: #ffffff;
21 | cursor: pointer;
22 | }
23 |
24 | .badge {
25 | position: absolute;
26 | top: 20px;
27 | right: 6px;
28 | display: grid;
29 | place-items: center;
30 | width: 16px;
31 | height: 12px;
32 | border-radius: 6px;
33 | background: red;
34 | font-size: 8px;
35 | font-weight: 500;
36 | font-family: Roboto;
37 | }
38 |
39 | .burger {
40 | width: 72px;
41 | }
42 |
43 | .navbar {
44 | position: fixed;
45 | z-index: 1;
46 | top: 0;
47 | left: 0;
48 | width: 100%;
49 | height: 72px;
50 | display: flex;
51 | align-items: center;
52 | justify-content: flex-end;
53 | background: #0f0f0f;
54 | }
55 |
56 | .logo {
57 | display: flex;
58 | align-items: center;
59 | gap: 8px;
60 | width: 88px;
61 | padding-right: 10px;
62 | }
63 |
64 | @media (width >= 500px) {
65 | .logo {
66 | margin-bottom: 0;
67 | }
68 | }
69 |
70 | .logo img {
71 | height: 20px;
72 | }
73 |
74 | .center {
75 | flex: 0 0 auto;
76 | display: flex;
77 | align-items: center;
78 | gap: 10px;
79 | margin: 0 auto;
80 | color: #888989;
81 | }
82 |
83 | .center button {
84 | display: none;
85 | background: #1e1e1e;
86 | height: 40px;
87 | border-radius: 50%;
88 | font-size: 20px;
89 | }
90 |
91 | @media (width >= 500px) {
92 | .center button {
93 | display: block;
94 | }
95 | }
96 |
97 | .search {
98 | position: relative;
99 | display: none;
100 | }
101 |
102 | @media (width >= 500px) {
103 | .search {
104 | display: block;
105 | }
106 | }
107 |
108 | .search button {
109 | position: absolute;
110 | top: 50%;
111 | right: 1px;
112 | translate: 0 -50%;
113 | z-index: 1;
114 | font-size: 20px;
115 | width: 60px;
116 | height: 42px;
117 | border-radius: 0;
118 | border-top-right-radius: 20px;
119 | border-bottom-right-radius: 20px;
120 | background: #222222;
121 | }
122 |
123 | .search input {
124 | flex: 1 1 auto;
125 | height: 44px;
126 | width: 25vw;
127 | padding-left: 16px;
128 | padding-right: 60px;
129 | font-size: 16px;
130 | border: 1px solid #303030;
131 | border-radius: 22px;
132 | background: #121212;
133 | color: inherit;
134 | font-family: inherit;
135 | font-weight: 400;
136 | outline: none;
137 | }
138 |
139 | @media (width >= 650px) {
140 | .search input {
141 | width: 240px;
142 | }
143 | }
144 |
145 | .navbar nav {
146 | display: flex;
147 | align-items: center;
148 | padding-right: 20px;
149 | }
150 |
151 | .navbar nav img {
152 | flex: 0 32px;
153 | width: 32px;
154 | height: 32px;
155 | margin-left: 8px;
156 | }
157 |
158 | @media (width >= 500px) {
159 | .navbar nav button:is(:nth-child(1), :nth-child(2)) {
160 | display: none;
161 | }
162 | }
163 |
164 | @media (width < 400px) {
165 | .navbar nav button:is(:nth-child(2), :nth-child(4)) {
166 | display: none;
167 | }
168 | }
169 |
--------------------------------------------------------------------------------
/navbar-4/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #2c2c32;
3 | }
4 |
5 | button {
6 | border: 0;
7 | padding: 0;
8 | background: transparent;
9 | cursor: pointer;
10 | line-height: 1;
11 | color: inherit;
12 | font-family: "Euclid Circular A";
13 | font-size: 20px;
14 | }
15 |
16 | @media (width >= 500px) {
17 | button {
18 | font-size: 16px;
19 | }
20 | }
21 |
22 | :is(.navbar, .burger, .dropdowns) {
23 | position: fixed;
24 | top: 0;
25 | width: 100%;
26 | }
27 |
28 | .navbar {
29 | z-index: 1;
30 | left: 0;
31 | display: flex;
32 | align-items: stretch;
33 | height: 72px;
34 | background: #19191c;
35 | color: #f9f9f9;
36 | }
37 |
38 | .burger {
39 | z-index: 3;
40 | right: 0;
41 | display: grid;
42 | place-items: center;
43 | width: 72px;
44 | height: 72px;
45 | background-image: url("menu.svg");
46 | background-repeat: no-repeat;
47 | background-position: center;
48 | }
49 |
50 | body.open .burger {
51 | background-image: url("close.svg");
52 | }
53 |
54 | @media (width >= 500px) {
55 | .burger {
56 | display: none;
57 | }
58 | }
59 |
60 | .button {
61 | display: flex;
62 | align-items: center;
63 | gap: 4px;
64 | padding: 0 24px;
65 | height: 100%;
66 | opacity: 0.6;
67 | }
68 |
69 | .button > img {
70 | display: none;
71 | }
72 |
73 | @media (width >= 500px) {
74 | .button {
75 | padding: 0 10px 0 24px;
76 | }
77 |
78 | .button > img {
79 | display: block;
80 | }
81 | }
82 |
83 | @media (width >= 500px) {
84 | .dropdown:hover .button {
85 | opacity: 1;
86 | }
87 | }
88 |
89 | .dropdowns {
90 | left: -9999px;
91 | z-index: 2;
92 | height: 100%;
93 | display: flex;
94 | flex-direction: column;
95 | align-items: center;
96 | justify-content: center;
97 | background: #0d0d0e;
98 | opacity: 0;
99 | visibility: hidden;
100 | transition-property: opacity, visibility;
101 | transition-duration: 0.3s;
102 | }
103 |
104 | @media (width < 500px) {
105 | body.open .dropdowns {
106 | opacity: 1;
107 | visibility: visible;
108 | left: 0;
109 | }
110 | }
111 |
112 | @media (width >= 500px) {
113 | .dropdowns {
114 | position: static;
115 | flex-direction: row;
116 | justify-content: flex-start;
117 | background: transparent;
118 | opacity: 1;
119 | visibility: visible;
120 | }
121 | }
122 |
123 | .dropdown {
124 | position: relative;
125 | display: flex;
126 | align-items: center;
127 | flex-direction: column;
128 | }
129 |
130 | .dropdown-menu {
131 | display: grid;
132 | margin-bottom: 28px;
133 | }
134 |
135 | @media (width >= 500px) {
136 | .dropdown {
137 | height: 100%;
138 | flex-direction: row;
139 | }
140 |
141 | .dropdown-menu {
142 | position: absolute;
143 | top: 72px;
144 | left: 0;
145 | width: 180px;
146 | padding: 6px 24px 10px;
147 | margin-bottom: 0;
148 | place-items: start;
149 | background: #19191c;
150 | opacity: 0;
151 | visibility: hidden;
152 | translate: 0 24px;
153 | transition: 0.3s;
154 | }
155 |
156 | .dropdown:hover .dropdown-menu {
157 | opacity: 1;
158 | visibility: visible;
159 | translate: 0 0;
160 | }
161 | }
162 |
163 | .dropdown-menu > button {
164 | color: #f9f9f9;
165 | opacity: 1;
166 | height: 40px;
167 | }
168 |
169 | @media (width >= 500px) {
170 | .dropdown-menu > button {
171 | opacity: 0.6;
172 | }
173 |
174 | .dropdown:hover .button {
175 | opacity: 1;
176 | }
177 | }
178 |
179 | .dropdown-menu > button:hover {
180 | opacity: 1;
181 | }
182 |
--------------------------------------------------------------------------------
/navbar-13/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
51 |
--------------------------------------------------------------------------------
/navbar-13/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Navbar 13
8 |
9 |
10 |
11 |
15 |
22 |
23 |
24 |
28 |
29 |
30 | 
31 |
32 |
Chris Hay, CTO at IBM iX
33 |
34 | It's fast, small, can run on browser, edge and cloud. It can handle
35 | large data. It can run in-memory like redis or disk like sqlite and
36 | it can run multi-cluster. It can sync between cloud and edge. And to
37 | top of it off, it can also run as a graphdb. It's interesting.
38 |
39 |
43 |
44 |
Chris Hay, CTO at IBM iX
45 |
46 | It's fast, small, can run on browser, edge and cloud. It can handle
47 | large data. It can run in-memory like redis or disk like sqlite and
48 | it can run multi-cluster. It can sync between cloud and edge. And to
49 | top of it off, it can also run as a graphdb. It's interesting.
50 |
51 |
55 |
56 |
Chris Hay, CTO at IBM iX
57 |
58 | It's fast, small, can run on browser, edge and cloud. It can handle
59 | large data. It can run in-memory like redis or disk like sqlite and
60 | it can run multi-cluster. It can sync between cloud and edge. And to
61 | top of it off, it can also run as a graphdb. It's interesting.
62 |
63 |
67 |
68 |
Chris Hay, CTO at IBM iX
69 |
70 | It's fast, small, can run on browser, edge and cloud. It can handle
71 | large data. It can run in-memory like redis or disk like sqlite and
72 | it can run multi-cluster. It can sync between cloud and edge. And to
73 | top of it off, it can also run as a graphdb. It's interesting.
74 |
75 |
79 |
80 |
Chris Hay, CTO at IBM iX
81 |
82 | It's fast, small, can run on browser, edge and cloud. It can handle
83 | large data. It can run in-memory like redis or disk like sqlite and
84 | it can run multi-cluster. It can sync between cloud and edge. And to
85 | top of it off, it can also run as a graphdb. It's interesting.
86 |
87 |
91 |
92 |
Chris Hay, CTO at IBM iX
93 |
94 | It's fast, small, can run on browser, edge and cloud. It can handle
95 | large data. It can run in-memory like redis or disk like sqlite and
96 | it can run multi-cluster. It can sync between cloud and edge. And to
97 | top of it off, it can also run as a graphdb. It's interesting.
98 |
99 |
103 |
104 |
Chris Hay, CTO at IBM iX
105 |
106 | It's fast, small, can run on browser, edge and cloud. It can handle
107 | large data. It can run in-memory like redis or disk like sqlite and
108 | it can run multi-cluster. It can sync between cloud and edge. And to
109 | top of it off, it can also run as a graphdb. It's interesting.
110 |
111 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/navbar-7/logo.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/navbar-6/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------