first commit

LucasGuake · Dec 16, 2023 · 9431c66 · 9431c66
commit 9431c66
Show file tree

Hide file tree

Showing 58 changed files with 353 additions and 0 deletions.
diff --git a/1.jpg b/1.jpg
diff --git a/10.jpg b/10.jpg
diff --git a/11.jpg b/11.jpg
diff --git a/12.jpg b/12.jpg
diff --git a/13.jpg b/13.jpg
diff --git a/14.jpg b/14.jpg
diff --git a/15.jpg b/15.jpg
diff --git a/16.jpg b/16.jpg
diff --git a/17.jpg b/17.jpg
diff --git a/18.jpg b/18.jpg
diff --git a/19.jpg b/19.jpg
diff --git a/2.jpg b/2.jpg
diff --git a/20.jpg b/20.jpg
diff --git a/21.jpg b/21.jpg
diff --git a/22.jpg b/22.jpg
diff --git a/23.jpg b/23.jpg
diff --git a/24.jpg b/24.jpg
diff --git a/25.jpg b/25.jpg
diff --git a/26.jpg b/26.jpg
diff --git a/27.jpg b/27.jpg
diff --git a/28.jpg b/28.jpg
diff --git a/29.jpg b/29.jpg
diff --git a/3.jpg b/3.jpg
diff --git a/30.jpg b/30.jpg
diff --git a/31.jpg b/31.jpg
diff --git a/32.jpg b/32.jpg
diff --git a/33.jpg b/33.jpg
diff --git a/34.jpg b/34.jpg
diff --git a/35.jpg b/35.jpg
diff --git a/36.jpg b/36.jpg
diff --git a/37.jpg b/37.jpg
diff --git a/38.jpg b/38.jpg
diff --git a/39.jpg b/39.jpg
diff --git a/4.jpg b/4.jpg
diff --git a/40.jpg b/40.jpg
diff --git a/41.jpg b/41.jpg
diff --git a/42.jpg b/42.jpg
diff --git a/43.jpg b/43.jpg
diff --git a/44.jpg b/44.jpg
diff --git a/45.jpg b/45.jpg
diff --git a/46.jpg b/46.jpg
diff --git a/47.jpg b/47.jpg
diff --git a/48.jpg b/48.jpg
diff --git a/49.jpg b/49.jpg
diff --git a/5.jpg b/5.jpg
diff --git a/50.jpg b/50.jpg
diff --git a/51.jpg b/51.jpg
diff --git a/52.jpg b/52.jpg
diff --git a/53.jpg b/53.jpg
diff --git a/54.jpg b/54.jpg
diff --git a/55.jpg b/55.jpg
diff --git a/56.jpg b/56.jpg
diff --git a/57.PNG b/57.PNG
diff --git a/6.jpg b/6.jpg
diff --git a/7.jpg b/7.jpg
diff --git a/8.jpg b/8.jpg
diff --git a/9.jpg b/9.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,353 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>枣庄十八中翔宇二班</title>
+    <style>
+        /* Reset CSS */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background-color: rgb(235, 151, 151);
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            vertical-align: middle;
+            display: inline-block;
+        }
+
+        .shell {
+            display: grid;
+            padding: 20px;
+            grid-gap: 20px;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            grid-auto-rows: 270px;
+            grid-auto-flow: dense;
+        }
+
+        .shell>div {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: rgb(61, 51, 51);
+            border-radius: 5px;
+            color: rgb(255, 255, 255);
+            font: 100 100px 'Kristen ITC';
+            position: relative;
+        }
+
+        span {
+            position: absolute;
+            top: -10px;
+            left: 30px;
+            text-shadow: -5px 0 rgb(0, 0, 0), 0 5px rgb(0, 0, 0), 5px 0 rgb(0, 0, 0), 0 -5px rgb(0, 0, 0);
+        }
+
+        .shell .wide {
+            grid-column: span 2;
+        }
+
+        .shell .tall {
+            grid-row: span 2;
+        }
+
+        .shell .big {
+            grid-column: span 2;
+            grid-row: span 2;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="shell">
+        <div class="big">
+            <img src="3.jpg" alt="">
+            <span>1</span>
+        </div>
+        <div>
+            <img src="1.jpg" alt="">
+            <span>2</span>
+        </div>
+        <div>
+            <img src="2.jpg" alt="">
+            <span>3</span>
+        </div>
+        <div class="wide">
+            <img src="4.jpg" alt="">
+            <span>4</span>
+        </div>
+        <div>
+            <img src="5.jpg" alt="">
+            <span>5</span>
+        </div>
+        <div class="tall">
+            <img src="6.jpg" alt="">
+            <span>6</span>
+        </div>
+        <div class="big">
+            <img src="7.jpg" alt="">
+            <span>7</span>
+        </div>
+        <div>
+            <img src="8.jpg" alt="">
+            <span>8</span>
+        </div>
+        <div class="">
+            <img src="22.jpg" alt="">
+            <span>9</span>
+        </div>
+        <div class="big">
+            <img src="9.jpg" alt="">
+            <span>10</span>
+        </div>
+        <div class="big">
+            <img src="11.jpg" alt="">
+            <span>11</span>
+        </div>
+        <div>
+            <img src="12.jpg" alt="">
+            <span>12</span>
+        </div>
+        <div>
+            <img src="13.jpg" alt="">
+            <span>13</span>
+        </div>
+        <div>
+            <img src="14.jpg" alt="">
+            <span>14</span>
+        </div>
+        <div>
+            <img src="15.jpg" alt="">
+            <span>15</span>
+        </div>
+        <div class="wide">
+            <img src="16.jpg" alt="">
+            <span>16</span>
+        </div>
+        <div class="big">
+            <img src="17.jpg" alt="">
+            <span>17</span>
+        </div>
+        <div>
+            <img src="18.jpg" alt="">
+            <span>18</span>
+        </div>
+        <div class="wide">
+            <img src="19.jpg" alt="">
+            <span>19</span>
+        </div>
+        <div>
+            <img src="20.jpg" alt="">
+            <span>20</span>
+        </div>
+        <div class="wide">
+            <img src="22.jpg" alt="">
+            <span>21</span>
+        </div>
+        <div class="big">
+            <img src="21.jpg" alt="">
+            <span>22</span>
+        </div>
+        <div>
+            <img src="23.jpg" alt="">
+            <span>23</span>
+        </div>
+        <div>
+            <img src="24.jpg" alt="">
+            <span>24</span>
+        </div>
+        <div class="big">
+            <img src="25.jpg" alt="">
+            <span>25</span>
+        </div>
+        <div class="big">
+            <img src="26.jpg" alt="">
+            <span>26</span>
+        </div>
+        <div>
+            <img src="27.jpg" alt="">
+            <span>27</span>
+        </div>
+        <div>
+            <img src="29.jpg" alt="">
+            <span>28</span>
+        </div>
+        <div>
+            <img src="30.jpg" alt="">
+            <span>29</span>
+
+
+        </div>
+        <div class="big">
+            <img src="31.jpg" alt="">
+            <span>30</span>
+
+
+        </div>
+        <div class="tall">
+            <img src="32.jpg" alt="">
+            <span>31</span>
+
+
+        </div>
+        <div>
+            <img src="33.jpg" alt="">
+            <span>32</span>
+
+
+        </div>
+        <div>
+            <img src="34.jpg" alt="">
+            <span>33</span>
+
+
+        </div>
+        <div>
+            <img src="35.jpg" alt="">
+            <span>34</span>
+
+
+        </div>
+        <div class="big">
+            <img src="36.jpg" alt="">
+            <span>35</span>
+
+
+        </div>
+        <div class="tall">
+            <img src="37.jpg" alt="">
+            <span>36</span>
+
+
+        </div>
+        <div class="tall">
+            <img src="38.jpg" alt="">
+            <span>37</span>
+
+
+        </div>
+        <div>
+            <img src="39.jpg" alt="">
+            <span>38</span>
+
+
+        </div>
+        <div>
+            <img src="40.jpg" alt="">
+            <span>39</span>
+
+
+        </div>
+        <div class="big">
+            <img src="41.jpg" alt="">
+            <span>40</span>
+
+
+        </div>
+        <div>
+            <img src="42.jpg" alt="">
+            <span>41</span>
+
+
+        </div>
+        <div>
+            <img src="43.jpg" alt="">
+            <span>42</span>
+
+
+        </div>
+        <div class="big">
+            <img src="44.jpg" alt="">
+            <span>43</span>
+
+
+        </div>
+        <div class="">
+            <img src="45.jpg" alt="">
+            <span>44</span>
+
+
+        </div>
+        <div class="big">
+            <img src="46.jpg" alt="">
+            <span>45</span>
+
+
+        </div>
+        <div>
+            <img src="47.jpg" alt="">
+            <span>46</span>
+
+
+        </div>
+        <div>
+            <img src="48.jpg" alt="">
+            <span>47</span>
+
+
+        </div>
+        <div>
+            <img src="49.jpg" alt="">
+            <span>48</span>
+
+
+        </div>
+        <div class="wide">
+            <img src="50.jpg" alt="">
+            <span>49</span>
+
+
+        </div>
+        <div class="wide">
+            <img src="51.jpg" alt="">
+            <span>50</span>
+
+
+        </div>
+        <div>
+            <img src="52.jpg" alt="">
+            <span>51</span>
+
+
+        </div>
+        <div class="wide">
+            <img src="53.jpg" alt="">
+            <span>52</span>
+
+
+        </div>
+        <div class="tall">
+            <img src="54.jpg" alt="">
+            <span>53</span>
+
+
+        </div>
+        <div class="tall">
+            <img src="55.jpg" alt="">
+            <span>54</span>
+        </div>
+
+        <div class="wide">
+            <img src="56.jpg" alt="">
+            <span>55</span>
+        </div>
+
+        <div class="tall">
+            <img src="57.PNG" alt="">
+            <span>56</span>
+
+        </div>
+
+    </div>
+</body>
+
+</html>