projectGame/scratch.html at master · RavenS404/projectGame · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scratch Showcase | Skillsprout</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css?v=8">
</head>

<body class="skillsprout-page legacy-page">

    <!-- Unified Organic Navbar -->
    <div class="container position-relative z-3 px-3">
        <nav class="navbar navbar-expand-xl navbar-light floating-nav mt-4" aria-label="Main navigation">
            <div class="container-fluid">
                <a class="navbar-brand d-flex flex-column" href="index.html">
                    <span class="school-brand"><i class="fa-solid fa-seedling mx-1"></i> Skillsprout</span>
                    <span class="school-subbrand">Scratch Showcase</span>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu"
                    aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="navMenu">
                    <div class="navbar-nav">
                        <a class="nav-link" href="index.html"><i class="fa-solid fa-house"></i> Home</a>
                        <a class="nav-link" href="geometry.html"><i class="fa-solid fa-draw-polygon"></i> Geometry</a>
                        <a class="nav-link" href="periodic.html"><i class="fa-solid fa-flask"></i> Periodic Table</a>
                        <a class="nav-link" href="geography.html"><i class="fa-solid fa-earth-americas"></i>
                            Geography</a>
                        <a class="nav-link" href="snake.html"><i class="fa-solid fa-gamepad"></i> Snake</a>
                        <a class="nav-link active" href="scratch.html"><i class="fa-solid fa-puzzle-piece"></i>
                            Scratch</a>
                        <a class="nav-link" href="page2.html"><i class="fa-solid fa-tv"></i> Channels</a>
                        <a class="nav-link" href="videos.html"><i class="fa-solid fa-film"></i> Videos</a>
                    </div>
                </div>
            </div>
        </nav>
    </div>

    <main class="content-main">
        <div class="container">
            <a class="back-link" href="index.html"><i class="fa-solid fa-arrow-left"></i> Back Home</a>

            <section class="page-header text-center">
                <p class="hero-kicker">Student projects</p>
                <h1 class="section-title">Scratch Game 🎮</h1>
                <p class="page-subtitle">Play the interactive Scratch project below!</p>
            </section>

            <section class="scratch-feature" aria-labelledby="featured-scratch-title">
                <article class="sprout-card scratch-feature-card">
                    <div class="scratch-feature-copy">
                        <p class="hero-kicker">Featured project</p>
                        <h2 id="featured-scratch-title">Scratch Game</h2>
                    </div>
                    <div class="scratch-embed-wrapper">
                        <iframe src="https://scratch.mit.edu/projects/1313345877/embed" allowtransparency="true"
                            frameborder="0" scrolling="no" allowfullscreen></iframe>
                    </div>
                </article>
            </section>

            <section class="page-header text-center scratch-showcase-heading">
                <p class="hero-kicker">More student projects</p>
                <h2 class="section-title-small">Scratch Showcase 🎨</h2>
                <p class="page-subtitle">Explore more interactive projects created by talented students.</p>
            </section>

            <section class="scratch-grid" aria-label="Scratch projects">
                <article class="sprout-card scratch-embed-card">
                    <h2><i class="fa-solid fa-gamepad"></i> Game 1</h2>
                    <div class="iframe-container">
                        <iframe src="https://scratch.mit.edu/projects/1272857203/embed" allowtransparency="true"
                            frameborder="0" scrolling="no" allowfullscreen></iframe>
                    </div>
                </article>

                <article class="sprout-card scratch-embed-card">
                    <h2><i class="fa-solid fa-gamepad"></i> Game 2</h2>
                    <div class="iframe-container">
                        <iframe src="https://scratch.mit.edu/projects/1272852100/embed" allowtransparency="true"
                            frameborder="0" scrolling="no" allowfullscreen></iframe>
                    </div>
                </article>

                <article class="sprout-card scratch-embed-card">
                    <h2><i class="fa-solid fa-gamepad"></i> Game 3</h2>
                    <div class="iframe-container">
                        <iframe src="https://scratch.mit.edu/projects/1272853302/embed" allowtransparency="true"
                            frameborder="0" scrolling="no" allowfullscreen></iframe>
                    </div>
                </article>

                <article class="sprout-card scratch-embed-card">
                    <h2><i class="fa-solid fa-gamepad"></i> Game 4</h2>
                    <div class="iframe-container">
                        <iframe src="https://scratch.mit.edu/projects/1272852366/embed" allowtransparency="true"
                            frameborder="0" scrolling="no" allowfullscreen></iframe>
                    </div>
                </article>
            </section>
        </div>
    </main>

    <footer class="sprout-footer sprout-footer-panel text-center">
        <div class="container">
            <div class="sprout-card acknowledgement-card">
                <h2 class="section-title-small">Special Thanks</h2>
                <div class="thanks-grid">
                    <p><i class="fa-solid fa-chalkboard-user"></i> Guide Teacher: <strong>Elham Anwer</strong></p>
                    <p><i class="fa-solid fa-user-tie"></i> School Principal: <strong>Seham Al-Qahtani</strong></p>
                </div>
                <p class="contact-line">
                    <i class="fa-solid fa-phone"></i>
                    <a href="tel:0537091111">0537091111</a> |
                    <a href="tel:0172261122">0172261122</a>
                    <span><i class="fa-brands fa-twitter"></i> <a href="https://twitter.com/mwahibeduc"
                            target="_blank" rel="noopener">@mwahibeduc</a></span>
                </p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>