Skip to content

Commit 159bfbc

Browse files
CoreJavaPulseCoreJavaPulse
committed
Initial commit
0 parents  commit 159bfbc

File tree

6 files changed

+557
-0
lines changed

6 files changed

+557
-0
lines changed

‎README.md‎

Whitespace-only changes.

‎css/style.css‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
/* ================= RESET ================= */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
html {
9+
scroll-behavior: smooth;
10+
}
11+
12+
body {
13+
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
14+
background-color: #f9fafb;
15+
color: #334155;
16+
line-height: 1.7;
17+
}
18+
19+
/* ================= NAVBAR ================= */
20+
.site-nav {
21+
background: linear-gradient(180deg, #0b2a4a 0%, #071a2f 100%);
22+
padding: 14px 32px;
23+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
24+
}
25+
26+
.site-logo {
27+
font-weight: 600;
28+
font-size: 16px;
29+
color: #ffffff;
30+
}
31+
32+
33+
.navbar-wrapper {
34+
position: sticky;
35+
top: 0;
36+
z-index: 1000;
37+
background: linear-gradient(180deg, #0b2a4a 0%, #071a2f 100%);
38+
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
39+
}
40+
41+
.navbar-wrapper::after {
42+
content: '';
43+
position: absolute;
44+
bottom: 0;
45+
left: 0;
46+
width: 100%;
47+
height: 1px;
48+
background: rgba(255, 255, 255, 0.12);
49+
}
50+
51+
.navbar-wrapper.scrolled {
52+
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
53+
}
54+
55+
.navbar {
56+
max-width: 1200px;
57+
height: 60px;
58+
margin: 0 auto;
59+
padding: 0 28px;
60+
display: flex;
61+
align-items: center;
62+
justify-content: space-between;
63+
gap: 24px;
64+
}
65+
66+
/* BRAND */
67+
.brand {
68+
display: flex;
69+
align-items: center;
70+
gap: 12px;
71+
}
72+
73+
.logo {
74+
height: 32px;
75+
}
76+
77+
.brand-name {
78+
font-size: 16px;
79+
font-weight: 600;
80+
letter-spacing: 0.25px;
81+
color: #ffffff;
82+
}
83+
84+
/* NAV LINKS */
85+
.nav-links {
86+
list-style: none;
87+
display: flex;
88+
gap: 28px;
89+
}
90+
91+
.nav-links a {
92+
color: rgba(255, 255, 255, 0.75);
93+
font-size: 14px;
94+
font-weight: 500;
95+
margin-left: 28px;
96+
transition: color 0.2s ease;
97+
}
98+
99+
.nav-links a:hover {
100+
color: #ffffff;
101+
}
102+
103+
.nav-links a.active {
104+
color: #ffffff;
105+
}
106+
107+
.nav-links a.active::after {
108+
content: "";
109+
position: absolute;
110+
bottom: -6px;
111+
left: 0;
112+
width: 100%;
113+
height: 2px;
114+
background: #ffffff;
115+
opacity: 0.8;
116+
}
117+
118+
119+
/* ================= HERO / HEADER (REFINED) ================= */
120+
.site-header {
121+
background: linear-gradient(180deg, #0b2a4a 0%, #071a2f 100%);
122+
padding: 32px 24px 40px; /* ⬅ MUCH tighter */
123+
text-align: center;
124+
color: #ffffff;
125+
position: relative;
126+
}
127+
128+
129+
/* subtle premium divider */
130+
.site-header::after {
131+
width: 56px; /* ↓ from 72 */
132+
height: 2px;
133+
opacity: 0.35;
134+
}
135+
.hero-text {
136+
max-width: 920px;
137+
margin: 0 auto;
138+
}
139+
.hero-tagline {
140+
margin-bottom: 8px;
141+
letter-spacing: 0.12em;
142+
}
143+
144+
.hero-heading {
145+
font-size: 24px; /* ↓ slightly smaller */
146+
font-weight: 600;
147+
line-height: 1.18;
148+
margin-bottom: 8px; /* ↓ reduced */
149+
}
150+
151+
.hero-note {
152+
font-size: 12.5px;
153+
color: #cbd5e1;
154+
max-width: 680px;
155+
margin: 0 auto;
156+
}
157+
/* CTA — consulting-grade, not salesy */
158+
.hero-cta {
159+
margin-top: 18px; /* ↓ was 30px */
160+
}
161+
162+
.cta-button {
163+
padding: 12px 28px;
164+
border-radius: 6px;
165+
font-weight: 500;
166+
}
167+
168+
.hero-cta a {
169+
display: inline-block;
170+
padding: 10px 22px;
171+
font-size: 13px;
172+
font-weight: 500;
173+
color: #ffffff;
174+
text-decoration: none;
175+
border: 1px solid rgba(255, 255, 255, 0.55);
176+
border-radius: 6px;
177+
transition: all 0.2s ease;
178+
}
179+
180+
.hero-cta a:hover {
181+
background: rgba(255, 255, 255, 0.1);
182+
border-color: #ffffff;
183+
}
184+
185+
/* ================= SECTIONS ================= */
186+
section {
187+
max-width: 1100px;
188+
margin: 72px auto;
189+
padding: 0 32px;
190+
}
191+
192+
section h2 {
193+
font-size: 27px;
194+
margin-bottom: 20px;
195+
color: #0b2a4a;
196+
position: relative;
197+
}
198+
199+
section h2::after {
200+
content: '';
201+
display: block;
202+
width: 48px;
203+
height: 3px;
204+
background: #1e3a5f;
205+
margin-top: 12px;
206+
}
207+
208+
section h3 {
209+
margin-top: 28px;
210+
font-size: 18px;
211+
font-weight: 600;
212+
color: #0f172a;
213+
}
214+
215+
section p {
216+
margin-bottom: 16px;
217+
max-width: 820px;
218+
}
219+
220+
/* ================= LISTS ================= */
221+
ul {
222+
margin-top: 14px;
223+
margin-left: 20px;
224+
}
225+
226+
ul li {
227+
margin-bottom: 8px;
228+
padding-left: 4px;
229+
}
230+
231+
/* ================= SERVICES ================= */
232+
.services-grid {
233+
display: grid;
234+
grid-template-columns: repeat(4, 1fr);
235+
gap: 28px;
236+
margin-top: 40px;
237+
}
238+
239+
.service-card {
240+
background: #ffffff;
241+
padding: 30px;
242+
border-radius: 10px;
243+
border: 1px solid #e5e7eb;
244+
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
245+
transition: transform 0.2s ease, box-shadow 0.2s ease;
246+
}
247+
248+
.service-card:hover {
249+
transform: translateY(-3px);
250+
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
251+
}
252+
253+
.service-card h3 {
254+
font-size: 17.5px;
255+
color: #0b2a4a;
256+
margin-bottom: 10px;
257+
}
258+
259+
.service-card p {
260+
font-size: 14.5px;
261+
color: #475569;
262+
}
263+
264+
/* ================= CONTACT ================= */
265+
.contact-box {
266+
background: #ffffff;
267+
border-left: 4px solid #1e3a5f;
268+
padding: 32px;
269+
margin-top: 20px;
270+
border-radius: 8px;
271+
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
272+
}
273+
274+
/* ================= FOOTER ================= */
275+
footer {
276+
background: #071a2f;
277+
color: #94a3b8;
278+
text-align: center;
279+
padding: 28px 20px;
280+
font-size: 13.5px;
281+
}
282+
283+
/* ================= UTIL ================= */
284+
.small-note {
285+
font-size: 14px;
286+
color: #64748b;
287+
}
288+
289+
/* ================= RESPONSIVE ================= */
290+
@media (max-width: 1024px) {
291+
.services-grid {
292+
grid-template-columns: repeat(2, 1fr);
293+
}
294+
}
295+
296+
@media (max-width: 768px) {
297+
.navbar {
298+
flex-direction: column;
299+
align-items: flex-start;
300+
height: auto;
301+
padding: 18px 24px;
302+
}
303+
304+
.nav-links {
305+
gap: 20px;
306+
}
307+
308+
.hero-heading {
309+
font-size: 30px;
310+
}
311+
}
312+
313+
@media (max-width: 640px) {
314+
.services-grid {
315+
grid-template-columns: 1fr;
316+
}
317+
}
318+
319+
@media (max-width: 768px) {
320+
.site-header {
321+
padding: 36px 20px 44px;
322+
}
323+
324+
.hero-heading {
325+
font-size: 24px;
326+
}
327+
}
328+

‎images/icon_logo.png‎

283 KB
Loading

‎images/logo.png‎

287 KB
Loading

‎images/logo1.jpeg‎

38.6 KB
Loading

0 commit comments

Comments
 (0)