Skip to content

Commit fcdc827

Browse files
reymon359reymon359
committed
28 started
1 parent e2f3c2a commit fcdc827

2 files changed

Lines changed: 62 additions & 0 deletions

File tree

‎28 - Video Speed Controller/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Video Speed Scrubber</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<div class="wrapper">
11+
<video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
12+
<div class="speed">
13+
<div class="speed-bar">1×</div>
14+
</div>
15+
</div>
16+
17+
<script>
18+
</script>
19+
</body>
20+
</html>

‎28 - Video Speed Controller/style.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
body {
2+
margin: 0;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
min-height: 100vh;
7+
background: #4C4C4C url('https://unsplash.it/1500/900?image=1021');
8+
background-size: cover;
9+
font-family: sans-serif;
10+
}
11+
12+
.wrapper {
13+
width: 850px;
14+
display: flex;
15+
}
16+
17+
video {
18+
box-shadow: 0 0 1px 3px rgba(0,0,0,0.1);
19+
}
20+
21+
.speed {
22+
background: #efefef;
23+
flex: 1;
24+
display: flex;
25+
align-items: flex-start;
26+
margin: 10px;
27+
border-radius: 50px;
28+
box-shadow: 0 0 1px 3px rgba(0,0,0,0.1);
29+
overflow: hidden;
30+
}
31+
32+
.speed-bar {
33+
width: 100%;
34+
background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
35+
text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
padding: 2px;
40+
color: white;
41+
height: 16.3%;
42+
}

0 commit comments

Comments
 (0)