Ciros commited on
Commit
9f0fb6b
·
1 Parent(s): b25db47

Upload 2 files

Browse files
Files changed (2) hide show
  1. player.css +88 -0
  2. player.js +14 -0
player.css ADDED
@@ -0,0 +1,88 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Fonte personalizada */
2
+ @import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
3
+
4
+ /* Definição das cores */
5
+ :root {
6
+ --primary-color: #FF5C5C;
7
+ --secondary-color: #FFF;
8
+ --tertiary-color: #333;
9
+ }
10
+
11
+ /* Estilo básico do corpo da página */
12
+ body {
13
+ font-family: 'Roboto', sans-serif;
14
+ background-color: var(--secondary-color);
15
+ color: var(--tertiary-color);
16
+ margin: 0;
17
+ padding: 0;
18
+ }
19
+
20
+ /* Estilo do cabeçalho */
21
+ header {
22
+ display: flex;
23
+ align-items: center;
24
+ justify-content: space-between;
25
+ background-color: var(--primary-color);
26
+ padding: 1rem;
27
+ }
28
+
29
+ /* Estilo do logotipo */
30
+ .logo {
31
+ font-size: 2rem;
32
+ font-weight: 700;
33
+ color: var(--secondary-color);
34
+ }
35
+
36
+ /* Estilo dos botões */
37
+ button {
38
+ background-color: var(--secondary-color);
39
+ color: var(--primary-color);
40
+ border: none;
41
+ border-radius: 5px;
42
+ padding: 0.5rem 1rem;
43
+ font-size: 1rem;
44
+ font-weight: 700;
45
+ cursor: pointer;
46
+ transition: background-color 0.3s ease, color 0.3s ease;
47
+ }
48
+
49
+ button:hover {
50
+ background-color: var(--primary-color);
51
+ color: var(--secondary-color);
52
+ }
53
+
54
+ /* Estilo da seção principal */
55
+ main {
56
+ display: flex;
57
+ flex-wrap: wrap;
58
+ justify-content: space-between;
59
+ max-width: 1200px;
60
+ margin: 0 auto;
61
+ padding: 2rem;
62
+ }
63
+
64
+ /* Estilo do wrapper do vídeo */
65
+ .video-wrapper {
66
+ position: relative;
67
+ width: 100%;
68
+ padding-top: 56.25%;
69
+ }
70
+
71
+ /* Estilo do vídeo */
72
+ #video {
73
+ position: absolute;
74
+ top: 0;
75
+ left: 0;
76
+ width: 100%;
77
+ height: 100%;
78
+ }
79
+
80
+ /* Estilo do player */
81
+ #play-button {
82
+ position: absolute;
83
+ top: 50%;
84
+ left: 50%;
85
+ transform: translate(-50%, -50%);
86
+ z-index: 1;
87
+ font-size: 2rem;
88
+ }
player.js ADDED
@@ -0,0 +1,14 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const video = document.getElementById('video');
2
+ const playButton = document.getElementById('play-button');
3
+
4
+ playButton.addEventListener('click', toggleVideo);
5
+
6
+ function toggleVideo() {
7
+ if (video.paused) {
8
+ video.play();
9
+ playButton.textContent = 'Pause';
10
+ } else {
11
+ video.pause();
12
+ playButton.textContent = 'Play';
13
+ }
14
+ }