iPlay/game.html at master · iSchoolTech/iPlay · 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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game Details</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap"
      rel="stylesheet"
    />

    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="index.html">
          <img src="joystick.png" alt="iPlay Icon" style="width: 45px" />
          iPlay
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="index.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="cart.html">Cart</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="index.html#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="index.html#contact">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="signin.html">Sign in</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="signup.html">Sign up</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <main class="container details-container">
      <div class="row align-items-center">
        <div class="col-md-5">
          <img
            src="assets/Minecraft.avif"
            alt="Minecraft"
            class="img-fluid rounded"
          />
        </div>
        <div class="col-md-6 text-center text-md-start mt-4 mt-md-0">
          <h2 class="game-title">Minecraft</h2>
          <p class="game-desc">
            In Minecraft, players explore a procedurally generated,
            three-dimensional world with virtually infinite terrain made up of
            voxels. Players can discover and extract raw materials, craft tools
            and items, and build structures, earthworks, and machines. Depending
            on the game mode, players can fight hostile mobs, as well as
            cooperate with or compete against other players in multiplayer. The
            game's large community offers a wide variety of user-generated
            content, such as modifications, servers, player skins, texture
            packs, and custom maps, which add new game mechanics and
            possibilities.
          </p>
          <p class="game-price">$4.99</p>
          <a href="cart.html" class="custom-btn">Add to Cart</a>
        </div>
      </div>

      <h2 class="text-center mb-4">More Games</h2>

      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4 mb-5">
        <div class="col">
          <div class="card">
            <img
              src="assets/Fall Guys.avif"
              class="card-img-top"
              alt="Fall Guys"
            />
            <div class="card-body text-center">
              <h5 class="card-title">Fall Guys</h5>
              <p class="card-text">
                Join colorful jelly beans in fun and chaotic obstacle-course
                battles to be the last one standing!
              </p>
              <p class="game-price">Free</p>
              <a href="game.html" class="custom-btn">Play</a>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="assets/Robolox.webp" class="card-img-top" alt="Roblox" />
            <div class="card-body text-center">
              <h5 class="card-title">Roblox</h5>
              <p class="card-text">
                A virtual universe where you can play, create, and be anything
                you imagine.
              </p>
              <p class="game-price">Free</p>
              <a href="game.html" class="custom-btn">Play</a>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img
              src="assets/LEGO City Undercover.jpg"
              class="card-img-top"
              alt="LEGO City Undercover"
            />
            <div class="card-body text-center">
              <h5 class="card-title">LEGO City Undercover</h5>
              <p class="card-text">
                Join Chase McCain on a hilarious open-world mission to take down
                criminals in LEGO City.
              </p>
              <p class="game-price">$29.99</p>
              <a href="game.html" class="custom-btn">Buy</a>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img
              src="assets/Super Mario Maker 2.avif"
              class="card-img-top"
              alt="Super Mario Maker 2"
            />
            <div class="card-body text-center">
              <h5 class="card-title">Super Mario Maker 2</h5>
              <p class="card-text">
                Travel across fun worlds with Mario and his hat Cappy in this
                colorful adventure.
              </p>
              <p class="game-price">$49.99</p>
              <a href="game.html" class="custom-btn">Buy</a>
            </div>
          </div>
        </div>

        <div class="col">
          <div class="card">
            <img
              src="assets/Animal Crossing.jpg"
              class="card-img-top"
              alt="Animal Crossing"
            />
            <div class="card-body text-center">
              <h5 class="card-title">Animal Crossing</h5>
              <p class="card-text">
                Build your island life, make friends, decorate, and live
                peacefully in this charming world.
              </p>
              <p class="game-price">$59.99</p>
              <a href="game.html" class="custom-btn">Buy</a>
            </div>
          </div>
        </div>
      </div>
    </main>

    <footer class="footer py-3">
      <div class="footer-container">
        <div class="footer-column">
          <h4>iPlay</h4>
          <p>
            Your trusted destination for fun digital experiences. We focus on
            quality, support, and fast service to keep you playing with ease.
          </p>
        </div>
        <div class="footer-column">
          <h4>Quick Links</h4>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html#top-games">Top Games</a></li>
            <li><a href="index.html#games">Categories</a></li>
            <li><a href="index.html#about">About Us</a></li>
            <li><a href="index.html#why-choose-us">Why Us</a></li>
            <li><a href="index.html#contact">Contact</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h4>Categories</h4>
          <ul>
            <li><a href="index.html#creative-games">Creative</a></li>
            <li><a href="index.html#action-games">Action</a></li>
            <li><a href="index.html#shooter-games">Shooter</a></li>
            <li><a href="index.html#sports-games">Sports & Racing</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h4>Contact Info</h4>
          <ul>
            <li>123 Cairo, Egypt</li>
            <li>201112234456</li>
            <li>info@iplay.com</li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2025 iPlay. All rights reserved.</p>
      </div>
    </footer>
  </body>
</html>