-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
148 lines (138 loc) · 6.64 KB
/
index.html
File metadata and controls
148 lines (138 loc) · 6.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechHub | Home</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- Header -->
<header>
<div class="container header-container">
<a href="index.html" class="logo">
<i class="fas fa-microchip"></i>
TechHub
</a>
<button class="mobile-menu-btn" id="menuToggle">
<i class="fas fa-bars"></i>
</button>
<nav>
<ul id="navMenu">
<li><a href="index.html" class="nav-link active">Home</a></li>
<li><a href="news.html" class="nav-link">Tech News</a></li>
<li><a href="reviews.html" class="nav-link">Reviews</a></li>
<li><a href="tutorials.html" class="nav-link">Tutorials</a></li>
<li><a href="contact.html" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Content -->
<main>
<div class="hero">
<div class="container">
<h1>Welcome to the Future of Technology</h1>
<p>Discover the latest innovations, reviews, and tutorials to stay ahead in the rapidly evolving tech world.</p>
<a href="news.html" class="btn">Explore Tech News</a>
</div>
</div>
<div class="container">
<h2 class="section-title">Featured Articles</h2>
<div class="card-grid">
<div class="card">
<div style="background: #4f46e5; height: 200px; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
<i class="fas fa-robot"></i>
</div>
<div class="card-content">
<h3>AI Revolution in 2024</h3>
<p>How artificial intelligence is transforming industries and what it means for the future of work.</p>
<div class="card-meta">
<span><i class="far fa-calendar"></i> May 15, 2024</span>
<span><i class="far fa-user"></i> Alex Johnson</span>
</div>
</div>
</div>
<div class="card">
<div style="background: #0ea5e9; height: 200px; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
<i class="fas fa-laptop-code"></i>
</div>
<div class="card-content">
<h3>Quantum Computing Breakthrough</h3>
<p>Scientists achieve quantum supremacy with new 128-qubit processor that could revolutionize computing.</p>
<div class="card-meta">
<span><i class="far fa-calendar"></i> May 10, 2024</span>
<span><i class="far fa-user"></i> Sarah Chen</span>
</div>
</div>
</div>
<div class="card">
<div style="background: #8b5cf6; height: 200px; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="card-content">
<h3>Foldable Phones Comparison</h3>
<p>We compare the latest foldable devices from Samsung, Google, and Huawei to find the best value.</p>
<div class="card-meta">
<span><i class="far fa-calendar"></i> May 5, 2024</span>
<span><i class="far fa-user"></i> Michael Rodriguez</span>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<h3>TechHub</h3>
<p>Your trusted source for the latest technology news, reviews, and tutorials.</p>
<div class="social-links">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="index.html">Home</a></li>
<li><a href="news.html">Tech News</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Categories</h3>
<ul class="footer-links">
<li><a href="#">Artificial Intelligence</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Hardware</a></li>
<li><a href="#">Gadgets</a></li>
<li><a href="#">Cybersecurity</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Newsletter</h3>
<p>Subscribe to our newsletter for the latest tech updates.</p>
<form style="margin-top: 1rem;">
<div class="form-group">
<input type="email" class="form-control" placeholder="Your email address" required>
</div>
<button type="submit" class="btn" style="width: 100%;">Subscribe</button>
</form>
</div>
</div>
<div class="copyright">
<p>© 2024 TechHub. All rights reserved.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>