-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
374 lines (363 loc) · 19.4 KB
/
index.html
File metadata and controls
374 lines (363 loc) · 19.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Affordable tech recommendations for Indian students. Find budget laptops, headphones, study apps, and gadgets that won't break the bank.">
<meta name="keywords" content="affordable tech, budget laptops, Indian students, cheap gadgets, study apps, budget headphones">
<meta name="author" content="TechBudget India">
<meta property="og:title" content="TechBudget India - Affordable Tech for Students">
<meta property="og:description" content="Helping Indian students find the best budget tech solutions for their studies">
<meta property="og:type" content="website">
<meta property="og:url" content="https://techbudgetindia.com/">
<meta property="og:image" content="https://via.placeholder.com/600x400ini/1a1a1a/00ffff?text=Budget+Tech+for+Students">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="TechBudget India - Affordable Tech for Students">
<meta name="twitter:description" content="Helping Indian students find the best budget tech solutions for their studies">
<meta name="twitter:image" content="https://via.placeholder.com/600x400/1a1a1a/00ffff?text=Budget+Tech+for+Students">
<link rel="canonical" href="https://techbudgetindia.com/">
<link rel="icon" type="image/png" href="Favicon.png">
<title>TechBudget India - Affordable Tech for Students</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Navigation Header -->
<header class="header">
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<h2><i class="fas fa-laptop-code"></i> TechBudget India</h2>
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#categories" class="nav-link">Categories</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link">Contact</a>
</li>
</ul>
<div class="nav-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-container">
<div class="hero-content">
<h1 class="hero-title">Helping Indian Students Find the Best Budget Tech</h1>
<p class="hero-subtitle">Discover affordable laptops, headphones, study apps, and gadgets that fit your student budget without compromising on quality.</p>
<div class="hero-buttons">
<a href="#featured-posts" class="btn btn-primary">Explore Reviews</a>
<a href="#categories" class="btn btn-secondary">Browse Categories</a>
</div>
</div>
<div class="hero-image">
<img src="https://via.placeholder.com/600x400/1a1a1a/00ffff?text=Budget+Tech+for+Students" alt="Affordable tech for Indian students">
</div>
</div>
</section>
<!-- Featured Posts Section -->
<section id="featured-posts" class="featured-posts">
<div class="container">
<h2 class="section-title">Latest Tech Reviews & Guides</h2>
<div class="posts-grid">
<!-- Post Card 1 -->
<article class="post-card">
<div class="post-image">
<img src="https://via.placeholder.com/400x250/2a2a2a/00ffff?text=Budget+Laptops+2025" alt="Best budget laptops for Indian students 2025">
</div>
<div class="post-content">
<div class="post-category">Laptops</div>
<h3 class="post-title">Top 5 Budget Laptops Under ₹40,000 for Indian Students in 2025</h3>
<p class="post-summary">Comprehensive review of the best affordable laptops that deliver excellent performance for studies, coding, and entertainment without breaking the bank.</p>
<div class="post-meta">
<span class="post-date"><i class="fas fa-calendar"></i> January 15, 2025</span>
<span class="post-read-time"><i class="fas fa-clock"></i> 8 min read</span>
</div>
<a href="post1.html" class="btn btn-outline">Read More</a>
</div>
</article>
<!-- Post Card 2 -->
<article class="post-card">
<div class="post-image">
<img src="https://via.placeholder.com/400x250/2a2a2a/ff6b6b?text=Budget+Headphones" alt="Best budget headphones for students">
</div>
<div class="post-content">
<div class="post-category">Audio</div>
<h3 class="post-title">Best Budget Headphones Under ₹3,000 for Online Classes</h3>
<p class="post-summary">Crystal clear audio for your online lectures and study sessions. We've tested the most affordable headphones that deliver premium sound quality.</p>
<div class="post-meta">
<span class="post-date"><i class="fas fa-calendar"></i> January 12, 2025</span>
<span class="post-read-time"><i class="fas fa-clock"></i> 6 min read</span>
</div>
<a href="post2.html" class="btn btn-outline">Read More</a>
</div>
</article>
<!-- Post Card 3 -->
<article class="post-card">
<div class="post-image">
<img src="https://via.placeholder.com/400x250/2a2a2a/4ecdc4?text=Study+Apps" alt="Best study apps for Indian students">
</div>
<div class="post-content">
<div class="post-category">Apps</div>
<h3 class="post-title">10 Free Study Apps Every Indian Student Should Download</h3>
<p class="post-summary">Boost your productivity and academic performance with these carefully selected free apps designed specifically for Indian students.</p>
<div class="post-meta">
<span class="post-date"><i class="fas fa-calendar"></i> January 10, 2025</span>
<span class="post-read-time"><i class="fas fa-clock"></i> 5 min read</span>
</div>
<a href="post3.html" class="btn btn-outline">Read More</a>
</div>
</article>
<!-- Post Card 4 -->
<article class="post-card">
<div class="post-image">
<img src="https://via.placeholder.com/400x250/2a2a2a/95e1d3?text=Tech+Accessories" alt="Budget tech accessories for students">
</div>
<div class="post-content">
<div class="post-category">Accessories</div>
<h3 class="post-title">Essential Tech Accessories Under ₹2,000 for Every Student</h3>
<p class="post-summary">From portable chargers to laptop stands, discover the must-have tech accessories that enhance your study experience without costing a fortune.</p>
<div class="post-meta">
<span class="post-date"><i class="fas fa-calendar"></i> January 8, 2025</span>
<span class="post-read-time"><i class="fas fa-clock"></i> 7 min read</span>
</div>
<a href="#" class="btn btn-outline">Read More</a>
</div>
</article>
</div>
</div>
</section>
<!-- Categories Section -->
<section id="categories" class="categories">
<div class="container">
<h2 class="section-title">Browse by Category</h2>
<div class="categories-grid">
<a href="laptops.html" class="category-card">
<div class="category-icon">
<i class="fas fa-laptop"></i>
</div>
<h3>Laptops</h3>
<p>Budget-friendly laptops perfect for studies and coding</p>
</a>
<a href="audio.html" class="category-card">
<div class="category-icon">
<i class="fas fa-headphones"></i>
</div>
<h3>Audio</h3>
<p>Affordable headphones and speakers for clear sound</p>
</a>
<a href="smartphones.html" class="category-card">
<div class="category-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<h3>Smartphones</h3>
<p>Budget smartphones with excellent features</p>
</a>
<a href="tablets.html" class="category-card">
<div class="category-icon">
<i class="fas fa-tablet-alt"></i>
</div>
<h3>Tablets</h3>
<p>Affordable tablets for note-taking and reading</p>
</a>
<a href="accessories.html" class="category-card">
<div class="category-icon">
<i class="fas fa-mouse"></i>
</div>
<h3>Accessories</h3>
<p>Essential tech accessories on a budget</p>
</a>
<a href="apps.html" class="category-card">
<div class="category-icon">
<i class="fas fa-graduation-cap"></i>
</div>
<h3>Study Apps</h3>
<p>Free and affordable apps to boost productivity</p>
</a>
</div>
</div>
</section>
<!-- Sidebar Ads Placeholder -->
<aside class="sidebar-ads">
<div class="ad-placeholder">
<p><i class="fas fa-ad"></i> Advertisement Space</p>
<small>Affiliate Links & Sponsored Content</small>
</div>
</aside>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<div class="about-content">
<h2 class="section-title">About TechBudget India</h2>
<p>We understand the challenges Indian students face when trying to find quality tech products within their budget. Our mission is to provide honest, detailed reviews and recommendations for affordable technology that enhances your learning experience.</p>
<div class="about-stats">
<div class="stat">
<h3>500+</h3>
<p>Products Reviewed</p>
</div>
<div class="stat">
<h3>50K+</h3>
<p>Students Helped</p>
</div>
<div class="stat">
<h3>₹40K</h3>
<p>Average Savings</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">Get In Touch</h2>
<div class="contact-content">
<div class="contact-info">
<h3>Have a Question?</h3>
<p>We'd love to hear from you! Reach out for product recommendations, reviews, or collaboration opportunities.</p>
<div class="contact-methods">
<div class="contact-method">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-method">
<i class="fas fa-phone"></i>
<span>+91 98765 43210</span>
</div>
<div class="contact-method">
<i class="fas fa-map-marker-alt"></i>
<span>Mumbai, Maharashtra, India</span>
</div>
</div>
</div>
<form class="contact-form" id="contactForm" action="contact-process.php" method="post">
<div class="form-group">
<label for="name">Your Name *</label>
<input type="text" id="name" name="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="email">Your Email *</label>
<input type="email" id="email" name="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" placeholder="Phone Number">
</div>
<div class="form-group">
<label for="subject">Subject *</label>
<select id="subject" name="subject" required>
<option value="">Choose a topic</option>
<option value="recommendation">Product Recommendation</option>
<option value="review">Request a Review</option>
<option value="partnership">Partnership Inquiry</option>
<option value="feedback">Feedback</option>
<option value="support">Technical Support</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="budget">Budget</label>
<select id="budget" name="budget">
<option value="">Select budget range</option>
<option value="under-10k">Under ₹10,000</option>
<option value="10k-25k">₹10,000 - ₹25,000</option>
<option value="25k-50k">₹25,000 - ₹50,000</option>
<option value="50k-100k">₹50,000 - ₹1,00,000</option>
<option value="above-100k">Above ₹1,00,000</option>
</select>
</div>
<div class="form-group">
<label for="message">Your Message *</label>
<textarea id="message" name="message" placeholder="Your Message" rows="5" required></textarea>
</div>
<div class="form-group">
<label class="checkbox-label" for="newsletter">
<input type="checkbox" id="newsletter" name="newsletter">
<span class="checkmark"></span>
Subscribe to our newsletter for weekly tech deals and reviews
</label>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
<div id="formSuccess" style="display:none;color:green;margin-top:10px;">
Thank you for contacting us! We will get back to you soon.
</div>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3><i class="fas fa-laptop-code"></i> TechBudget India</h3>
<p>Your trusted source for affordable tech recommendations designed specifically for Indian students.</p>
<div class="social-links">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#categories">Categories</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Categories</h4>
<ul>
<li><a href="#">Laptops</a></li>
<li><a href="#">Headphones</a></li>
<li><a href="#">Smartphones</a></li>
<li><a href="#">Study Apps</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Newsletter</h4>
<p>Get weekly updates on the latest budget tech deals</p>
<form class="newsletter-form">
<input type="email" placeholder="Enter your email">
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
<div class="footer-bottom">
<div class="footer-ads">
<div class="ad-placeholder">
<p><i class="fas fa-ad"></i> Footer Advertisement Space</p>
<small>Partner Links & Sponsored Content</small>
</div>
</div>
<p>© 2025 TechBudget India. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
</div>
</div>
</footer>
<script src="script.js"></script>
<!-- Removed or commented out this script if I want PHP to handle the form -->
<script>
// document.getElementById('contactForm').addEventListener('submit', function(e) {
// e.preventDefault();
// document.getElementById('formSuccess').style.display = 'block';
// this.reset();
// });
</script>
</body>
</html>