simran40 commited on
Commit
18e37be
·
verified ·
1 Parent(s): 264bb45

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +222 -80
style.css CHANGED
@@ -35,28 +35,7 @@ body{
35
  from{transform:translateY(0);}
36
  to{transform:translateY(-60px);}
37
  }
38
- /* ===== NEW PROFESSIONAL COLOR SYSTEM ===== */
39
- :root{
40
- --bg1:#fdf4ff; /* lavender white */
41
- --bg2:#f0f9ff; /* ice blue */
42
- --accent1:#6366f1; /* indigo */
43
- --accent2:#ec4899; /* rose */
44
- --accent3:#06b6d4; /* cyan */
45
- }
46
-
47
- /* ===== BACKGROUND (SOFT + CLEAN) ===== */
48
- body{
49
- min-height:100vh;
50
- background:
51
- radial-gradient(circle at 20% 15%, #e9d5ff 0%, transparent 35%),
52
- radial-gradient(circle at 80% 30%, #fbcfe8 0%, transparent 40%),
53
- radial-gradient(circle at 50% 90%, #cffafe 0%, transparent 40%),
54
- linear-gradient(180deg,var(--bg1),var(--bg2));
55
- color:#1f2937;
56
- overflow-x:hidden;
57
- }
58
-
59
- //* ===== NEW COLOR VARIABLES ===== */
60
  :root{
61
  --peach:#fda4af;
62
  --lavender:#c4b5fd;
@@ -64,72 +43,79 @@ body{
64
  --ink:#334155;
65
  }
66
 
67
- /*/* ===== NEW PROFESSIONAL COLOR SYSTEM ===== */
68
- :root{
69
- --bg1:#fdf4ff; /* lavender white */
70
- --bg2:#f0f9ff; /* ice blue */
71
- --accent1:#6366f1; /* indigo */
72
- --accent2:#ec4899; /* rose */
73
- --accent3:#06b6d4; /* cyan */
74
- }
75
-
76
- /* ===== BACKGROUND (SOFT + CLEAN) ===== */
77
- body{
78
- min-height:100vh;
79
- background:
80
- radial-gradient(circle at 20% 15%, #e9d5ff 0%, transparent 35%),
81
- radial-gradient(circle at 80% 30%, #fbcfe8 0%, transparent 40%),
82
- radial-gradient(circle at 50% 90%, #cffafe 0%, transparent 40%),
83
- linear-gradient(180deg,var(--bg1),var(--bg2));
84
- color:#1f2937;
85
- overflow-x:hidden;
86
- }
87
-
88
- /* ===== HERO (SPACE FIX + GLASS ANIMATED) ===== */
89
  .hero{
90
- min-height:90vh; /* 👈 space kam */
91
  display:flex;
92
  justify-content:center;
93
  align-items:center;
94
- padding:40px 20px;
95
  }
96
 
 
97
  .hero-inner{
 
98
  text-align:center;
99
- padding:50px 60px;
100
- border-radius:32px;
101
 
102
- background:linear-gradient(
103
- 120deg,
104
- rgba(255,255,255,0.75),
105
- rgba(255,255,255,0.55)
106
- );
 
 
 
 
 
107
 
108
- backdrop-filter: blur(32px) saturate(160%);
109
  border:1px solid rgba(255,255,255,0.95);
110
 
111
  box-shadow:
112
- 0 40px 120px rgba(99,102,241,0.25),
113
- inset 0 1px 0 rgba(255,255,255,0.9);
114
 
115
- animation: glassFloat 6s ease-in-out infinite;
116
  }
117
 
118
- /* subtle glass movement */
119
- @keyframes glassFloat{
120
  0%{ transform:translateY(0); }
121
- 50%{ transform:translateY(-12px); }
122
  100%{ transform:translateY(0); }
123
  }
124
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
125
  /* ===== NAME ===== */
126
  .hero-name{
127
- font-size:56px;
128
- margin-bottom:12px; /* 👈 spacing tight */
129
- background:linear-gradient(90deg,
130
- var(--accent1),
131
- var(--accent2),
132
- var(--accent3)
 
133
  );
134
  -webkit-background-clip:text;
135
  -webkit-text-fill-color:transparent;
@@ -137,47 +123,203 @@ body{
137
 
138
  /* ===== SUBTITLE ===== */
139
  .hero-sub{
140
- font-size:16px;
141
  font-weight:500;
142
- color:#4338ca;
143
- margin-bottom:22px;
144
  }
145
 
146
  /* ===== TEXT ===== */
147
  .hero-text{
148
  max-width:620px;
149
- margin:0 auto 30px;
150
  font-size:16px;
151
  line-height:1.9;
152
- color:#374151;
153
  }
154
 
155
- /* ===== BUTTON GROUP ===== */
156
  .hero-buttons{
157
  display:flex;
158
  justify-content:center;
159
  gap:22px;
160
  }
161
 
162
- /* ===== GLASS BUTTON ===== */
163
  .glass-btn{
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  padding:16px 42px;
165
  border-radius:999px;
166
  background:rgba(255,255,255,0.7);
167
- backdrop-filter: blur(18px);
168
  border:1px solid rgba(255,255,255,0.95);
169
-
170
- color:var(--accent1);
171
  font-weight:700;
172
  letter-spacing:1px;
173
  text-decoration:none;
174
-
175
- transition:.35s ease;
176
  }
177
 
178
  .glass-btn:hover{
179
- transform:scale(1.08);
180
- box-shadow:0 20px 60px rgba(236,72,153,0.35);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
181
  }
182
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
183
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  from{transform:translateY(0);}
36
  to{transform:translateY(-60px);}
37
  }
38
+ /* ===== NEW COLOR VARIABLES ===== */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39
  :root{
40
  --peach:#fda4af;
41
  --lavender:#c4b5fd;
 
43
  --ink:#334155;
44
  }
45
 
46
+ /* ===== HERO BACKGROUND (MORE DREAMY) ===== */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  .hero{
48
+ min-height:88vh;
49
  display:flex;
50
  justify-content:center;
51
  align-items:center;
52
+ padding:30px 20px;
53
  }
54
 
55
+ /* ===== ULTRA GLASS LAYERED HERO ===== */
56
  .hero-inner{
57
+ position:relative;
58
  text-align:center;
59
+ padding:54px 64px;
60
+ border-radius:36px;
61
 
62
+ /* layered glass */
63
+ background:
64
+ linear-gradient(
65
+ 135deg,
66
+ rgba(255,255,255,0.85),
67
+ rgba(255,255,255,0.55)
68
+ );
69
+
70
+ backdrop-filter: blur(36px) saturate(170%);
71
+ -webkit-backdrop-filter: blur(36px) saturate(170%);
72
 
 
73
  border:1px solid rgba(255,255,255,0.95);
74
 
75
  box-shadow:
76
+ 0 50px 140px rgba(99,102,241,0.25),
77
+ inset 0 1px 0 rgba(255,255,255,0.95);
78
 
79
+ animation: floatGlass 7s ease-in-out infinite;
80
  }
81
 
82
+ /* soft floating */
83
+ @keyframes floatGlass{
84
  0%{ transform:translateY(0); }
85
+ 50%{ transform:translateY(-14px); }
86
  100%{ transform:translateY(0); }
87
  }
88
 
89
+ /* subtle glass shine */
90
+ .hero-inner::after{
91
+ content:"";
92
+ position:absolute;
93
+ inset:0;
94
+ border-radius:36px;
95
+ background:linear-gradient(
96
+ 120deg,
97
+ transparent 35%,
98
+ rgba(255,255,255,0.6),
99
+ transparent 65%
100
+ );
101
+ opacity:0.6;
102
+ animation: shine 6s linear infinite;
103
+ }
104
+
105
+ @keyframes shine{
106
+ from{ transform:translateX(-120%); }
107
+ to{ transform:translateX(120%); }
108
+ }
109
+
110
  /* ===== NAME ===== */
111
  .hero-name{
112
+ font-size:58px;
113
+ margin-bottom:10px;
114
+ background:linear-gradient(
115
+ 90deg,
116
+ var(--lavender),
117
+ var(--peach),
118
+ var(--ice)
119
  );
120
  -webkit-background-clip:text;
121
  -webkit-text-fill-color:transparent;
 
123
 
124
  /* ===== SUBTITLE ===== */
125
  .hero-sub{
126
+ font-size:15.5px;
127
  font-weight:500;
128
+ color:#6366f1;
129
+ margin-bottom:20px;
130
  }
131
 
132
  /* ===== TEXT ===== */
133
  .hero-text{
134
  max-width:620px;
135
+ margin:0 auto 28px;
136
  font-size:16px;
137
  line-height:1.9;
138
+ color:var(--ink);
139
  }
140
 
141
+ /* ===== BUTTONS (PURE GLASS) ===== */
142
  .hero-buttons{
143
  display:flex;
144
  justify-content:center;
145
  gap:22px;
146
  }
147
 
 
148
  .glass-btn{
149
+ position:relative;
150
+ padding:16px 44px;
151
+ border-radius:999px;
152
+
153
+ background:
154
+ linear-gradient(
155
+ 135deg,
156
+ rgba(255,255,255,0.9),
157
+ rgba(255,255,255,0.6)
158
+ );
159
+
160
+ backdrop-filter: blur(22px);
161
+ border:1px solid rgba(255,255,255,1);
162
+
163
+ color:#4f46e5;
164
+ font-weight:700;
165
+ letter-spacing:1px;
166
+ text-decoration:none;
167
+
168
+ transition:.4s ease;
169
+ }
170
+
171
+ .glass-btn:hover{
172
+ transform:scale(1.1);
173
+ box-shadow:
174
+ 0 25px 70px rgba(253,164,175,0.45),
175
+ 0 0 0 8px rgba(196,181,253,0.15);
176
+ }
177
+
178
+ /* GLASS 3D */
179
+ .glass-3d{
180
+ background:linear-gradient(
181
+ 180deg,
182
+ rgba(255,255,255,0.75),
183
+ rgba(255,255,255,0.55)
184
+ );
185
+ backdrop-filter:blur(28px) saturate(150%);
186
+ border-radius:30px;
187
+ border:1px solid rgba(255,255,255,0.95);
188
+ box-shadow:
189
+ 0 40px 120px rgba(99,102,241,0.25),
190
+ inset 0 1px 0 rgba(255,255,255,0.95);
191
+ transition:transform .45s ease, box-shadow .45s ease;
192
+ }
193
+
194
+ .glass-3d:hover{
195
+ transform:translateY(-10px) rotateX(4deg);
196
+ box-shadow:
197
+ 0 70px 180px rgba(236,72,153,0.35),
198
+ inset 0 1px 0 rgba(255,255,255,1);
199
+ }
200
+
201
+ /* BUTTON */
202
+ .glass-btn{
203
+ display:inline-flex;
204
+ align-items:center;
205
+ justify-content:center;
206
  padding:16px 42px;
207
  border-radius:999px;
208
  background:rgba(255,255,255,0.7);
209
+ backdrop-filter:blur(18px);
210
  border:1px solid rgba(255,255,255,0.95);
211
+ color:#4f46e5;
 
212
  font-weight:700;
213
  letter-spacing:1px;
214
  text-decoration:none;
215
+ transition:.35s;
 
216
  }
217
 
218
  .glass-btn:hover{
219
+ transform:scale(1.06);
220
+ box-shadow:0 20px 60px rgba(99,102,241,.35);
221
+ }
222
+
223
+ .small{padding:12px 28px;}
224
+
225
+ /* INFO SECTIONS */
226
+ .info{
227
+ max-width:900px;
228
+ margin:80px auto;
229
+ padding:40px;
230
+ text-align:center;
231
+ }
232
+
233
+ .info h3{
234
+ font-size:34px;
235
+ margin-bottom:18px;
236
+ color:#4f46e5;
237
+ }
238
+
239
+ .info span{
240
+ color:#6b7280;
241
+ }
242
+
243
+ /* SKILLS */
244
+ .skills{
245
+ padding:120px 8% 60px;
246
+ text-align:center;
247
+ }
248
+
249
+ .skills h3{
250
+ font-size:36px;
251
+ margin-bottom:50px;
252
+ color:#4338ca;
253
+ }
254
+
255
+ .bubble-wrap{
256
+ display:flex;
257
+ flex-wrap:wrap;
258
+ justify-content:center;
259
+ gap:26px;
260
  }
261
 
262
+ .bubble{
263
+ padding:20px 34px;
264
+ border-radius:999px;
265
+ background:rgba(255,255,255,0.75);
266
+ backdrop-filter:blur(22px);
267
+ border:1px solid rgba(255,255,255,0.95);
268
+ font-weight:600;
269
+ color:#4f46e5;
270
+ box-shadow:0 20px 50px rgba(99,102,241,.25);
271
+ animation:floatBubble 6s ease-in-out infinite;
272
+ transition:.4s;
273
+ }
274
+
275
+ .bubble:hover{
276
+ transform:scale(1.15);
277
+ box-shadow:0 30px 70px rgba(236,72,153,.4);
278
+ }
279
+
280
+ @keyframes floatBubble{
281
+ 0%{transform:translateY(0);}
282
+ 50%{transform:translateY(-18px);}
283
+ 100%{transform:translateY(0);}
284
+ }
285
+
286
+ /* PROJECTS */
287
+ .projects{
288
+ padding:100px 8%;
289
+ text-align:center;
290
+ }
291
 
292
+ .projects h3{
293
+ font-size:36px;
294
+ margin-bottom:50px;
295
+ color:#4338ca;
296
+ }
297
+
298
+ .project-grid{
299
+ display:grid;
300
+ grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
301
+ gap:40px;
302
+ }
303
+
304
+ .project{
305
+ padding:34px;
306
+ display:flex;
307
+ flex-direction:column;
308
+ }
309
+
310
+ .project h4{
311
+ font-size:22px;
312
+ margin-bottom:10px;
313
+ color:#312e81;
314
+ }
315
+
316
+ .project-action{
317
+ margin-top:auto;
318
+ }
319
+
320
+ /* FOOTER */
321
+ footer{
322
+ text-align:center;
323
+ padding:40px;
324
+ color:#6b7280;
325
+ }