diff --git "a/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/css/progress.css" "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/css/progress.css"
new file mode 100644
index 0000000..f9232c9
--- /dev/null
+++ "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/css/progress.css"
@@ -0,0 +1,112 @@
+/* SOURCE: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
+
+input[type='range'] {
+ -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+ width: 100%; /* Specific width is required for Firefox. */
+ background: transparent; /* Otherwise white in Chrome */
+}
+
+input[type='range']::-webkit-slider-thumb {
+ -webkit-appearance: none;
+}
+
+input[type='range']:focus {
+ outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
+}
+
+input[type='range']::-ms-track {
+ width: 100%;
+ cursor: pointer;
+
+ /* Hides the slider so custom styles can be added */
+ background: transparent;
+ border-color: transparent;
+ color: transparent;
+}
+
+/* Special styling for WebKit/Blink */
+input[type='range']::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ border: 1px solid #000000;
+ height: 36px;
+ width: 16px;
+ border-radius: 3px;
+ background: #ffffff;
+ cursor: pointer;
+ margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
+ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
+}
+
+/* All the same stuff for Firefox */
+input[type='range']::-moz-range-thumb {
+ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+ border: 1px solid #000000;
+ height: 36px;
+ width: 16px;
+ border-radius: 3px;
+ background: #ffffff;
+ cursor: pointer;
+}
+
+/* All the same stuff for IE */
+input[type='range']::-ms-thumb {
+ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+ border: 1px solid #000000;
+ height: 36px;
+ width: 16px;
+ border-radius: 3px;
+ background: #ffffff;
+ cursor: pointer;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+ width: 100%;
+ height: 8.4px;
+ cursor: pointer;
+ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+ background: #3071a9;
+ border-radius: 1.3px;
+ border: 0.2px solid #010101;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+ background: #367ebd;
+}
+
+input[type='range']::-moz-range-track {
+ width: 100%;
+ height: 8.4px;
+ cursor: pointer;
+ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+ background: #3071a9;
+ border-radius: 1.3px;
+ border: 0.2px solid #010101;
+}
+
+input[type='range']::-ms-track {
+ width: 100%;
+ height: 8.4px;
+ cursor: pointer;
+ background: transparent;
+ border-color: transparent;
+ border-width: 16px 0;
+ color: transparent;
+}
+input[type='range']::-ms-fill-lower {
+ background: #2a6495;
+ border: 0.2px solid #010101;
+ border-radius: 2.6px;
+ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type='range']:focus::-ms-fill-lower {
+ background: #3071a9;
+}
+input[type='range']::-ms-fill-upper {
+ background: #3071a9;
+ border: 0.2px solid #010101;
+ border-radius: 2.6px;
+ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type='range']:focus::-ms-fill-upper {
+ background: #367ebd;
+}
diff --git "a/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/css/style.css" "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/css/style.css"
new file mode 100644
index 0000000..49b736d
--- /dev/null
+++ "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/css/style.css"
@@ -0,0 +1,75 @@
+@import url('https://fonts.googleapis.com/css?family=Questrial&display=swap');
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Questrial', sans-serif;
+ background-color: #666;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ max-height: 100vh;
+ margin: 0;
+}
+
+h1 {
+ color: #fff;
+}
+
+.screen {
+ cursor: pointer;
+ width: 60%;
+ background-color: #000 !important;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+}
+
+.controls {
+ background: #333;
+ color: #fff;
+ width: 60%;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 10px;
+}
+
+.controls .btn {
+ border: 0;
+ background: transparent;
+ cursor: pointer;
+}
+
+.controls .fa-play {
+ color: #28a745;
+}
+
+.controls .fa-stop {
+ color: #dc3545;
+}
+
+.controls .fa-pause {
+ color: #fff;
+}
+
+.controls .timestamp {
+ color: #fff;
+ font-weight: bold;
+ margin-left: 10px;
+}
+
+.btn:focus {
+ outline: 0;
+}
+
+@media (max-width: 800px) {
+ .screen,
+ .controls {
+ width: 90%;
+ }
+}
diff --git "a/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/img/poster.png" "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/img/poster.png"
new file mode 100644
index 0000000..a0d1413
Binary files /dev/null and "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/img/poster.png" differ
diff --git "a/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/index.html" "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/index.html"
new file mode 100644
index 0000000..b14f9f9
--- /dev/null
+++ "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/index.html"
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ Custom Video Player
+
+
+
+
+
+ Custom Video Player
+
+
+
+
+
+ 00:00
+
+
+
+
+
+
+
diff --git "a/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/js/index.js" "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/js/index.js"
new file mode 100644
index 0000000..0fe919d
--- /dev/null
+++ "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/js/index.js"
@@ -0,0 +1,39 @@
+const $screen = document.querySelector('.screen');
+const $video = document.querySelector('#video');
+const $playButton = document.querySelector('#play');
+const $stopButton = document.querySelector('#stop');
+const $progress = document.querySelector('.progress');
+const $timestamp = document.querySelector('.timestamp');
+
+$screen.addEventListener('click', toggleVideo);
+$video.addEventListener('timeupdate', handleProgress);
+$playButton.addEventListener('click', playVideo);
+$stopButton.addEventListener('click', pauseVideo);
+$video.addEventListener('timeupdate', updateTimestamp);
+$progress.addEventListener('change', moveProgressBar);
+
+function toggleVideo() {
+ $video.paused ? playVideo() : pauseVideo();
+}
+function handleProgress() {
+ const percent = $video.currentTime / $video.duration * 100;
+ $progress.value = `${percent}`;
+}
+function playVideo() {
+ $video.play();
+}
+function pauseVideo() {
+ $video.pause();
+}
+function moveProgressBar() {
+ $video.currentTime = $progress.value * $video.duration / 100;
+}
+function updateTimestamp() {
+ const secs = getUnderPoint($video.currentTime / 100);
+ const min = getUnderPoint(Math.round(secs / 60) / 100);
+ const sec = getUnderPoint(secs % 60/100);
+ $timestamp.textContent = `${min}:${sec}`;
+}
+function getUnderPoint(num) {
+ return Number(num).toFixed(2).split('.')[1];
+}
\ No newline at end of file
diff --git "a/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/videos/Daisy - 103485.mp4" "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/videos/Daisy - 103485.mp4"
new file mode 100644
index 0000000..ea30d75
Binary files /dev/null and "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/videos/Daisy - 103485.mp4" differ
diff --git "a/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/videos/gone.mp4" "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/videos/gone.mp4"
new file mode 100644
index 0000000..2e84739
Binary files /dev/null and "b/\354\240\204\354\261\204\354\235\264/CustomVideoPlayer/videos/gone.mp4" differ