Translsis commited on
Commit
e6c08b3
·
verified ·
1 Parent(s): a88fda1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +23 -31
index.html CHANGED
@@ -12,28 +12,17 @@
12
  height: 100vh;
13
  width: 100vw;
14
  font-family: 'Arial Rounded MT Bold', sans-serif;
15
- background: #000000;
16
- }
17
-
18
- /* Video nền toàn màn hình */
19
- .background-video {
20
- position: fixed;
21
- top: 0;
22
- left: 0;
23
- width: 100vw;
24
- height: 100vh;
25
- object-fit: cover;
26
- z-index: -2;
27
  }
28
 
29
  /* Khung chữ */
30
  .container {
31
  position: absolute;
32
- border: 8px solid #000000;
33
- padding: 60px 80px;
34
  border-radius: 20px;
35
- background-color: rgba(255, 255, 255, 0.95);
36
- box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
37
  overflow: hidden;
38
  cursor: grab;
39
  user-select: none;
@@ -43,15 +32,22 @@
43
  cursor: grabbing;
44
  }
45
 
46
- /* Video nền cho container - BỎ */
47
  .video-background {
48
- display: none;
 
 
 
 
 
 
 
49
  }
50
 
51
  h1 {
52
- font-size: 7rem;
53
- color: #000000;
54
- text-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
55
  display: flex;
56
  flex-direction: column;
57
  align-items: center;
@@ -59,7 +55,6 @@
59
  margin: 0;
60
  position: relative;
61
  z-index: 1;
62
- font-weight: 900;
63
  }
64
 
65
  .letter {
@@ -79,9 +74,8 @@
79
  position: absolute;
80
  font-size: 26px;
81
  animation: pop 1s ease-out forwards;
82
- color: #ffffff;
83
  pointer-events: none;
84
- text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
85
  }
86
 
87
  @keyframes pop {
@@ -118,19 +112,17 @@
118
  </head>
119
  <body>
120
 
121
- <!-- Video nền toàn màn hình -->
122
- <video class="background-video" autoplay loop muted playsinline>
123
- <source src="background.mp4" type="video/mp4">
124
- </video>
125
-
126
  <!-- Khung hoa văn -->
127
  <div class="border-frame"></div>
128
 
129
  <!-- Khung chữ với nội dung -->
130
  <div class="container">
 
 
 
131
  <h1>
 
132
  <span class="letter">XQ</span>
133
- <span class="letter">Thối</span>
134
  <span class="letter">💗</span>
135
  </h1>
136
  </div>
@@ -282,7 +274,7 @@
282
 
283
  // Hàm random chọn emoji
284
  function getRandomEmoji() {
285
- const emojis = ['💗', '💗', ''];
286
  return emojis[Math.floor(Math.random() * emojis.length)];
287
  }
288
 
 
12
  height: 100vh;
13
  width: 100vw;
14
  font-family: 'Arial Rounded MT Bold', sans-serif;
15
+ background: linear-gradient(to bottom right, #ffffff, #f7e9d2);
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
  /* Khung chữ */
19
  .container {
20
  position: absolute;
21
+ border: 5px solid #8B4513;
22
+ padding: 40px;
23
  border-radius: 20px;
24
+ background-color: rgba(255, 255, 255, 0.3);
25
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
26
  overflow: hidden;
27
  cursor: grab;
28
  user-select: none;
 
32
  cursor: grabbing;
33
  }
34
 
35
+ /* Video nền cho container */
36
  .video-background {
37
+ position: absolute;
38
+ top: 0;
39
+ left: 0;
40
+ width: 100%;
41
+ height: 100%;
42
+ object-fit: cover;
43
+ z-index: -1;
44
+ border-radius: 15px;
45
  }
46
 
47
  h1 {
48
+ font-size: 6rem;
49
+ color: #8B4513;
50
+ text-shadow: 0 0 25px #d2b48c, 0 0 40px #8B4513;
51
  display: flex;
52
  flex-direction: column;
53
  align-items: center;
 
55
  margin: 0;
56
  position: relative;
57
  z-index: 1;
 
58
  }
59
 
60
  .letter {
 
74
  position: absolute;
75
  font-size: 26px;
76
  animation: pop 1s ease-out forwards;
77
+ color: #8B4513;
78
  pointer-events: none;
 
79
  }
80
 
81
  @keyframes pop {
 
112
  </head>
113
  <body>
114
 
 
 
 
 
 
115
  <!-- Khung hoa văn -->
116
  <div class="border-frame"></div>
117
 
118
  <!-- Khung chữ với nội dung -->
119
  <div class="container">
120
+ <video class="video-background" autoplay loop muted playsinline>
121
+ <source src="video.mp4" type="video/mp4">
122
+ </video>
123
  <h1>
124
+ <span class="letter">emem</span>
125
  <span class="letter">XQ</span>
 
126
  <span class="letter">💗</span>
127
  </h1>
128
  </div>
 
274
 
275
  // Hàm random chọn emoji
276
  function getRandomEmoji() {
277
+ const emojis = ['💗', '💗', ''];
278
  return emojis[Math.floor(Math.random() * emojis.length)];
279
  }
280