Skip to content

Commit f7b8516

Browse files
CoreJavaPulseCoreJavaPulse
committed
final version 1 Is Complete.
1 parent 0c9936a commit f7b8516

File tree

3 files changed

+580
-419
lines changed

3 files changed

+580
-419
lines changed

‎README.md‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
2+
/* HAMBURGER */
3+
.hamburger {
4+
display: none;
5+
}
6+
7+
.hamburger span {
8+
display: block;
9+
width: 22px;
10+
height: 2px;
11+
background: #ffffff;
12+
margin: 5px 0;
13+
border-radius: 2px;
14+
}
15+
16+
@media (max-width: 1200px) and (min-width: 769px) {
17+
.hamburger {
18+
display: block;
19+
position: absolute;
20+
right: 18px;
21+
top: 18px;
22+
cursor: pointer;
23+
z-index: 1200;
24+
}
25+
26+
.nav-links {
27+
position: fixed;
28+
top: 0;
29+
right: 0;
30+
width: 85vw;
31+
max-width: 320px;
32+
height: 100vh;
33+
background: rgba(15, 23, 42, 0.92);
34+
backdrop-filter: blur(16px);
35+
display: flex;
36+
flex-direction: column;
37+
padding-top: 88px;
38+
transform: translate3d(100%, 0, 0);
39+
transition: transform 0.35s ease;
40+
overflow-x: hidden;
41+
box-sizing: border-box;
42+
z-index: 1000;
43+
}
44+
45+
.nav-links.open {
46+
transform: translate3d(0, 0, 0);
47+
}
48+
49+
.nav-links::before {
50+
content: "";
51+
position: absolute;
52+
top: 64px;
53+
left: 24px;
54+
right: 24px;
55+
height: 1px;
56+
background: rgba(255, 255, 255, 0.08);
57+
}
58+
59+
.nav-links li {
60+
text-align: center;
61+
}
62+
63+
.nav-links a {
64+
padding: 10px 0;
65+
letter-spacing: 0.3px;
66+
color: #e5e7eb;
67+
font-size: 16px;
68+
display: block;
69+
align-items: center;
70+
}
71+
72+
.nav-links a:hover {
73+
color: #ffffff;
74+
background: rgba(255, 255, 255, 0.06);
75+
}
76+
77+
body.menu-open::before {
78+
content: "";
79+
position: fixed;
80+
inset: 0;
81+
background: rgba(2, 8, 23, 0.65);
82+
backdrop-filter: blur(8px);
83+
z-index: 900;
84+
}
85+
}
86+
87+
88+
/* MOBILE */
89+
@media (max-width: 768px) {
90+
.navbar-wrapper {
91+
position: sticky !important;
92+
top: 0 !important;
93+
will-change: transform;
94+
}
95+
96+
.navbar {
97+
max-width: 100%;
98+
padding: 0 10px;
99+
}
100+
101+
.hamburger {
102+
display: block;
103+
position: absolute;
104+
right: 18px;
105+
top: 18px;
106+
cursor: pointer;
107+
z-index: 1200;
108+
}
109+
110+
.nav-links {
111+
position: fixed;
112+
top: 0;
113+
right: 0;
114+
width: 35vw;
115+
max-width: 300px;
116+
height: 100vh;
117+
background: rgba(15, 23, 42, 0.92);
118+
backdrop-filter: blur(16px);
119+
display: flex;
120+
flex-direction: column;
121+
padding-top: 70px;
122+
transform: translate3d(100%, 0, 0);
123+
transition: transform 0.35s ease;
124+
overflow-x: hidden;
125+
box-sizing: border-box;
126+
z-index: 1000;
127+
}
128+
129+
.nav-links.open {
130+
transform: translate3d(0, 0, 0);
131+
}
132+
133+
.nav-links::before {
134+
content: "";
135+
position: absolute;
136+
top: 54px;
137+
left: 24px;
138+
right: 24px;
139+
height: 1px;
140+
background: rgba(255, 255, 255, 0.08);
141+
}
142+
143+
.nav-links li {
144+
text-align: center;
145+
}
146+
147+
.nav-links a {
148+
padding: 16px 24px; /* 44px+ touch target */
149+
min-height: 48px;
150+
letter-spacing: 0.3px;
151+
color: #e5e7eb;
152+
font-size: 18px;
153+
display: block;
154+
align-items: center;
155+
}
156+
157+
.nav-links a:hover {
158+
color: #ffffff;
159+
background: rgba(255, 255, 255, 0.06);
160+
}
161+
162+
body.menu-open::before {
163+
content: "";
164+
position: fixed;
165+
inset: 0;
166+
background: rgba(2, 8, 23, 0.65);
167+
backdrop-filter: blur(8px);
168+
z-index: 900;
169+
}
170+
171+
section {
172+
max-width: 100%;
173+
margin: 40px 16px;
174+
padding: 24px;
175+
}
176+
177+
.site-header {
178+
padding-left: 16px;
179+
padding-right: 16px;
180+
}
181+
}
182+
183+
@media (max-width: 640px) {
184+
.services-grid {
185+
grid-template-columns: 1fr;
186+
}
187+
}

0 commit comments

Comments
 (0)