Skip to content

Commit f748c1a

Browse files
vimal-java-devvimal-java-dev
authored
Merge pull request #81 from vimal-tech-starter/feature/fonts-formatting
Fonts formatting and designing
2 parents 24cbdbc + a2c2b9f commit f748c1a

13 files changed

Lines changed: 406 additions & 351 deletions

File tree

‎about/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<!-- Font Awesome -->
3939
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
4040

41-
<link rel="stylesheet" href="/css/common.css">
41+
<link rel="stylesheet" href="/css/global.css">
4242
<link rel="stylesheet" href="/css/about.css">
4343

4444
<script type="application/ld+json">
@@ -396,7 +396,8 @@ <h3>Vimal Tech</h3>
396396
</div>
397397
</footer>
398398

399-
<script src="/js/common.js"></script>
399+
<!-- JS -->
400+
<script src="/js/global.js"></script>
400401
<script src="/js/about.js"></script>
401402
</body>
402403

‎contact/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<!-- Font Awesome -->
3636
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
3737

38-
<link rel="stylesheet" href="/css/common.css">
38+
<link rel="stylesheet" href="/css/global.css">
3939
<link rel="stylesheet" href="/css/contact.css">
4040

4141
<script type="application/ld+json">
@@ -342,7 +342,8 @@ <h3>Vimal Tech</h3>
342342
</div>
343343
</footer>
344344

345-
<script src="/js/common.js"></script>
345+
<!-- JS -->
346+
<script src="/js/global.js"></script>
346347
<script src="/js/contact.js"></script>
347348

348349
</body>

css/common.css renamed to css/global.css

Lines changed: 239 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,247 @@
1-
/* ===== common.css ===== */
21
/* ===================================================
32
===== Global Styles =====
43
=================================================== */
4+
:root {
5+
--color-bg: #f4f4f4;
6+
--color-text: #111827;
7+
--color-muted: #6b7280;
8+
--color-accent: #38bdf8;
9+
--color-primary: #ff9800;
10+
11+
--font-primary: 'Inter', sans-serif;
12+
}
13+
14+
/* RESET */
515
* {
616
margin: 0;
717
padding: 0;
818
box-sizing: border-box;
9-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1019
}
1120

21+
/* BASE */
1222
html {
1323
scroll-behavior: smooth;
14-
/* ✅ smooth scroll */
1524
}
1625

26+
/* BASE */
1727
body {
18-
background: #f4f4f4;
28+
font-family: var(--font-primary);
29+
background: var(--color-bg);
1930
color: #333;
20-
line-height: 1.6;
21-
transition: background-color 0.6s ease, color 0.6s ease;
22-
scroll-behavior: smooth;
2331
}
2432

25-
/* Headings */
26-
h1,
27-
h2,
33+
h1 {
34+
font-size: clamp(2.2rem, 5vw, 3rem);
35+
font-weight: 700;
36+
line-height: 1.2;
37+
}
38+
39+
h2 {
40+
font-size: clamp(1.6rem, 3vw, 2.2rem);
41+
font-weight: 700;
42+
}
43+
2844
h3 {
45+
font-size: 1.3rem;
2946
font-weight: 600;
30-
margin-bottom: 1rem;
3147
}
3248

33-
/* Section */
34-
section {
35-
border-radius: 12px;
49+
/* TYPOGRAPHY */
50+
p {
51+
color: var(--color-muted);
52+
}
53+
54+
/* =========================================
55+
HERO (GLOBAL)
56+
========================================= */
57+
.hero {
58+
position: relative;
59+
min-height: 100vh;
60+
/* change from 60vh */
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
text-align: center;
65+
/* padding: 60px 20px; */
66+
padding-top: 100px;
67+
/* push below fixed navbar */
68+
color: #fff;
69+
}
70+
71+
.hero::before {
72+
content: "";
73+
position: absolute;
74+
inset: 0;
75+
background: rgba(0, 0, 0, 0.6);
76+
/* slightly stronger */
77+
}
78+
79+
.hero-content {
80+
position: relative;
81+
z-index: 2;
82+
max-width: 750px;
83+
opacity: 0;
84+
transform: translateY(30px);
85+
animation: heroFadeUp 1s ease forwards;
86+
}
87+
88+
@keyframes heroFadeUp {
89+
to {
90+
opacity: 1;
91+
transform: translateY(0);
92+
}
93+
}
94+
95+
/* ===== HERO FIX (IMPORTANT) ===== */
96+
.hero .hero-content {
97+
position: relative;
98+
z-index: 2;
99+
max-width: 750px;
100+
}
101+
102+
/* Hero text */
103+
.hero h1 {
104+
font-size: clamp(2.2rem, 5vw, 3rem);
105+
font-weight: 700;
106+
line-height: 1.3;
107+
color: #e5ff7a;
108+
/* your strong green */
109+
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
110+
animation: fadeUp 0.8s ease forwards;
111+
}
112+
113+
.highlight {
114+
color: #a3e635;
115+
}
116+
117+
.hero p {
118+
font-size: 1.1rem;
119+
margin-bottom: 2rem;
120+
}
121+
122+
.hero-subtext {
123+
font-size: 1.1rem;
124+
color: #e5e7eb;
125+
line-height: 1.6;
126+
margin-top: 1rem;
127+
margin-bottom: 2rem;
128+
opacity: 0;
129+
animation: fadeUp 0.8s ease forwards;
130+
animation-delay: 0.3s;
131+
}
132+
133+
.hero-buttons {
134+
display: flex;
135+
gap: 12px;
136+
justify-content: center;
137+
opacity: 0;
138+
animation: fadeUp 0.8s ease forwards;
139+
animation-delay: 0.6s;
140+
}
141+
142+
@keyframes fadeUp {
143+
from {
144+
opacity: 0;
145+
transform: translateY(25px);
146+
}
147+
148+
to {
149+
opacity: 1;
150+
transform: translateY(0);
151+
}
152+
}
153+
154+
.gradient-text {
155+
background: linear-gradient(90deg,
156+
#38bdf8,
157+
#22c55e,
158+
#a3e635,
159+
#38bdf8);
160+
background-size: 200% auto;
161+
162+
background-clip: text;
163+
-webkit-background-clip: text;
164+
-webkit-text-fill-color: transparent;
165+
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
166+
animation: gradientMove 4s linear infinite;
167+
filter: drop-shadow(0 0 6px rgba(163, 230, 53, 0.4));
168+
}
169+
170+
@keyframes gradientMove {
171+
0% {
172+
background-position: 0% center;
173+
}
174+
175+
100% {
176+
background-position: 200% center;
177+
}
178+
}
179+
180+
.section {
181+
padding: var(--section-padding);
182+
}
183+
184+
.section-title {
185+
text-align: center;
186+
margin-bottom: 2rem;
187+
}
188+
189+
/* ===== BUTTON FIX (IMPORTANT) ===== */
190+
.btn {
191+
display: inline-block;
192+
padding: 12px 26px;
193+
border-radius: 30px;
194+
font-weight: 600;
195+
text-decoration: none;
196+
background: var(--color-primary);
197+
color: #fff;
198+
transition: all 0.3s ease;
199+
}
200+
201+
/* .btn::after {
202+
content: "";
203+
position: absolute;
204+
inset: 0;
205+
background: linear-gradient(120deg, #ff9800, #ff5722);
206+
z-index: -1;
207+
transition: transform 0.4s ease;
208+
} */
209+
210+
.btn:hover {
211+
box-shadow: 0 0 20px rgba(255, 152, 0, 0.6);
212+
}
213+
214+
.btn:hover::after {
215+
transform: scale(1.1);
216+
}
217+
218+
.btn.primary {
219+
background: #ff9800;
220+
color: #fff;
221+
}
222+
223+
.btn.secondary {
224+
border: 1px solid #fff;
225+
color: #fff;
226+
}
227+
228+
/* ===== FADE-IN FIX (SINGLE SYSTEM ONLY) ===== */
229+
.fade-in {
230+
opacity: 0;
231+
transform: translateY(30px);
232+
animation: fadeInUp 1s forwards;
233+
}
234+
235+
@keyframes fadeInUp {
236+
to {
237+
opacity: 1;
238+
transform: translateY(0);
239+
}
240+
}
241+
242+
.fade-in.visible {
243+
opacity: 1;
244+
transform: translateY(0);
36245
}
37246

38247
/* ===================================================
@@ -41,16 +250,12 @@ section {
41250
.navbar {
42251
display: flex;
43252
justify-content: space-between;
44-
/* align-items: center; */
45253
background-color: #ffffff;
46-
/* padding: 10px 200px; */
47254
padding: 0.05rem 0.5rem;
48-
/* color: rgb(201, 238, 99); */
49255
position: fixed;
50-
/* width: 100%; */
51256
top: 10px;
52-
left: 116px;
53-
right: 116px;
257+
left: 20px;
258+
right: 20px;
54259
z-index: 1000;
55260
border-radius: 12px;
56261
}
@@ -150,7 +355,7 @@ section {
150355
left: 10px;
151356
right: 10px;
152357
}
153-
358+
154359
.nav-links {
155360
position: absolute;
156361
top: 48px;
@@ -198,10 +403,10 @@ body.dark .navbar {
198403
background: #4b76ad;
199404
}
200405

201-
body.dark nav ul li a {
202-
/* color: rgb(201, 238, 99); */
203-
/* color: #e0e0e0; */
204-
}
406+
/* body.dark nav ul li a {
407+
color: rgb(201, 238, 99);
408+
color: #e0e0e0;
409+
} */
205410

206411
body.dark .nav-links a.active {
207412
color: rgb(255, 255, 255);
@@ -215,6 +420,15 @@ body.dark .hamburger {
215420
color: #000;
216421
}
217422

423+
body.dark {
424+
background: #181818;
425+
color: #e0e0e0;
426+
}
427+
428+
body.dark p {
429+
color: #ccc;
430+
}
431+
218432
/* ===================================================
219433
===== Containers & Animations =====
220434
=================================================== */

0 commit comments

Comments
 (0)