Skip to content

Commit 0d567af

Browse files
TejalMudholkarTejalMudholkar
committed
Added changes for vintage style
1 parent 21ee220 commit 0d567af

File tree

1 file changed

+94
-59
lines changed

1 file changed

+94
-59
lines changed

‎index.html‎

Lines changed: 94 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -5,59 +5,67 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Rohan Doijode - Portfolio</title>
8-
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=EB+Garamond:wght@400;600&display=swap" rel="stylesheet">
99
<style>
10-
/* Global Styles */
10+
/* Vintage Global Styles */
1111
body {
1212
margin: 0;
13-
font-family: 'Open Sans', sans-serif;
14-
background-color: #f3f4f6;
15-
color: #333;
16-
line-height: 1.6;
13+
font-family: 'EB Garamond', serif;
14+
background: #f5ecd7 url('https://www.transparenttextures.com/patterns/old-mathematics.png');
15+
color: #3e2c1c;
16+
line-height: 1.7;
1717
transition: all 0.4s ease-in-out;
1818
}
1919

2020
a {
21-
text-decoration: none;
22-
color: inherit;
21+
text-decoration: underline;
22+
color: #7c4a03;
2323
transition: color 0.3s ease;
2424
}
2525

2626
a:hover {
27-
color: #0071e3;
27+
color: #b97a56;
2828
}
2929

3030
/* Header Styling */
3131
header {
32-
background-color: #000;
33-
color: #fff;
34-
padding: 20px 40px;
32+
background: linear-gradient(90deg, #e7d3b3 0%, #c9b18a 100%);
33+
color: #3e2c1c;
34+
padding: 24px 40px 18px 40px;
3535
text-align: center;
3636
position: fixed;
3737
width: 100%;
3838
top: 0;
3939
left: 0;
4040
z-index: 1000;
41-
transition: background-color 0.4s ease-in-out;
41+
border-bottom: 4px double #b97a56;
42+
box-shadow: 0 2px 10px rgba(120, 90, 40, 0.08);
43+
font-family: 'Special Elite', cursive;
44+
letter-spacing: 1.5px;
4245
}
4346

4447
header h1 {
4548
margin: 0;
46-
font-size: 2.5em;
47-
font-weight: 600;
48-
letter-spacing: 1px;
49+
font-size: 2.8em;
50+
font-weight: 400;
51+
letter-spacing: 2px;
52+
text-shadow: 1px 1px 0 #fffbe6, 2px 2px 0 #b97a56;
4953
}
5054

5155
header nav a {
52-
color: #fff;
56+
color: #7c4a03;
5357
text-transform: uppercase;
5458
font-weight: 600;
55-
margin: 0 20px;
56-
font-size: 0.9em;
59+
margin: 0 18px;
60+
font-size: 1em;
61+
font-family: 'Special Elite', cursive;
62+
border-bottom: 2px dotted transparent;
63+
padding-bottom: 2px;
5764
}
5865

5966
header nav a:hover {
60-
color: #0071e3;
67+
color: #b97a56;
68+
border-bottom: 2px dotted #b97a56;
6169
}
6270

6371
/* Smooth Scrolling */
@@ -67,79 +75,90 @@
6775

6876
/* Container Styles */
6977
.container {
70-
max-width: 1200px;
71-
margin: 100px auto;
72-
padding: 40px;
73-
background-color: #fff;
74-
border-radius: 12px;
75-
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
78+
max-width: 900px;
79+
margin: 120px auto 60px auto;
80+
padding: 36px 32px;
81+
background: #fffbe6;
82+
border-radius: 14px;
83+
border: 2px solid #c9b18a;
84+
box-shadow: 0 0 40px rgba(120, 90, 40, 0.10);
7685
transition: box-shadow 0.4s ease-in-out;
86+
font-family: 'EB Garamond', serif;
7787
}
7888

7989
.container:hover {
80-
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
90+
box-shadow: 0 0 60px rgba(120, 90, 40, 0.18);
8191
}
8292

8393
section {
84-
margin-bottom: 60px;
94+
margin-bottom: 54px;
8595
opacity: 0;
8696
transform: translateY(30px);
8797
animation: fadeInUp 1s ease forwards;
8898
}
8999

90100
.section-title {
91-
font-size: 3em;
92-
margin-bottom: 30px;
93-
color: #000;
94-
border-bottom: 2px solid #0071e3;
95-
padding-bottom: 10px;
101+
font-size: 2.3em;
102+
margin-bottom: 24px;
103+
color: #7c4a03;
104+
border-bottom: 2px dashed #b97a56;
105+
padding-bottom: 8px;
96106
font-weight: 600;
107+
font-family: 'Special Elite', cursive;
108+
letter-spacing: 1px;
109+
background: linear-gradient(90deg, #f5ecd7 60%, #e7d3b3 100%);
110+
box-shadow: 0 1px 0 #fffbe6;
97111
}
98112

99113
.content {
100-
padding: 0 20px;
101-
color: #666;
114+
padding: 0 12px;
115+
color: #4d3b23;
116+
font-size: 1.13em;
102117
}
103118

104119
.portfolio-item h3 {
105-
font-size: 2em;
106-
color: #0071e3;
107-
margin-bottom: 15px;
120+
font-size: 1.5em;
121+
color: #b97a56;
122+
margin-bottom: 12px;
123+
font-family: 'Special Elite', cursive;
124+
letter-spacing: 1px;
108125
}
109126

110127
.portfolio-item p {
111-
margin-top: 15px;
112-
color: #444;
113-
font-size: 1.1em;
128+
margin-top: 12px;
129+
color: #3e2c1c;
130+
font-size: 1.07em;
114131
}
115132

116133
/* Blog Section */
117134
.blog-entry h3 {
118-
font-size: 2em;
119-
color: #0071e3;
120-
margin-bottom: 15px;
135+
font-size: 1.4em;
136+
color: #b97a56;
137+
margin-bottom: 10px;
138+
font-family: 'Special Elite', cursive;
121139
}
122140

123141
.blog-entry p {
124-
margin-bottom: 10px;
142+
margin-bottom: 8px;
125143
}
126144

127145
.blog-entry a {
128-
font-size: 1.2em;
129-
color: #0071e3;
130-
text-decoration: none;
146+
font-size: 1.1em;
147+
color: #7c4a03;
148+
text-decoration: underline;
131149
font-weight: bold;
132150
position: relative;
151+
font-family: 'EB Garamond', serif;
133152
}
134153

135154
.blog-entry a::after {
136155
content: '';
137156
position: absolute;
138-
bottom: -5px;
157+
bottom: -3px;
139158
left: 0;
140159
width: 0;
141-
height: 2px;
142-
background-color: #0071e3;
160+
height: 1.5px;
161+
background-color: #b97a56;
143162
transition: width 0.3s ease;
144163
}
145164

@@ -149,24 +168,30 @@
149168

150169
/* Contact Section */
151170
.contact-info {
152-
font-size: 1.1em;
153-
color: #444;
154-
margin-bottom: 30px;
171+
font-size: 1.08em;
172+
color: #4d3b23;
173+
margin-bottom: 24px;
174+
font-family: 'EB Garamond', serif;
155175
}
156176

157177
footer {
158178
text-align: center;
159-
padding: 40px;
160-
background-color: #f1f1f1;
161-
color: #666;
162-
font-size: 0.9em;
179+
padding: 32px;
180+
background: #e7d3b3;
181+
color: #7c4a03;
182+
font-size: 1em;
183+
border-top: 2px double #b97a56;
184+
font-family: 'Special Elite', cursive;
185+
letter-spacing: 1px;
163186
}
164187

165188
footer a {
166-
color: #0071e3;
189+
color: #7c4a03;
190+
text-decoration: underline;
167191
}
168192

169193
footer a:hover {
194+
color: #b97a56;
170195
text-decoration: underline;
171196
}
172197

@@ -182,6 +207,16 @@
182207
transform: translateY(0);
183208
}
184209
}
210+
211+
/* Vintage List Styles */
212+
ul {
213+
list-style-type: square;
214+
padding-left: 22px;
215+
}
216+
217+
li {
218+
margin-bottom: 6px;
219+
}
185220
</style>
186221
</head>
187222

0 commit comments

Comments
 (0)