-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
executable file
·82 lines (82 loc) · 3.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Countdown</title>
<link rel="icon" type="image/png" href="favicon.ico" />
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Video Background -->
<video class="video-background" id="video-background" loop muted autoplay>
<source src="https://res.cloudinary.com/dh41vh9dx/video/upload/v1596382487/bigBen.mp4"></source>
</video>
<nav class="navbar fixed-top">
<div class="navbar-item">Countdown Timer</div>
<!-- <div class="add-button" id="add-button">Add Countdown</div> -->
<div class="add-button navbar-item" id="show-modal">Suggested Countdown</div>
<a class="navbar-item" href="https://portfolio-revamp.vercel.app/" ><div>Portfolio</div></a>
</nav>
<div class="video-overlay"></div>
<div class="add-container">
</div>
<!-- Container -->
<!-- <div id="container"> -->
<div class="single-container">
<!-- Input -->
<div class="input-container" id="input-container">
<h1>Create a Custom Countdown!</h1>
<form class="form" id="countdownForm" >
<label for="title">Title</label>
<input type="text" id="title" placeholder="What are you counting down to?" autocomplete="off">
<label for="date-picker">Select a Date</label>
<input type="date" id="date-picker">
<button type="submit">Submit</button>
</form>
</div>
<!-- Countdown -->
<div class="countdown" id="countdown" hidden >
<h1 id="countdown-title"></h1>
<ul>
<li><span></span>Days</li>
<li><span></span>Hours</li>
<li><span></span>Minutes</li>
<li><span></span>Seconds</li>
</ul>
<button id="countdown-button">RESET</button>
</div>
<!-- Complete -->
<div class="complete" id="complete" hidden>
<h1 class="complete-title">Countdown Complete!</h1>
<h1 id="complete-info"></h1>
<button id="complete-button">NEW COUNTDOWN</button>
</div>
</div>
<!-- </div> -->
<!-- Modal -->
<div class="modal-container " id="modal">
<div class="modal">
<div class="modal-header">
<h3>Select a Countdown</h3>
</div>
<ul class="suggested-list">
<li class="suggested-list-li">Presidential Election</li>
<li class="suggested-list-li">Christmas</li>
<li class="suggested-list-li">Hanukkah</li>
<li class="suggested-list-li">Thanksgiving</li>
<li class="suggested-list-li">Yom Kippur</li>
<li class="suggested-list-li">Valentine's Day</li>
<li class="suggested-list-li">Halloween</li>
<li class="suggested-list-li">Friday the 13th</li>
<li class="suggested-list-li">Black Friday</li>
<li class="suggested-list-li">New Year's Eve</li>
</ul>
</div>
<i class="fas fa-times close-icon" id="close-modal"></i>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>