tetris/index-b.html at master · StudyBucket/tetris · 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
<!DOCTYPE HTML>
<html>

<head>
  <title>Tetris</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <!-- <style type="text/css">
    #content-wrapper {
      padding: 15px;
    }
  </style> -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<style type="text/css">
  :root {
    --xs: 0;
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
    --xxl: 1400px;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
    grid-gap: 0rem;
  }

  @media (min-width: 576px) {
    .grid {
      grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    }
  }

  .grid>div {
    background: black;
    padding: 0rem;
    display: grid;
    place-items: center;
  }

  .grid>div::before {
    content: "";
    display: block;
    padding-bottom: 100%;
    grid-area: 1/1/2/2;
  }

  .grid>div img {
    width: 100%;
    grid-area: 1/1/2/2;
  }
</style>

<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand disabled" href="#" aria-disabled="true">Lorem</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">
            <li class="nav-item">
              <a class="nav-link disabled" href="#" aria-disabled="true">Ipsum</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" aria-disabled="true">Dolor</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <main>
    <section class="bg-success">
      <div class="container">
        <div class="tetris grid">
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div><img src="tile.jpeg" alt=""></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div><img src="tile.jpeg" alt=""></div>
        </div>
        <!-- <div id="tetris"></div> -->
      </div>
    </section>
    <section class="bg-light w-100 py-5">
      <div class="container">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, quasi! Doloribus ipsum necessitatibus
          quibusdam dicta voluptas mollitia velit dolor id voluptate obcaecati. Qui corporis in, maiores nobis minima
          itaque blanditiis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, quasi! Doloribus ipsum
          necessitatibus quibusdam dicta voluptas mollitia velit dolor id voluptate obcaecati. Qui corporis in, maiores
          nobis minima itaque blanditiis.</p>
      </div>
    </section>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
  <script type="text/javascript" src="tetris-b.js"></script>
  <script type="text/javascript">TETRIS.play('tetris');</script>
</body>

</html>