Hugging Face's logo

Spaces:
simran40
/
simran-portfolio
Running

App Files Community
simran40 commited on
Commit
e4ad8b8
·
verified ·
1 Parent(s): 050f14a

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +121 -132
style.css CHANGED
@@ -1,180 +1,169 @@
1
- * {
2
- margin: 0;
3
- padding: 0;
4
- box-sizing: border-box;
5
- font-family: "Inter", "Segoe UI", system-ui, sans-serif;
6
  }
7
 
8
- /* ===== LIGHT AURORA BACKGROUND (NO BLACK) ===== */
9
- body {
10
- min-height: 100vh;
11
  background:
12
- radial-gradient(1200px at 10% 10%, rgba(173,216,255,0.55), transparent 40%),
13
- radial-gradient(1000px at 90% 20%, rgba(221,214,254,0.55), transparent 45%),
14
- radial-gradient(900px at 50% 90%, rgba(187,247,208,0.55), transparent 45%),
15
- linear-gradient(180deg, #f8fafc, #eef2ff);
16
- color: #1e293b;
17
- padding: 70px 18px;
18
  }
19
 
20
  /* ===== ULTRA GLASS CARD ===== */
21
- .glass {
22
- max-width: 920px;
23
- margin: 0 auto 90px;
24
- padding: 50px;
25
- border-radius: 34px;
26
 
27
- background: rgba(255, 255, 255, 0.55);
28
- backdrop-filter: blur(28px);
29
- -webkit-backdrop-filter: blur(28px);
 
 
30
 
31
- border: 1px solid rgba(255,255,255,0.9);
 
32
 
 
33
  box-shadow:
34
- 0 40px 90px rgba(100,116,139,0.25),
35
- inset 0 1px 0 rgba(255,255,255,0.9);
36
 
37
- transition: transform 0.6s ease, box-shadow 0.6s ease;
38
  }
39
 
40
- .glass:hover {
41
  transform: translateY(-10px);
42
  box-shadow:
43
- 0 60px 120px rgba(100,116,139,0.35),
44
  inset 0 1px 0 rgba(255,255,255,1);
45
  }
46
 
47
  /* ===== HEADINGS ===== */
48
- h1 {
49
- font-size: 44px;
50
- margin-bottom: 14px;
51
- font-weight: 700;
52
-
53
- background: linear-gradient(
54
- 90deg,
55
- #6366f1,
56
- #06b6d4,
57
- #22c55e
58
- );
59
- -webkit-background-clip: text;
60
- -webkit-text-fill-color: transparent;
61
  }
62
 
63
- .subtitle {
64
- font-size: 16px;
65
- opacity: 0.8;
66
- margin-bottom: 26px;
67
- color: #334155;
68
  }
69
 
70
- h2 {
71
- font-size: 26px;
72
- margin-bottom: 18px;
73
- color: #1e293b;
 
74
  }
75
 
76
  /* ===== TEXT ===== */
77
- p {
78
- font-size: 16px;
79
- line-height: 1.95;
80
- color: #334155;
81
  }
82
 
83
  /* ===== LINKS ===== */
84
- .links a {
85
- display: inline-block;
86
- margin-right: 24px;
87
- margin-top: 18px;
88
- text-decoration: none;
89
- font-weight: 600;
90
- color: #4338ca;
91
- position: relative;
92
- }
93
-
94
- .links a::after {
95
- content: "";
96
- position: absolute;
97
- left: 0;
98
- bottom: -6px;
99
- width: 100%;
100
- height: 2px;
101
- background: linear-gradient(90deg, #6366f1, #22c55e);
102
- transform: scaleX(0);
103
- transition: transform 0.4s ease;
104
- }
105
-
106
- .links a:hover::after {
107
- transform: scaleX(1);
108
- }
109
-
110
- /* ===== SKILLS (GLASS PILLS) ===== */
111
- .skills {
112
- display: flex;
113
- flex-wrap: wrap;
114
- gap: 14px;
115
- }
116
-
117
- .skills span {
118
- padding: 12px 26px;
119
- border-radius: 999px;
120
-
121
- background: rgba(255,255,255,0.7);
122
- backdrop-filter: blur(12px);
123
-
124
- border: 1px solid rgba(203,213,225,0.8);
125
- font-size: 14px;
126
- color: #1e293b;
127
  }
128
 
129
  /* ===== PROJECT CARD ===== */
130
- .project {
131
- margin-top: 36px;
132
- padding: 36px;
133
- border-radius: 30px;
134
 
135
- background: rgba(255,255,255,0.65);
136
- backdrop-filter: blur(24px);
137
 
138
- border: 1px solid rgba(203,213,225,0.9);
139
  }
140
 
141
- .project h3 {
142
- font-size: 20px;
143
- margin-bottom: 10px;
144
- color: #0f172a;
145
  }
146
 
147
  /* ===== PROJECT BUTTON ===== */
148
- .project-btn {
149
- display: inline-block;
150
- margin-top: 22px;
151
- padding: 16px 42px;
152
- border-radius: 999px;
153
 
154
- background: linear-gradient(
155
- 90deg,
156
- #6366f1,
157
- #22c55e
158
- );
159
 
160
- color: white;
161
- font-weight: 700;
162
- letter-spacing: 1px;
163
- text-decoration: none;
164
 
165
- transition: transform 0.4s ease, box-shadow 0.4s ease;
166
  }
167
 
168
- .project-btn:hover {
169
- transform: scale(1.08);
170
- box-shadow: 0 0 40px rgba(99,102,241,0.45);
171
  }
172
 
173
  /* ===== FOOTER ===== */
174
- footer {
175
- text-align: center;
176
- font-size: 13px;
177
- opacity: 0.7;
178
- margin-bottom: 50px;
179
- color: #334155;
180
  }
 
1
+ *{
2
+ margin:0;
3
+ padding:0;
4
+ box-sizing:border-box;
5
+ font-family:"Inter","Segoe UI",system-ui,sans-serif;
6
  }
7
 
8
+ /* ===== LAVENDER + PINK BACKGROUND (NO BLACK) ===== */
9
+ body{
10
+ min-height:100vh;
11
  background:
12
+ radial-gradient(1100px at 10% 10%, rgba(221,214,254,0.75), transparent 40%),
13
+ radial-gradient(1000px at 90% 20%, rgba(252,165,165,0.55), transparent 45%),
14
+ radial-gradient(900px at 50% 90%, rgba(240,171,252,0.55), transparent 45%),
15
+ linear-gradient(180deg,#faf5ff,#fdf2f8);
16
+ color:#1f2937;
17
+ padding:70px 18px;
18
  }
19
 
20
  /* ===== ULTRA GLASS CARD ===== */
21
+ .glass{
22
+ max-width:920px;
23
+ margin:0 auto 90px;
24
+ padding:52px;
25
+ border-radius:36px;
26
 
27
+ background: linear-gradient(
28
+ 180deg,
29
+ rgba(255,255,255,0.78),
30
+ rgba(255,255,255,0.58)
31
+ );
32
 
33
+ backdrop-filter: blur(30px);
34
+ -webkit-backdrop-filter: blur(30px);
35
 
36
+ border:1px solid rgba(255,255,255,0.95);
37
  box-shadow:
38
+ 0 40px 100px rgba(168,85,247,0.18),
39
+ inset 0 1px 0 rgba(255,255,255,1);
40
 
41
+ transition: transform .6s ease, box-shadow .6s ease;
42
  }
43
 
44
+ .glass:hover{
45
  transform: translateY(-10px);
46
  box-shadow:
47
+ 0 70px 140px rgba(168,85,247,0.25),
48
  inset 0 1px 0 rgba(255,255,255,1);
49
  }
50
 
51
  /* ===== HEADINGS ===== */
52
+ h1{
53
+ font-size:46px;
54
+ font-weight:700;
55
+ margin-bottom:16px;
56
+ background:linear-gradient(90deg,#a78bfa,#f472b6,#fb7185);
57
+ -webkit-background-clip:text;
58
+ -webkit-text-fill-color:transparent;
 
 
 
 
 
 
59
  }
60
 
61
+ .subtitle{
62
+ font-size:16px;
63
+ margin-bottom:28px;
64
+ color:#6b7280;
 
65
  }
66
 
67
+ h2{
68
+ font-size:27px;
69
+ margin-bottom:20px;
70
+ color:#4c1d95;
71
+ letter-spacing:.3px;
72
  }
73
 
74
  /* ===== TEXT ===== */
75
+ p{
76
+ font-size:16px;
77
+ line-height:1.95;
78
+ color:#374151;
79
  }
80
 
81
  /* ===== LINKS ===== */
82
+ .links a{
83
+ display:inline-block;
84
+ margin-right:26px;
85
+ margin-top:20px;
86
+ text-decoration:none;
87
+ font-weight:600;
88
+ color:#7c3aed;
89
+ position:relative;
90
+ }
91
+
92
+ .links a::after{
93
+ content:"";
94
+ position:absolute;
95
+ left:0;
96
+ bottom:-6px;
97
+ width:100%;
98
+ height:2px;
99
+ background:linear-gradient(90deg,#a78bfa,#f472b6);
100
+ transform:scaleX(0);
101
+ transition:transform .4s ease;
102
+ }
103
+
104
+ .links a:hover::after{ transform:scaleX(1); }
105
+
106
+ /* ===== SKILLS : GLASS PILLS ===== */
107
+ .skills{
108
+ display:flex;
109
+ flex-wrap:wrap;
110
+ gap:16px;
111
+ }
112
+
113
+ .skills span{
114
+ padding:12px 26px;
115
+ border-radius:999px;
116
+ background:rgba(255,255,255,0.85);
117
+ backdrop-filter: blur(14px);
118
+ border:1px solid rgba(216,180,254,0.9);
119
+ font-size:14px;
120
+ color:#4c1d95;
 
 
 
 
121
  }
122
 
123
  /* ===== PROJECT CARD ===== */
124
+ .project{
125
+ margin-top:38px;
126
+ padding:38px;
127
+ border-radius:32px;
128
 
129
+ background:rgba(255,255,255,0.78);
130
+ backdrop-filter: blur(26px);
131
 
132
+ border:1px solid rgba(216,180,254,0.95);
133
  }
134
 
135
+ .project h3{
136
+ font-size:21px;
137
+ margin-bottom:10px;
138
+ color:#3b0764;
139
  }
140
 
141
  /* ===== PROJECT BUTTON ===== */
142
+ .project-btn{
143
+ display:inline-block;
144
+ margin-top:22px;
145
+ padding:16px 44px;
146
+ border-radius:999px;
147
 
148
+ background:linear-gradient(90deg,#a78bfa,#f472b6);
149
+ color:white;
 
 
 
150
 
151
+ font-weight:700;
152
+ letter-spacing:1px;
153
+ text-decoration:none;
 
154
 
155
+ transition: transform .4s ease, box-shadow .4s ease;
156
  }
157
 
158
+ .project-btn:hover{
159
+ transform:scale(1.08);
160
+ box-shadow:0 0 45px rgba(244,114,182,0.45);
161
  }
162
 
163
  /* ===== FOOTER ===== */
164
+ footer{
165
+ text-align:center;
166
+ font-size:13px;
167
+ color:#6b7280;
168
+ margin-bottom:50px;
 
169
  }