|
6 | 6 | <title>Ramanjeet Singh Portfolio</title> |
7 | 7 | <style> |
8 | 8 | body { |
9 | | - font-family: Arial, sans-serif; |
| 9 | + font-family: 'Arial', sans-serif; |
10 | 10 | margin: 0; |
11 | 11 | padding: 0; |
12 | | - background-color: #fff7e6; |
| 12 | + background-color: #f9f9f9; |
13 | 13 | color: #333; |
14 | 14 | } |
15 | 15 |
|
16 | 16 | header { |
17 | | - background-color: #ff8c42; |
| 17 | + background: linear-gradient(135deg, #ff8c42, #ff7043); |
18 | 18 | color: white; |
19 | | - padding: 20px; |
| 19 | + padding: 40px 20px; |
20 | 20 | text-align: center; |
| 21 | + position: relative; |
21 | 22 | } |
22 | 23 |
|
23 | 24 | header img { |
|
26 | 27 | height: 150px; |
27 | 28 | object-fit: cover; |
28 | 29 | border: 5px solid white; |
| 30 | + position: absolute; |
| 31 | + left: 50%; |
| 32 | + transform: translate(-50%, 50%); |
29 | 33 | } |
30 | 34 |
|
31 | 35 | header h1 { |
32 | | - margin: 10px 0; |
| 36 | + margin: 100px 0 10px; |
| 37 | + font-size: 2.5em; |
33 | 38 | } |
34 | 39 |
|
35 | 40 | header p { |
36 | 41 | font-size: 1.2em; |
37 | | - margin: 5px 0; |
| 42 | + margin: 0; |
38 | 43 | } |
39 | 44 |
|
40 | 45 | main { |
41 | | - padding: 20px; |
| 46 | + padding: 60px 20px 20px; |
42 | 47 | } |
43 | 48 |
|
44 | 49 | section { |
45 | 50 | margin-bottom: 40px; |
46 | 51 | } |
47 | 52 |
|
48 | 53 | section h2 { |
49 | | - border-bottom: 3px solid #ff8c42; |
50 | | - padding-bottom: 5px; |
| 54 | + font-size: 1.8em; |
51 | 55 | margin-bottom: 20px; |
52 | 56 | color: #ff8c42; |
| 57 | + position: relative; |
| 58 | + } |
| 59 | + |
| 60 | + section h2::after { |
| 61 | + content: ''; |
| 62 | + display: block; |
| 63 | + width: 50px; |
| 64 | + height: 3px; |
| 65 | + background: #ff8c42; |
| 66 | + margin-top: 5px; |
53 | 67 | } |
54 | 68 |
|
55 | 69 | ul { |
|
59 | 73 |
|
60 | 74 | ul li { |
61 | 75 | margin-bottom: 10px; |
62 | | - padding: 10px; |
63 | | - background-color: #fff2e0; |
64 | | - border-left: 4px solid #ff8c42; |
| 76 | + padding: 15px; |
| 77 | + background-color: #fff; |
| 78 | + border-radius: 8px; |
| 79 | + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
| 80 | + transition: transform 0.3s ease, box-shadow 0.3s ease; |
| 81 | + } |
| 82 | + |
| 83 | + ul li:hover { |
| 84 | + transform: translateY(-5px); |
| 85 | + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); |
| 86 | + } |
| 87 | + |
| 88 | + ul li strong { |
| 89 | + color: #ff8c42; |
65 | 90 | } |
66 | 91 |
|
67 | 92 | footer { |
68 | 93 | text-align: center; |
69 | | - padding: 10px; |
| 94 | + padding: 20px; |
70 | 95 | background-color: #ff8c42; |
71 | 96 | color: white; |
72 | 97 | } |
| 98 | + |
| 99 | + a { |
| 100 | + color: #ff8c42; |
| 101 | + text-decoration: none; |
| 102 | + } |
| 103 | + |
| 104 | + a:hover { |
| 105 | + text-decoration: underline; |
| 106 | + } |
73 | 107 | </style> |
74 | 108 | </head> |
75 | 109 | <body> |
76 | 110 | <header> |
77 | | - <img src="IMG_0803 Medium.png" alt="Ramanjeet Singh"> |
| 111 | + <img src="assets/IMG_0803 Medium.png" alt="Ramanjeet Singh"> |
78 | 112 | <h1>Ramanjeet Singh</h1> |
79 | 113 | <p>Senior iOS Developer | Swift & Objective-C Expert</p> |
80 | 114 | </header> |
|
139 | 173 | </footer> |
140 | 174 | </body> |
141 | 175 | </html> |
142 | | - |
|
0 commit comments