Skip to content

Commit 4b88476

Browse files
Shagun1204Shagun1204
committed
updated three pages
1 parent 3f9719c commit 4b88476

3 files changed

Lines changed: 112 additions & 107 deletions

File tree

‎contact.html‎

Lines changed: 49 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,66 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Newbie | Contact Us</title>
6+
<title>Newbie | Contact</title>
77
<script src="https://cdn.tailwindcss.com"></script>
8-
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
8+
<script>
9+
tailwind.config = {
10+
theme: {
11+
extend: {
12+
colors: {
13+
teal: {
14+
400: '#38b2ac',
15+
}
16+
}
17+
}
18+
}
19+
}
20+
</script>
21+
<script src="https://unpkg.com/@phosphor-icons/web"></script>
922
</head>
10-
<body class="bg-gray-100 text-gray-800 flex flex-col min-h-screen">
23+
<body class="bg-gray-50 text-gray-800">
1124

1225
<!-- Navbar -->
13-
<header class="bg-white shadow">
14-
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
15-
<h1 class="text-2xl font-bold text-teal-600">Newbie</h1>
16-
<nav>
17-
<ul class="flex space-x-6 font-medium">
18-
<li><a href="index.html" class="hover:text-teal-500">Home</a></li>
19-
<li><a href="courses.html" class="hover:text-teal-500">Courses</a></li>
20-
<li><a href="profile.html" class="hover:text-teal-500">Profile</a></li>
21-
<li><a href="contact.html" class="hover:text-teal-500">Contact</a></li>
22-
</ul>
26+
<header class="bg-gray-900 text-white">
27+
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center relative">
28+
<h1 class="text-2xl font-bold">Newbie</h1>
29+
30+
<!-- Hamburger Icon -->
31+
<input type="checkbox" id="menu-toggle" class="hidden peer" />
32+
<label for="menu-toggle" class="md:hidden text-3xl cursor-pointer">&#9776;</label>
33+
34+
<!-- Navigation Links -->
35+
<nav class="hidden peer-checked:flex flex-col absolute top-16 left-0 w-full bg-gray-800 md:flex md:flex-row md:static md:bg-transparent md:space-x-6">
36+
<a href="index.html" class="block px-6 py-2 hover:text-teal-400">Home</a>
37+
<a href="courses.html" class="block px-6 py-2 hover:text-teal-400">Courses</a>
38+
<a href="profile.html" class="block px-6 py-2 hover:text-teal-400">Profile</a>
39+
<a href="contact.html" class="block px-6 py-2 hover:text-teal-400">Contact</a>
2340
</nav>
2441
</div>
2542
</header>
2643

27-
<!-- Contact Form -->
28-
<main class="flex-grow">
29-
<section class="max-w-xl mx-auto py-16 px-4">
30-
<h2 class="text-3xl font-bold text-center mb-8">Get in Touch</h2>
31-
<form class="bg-white p-6 rounded-lg shadow-md space-y-4">
32-
<input type="text" placeholder="Your Name" class="w-full p-3 border rounded bg-gray-50" required />
33-
<input type="email" placeholder="Your Email" class="w-full p-3 border rounded bg-gray-50" required />
34-
<textarea rows="5" placeholder="Your Message" class="w-full p-3 border rounded bg-gray-50" required></textarea>
35-
<button type="submit" class="bg-teal-500 hover:bg-teal-600 text-white px-6 py-2 rounded">Send Message</button>
36-
</form>
44+
<!-- Contact Section -->
45+
<section class="py-10 px-6 max-w-3xl mx-auto">
46+
<h2 class="text-3xl font-bold mb-6 text-center">Contact Us</h2>
47+
<form class="bg-white shadow rounded p-6 space-y-4">
48+
<input type="text" placeholder="Your Name" class="w-full border border-gray-300 rounded px-4 py-2" />
49+
<input type="email" placeholder="Your Email" class="w-full border border-gray-300 rounded px-4 py-2" />
50+
<textarea placeholder="Your Message" rows="4" class="w-full border border-gray-300 rounded px-4 py-2"></textarea>
51+
<button type="submit" class="bg-teal-400 text-white px-6 py-2 rounded hover:bg-teal-500">Send</button>
52+
</form>
3753

38-
<!-- Social Media Icons -->
39-
<div class="mt-10 flex justify-center space-x-6 text-2xl text-teal-600">
40-
<a href="#" title="Discord"><i class="fab fa-discord hover:text-teal-400"></i></a>
41-
<a href="#" title="GitHub"><i class="fab fa-github hover:text-teal-400"></i></a>
42-
<a href="#" title="LinkedIn"><i class="fab fa-linkedin hover:text-teal-400"></i></a>
43-
<a href="#" title="Twitter"><i class="fab fa-twitter hover:text-teal-400"></i></a>
44-
</div>
45-
</section>
46-
</main>
54+
<!-- Social Icons -->
55+
<div class="flex justify-center gap-6 mt-6 text-gray-700 text-2xl">
56+
<a href="#" class="hover:text-teal-400"><i class="ph ph-instagram-logo"></i></a>
57+
<a href="#" class="hover:text-teal-400"><i class="ph ph-twitter-logo"></i></a>
58+
<a href="#" class="hover:text-teal-400"><i class="ph ph-github-logo"></i></a>
59+
<a href="#" class="hover:text-teal-400"><i class="ph ph-discord-logo"></i></a>
60+
</div>
61+
</section>
4762

4863
<!-- Footer -->
49-
<footer class="bg-white text-center py-6 border-t border-gray-200 mt-auto">
50-
<p class="text-gray-600">&copy; 2025 Newbie. Let’s Connect and Code.</p>
64+
<footer class="bg-gray-900 text-white text-center py-4 mt-10">
65+
<p>&copy; 2025 Newbie. Keep Learning.</p>
5166
</footer>
5267

5368
</body>

‎courses.html‎

Lines changed: 19 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5+
<title>Newbie | Courses</title>
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Newbie | Courses</title>
77
<script src="https://cdn.tailwindcss.com"></script>
88
</head>
99
<body class="bg-gray-50 text-gray-800">
1010

1111
<!-- Navbar -->
1212
<header class="bg-gray-900 text-white">
13-
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
13+
<div class="max-w-7xl mx-auto px-6 py-4 flex flex-col md:flex-row justify-between items-center">
1414
<h1 class="text-2xl font-bold">Newbie</h1>
15-
<nav>
16-
<ul class="flex space-x-6">
15+
<nav class="mt-2 md:mt-0">
16+
<ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 text-center">
1717
<li><a href="index.html" class="hover:text-teal-400">Home</a></li>
1818
<li><a href="courses.html" class="hover:text-teal-400">Courses</a></li>
1919
<li><a href="profile.html" class="hover:text-teal-400">Profile</a></li>
@@ -24,82 +24,39 @@ <h1 class="text-2xl font-bold">Newbie</h1>
2424
</header>
2525

2626
<!-- Course Videos -->
27-
<section class="py-10 px-6">
27+
<section class="py-10 px-4">
2828
<h2 class="text-3xl font-bold text-center mb-10">Featured Courses</h2>
29-
<div class="grid md:grid-cols-2 gap-10 max-w-6xl mx-auto">
29+
30+
<!-- Stacked layout for mobile, grid for medium screens -->
31+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
32+
3033
<div class="bg-white shadow rounded p-4">
31-
<iframe class="w-full h-64" src="https://www.youtube.com/embed/3PHXvlpOkf4" title="HTML Tutorial"></iframe>
34+
<iframe class="w-full h-64" src="https://youtu.be/HcOc7P5BMi4?si=X1PPIFZEuuGHS1Wn" title="HTML Tutorial" allowfullscreen></iframe>
3235
<h3 class="mt-4 font-semibold text-lg">HTML for Beginners</h3>
3336
</div>
37+
3438
<div class="bg-white shadow rounded p-4">
35-
<iframe class="w-full h-64" src="https://www.youtube.com/embed/yfoY53QXEnI" title="CSS Tutorial"></iframe>
39+
<iframe class="w-full h-64" src="https://youtu.be/ESnrn1kAD4E?si=xnRUxevvHkpFqAvs" title="CSS Tutorial" allowfullscreen></iframe>
3640
<h3 class="mt-4 font-semibold text-lg">CSS Crash Course</h3>
3741
</div>
42+
3843
<div class="bg-white shadow rounded p-4">
39-
<iframe class="w-full h-64" src="https://www.youtube.com/embed/W6NZfCO5SIk" title="JavaScript Tutorial"></iframe>
44+
<iframe class="w-full h-64" src="https://youtu.be/lfmg-EJ8gm4?si=Bvy0K9s1VrZpQ6J0" title="JavaScript Tutorial" allowfullscreen></iframe>
4045
<h3 class="mt-4 font-semibold text-lg">JavaScript Basics</h3>
4146
</div>
47+
4248
<div class="bg-white shadow rounded p-4">
43-
<iframe class="w-full h-64" src="https://www.youtube.com/embed/rv2_2-JFYhc" title="Responsive Web Design"></iframe>
44-
<h3 class="mt-4 font-semibold text-lg">Responsive Design</h3>
49+
<iframe class="w-full h-64" src="https://www.youtube.com/playlist?list=PLu0W_9lII9agwh1XjRt242xIpHhPT2llg" title="Responsive Web Design" allowfullscreen></iframe>
50+
<h3 class="mt-4 font-semibold text-lg">Python</h3>
4551
</div>
52+
4653
</div>
4754
</section>
4855

56+
<!-- Footer -->
4957
<footer class="bg-gray-900 text-white text-center py-4 mt-10">
5058
<p>&copy; 2025 Newbie. Keep Learning.</p>
5159
</footer>
52-
</body>
53-
</html>
54-
profile
55-
<!DOCTYPE html>
56-
<html lang="en">
57-
<head>
58-
<meta charset="UTF-8" />
59-
<title>Newbie | Profile</title>
60-
<script src="https://cdn.tailwindcss.com"></script>
61-
</head>
62-
<body class="bg-gray-100 text-gray-800">
6360

64-
<header class="bg-gray-900 text-white">
65-
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
66-
<h1 class="text-2xl font-bold">Newbie</h1>
67-
<nav>
68-
<ul class="flex space-x-6">
69-
<li><a href="index.html" class="hover:text-teal-400">Home</a></li>
70-
<li><a href="courses.html" class="hover:text-teal-400">Courses</a></li>
71-
<li><a href="profile.html" class="hover:text-teal-400">Profile</a></li>
72-
<li><a href="contact.html" class="hover:text-teal-400">Contact</a></li>
73-
</ul>
74-
</nav>
75-
</div>
76-
</header>
77-
78-
<main class="max-w-4xl mx-auto px-4 py-10">
79-
<h2 class="text-3xl font-bold mb-6">Your Profile</h2>
80-
81-
<div class="grid md:grid-cols-2 gap-6">
82-
<div class="bg-white p-6 shadow rounded">
83-
<h3 class="text-xl font-semibold mb-2">📊 Progress Tracking</h3>
84-
<p>Track your learning modules and percentage completion.</p>
85-
</div>
86-
<div class="bg-white p-6 shadow rounded">
87-
<h3 class="text-xl font-semibold mb-2">✅ Completed Tasks</h3>
88-
<p>Check off what you've finished from your to-do learning goals.</p>
89-
</div>
90-
<div class="bg-white p-6 shadow rounded">
91-
<h3 class="text-xl font-semibold mb-2">📜 Certificate</h3>
92-
<p>Download certificate once you complete 100% of the track.</p>
93-
</div>
94-
<div class="bg-white p-6 shadow rounded">
95-
<h3 class="text-xl font-semibold mb-2">📝 Feedback</h3>
96-
<p>Share your feedback to improve the platform.</p>
97-
</div>
98-
</div>
99-
</main>
100-
101-
<footer class="bg-gray-900 text-white text-center py-4">
102-
<p>&copy; 2025 Newbie. Keep Growing.</p>
103-
</footer>
10461
</body>
10562
</html>

‎profile.html‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,84 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<title>Newbie | Profile</title>
6-
<script src="https://cdn.tailwindcss.com"></script>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width initial-scale=1.0" />
6+
<title>Newbie | Profile</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
78
</head>
89
<body class="bg-gray-100 text-gray-800">
910

10-
<header class="bg-gray-900 text-white">
11+
<header class="bg-gray-900 text-white">
1112
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
13+
1214
<h1 class="text-2xl font-bold">Newbie</h1>
15+
1316
<nav>
17+
1418
<ul class="flex space-x-6">
19+
1520
<li><a href="index.html" class="hover:text-teal-400">Home</a></li>
21+
1622
<li><a href="courses.html" class="hover:text-teal-400">Courses</a></li>
23+
1724
<li><a href="profile.html" class="hover:text-teal-400">Profile</a></li>
25+
1826
<li><a href="contact.html" class="hover:text-teal-400">Contact</a></li>
27+
1928
</ul>
29+
2030
</nav>
31+
2132
</div>
22-
</header>
2333

24-
<main class="max-w-4xl mx-auto px-4 py-10">
34+
</header>
35+
36+
<main class="max-w-2xl mx-auto px-4 py-10">
2537
<h2 class="text-3xl font-bold mb-6">Your Profile</h2>
2638

27-
<div class="grid md:grid-cols-2 gap-6">
39+
40+
41+
<div class="grid md:grid-cols-1 gap-4">
42+
2843
<div class="bg-white p-6 shadow rounded">
44+
2945
<h3 class="text-xl font-semibold mb-2">📊 Progress Tracking</h3>
46+
3047
<p>Track your learning modules and percentage completion.</p>
48+
3149
</div>
50+
3251
<div class="bg-white p-6 shadow rounded">
52+
3353
<h3 class="text-xl font-semibold mb-2">✅ Completed Tasks</h3>
54+
3455
<p>Check off what you've finished from your to-do learning goals.</p>
56+
3557
</div>
58+
3659
<div class="bg-white p-6 shadow rounded">
60+
3761
<h3 class="text-xl font-semibold mb-2">📜 Certificate</h3>
62+
3863
<p>Download certificate once you complete 100% of the track.</p>
64+
3965
</div>
66+
4067
<div class="bg-white p-6 shadow rounded">
68+
4169
<h3 class="text-xl font-semibold mb-2">📝 Feedback</h3>
70+
4271
<p>Share your feedback to improve the platform.</p>
72+
4373
</div>
74+
4475
</div>
45-
</main>
4676

47-
<footer class="bg-gray-900 text-white text-center py-4">
48-
<p>&copy; 2025 Newbie. Keep Growing.</p>
49-
</footer>
77+
</main>
78+
79+
<footer class="bg-gray-900 text-white text-center py-4">
80+
<p>\&copy; 2025 Newbie. Keep Growing.</p>
81+
82+
</footer>
5083
</body>
5184
</html>

0 commit comments

Comments
 (0)