Skip to content

Commit 81b0d2f

Browse files
reymon359reymon359
committed
starting 29
1 parent 0f11b9a commit 81b0d2f

File tree

5 files changed

+121
-6
lines changed

5 files changed

+121
-6
lines changed

‎28 - Video Speed Controller/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link rel="stylesheet" href="style.css">
77
</head>
88
<body>
9-
9+
<h2>Video Speed Scrubber</h2>
1010
<div class="wrapper">
1111
<video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
1212
<p>

‎28 - Video Speed Controller/style.css‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
body {
2-
margin: 0;
3-
display: flex;
2+
/*margin: 0;*/
3+
/*display: flex;*/
44
justify-content: center;
55
align-items: center;
66
min-height: 100vh;
7-
background: #4C4C4C url('https://unsplash.it/1500/900?image=1021');
7+
background: repeating-linear-gradient(90deg, rgb(177, 19, 31) 0px, rgb(177, 19, 31) 63px,rgb(189, 27, 25) 63px, rgb(189, 27, 25) 133px,rgb(227, 49, 7) 133px, rgb(227, 49, 7) 227px,rgb(202, 34, 19) 227px, rgb(202, 34, 19) 298px,rgb(164, 12, 37) 298px, rgb(164, 12, 37) 363px,rgb(214, 42, 13) 363px, rgb(214, 42, 13) 434px);
88
background-size: cover;
99
font-family: sans-serif;
1010
}
11-
11+
h2{
12+
width: 100%;
13+
text-align: center;
14+
color: white;
15+
}
1216
.wrapper {
1317
width: 850px;
14-
display: flex;
18+
display: flex;margin: auto;
1519
}
1620

1721
video {

‎29 - Countdown Timer/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Countdown Timer</title>
6+
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="timer">
11+
<div class="timer__controls">
12+
<button data-time="20" class="timer__button">20 Secs</button>
13+
<button data-time="300" class="timer__button">Work 5</button>
14+
<button data-time="900" class="timer__button">Quick 15</button>
15+
<button data-time="1200" class="timer__button">Snack 20</button>
16+
<button data-time="3600" class="timer__button">Lunch Break</button>
17+
<form name="customForm" id="custom">
18+
<input type="text" name="minutes" placeholder="Enter Minutes">
19+
</form>
20+
</div>
21+
<div class="display">
22+
<h1 class="display__time-left"></h1>
23+
<p class="display__end-time"></p>
24+
</div>
25+
</div>
26+
27+
<script src="scripts.js"></script>
28+
</body>
29+
</html>

‎29 - Countdown Timer/scripts.js‎

Whitespace-only changes.

‎29 - Countdown Timer/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
html {
2+
box-sizing: border-box;
3+
font-size: 10px;
4+
background: #8E24AA;
5+
background: linear-gradient(45deg, #42a5f5 0%,#478ed1 50%,#0d47a1 100%);
6+
}
7+
8+
*, *:before, *:after {
9+
box-sizing: inherit;
10+
}
11+
12+
body {
13+
margin: 0;
14+
text-align: center;
15+
font-family: 'Inconsolata', monospace;
16+
}
17+
18+
.display__time-left {
19+
font-weight: 100;
20+
font-size: 20rem;
21+
margin: 0;
22+
color: white;
23+
text-shadow: 4px 4px 0 rgba(0,0,0,0.05);
24+
}
25+
26+
.timer {
27+
display: flex;
28+
min-height: 100vh;
29+
flex-direction: column;
30+
}
31+
32+
.timer__controls {
33+
display: flex;
34+
}
35+
36+
.timer__controls > * {
37+
flex: 1;
38+
}
39+
40+
.timer__controls form {
41+
flex: 1;
42+
display: flex;
43+
}
44+
45+
.timer__controls input {
46+
flex: 1;
47+
border: 0;
48+
padding: 2rem;
49+
}
50+
51+
.timer__button {
52+
background: none;
53+
border: 0;
54+
cursor: pointer;
55+
color: white;
56+
font-size: 2rem;
57+
text-transform: uppercase;
58+
background: rgba(0,0,0,0.1);
59+
border-bottom: 3px solid rgba(0,0,0,0.2);
60+
border-right: 1px solid rgba(0,0,0,0.2);
61+
padding: 1rem;
62+
font-family: 'Inconsolata', monospace;
63+
}
64+
65+
.timer__button:hover,
66+
.timer__button:focus {
67+
background: rgba(0,0,0,0.2);
68+
outline: 0;
69+
}
70+
71+
.display {
72+
flex: 1;
73+
display: flex;
74+
flex-direction: column;
75+
align-items: center;
76+
justify-content: center;
77+
}
78+
79+
.display__end-time {
80+
font-size: 4rem;
81+
color: white;
82+
}

0 commit comments

Comments
 (0)