edu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax Scrolling Example</title>
    <link rel="stylesheet" href="static/css/styles.css">
</head>
<body>
    <!-- Navigation Bar -->
    <div class="navbar">
        <a href="edu.html" class="logo">
            <img src="/static/images/logoo.png" alt="Website Logo">
        </a>
        <ul class="nav-links">
            <li><a href="#frame1">HOME</a></li>
            <li><a href="#frame2">Translate</a></li>
            <li><a href="#frame3">Flashcards</a></li>
            <li><a href="#frame4">Summary</a></li>
            <li><a href="#frame5">Accent</a></li>
        </ul>
    </div>

    <!-- Parallax Frame 1 -->
    <section class="parallax" id="frame1">
        <div class="content">
            <h1>edu</h1>
            <p>Some introductory text.</p>
        </div>
    </section>

    <!-- Frame Bar (separating different frames) -->
    <div class="frame-bar">Translation Section</div>

    <!-- Parallax Frame 2 -->
    <section class="parallax" id="frame2">
        <div class="content">
            <h1> TRANSLATION </h1>
            <p>More information here.</p>
        </div>
    </section>

    <!-- Frame Bar -->
    <div class="frame-bar">Flashcards Section</div>

    <!-- Parallax Frame 3 -->
    <section class="parallax" id="frame3">
        <div class="content">
            <h1> GENERATE FLASHCARDS</h1>
            <p>Details about our services.</p>
        </div>
    </section>

    <!-- Frame Bar -->
    <div class="frame-bar">Summary Section</div>

    <!-- Parallax Frame 4 -->
    <section class="parallax" id="frame4">
        <div class="content">
            <h1>CREATE SUMMARY</h1>
            <p>Contact information or call to action.</p>
        </div>
    </section>

    <!-- Parallax Frame 5 -->
    <section class="parallax" id="frame5">
        <div class="content">
            <h1>ACCENT</h1>
            <p>Contact information or call to action.</p>
        </div>
    </section>

    <!-- Footer -->
    <div class="footer">
        <p>GitHub links of team mates: <a href="#">Link 1</a>, <a href="#">Link 2</a>, <a href="#">Link 3</a></p>
    </div>

    <script src="/static/js/script.js"></script>
</body>
</html>