Skip to content

Commit 40b25a5

Browse files
commitWithTishacommitWithTisha
committed
Initial Commit
0 parents  commit 40b25a5

File tree

12 files changed

+581
-0
lines changed

12 files changed

+581
-0
lines changed

‎banner.jpg‎

103 KB
Loading

‎body_bg.jpg‎

192 KB
Loading

‎borders.jpg‎

457 KB
Loading

‎content_bg.jpg‎

525 KB
Loading

‎download.png‎

5.11 MB
Loading

‎dream.jpg‎

94.9 KB
Loading

‎img2.jpg‎

434 KB
Loading

‎nicor.jpg‎

103 KB
Loading

‎p_bg.jpg‎

575 KB
Loading

‎portfolio.css‎

Lines changed: 376 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,376 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
6+
}
7+
8+
html, body {
9+
height: 100%;
10+
margin: 0;
11+
padding: 0;
12+
13+
}
14+
15+
16+
body {
17+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18+
background: linear-gradient(135deg, #fff5f9 0%, #ffe6f0 100%);
19+
color: #333;
20+
line-height: 1.6;
21+
}
22+
23+
/* Main Wrapper - Three Column Layout */
24+
.main-wrapper {
25+
display: grid;
26+
grid-template-columns: 1fr 600px 1fr;
27+
28+
min-height: 100vh;
29+
30+
}
31+
32+
.sidebar {
33+
background-image: url(body_bg.jpg);
34+
background-size: cover;
35+
background-position: center;
36+
background-repeat: no-repeat;
37+
38+
}
39+
40+
/* Center Content */
41+
.center-content {
42+
background: radial-gradient(circle, #1c101f 20%, #260030, #51006c);
43+
border-radius: 15px;
44+
box-shadow: 0 10px 40px rgba(255, 105, 180, 0.15);
45+
overflow: hidden;
46+
display: flex;
47+
flex-direction: column;
48+
49+
}
50+
51+
/* Banner Image Section */
52+
.banner-section {
53+
width: 100%;
54+
height: 250px;
55+
overflow: hidden;
56+
background: linear-gradient(135deg, #ffb3d9 0%, #ff99cc 100%);
57+
background-image: url(banner.jpg);
58+
background-size: cover;
59+
background-position: center;
60+
background-repeat: no-repeat;
61+
}
62+
63+
64+
65+
/* Navigation Bar */
66+
.nav-bar {
67+
background: linear-gradient(90deg, #ffb3d9 0%, #ff99cc 100%);
68+
padding: 1rem 0;
69+
position: sticky;
70+
top: 0;
71+
z-index: 100;
72+
background-image: url(dream.jpg);
73+
background-size: cover;
74+
background-position: center;
75+
background-repeat: no-repeat;
76+
}
77+
78+
.nav-bar ul {
79+
list-style: none;
80+
display: flex;
81+
justify-content: center;
82+
gap: 1.5rem;
83+
flex-wrap: wrap;
84+
padding: 0 1rem;
85+
}
86+
87+
.nav-bar a {
88+
color: #fac2ff;
89+
text-decoration: none;
90+
font-weight: 600;
91+
font-size: 1.5rem;
92+
transition: transform 0.3s ease, text-shadow 0.3s ease;
93+
}
94+
95+
.nav-bar a:hover {
96+
transform: scale(1.1);
97+
text-shadow: 0 0 10px rgba(255, 255, 255, 1.0);
98+
size: 7rem;
99+
color: rgb(255, 255, 255);
100+
}
101+
102+
/* Sections */
103+
section {
104+
padding: 2rem;
105+
border-bottom: 1px solid #f0f0f0;
106+
}
107+
108+
section:last-of-type {
109+
border-bottom: none;
110+
}
111+
112+
section h2 {
113+
color: #fac2ff;
114+
font-size: 1.8rem;
115+
margin-bottom: 1.5rem;
116+
display: flex;
117+
align-items: center;
118+
gap: 0.5rem;
119+
}
120+
121+
/* About Section */
122+
#about p {
123+
font-size: 1rem;
124+
color: #666;
125+
line-height: 1.8;
126+
}
127+
128+
/* Skills Section */
129+
.skills-grid {
130+
display: grid;
131+
grid-template-columns: repeat(2, 1fr);
132+
gap: 1.5rem;
133+
}
134+
135+
.skill-item {
136+
background: #1d002e;
137+
padding: 1.5rem;
138+
border-radius: 10px;
139+
border-left: 4px solid #fac2ff;
140+
transition: transform 0.3s ease, box-shadow 0.3s ease;
141+
}
142+
143+
.skill-item:hover {
144+
transform: translateY(-5px);
145+
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.2);
146+
}
147+
148+
.skill-item h3 {
149+
background: #ffe6f0;
150+
color: #ff69b4;
151+
margin-bottom: 0.5rem;
152+
font-size: 1.1rem;
153+
border-radius: 15px;
154+
display: inline-block;
155+
padding: 0.5rem 1rem;
156+
font-weight: 600;
157+
}
158+
159+
.skill-item p {
160+
color: #777;
161+
font-size: 0.95rem;
162+
}
163+
164+
/* Projects Section */
165+
.projects-grid {
166+
display: grid;
167+
grid-template-columns: repeat(2, 1fr);
168+
gap: 1.5rem;
169+
}
170+
171+
.project-item {
172+
background: #1d002e;
173+
border-radius: 10px;
174+
overflow: hidden;
175+
transition: transform 0.3s ease, box-shadow 0.3s ease;
176+
box-shadow: 0 4px 10px rgba(255, 105, 180, 0.1);
177+
}
178+
179+
.project-item:hover {
180+
transform: translateY(-8px);
181+
box-shadow: 0 8px 20px rgba(255, 105, 180, 0.2);
182+
}
183+
184+
.project-img {
185+
width: 100%;
186+
height: 150px;
187+
overflow: hidden;
188+
background: linear-gradient(135deg, #ffb3d9 0%, #ff99cc 100%);
189+
}
190+
191+
.project-img img {
192+
width: 100%;
193+
height: 100%;
194+
object-fit: cover;
195+
}
196+
197+
.project-item h3 {
198+
color: #ff69b4;
199+
font-size: 1.1rem;
200+
padding: 1rem 1rem 0 1rem;
201+
}
202+
203+
.project-item p {
204+
color: #666;
205+
font-size: 0.9rem;
206+
padding: 0.5rem 1rem;
207+
line-height: 1.6;
208+
}
209+
210+
.project-tags {
211+
display: flex;
212+
flex-wrap: wrap;
213+
gap: 0.5rem;
214+
padding: 0.5rem 1rem 1rem 1rem;
215+
}
216+
217+
.tag {
218+
background: #ffe6f0;
219+
color: #ff69b4;
220+
padding: 0.3rem 0.7rem;
221+
border-radius: 15px;
222+
font-size: 0.8rem;
223+
font-weight: 600;
224+
}
225+
226+
/* Learning Section */
227+
.learning-list {
228+
display: grid;
229+
grid-template-columns: 1fr;
230+
gap: 1.5rem;
231+
}
232+
233+
.learning-item {
234+
background: #fff5f9;
235+
padding: 1.5rem;
236+
border-radius: 10px;
237+
border-left: 4px solid #ff99cc;
238+
transition: transform 0.3s ease;
239+
}
240+
241+
.learning-item:hover {
242+
transform: translateX(5px);
243+
}
244+
245+
.learning-item h3 {
246+
color: #ff69b4;
247+
margin-bottom: 0.7rem;
248+
font-size: 1.1rem;
249+
}
250+
251+
.learning-item p {
252+
color: #666;
253+
font-size: 0.95rem;
254+
}
255+
256+
/* Next Goals Section */
257+
.next-goals {
258+
display: grid;
259+
grid-template-columns: repeat(2, 1fr);
260+
gap: 1.5rem;
261+
}
262+
263+
.goal-item {
264+
background: linear-gradient(135deg, #ffe6f0 0%, #fff5f9 100%);
265+
padding: 1.5rem;
266+
border-radius: 10px;
267+
border: 2px solid #ffb3d9;
268+
transition: transform 0.3s ease, box-shadow 0.3s ease;
269+
}
270+
271+
.goal-item:hover {
272+
transform: translateY(-5px);
273+
box-shadow: 0 8px 20px rgba(255, 105, 180, 0.2);
274+
}
275+
276+
.goal-item h3 {
277+
color: #ff69b4;
278+
margin-bottom: 0.7rem;
279+
font-size: 1.1rem;
280+
}
281+
282+
.goal-item p {
283+
color: #666;
284+
font-size: 0.95rem;
285+
}
286+
287+
/* Contact Section */
288+
.contact-section {
289+
background: radial-gradient(circle, #1c101f 20%, #260030, #51006c);
290+
}
291+
292+
.contact-section h2 {
293+
color: white;
294+
}
295+
296+
.contact-container {
297+
text-align: center;
298+
color: white;
299+
}
300+
301+
.contact-container p {
302+
font-size: 1rem;
303+
margin-bottom: 2rem;
304+
}
305+
306+
.contact-links {
307+
display: flex;
308+
justify-content: center;
309+
gap: 1.5rem;
310+
flex-wrap: wrap;
311+
}
312+
313+
.contact-link {
314+
background: white;
315+
color: #ff69b4;
316+
text-decoration: none;
317+
padding: 0.8rem 1.5rem;
318+
border-radius: 25px;
319+
font-weight: 600;
320+
transition: transform 0.3s ease, box-shadow 0.3s ease;
321+
display: inline-block;
322+
}
323+
324+
.contact-link:hover {
325+
transform: scale(1.1);
326+
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.4);
327+
}
328+
329+
/* Footer */
330+
footer {
331+
background: #ff99cc;
332+
color: white;
333+
text-align: center;
334+
padding: 1.5rem;
335+
font-size: 0.9rem;
336+
}
337+
338+
/* Responsive Design */
339+
@media (max-width: 1200px) {
340+
.main-wrapper {
341+
grid-template-columns: 1fr;
342+
gap: 1rem;
343+
}
344+
345+
.center-content {
346+
border-radius: 0;
347+
}
348+
}
349+
350+
@media (max-width: 768px) {
351+
.nav-bar ul {
352+
gap: 0.8rem;
353+
}
354+
355+
.nav-bar a {
356+
font-size: 0.85rem;
357+
}
358+
359+
.skills-grid,
360+
.projects-grid,
361+
.next-goals {
362+
grid-template-columns: 1fr;
363+
}
364+
365+
section {
366+
padding: 1.5rem;
367+
}
368+
369+
section h2 {
370+
font-size: 1.5rem;
371+
}
372+
373+
.banner-section {
374+
height: 150px;
375+
}
376+
}

0 commit comments

Comments
 (0)