Web-Project-Root/index.html at main · chichi-54/Web-Project-Root · GitHub

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

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Next Step - Home</title>

    <link rel="stylesheet" href="CSS/styles.css">
    <link rel="icon" href="images/logo.png" type="image/png">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>

<body>
<!-- ================= HEADER / NAVBAR ================= -->

<header class="main-header">
    <img src="images/logo.png" alt="Career Hub Logo" class="logo">

      <div class="hamburger">&#9776;</div> <!-- ☰ -->

    <nav class="navbar">
        <ul>
            <li><a href="index.html" class="active">Home</a></li>
            <li><a href="pages/resources.html">Resources</a></li>
            <li><a href="pages/dashboard.html">Dashboard</a></li>
            <li><a href="pages/tutor-profiles.html">Mentors</a></li>
            <li><a href="pages/about.html">About</a></li>
            <li><a href="pages/faq.html">FAQ</a></li>
            <li><a href="pages/contact.html">Contact</a></li>
            <li><a href="pages/sign-in.html" class="sign-btn">Sign In</a></li>
        </ul>
    </nav>
</header>


    <!-- ================= HERO SECTION ================= -->
    <section class="hero">
        <div class="hero-content">
            <h1>Next Step: Career Readiness Learning Hub</h1>
            <p>Your pathway to mastering real‑world professional skills, building confidence,
                and preparing for future success.</p>

            <a href="pages/resources.html" class="cta-btn">Explore Resources</a>
            <a href="pages/dashboard.html" class="cta-secondary">Visit Dashboard</a>
        </div>

        <div class="hero-image">
            <img src="images/header.png" alt="Students learning and preparing careers">
        </div>
    </section>


    <!-- ================= ABOUT THE HUB ================= -->
    <section class="about-section">
        <h2>What Next Step Offers</h2>
        <p>
            Next Step is an interactive platform designed to help students acquire
            essential workplace and life skills. Whether you are preparing for job interviews, building
            your first resume, discovering career paths, or developing communication techniques, this hub
            provides guided tools, interactive modules, and personalized progress tracking to support your
            journey.
        </p>
    </section>


    <!-- ================= FEATURE GRID ================= -->
    <section class="feature-grid">

        <div class="feature-card">
            <img src="images/dashboard.png" alt="Dashboard icon">
            <h3>Interactive Dashboard</h3>
            <p>Track your growth, completed modules, and skill development with real‑time progress tools.</p>
            <a href="pages/dashboard.html" class="learn-btn">Go to Dashboard →</a>
        </div>

        <div class="feature-card">
            <img src="images/resources.png" alt="Resources icon">
            <h3>Learning Resources</h3>
            <p>Access curated guides, tutorials, templates, and real‑world career learning materials.</p>
            <a href="pages/resources.html" class="learn-btn">View Resources →</a>
        </div>

        <div class="feature-card">
            <img src="images/mentor.png" alt="Mentor icon">
            <h3>Mentor Directory</h3>
            <p>Connect with experienced mentors who provide insights, feedback, and skill‑building guidance.</p>
            <a href="pages/tutor-profiles.html" class="learn-btn">Meet Mentors →</a>
        </div>

        <div class="feature-card">
            <img src="images/faq.png" alt="FAQ icon">
            <h3>Helpful Information</h3>
            <p>Have questions? Browse frequently asked questions to learn how to navigate the platform.</p>
            <a href="pages/faq.html" class="learn-btn">View FAQ →</a>
        </div>

    </section>


    <!-- ================= CTA SECTION ================= -->
    <section class="cta-section">
        <h2>Ready to Start Your Career Journey?</h2>
        <p>Join Next Step and begin building your future—one skill at a time.</p>
        <a href="pages/sign-in.html" class="cta-btn">Sign In</a>
    </section>

   <!-- FOOTER -->
    <footer>
        <div class="footer-container">
            <div class="footer-left">
                <img src="images/logo.png" alt="Next Step Logo">
                <p>Next Step Learning Hub © 2026</p>
                <p class="footer-tagline">Empowering students through evidence-based learning strategies</p>
            </div>
            <div class="footer-middle">
                <h4>Quick Links</h4>
                <div class="footer-links">
                    <a href="pages/contact.html">Contact Us</a>
                    <a href="pages/about.html">About</a>
                    <a href="pages/faq.html">FAQ</a>
                    <a href="pages/sign-in.html">Sign In</a>
                    <a href="pages/tutor-profiles.html">Find a Mentor</a>
                </div>
            </div>
            <div class="footer-right">
                <h4>Contact Information</h4>
                <div class="footer-contact">
                    <p><i class="fas fa-envelope"></i> support@nextstep.com</p>
                    <p><i class="fas fa-phone"></i> (555) 123-4567</p>
                    <p><i class="fas fa-clock"></i> Support Hours: Mon-Fri 9am-6pm CST</p>
                </div>
                <div class="footer-social">
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
        </div>

    </footer>

</body>
</html>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const hamburger = document.querySelector('.hamburger');
    const navList = document.querySelector('.navbar ul');

    if (hamburger && navList) {
        hamburger.addEventListener('click', function(e) {
            e.stopPropagation();
            navList.classList.toggle('show');
        });

        // Close when clicking outside
        document.addEventListener('click', function(event) {
            if (!event.target.closest('.navbar') && !event.target.closest('.hamburger')) {
                navList.classList.remove('show');
            }
        });

        // Close when link clicked
        const navLinks = document.querySelectorAll('.navbar a');
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                navList.classList.remove('show');
            });
        });
    }
});
</script>
<script src="js/main.js" defer></script>
</body>


</html>