|
23 | 23 | } |
24 | 24 |
|
25 | 25 | header { |
26 | | - background-color: rgba(0, 0, 0, 0.6); |
| 26 | + background-color: rgba(0, 0, 0, 0.7); |
27 | 27 | color: white; |
28 | | - text-align: center; |
29 | | - padding: 50px 20px; |
30 | | - box-shadow: 0 4px 10px rgba(0,0,0,0.1); |
| 28 | + padding: 40px 20px; |
| 29 | + box-shadow: 0 4px 20px rgba(0,0,0,0.3); |
| 30 | + } |
| 31 | + |
| 32 | + .header-flex { |
| 33 | + display: flex; |
| 34 | + align-items: center; |
| 35 | + justify-content: space-between; |
| 36 | + flex-wrap: wrap; |
| 37 | + max-width: 1000px; |
| 38 | + margin: auto; |
| 39 | + } |
| 40 | + |
| 41 | + .header-left { |
| 42 | + flex: 1; |
| 43 | + min-width: 250px; |
31 | 44 | } |
32 | 45 |
|
33 | | - header h1 { |
| 46 | + .header-left h1 { |
| 47 | + font-size: 34px; |
34 | 48 | margin-bottom: 10px; |
35 | | - font-size: 32px; |
| 49 | + } |
| 50 | + |
| 51 | + .header-left p { |
| 52 | + font-size: 18px; |
| 53 | + } |
| 54 | + |
| 55 | + .header-right { |
| 56 | + flex: 1; |
| 57 | + min-width: 200px; |
| 58 | + text-align: right; |
| 59 | + } |
| 60 | + |
| 61 | + .header-right img { |
| 62 | + width: 150px; |
| 63 | + height: 150px; |
| 64 | + border-radius: 50%; |
| 65 | + border: 4px solid white; |
| 66 | + box-shadow: 0 4px 12px rgba(0,0,0,0.4); |
| 67 | + object-fit: cover; |
36 | 68 | } |
37 | 69 |
|
38 | 70 | .container { |
|
42 | 74 | } |
43 | 75 |
|
44 | 76 | h2 { |
45 | | - border-bottom: 2px solid #ccc; |
46 | | - padding-bottom: 5px; |
| 77 | + border-bottom: 2px solid #fff; |
| 78 | + padding-bottom: 6px; |
47 | 79 | color: #fff; |
| 80 | + font-size: 24px; |
48 | 81 | } |
49 | 82 |
|
50 | 83 | a { |
51 | 84 | color: #ffffff; |
52 | 85 | text-decoration: none; |
53 | 86 | font-weight: bold; |
| 87 | + transition: color 0.3s ease; |
54 | 88 | } |
55 | 89 |
|
56 | 90 | a:hover { |
| 91 | + color: #ffee58; |
57 | 92 | text-decoration: underline; |
58 | 93 | } |
59 | 94 |
|
60 | 95 | ul { |
61 | 96 | color: white; |
| 97 | + padding-left: 20px; |
62 | 98 | } |
63 | 99 |
|
64 | 100 | .project-card { |
65 | | - background: #ffffff; |
66 | | - border-radius: 12px; |
67 | | - box-shadow: 0 4px 12px rgba(0,0,0,0.2); |
| 101 | + background: rgba(255, 255, 255, 0.95); |
| 102 | + border-radius: 14px; |
| 103 | + box-shadow: 0 8px 16px rgba(0,0,0,0.2); |
68 | 104 | margin-bottom: 40px; |
69 | | - padding: 20px; |
70 | | - transition: transform 0.3s ease; |
| 105 | + padding: 24px; |
| 106 | + transition: all 0.4s ease; |
71 | 107 | } |
72 | 108 |
|
73 | 109 | .project-card:hover { |
74 | | - transform: translateY(-5px); |
| 110 | + transform: translateY(-6px); |
| 111 | + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); |
75 | 112 | } |
76 | 113 |
|
77 | 114 | .project-card img { |
|
99 | 136 | max-height: 300px; |
100 | 137 | object-fit: contain; |
101 | 138 | border-radius: 8px; |
| 139 | + box-shadow: 0 4px 10px rgba(0,0,0,0.1); |
102 | 140 | } |
103 | 141 |
|
104 | 142 | footer { |
105 | | - background-color: rgba(0, 0, 0, 0.5); |
| 143 | + background-color: rgba(0, 0, 0, 0.6); |
106 | 144 | color: #eee; |
107 | 145 | text-align: center; |
108 | 146 | padding: 20px; |
109 | | - margin-top: 40px; |
| 147 | + font-size: 14px; |
110 | 148 | } |
111 | 149 | </style> |
112 | 150 | </head> |
113 | 151 | <body> |
114 | 152 |
|
115 | 153 | <header> |
116 | | - <h1>👋 Hello, I'm Nirav Trivedi</h1> |
117 | | - <p>Data Analyst | Python | Power BI | Excel | SQL</p> |
| 154 | + <div class="header-flex"> |
| 155 | + <div class="header-left"> |
| 156 | + <h1>👋 Hello, I'm Nirav Trivedi</h1> |
| 157 | + <p>🎯 Data Analyst | 📊 Python • Power BI • Excel • SQL</p> |
| 158 | + </div> |
| 159 | + <div class="header-right"> |
| 160 | + <img src="https://raw.githubusercontent.com/niravtrivedi23/niravtrivedi23.github.io/main/Profile.jpg" alt="Nirav Trivedi"> |
| 161 | + </div> |
| 162 | + </div> |
118 | 163 | </header> |
119 | 164 |
|
120 | 165 | <div class="container"> |
|
0 commit comments