Hugging Face's logo

Spaces:
aiqtech
/
tetete
Running

App Files Community
aiqtech commited on
Commit
3cb9f76
Β·
verified Β·
1 Parent(s): ee74111

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +20 -20
index.html CHANGED
@@ -1,23 +1,25 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
  <style>
7
  html, body {
8
  margin:0; padding:0;
9
  width:100vw; height:100vh;
 
10
  }
11
-
12
  .grid-container {
13
  display: grid;
14
- grid-template-columns: repeat(4, 1fr); /* 4μ—΄ */
15
- grid-template-rows: repeat(5, 1fr); /* 5ν–‰ */
16
- gap: 10px;
 
 
 
17
  box-sizing: border-box;
18
- padding: 10px;
19
- width:100%;
20
- height:100%;
21
  }
22
 
23
  img, video {
@@ -27,39 +29,37 @@
27
  display: block;
28
  }
29
 
30
- video {
31
- /* video νƒœκ·Έμ—μ„œλŠ” autoplay, loop, mutedλ₯Ό μ†μ„±μœΌλ‘œ 지정 */
32
- }
33
  </style>
34
  </head>
35
  <body>
36
 
37
  <div class="grid-container">
38
- <!-- 1ν–‰ -->
39
  <img src="1.webp" alt="1">
40
  <video src="1.mp4" autoplay loop muted></video>
41
  <img src="2.webp" alt="2">
42
  <video src="2.mp4" autoplay loop muted></video>
43
 
44
- <!-- 2ν–‰ -->
45
  <img src="3.webp" alt="3">
46
  <video src="3.mp4" autoplay loop muted></video>
47
  <img src="4.webp" alt="4">
48
  <video src="4.mp4" autoplay loop muted></video>
49
-
50
- <!-- 3ν–‰ -->
51
  <img src="5.webp" alt="5">
52
  <video src="5.mp4" autoplay loop muted></video>
53
  <img src="6.webp" alt="6">
54
  <video src="6.mp4" autoplay loop muted></video>
55
-
56
- <!-- 4ν–‰ -->
57
  <img src="7.webp" alt="7">
58
  <video src="7.mp4" autoplay loop muted></video>
59
  <img src="8.webp" alt="8">
60
  <video src="8.mp4" autoplay loop muted></video>
61
-
62
- <!-- 5ν–‰ -->
63
  <img src="9.webp" alt="9">
64
  <video src="9.mp4" autoplay loop muted></video>
65
  <img src="10.webp" alt="10">
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <style>
7
  html, body {
8
  margin:0; padding:0;
9
  width:100vw; height:100vh;
10
+ overflow:hidden; /* ν•„μš”μ‹œ 슀크둀 제거 */
11
  }
12
+
13
  .grid-container {
14
  display: grid;
15
+ width: 100%;
16
+ height: 100%;
17
+ /* 4μ—΄: 이미지(1fr), μ˜μƒ(2fr), 이미지(1fr), μ˜μƒ(2fr) -> 총합 6fr λΉ„μœ¨ μœ μ§€ */
18
+ grid-template-columns: 1fr 2fr 1fr 2fr;
19
+ grid-template-rows: repeat(5, 1fr); /* 5ν–‰ */
20
+ gap: 5px;
21
  box-sizing: border-box;
22
+ padding: 5px;
 
 
23
  }
24
 
25
  img, video {
 
29
  display: block;
30
  }
31
 
32
+ /* video autoplay, loop, muted 속성 HTML νƒœκ·Έμ—μ„œ μ„€μ • */
 
 
33
  </style>
34
  </head>
35
  <body>
36
 
37
  <div class="grid-container">
38
+ <!-- 1ν–‰: 1번, 2번 쌍 -->
39
  <img src="1.webp" alt="1">
40
  <video src="1.mp4" autoplay loop muted></video>
41
  <img src="2.webp" alt="2">
42
  <video src="2.mp4" autoplay loop muted></video>
43
 
44
+ <!-- 2ν–‰: 3번, 4번 쌍 -->
45
  <img src="3.webp" alt="3">
46
  <video src="3.mp4" autoplay loop muted></video>
47
  <img src="4.webp" alt="4">
48
  <video src="4.mp4" autoplay loop muted></video>
49
+
50
+ <!-- 3ν–‰: 5번, 6번 쌍 -->
51
  <img src="5.webp" alt="5">
52
  <video src="5.mp4" autoplay loop muted></video>
53
  <img src="6.webp" alt="6">
54
  <video src="6.mp4" autoplay loop muted></video>
55
+
56
+ <!-- 4ν–‰: 7번, 8번 쌍 -->
57
  <img src="7.webp" alt="7">
58
  <video src="7.mp4" autoplay loop muted></video>
59
  <img src="8.webp" alt="8">
60
  <video src="8.mp4" autoplay loop muted></video>
61
+
62
+ <!-- 5ν–‰: 9번, 10번 쌍 -->
63
  <img src="9.webp" alt="9">
64
  <video src="9.mp4" autoplay loop muted></video>
65
  <img src="10.webp" alt="10">