physixplore/index.html at main · onuryvn/physixplore · 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
<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO Meta Tags -->
    <title>PhysiXplore - Interactive Physics Education Hub</title>
    <meta name="description" content="Explore physics interactively: Learn about gravity, pendulum motion, and Newton's discoveries. Test your knowledge with our physics quiz.">
    <meta name="keywords" content="physics, gravity, pendulum, Newton, physics education, interactive learning, physics quiz">
    <meta name="author" content="Onur Yavan, Christian Zall">

    <!-- Open Graph Tags -->
    <meta property="og:title" content="Physics Learning Platform | PhysiXplore">
    <meta property="og:description" content="Explore physics interactively: Learn about gravity, pendulum motion, and Newton's discoveries. Test your knowledge with our physics quiz.">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="PhysiXplore">
    <meta property="og:locale" content="en_US">
    <meta property="og:image" content="./Images/physixplore-astronaut-science.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="Banner image for PhysiXplore, an interactive physics learning website, showing sections The Pendulum, Gravity, History and Quiz">

    <!-- Favicons -->
    <link rel="icon" href="./Images/Favicons/favicon.ico">
    <link rel="icon" href="./Images/Favicons/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="./Images/Favicons/apple-touch-icon.png">

    <!-- Stylesheets & Scripts -->
    <link rel="stylesheet" href="./Styles/style.css">
    <script defer src="./Scripts/gallery.js"></script>
    <script defer src="./Scripts/mobileNav.js"></script>
</head>
<body>
    <nav id="nav-mobile">
        <a href="./Pages/history.html">History</a>
        <a href="./Pages/gravity.html">Gravity</a>
        <a href="./Pages/pendulum.html">Pendulum</a>
        <a href="./Pages/quiz.html">Quiz</a>
    </nav>

    <div id="home-page">

        <header class="header">
            <nav class="nav-box" id="nav-box-left">
                <a href="./Pages/history.html" class="highlight-text">History</a>
                <a href="./Pages/gravity.html" class="highlight-text">Gravity</a>
            </nav>

            <div class="headline" id="main-page-headline">
                <div>
                    <h1 class="headline-highlight">PhysiXplore</h1>
                </div>
            </div>

            <nav class="nav-box" id="nav-box-right">
                <a href="./Pages/pendulum.html" class="highlight-text">Pendulum</a>
                <a href="./Pages/quiz.html" class="highlight-text">Quiz</a>
            </nav>
        </header>

        <div class="burger-button-container">
            <button class="burger-button" type="button">&#9776;</button>
        </div>

        <main id="gallery-container">

            <div class="gallery-item">
                <!-- Image source: https://pixabay.com/de/vectors/astronomie-raum-universum-planeten-5829414/ | License: Pixabay-Inhaltslizenz -->
                <img src="./Images/sun-earth-moon-geometry.svg" alt="diagram of solar eclipse geometry with sun, moon and earth"
                    class="gallery-item-img" id="gallery-history-page">
                <a href="./Pages/history.html" class="gallery-page-link" id="test">Read about key<br>Physical Events</a>
            </div>

            <div class="gallery-item">
                 <!-- Image source: https://freesvg.org/1546636880 | License: Public Domain -->
                <img src="./Images/isaac-newton-physicist-portrait.svg" alt="Isaac Newton portrait engraving with curly wig"
                    class="gallery-item-img" id="gallery-gravity-page">
                <a href="./Pages/gravity.html" class="gallery-page-link">Newton's<br>Gravitational Law</a>
            </div>

            <div class="gallery-item">
                <!-- Image source: AI generated -->
                <img src="./Images/pendulum-mechanical-clock-physics.svg" alt="Pendulum clock with Roman numerals"
                    class="gallery-item-img" id="gallery-pendulum-page">
                <a href="./Pages/pendulum.html" class="gallery-page-link">The Pendulum<br>in Motion</a>
            </div>

            <div class="gallery-item">
                <!-- Image source: https://pixabay.com/de/vectors/mathematik-formel-berechnung-physik-7304235/ | License: Pixabay-Inhaltslizenz -->
                <img src="./Images/math-formulas-sketch-handwritten.svg" alt="hand-drawn mathematical formulas with coordinate systems and algebraic equations"
                    class="gallery-item-img" id="gallery-quiz-page">
                <a href="./Pages/quiz.html" class="gallery-page-link">Test Your<br>Knowledge</a>
            </div>

        </main>

    </div>
</body>
</html>