Skip to content

Commit 43ad7c3

Browse files
namitha2526namitha2526
authored
Refactor index.html for improved layout and content
Updated the HTML structure and content for the RoadmapHub application, including the navbar, hero section, and submit modal.
1 parent d5d9a9c commit 43ad7c3

File tree

1 file changed

+134
-36
lines changed

1 file changed

+134
-36
lines changed

‎frontend/index.html‎

Lines changed: 134 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,141 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<title>Student Roadmap App</title>
5-
<link rel="stylesheet" href="style.css">
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<title>RoadmapHub – Student Tech Roadmaps</title>
8+
9+
<link rel="stylesheet" href="style.css">
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12+
613
</head>
14+
715
<body>
816

9-
<!-- Navbar -->
10-
<div class="navbar">
11-
<h2>🎓 RoadmapHub</h2>
12-
<div>
13-
<a href="#">Home</a>
14-
<a href="#">Roadmaps</a>
15-
<a href="#">About</a>
16-
</div>
17-
</div>
18-
19-
<!-- Hero Section -->
20-
<div class="hero">
21-
<h1>Find Your Tech Roadmap</h1>
22-
<p>Learn from students who already achieved what you're aiming for.</p>
23-
<button onclick="callBackend()">Load Roadmaps</button>
24-
</div>
25-
26-
<!-- Roadmaps Section -->
27-
<div class="section">
28-
<h2>📌 Featured Roadmaps</h2>
29-
<div id="roadmap-container" class="cards"></div>
30-
</div>
31-
32-
<!-- Submit Section -->
33-
<div class="section">
34-
<h2>✍️ Submit a Roadmap</h2>
35-
<input type="text" id="name" placeholder="Your name">
36-
<input type="text" id="title" placeholder="Roadmap title">
37-
<textarea id="description" placeholder="Describe your roadmap..."></textarea>
38-
<button onclick="addRoadmap()">Submit</button>
39-
</div>
40-
41-
<script src="script.js"></script>
17+
<!-- NAVBAR -->
18+
<header class="navbar">
19+
20+
<div class="logo">
21+
🚀 RoadmapHub
22+
</div>
23+
24+
<nav>
25+
<a href="#">Home</a>
26+
<a href="#">Explore</a>
27+
<a href="#">Community</a>
28+
<a href="#">About</a>
29+
</nav>
30+
31+
<div class="nav-actions">
32+
<button class="login">Login</button>
33+
<button class="submit-btn" onclick="openModal()">Submit Roadmap</button>
34+
</div>
35+
36+
</header>
37+
38+
<!-- HERO SECTION -->
39+
40+
<section class="hero">
41+
42+
<div class="hero-content">
43+
44+
<h1>Discover the Best Tech Learning Roadmaps</h1>
45+
46+
<p>
47+
Explore curated learning paths created by students and professionals
48+
to master skills like AI, Full-Stack Development, DevOps, and Data Science.
49+
</p>
50+
51+
<div class="hero-actions">
52+
<button class="primary" onclick="callBackend()">Explore Roadmaps</button>
53+
<button class="secondary">How it Works</button>
54+
</div>
55+
56+
</div>
57+
58+
</section>
59+
60+
<!-- SEARCH SECTION -->
61+
62+
<section class="search-section">
63+
64+
<input type="text" placeholder="Search roadmaps (AI, DevOps, Web, ML...)">
65+
66+
<select>
67+
<option>All Categories</option>
68+
<option>AI / ML</option>
69+
<option>Web Development</option>
70+
<option>DevOps</option>
71+
<option>Data Science</option>
72+
<option>Cybersecurity</option>
73+
</select>
74+
75+
<button>Search</button>
76+
77+
</section>
78+
79+
<!-- ROADMAPS -->
80+
81+
<section class="roadmaps">
82+
83+
<h2>🔥 Featured Roadmaps</h2>
84+
85+
<div id="roadmap-container" class="roadmap-grid">
86+
87+
<!-- Dynamic cards inserted here -->
88+
89+
</div>
90+
91+
</section>
92+
93+
<!-- SUBMIT MODAL -->
94+
95+
<div id="modal" class="modal">
96+
97+
<div class="modal-content">
98+
99+
<span class="close" onclick="closeModal()">×</span>
100+
101+
<h2>Submit Your Roadmap</h2>
102+
103+
<input type="text" id="name" placeholder="Your Name">
104+
105+
<input type="text" id="title" placeholder="Roadmap Title">
106+
107+
<select id="category">
108+
<option>Select Category</option>
109+
<option>AI / ML</option>
110+
<option>Web Development</option>
111+
<option>DevOps</option>
112+
<option>Data Science</option>
113+
<option>Cybersecurity</option>
114+
</select>
115+
116+
<textarea id="description" placeholder="Describe your roadmap"></textarea>
117+
118+
<button onclick="addRoadmap()">Submit Roadmap</button>
119+
120+
</div>
121+
122+
</div>
123+
124+
<!-- FOOTER -->
125+
126+
<footer>
127+
128+
<p>© 2026 RoadmapHub — Built for students by students</p>
129+
130+
<div class="footer-links">
131+
<a href="#">Privacy</a>
132+
<a href="#">Terms</a>
133+
<a href="#">Contact</a>
134+
</div>
135+
136+
</footer>
137+
138+
<script src="script.js"></script>
139+
42140
</body>
43141
</html>

0 commit comments

Comments
 (0)