Skip to content

Commit f219f21

Browse files
Master-ShubhMaster-Shubh
authored
Revamp index.html with new styles and layout
Updated styles and structure for improved layout and responsiveness.
1 parent 09427ac commit f219f21

1 file changed

Lines changed: 126 additions & 100 deletions

File tree

‎index.html‎

Lines changed: 126 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -16,76 +16,102 @@
1616
}
1717

1818
body{
19-
background:linear-gradient(135deg,#141E30,#243B55);
19+
background:#0f172a;
2020
color:white;
2121
}
2222

23-
/* ===== NAVBAR ===== */
23+
/* ===== Announcement Bar ===== */
24+
.announcement{
25+
background:#d4af37;
26+
color:black;
27+
text-align:center;
28+
padding:8px;
29+
font-size:14px;
30+
font-weight:600;
31+
}
32+
33+
/* ===== Navbar ===== */
2434
nav{
2535
display:flex;
2636
justify-content:space-between;
2737
align-items:center;
2838
padding:20px 60px;
29-
flex-wrap:wrap;
39+
position:sticky;
40+
top:0;
41+
background:#0f172a;
42+
z-index:1000;
3043
}
3144

3245
.logo{
3346
font-size:20px;
3447
font-weight:700;
3548
}
3649

37-
.nav-links{
38-
display:flex;
39-
gap:20px;
40-
}
41-
42-
nav a{
50+
.nav-links a{
4351
color:white;
4452
text-decoration:none;
53+
margin-left:25px;
4554
font-weight:500;
4655
transition:0.3s;
4756
}
4857

49-
nav a:hover{
58+
.nav-links a:hover{
5059
color:#d4af37;
5160
}
5261

53-
/* ===== HERO ===== */
62+
/* ===== Hero ===== */
5463
.hero{
5564
text-align:center;
56-
padding:60px 20px 40px;
65+
padding:80px 20px 60px;
5766
}
5867

5968
.hero h1{
60-
font-size:40px;
61-
margin-bottom:10px;
69+
font-size:48px;
70+
margin-bottom:15px;
6271
}
6372

6473
.hero p{
65-
opacity:0.8;
74+
opacity:0.7;
75+
margin-bottom:25px;
76+
}
77+
78+
.hero button{
79+
background:#d4af37;
80+
border:none;
81+
padding:12px 30px;
82+
font-weight:600;
83+
border-radius:30px;
84+
cursor:pointer;
85+
}
86+
87+
/* ===== Templates Section ===== */
88+
.templates{
89+
padding:60px 60px;
90+
}
91+
92+
.templates h2{
93+
text-align:center;
94+
margin-bottom:40px;
95+
font-size:28px;
6696
}
6797

68-
/* ===== TEMPLATE CARDS ===== */
6998
.container{
7099
display:grid;
71-
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
100+
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
72101
gap:30px;
73-
padding:40px 60px;
74102
}
75103

76104
.card{
77-
background:rgba(255,255,255,0.08);
78-
backdrop-filter:blur(12px);
105+
background:#1e293b;
79106
border-radius:15px;
80-
padding:30px;
107+
padding:25px;
81108
text-align:center;
82-
transition:0.4s;
83-
box-shadow:0 8px 25px rgba(0,0,0,0.3);
109+
transition:0.3s;
84110
}
85111

86112
.card:hover{
87-
transform:translateY(-8px);
88-
box-shadow:0 12px 30px rgba(0,0,0,0.4);
113+
transform:translateY(-6px);
114+
box-shadow:0 10px 30px rgba(0,0,0,0.4);
89115
}
90116

91117
.card img{
@@ -94,10 +120,8 @@
94120
border-radius:10px;
95121
}
96122

97-
98123
.card h3{
99124
margin-bottom:15px;
100-
font-size:18px;
101125
}
102126

103127
.card a{
@@ -108,124 +132,126 @@
108132
border-radius:25px;
109133
text-decoration:none;
110134
font-weight:600;
111-
transition:0.3s;
112135
}
113136

114-
.card a:hover{
115-
background:white;
137+
/* ===== Feature Section ===== */
138+
.features{
139+
padding:60px;
140+
background:#111827;
141+
text-align:center;
116142
}
117143

118-
/* ===== FOOTER ===== */
119-
footer{
120-
text-align:center;
121-
padding:20px;
122-
font-size:14px;
123-
opacity:0.7;
144+
.features h2{
145+
margin-bottom:40px;
146+
}
147+
148+
.feature-grid{
149+
display:grid;
150+
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
151+
gap:30px;
124152
}
125153

126-
/* ================= RESPONSIVE ================= */
154+
.feature-box{
155+
background:#1f2937;
156+
padding:25px;
157+
border-radius:10px;
158+
}
127159

128-
/* Tablet */
129-
@media(max-width:1024px){
130-
nav{
131-
padding:20px 30px;
132-
}
133-
.container{
134-
padding:30px;
135-
}
160+
/* ===== Footer ===== */
161+
footer{
162+
text-align:center;
163+
padding:30px;
164+
font-size:14px;
165+
opacity:0.6;
136166
}
137167

138-
/* Mobile */
168+
/* ===== Responsive ===== */
139169
@media(max-width:768px){
140-
141170
nav{
142-
flex-direction:column;
143-
gap:10px;
144171
padding:20px;
145172
}
146173

147-
.hero h1{
148-
font-size:28px;
149-
}
150-
151-
.container{
152-
padding:20px;
153-
gap:20px;
174+
.templates{
175+
padding:40px 20px;
154176
}
155177

156-
.card{
157-
padding:20px;
178+
.features{
179+
padding:40px 20px;
158180
}
159181

160-
.card img{
161-
height:120px;
162-
}
163-
}
164-
165-
/* Small Mobile */
166-
@media(max-width:480px){
167182
.hero h1{
168-
font-size:22px;
169-
}
170-
171-
.card h3{
172-
font-size:16px;
173-
}
174-
175-
.card a{
176-
padding:8px 16px;
177-
font-size:14px;
183+
font-size:32px;
178184
}
179185
}
180186
</style>
181187
</head>
182188

183189
<body>
184190

191+
<div class="announcement">
192+
🚀 Now Build Professional Biodata in Seconds
193+
</div>
194+
185195
<nav>
186196
<div class="logo">Mr. Shubh</div>
187197
<div class="nav-links">
188198
<a href="#">Home</a>
189-
<a href="#">Templates</a>
199+
<a href="#templates">Templates</a>
190200
<a href="#">Contact</a>
191201
</div>
192202
</nav>
193203

194204
<div class="hero">
195-
<h1>Biodata & Resume Builder</h1>
196-
<p>Select Your Professional Template</p>
205+
<h1>Create Stunning Biodata & Resume</h1>
206+
<p>Professional Templates • Instant PDF • 100% Free</p>
207+
<button onclick="document.getElementById('templates').scrollIntoView()">Get Started</button>
197208
</div>
198209

199-
<div class="container">
210+
<section class="templates" id="templates">
211+
<h2>Choose Your Template</h2>
200212

201-
<div class="card">
202-
<img src="assets/muslim-preview.jpg" alt="">
203-
<h3>Muslim Biodata</h3>
204-
<a href="templates/muslim-form.html">Use Template</a>
205-
</div>
213+
<div class="container">
206214

207-
<div class="card">
208-
<img src="assets/hindu-preview.jpg" alt="">
209-
<h3>Hindu Biodata</h3>
210-
<a href="templates/hindu-form.html">Use Template</a>
211-
</div>
215+
<div class="card">
216+
<img src="assets/muslim-preview.jpg">
217+
<h3>Muslim Biodata</h3>
218+
<a href="templates/muslim-form.html">Use Template</a>
219+
</div>
212220

213-
<div class="card">
214-
<img src="assets/christian-preview.jpg" alt="">
215-
<h3>Christian Biodata</h3>
216-
<a href="templates/christian-form.html">Use Template</a>
217-
</div>
221+
<div class="card">
222+
<img src="assets/hindu-preview.jpg">
223+
<h3>Hindu Biodata</h3>
224+
<a href="templates/hindu-form.html">Use Template</a>
225+
</div>
226+
227+
<div class="card">
228+
<img src="assets/christian-preview.jpg">
229+
<h3>Christian Biodata</h3>
230+
<a href="templates/christian-form.html">Use Template</a>
231+
</div>
232+
233+
<div class="card">
234+
<img src="assets/resume-preview.jpg">
235+
<h3>Single Page Resume</h3>
236+
<a href="templates/resume-form.html">Use Template</a>
237+
</div>
218238

219-
<div class="card">
220-
<img src="assets/resume-preview.jpg" alt="">
221-
<h3>Single Page Resume</h3>
222-
<a href="templates/resume-form.html">Use Template</a>
223239
</div>
240+
</section>
224241

225-
</div>
242+
<section class="features">
243+
<h2>Why Use Our Builder?</h2>
244+
245+
<div class="feature-grid">
246+
<div class="feature-box">⚡ Instant PDF Download</div>
247+
<div class="feature-box">📱 Mobile Friendly</div>
248+
<div class="feature-box">🎨 Professional Designs</div>
249+
<div class="feature-box">💯 100% Free to Use</div>
250+
</div>
251+
</section>
226252

227253
<footer>
228-
© 2026 Mr. Shubh | Biodata & Resume Builder
254+
© 2026 Mr. Shubh | Biodata & Resume Builder
229255
</footer>
230256

231257
</body>

0 commit comments

Comments
 (0)