Skip to content

Commit ec0d4aa

Browse files
jaykumar52vjaykumar52v
authored
Add files via upload
1 parent 2096d1a commit ec0d4aa

1 file changed

Lines changed: 187 additions & 0 deletions

File tree

‎style.css‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
/* Modern Forbes-style with user-engaging cues and visual psychology */
2+
body {
3+
margin: 0;
4+
font-family: 'Georgia', serif;
5+
background: #fff;
6+
color: #1a202c;
7+
transition: background-color 0.4s;
8+
}
9+
header {
10+
background: #111;
11+
color: #fff;
12+
padding: 1.2rem 2.2rem;
13+
display: flex;
14+
justify-content: space-between;
15+
align-items: center;
16+
box-shadow: 0 3px 18px -8px #0002;
17+
position: sticky;
18+
top: 0;
19+
z-index: 30;
20+
}
21+
.logo {
22+
font-size: 2.1rem;
23+
font-weight: 700;
24+
letter-spacing: 2px;
25+
}
26+
nav a {
27+
color: #fff;
28+
margin-left: 2rem;
29+
text-decoration: none;
30+
font-size: 1.09rem;
31+
padding-bottom: 3px;
32+
border-bottom: 2px solid transparent;
33+
transition: color 0.18s, border-color 0.18s;
34+
}
35+
nav a:hover, nav a.active {
36+
color: #f7b800;
37+
border-bottom: 2.5px solid #f7b800;
38+
}
39+
.main-feature {
40+
background: linear-gradient(120deg, #f7b800 70%, #fff);
41+
padding: 3.2rem 0 2rem 0;
42+
text-align: center;
43+
position: relative;
44+
box-shadow: 0 6px 18px -10px #f7b80090;
45+
animation: fadeInMain 1s ease;
46+
}
47+
@keyframes fadeInMain {
48+
from { opacity: 0; transform: translateY(-16px);}
49+
to { opacity: 1; transform: translateY(0);}
50+
}
51+
.profile-container {
52+
display: flex;
53+
justify-content: center;
54+
}
55+
.profile-avatar {
56+
border-radius: 50%;
57+
width: 115px;
58+
height: 115px;
59+
border: 7px solid #fff;
60+
box-shadow: 0 0 24px #b39200aa;
61+
margin-bottom: 1.2rem;
62+
background: #fff;
63+
transition: box-shadow 0.2s;
64+
}
65+
.profile-avatar:hover { box-shadow: 0 4px 28px #b39200ee; }
66+
.main-feature h1 {
67+
margin: 0 0 7px 0;
68+
font-size: 2.7rem;
69+
font-weight: 800;
70+
}
71+
.subtitle {
72+
font-size: 1.19rem;
73+
margin-bottom: 1.6rem;
74+
color: #222;
75+
font-style: italic;
76+
}
77+
.social-links {
78+
margin: 1.3rem 0 0.8rem 0;
79+
}
80+
.social-links a {
81+
display: inline-flex;
82+
align-items: center;
83+
justify-content: center;
84+
height: 47px;
85+
width: 47px;
86+
margin: 0 10px;
87+
text-decoration: none;
88+
color: #fff;
89+
font-weight: 800;
90+
font-size: 1.25rem;
91+
border-radius: 50%;
92+
background: #111;
93+
transition: background 0.18s, color 0.18s, box-shadow 0.15s, transform 0.13s;
94+
box-shadow: 0 2px 12px #b3920033;
95+
border: 2.5px solid #f7b800;
96+
position: relative;
97+
outline: none;
98+
}
99+
.social-links a .icon { letter-spacing: 2px; font-size: 1.25em; }
100+
.social-links a.linkedin { background: #0077b5; }
101+
.social-links a.twitter { background: #1da1f2; }
102+
.social-links a.hackerrank { background: #2ec866; }
103+
.social-links a.leetcode { background: #f89f1b; }
104+
.social-links a:hover, .social-links a:focus {
105+
background: #fff;
106+
color: #111;
107+
transform: scale(1.13) rotate(-7deg);
108+
border-color: #111;
109+
box-shadow: 0 4px 24px #b39200aa;
110+
}
111+
.cta-btn {
112+
display: inline-block;
113+
margin: 1.2rem auto 0.2rem auto;
114+
padding: 0.7rem 1.7rem;
115+
background: #111;
116+
color: #fff;
117+
font-size: 1.11rem;
118+
font-weight: bold;
119+
text-decoration: none;
120+
border-radius: 32px;
121+
border: 2.5px solid #f7b800;
122+
box-shadow: 0 2px 10px #cead3d33;
123+
transition: background 0.16s, color 0.16s, transform 0.14s;
124+
}
125+
.cta-btn:hover, .cta-btn:focus {
126+
background: #fff;
127+
color: #111;
128+
transform: scale(1.06);
129+
}
130+
131+
section {
132+
padding: 2.6rem 3vw;
133+
max-width: 950px;
134+
margin: auto;
135+
animation: fadeInSection 0.7s cubic-bezier(.39,.58,.57,.97);
136+
}
137+
@keyframes fadeInSection {
138+
from { opacity: 0; transform: translateY(20px);}
139+
to { opacity: 1; transform: translateY(0);}
140+
}
141+
section h2 {
142+
border-left: 6px solid #f7b800;
143+
padding-left: 0.68rem;
144+
margin-bottom: 1.2rem;
145+
letter-spacing: 1.5px;
146+
}
147+
.skills-list {
148+
list-style-type: '★ ';
149+
padding-left: 1.4rem;
150+
font-size: 1.08rem;
151+
line-height: 1.7;
152+
color: #444;
153+
}
154+
.projects-grid {
155+
display: flex;
156+
gap: 2.2vw;
157+
flex-wrap: wrap;
158+
justify-content: start;
159+
}
160+
.project-card {
161+
flex: 1 1 240px;
162+
background: #faf7ed;
163+
color: #222;
164+
border-radius: 12px;
165+
box-shadow: 0 1px 12px #b3920030;
166+
margin-bottom: 1.5rem;
167+
min-width: 238px;
168+
max-width: 315px;
169+
padding: 1.34rem 1.2rem;
170+
border-left: 7px solid #f7b800;
171+
transition: transform 0.17s, box-shadow 0.18s;
172+
cursor: pointer;
173+
opacity: 0;
174+
transform: translateY(32px);
175+
animation: cardReveal 0.72s both;
176+
}
177+
.project-card:hover {
178+
transform: scale(1.031) translateY(-8px) rotate(-2.5deg);
179+
box-shadow: 0 4px 22px #b3920060;
180+
background: #fffde1;
181+
}
182+
183+
/* Reveal animation for cards */
184+
@keyframes cardReveal {
185+
to {
186+
opacity: 1;
187+
transform

0 commit comments

Comments
 (0)