cocktail-hour/index.html at main · Hailo7ts/cocktail-hour · GitHub

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE HTML>
<!--
	Hyperspace by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>Cocktail Hour</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
	</head>
	<body class="is-preload">

		<!-- Sidebar -->
			<section id="sidebar">
				<div class="inner">
					<nav>
						<ul>
							<li><a href="#intro">Welcome</a></li>
							<li><a href="#one">About Cocktail Hour</a></li>
							<li><a href="#two">Find Cocktail</a></li>
						</ul>
					</nav>
				</div>
			</section>

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Intro -->
					<section id="intro" class="wrapper style1 fullscreen fade-up">
						<video playsinline autoplay muted loop poster="images/default-drink.png" id="bgvid">
							<source src="images/drink.mp4" type="video/mp4">
						</video>
						<div class="inner">
							<h1>Cocktail Hour</h1>
							<p>Finding the perfect drink for your next cocktail hour at home</p>
						</div>
					</section>

				<!-- One -->
					<section id="one" class="wrapper style2 spotlights">
						<section>
							<a href="#" class="image"><img src="images/drinks.png" alt="" data-position="center center" /></a>
							<div class="content">
								<div class="inner">
									<h2>Pick Your Poison</h2>
									<p>Search hundreds of mixed drinks by looking up your alcohol of choice.
										Instructions and ingredients are provided.
									</p>
								</div>
							</div>
						</section>


				<!-- Two -->
					<section id="two" class="wrapper style3 fade-up">
						<div class="inner">
							<h2>Find Cokctails</h2>
							<p>Enter your alcohol of choice below to find your mixed drink!</p>
							<input type="text"
									placeholder="ALCOHOL"
									class="drink-input">
							<button type="button"
									name="button"
									class="get-drink">Get Cocktail
							</button>

							<div class="features drink">
								<h2 class="drink-name">Cocktail</h2>
								<img src="images/default-drink.png"
									alt="drinks"
									class="drink-img">
								<div class="navigate">
									<div class="goLeft"> Previous </div>
									<div class="goRight"> Next </div>
								</div>

								<h3>Instructions</h3>
								<p class="instructions"></p>
								<h4>Ingredients</h4>
								<p class="ingredients"></p>
						</div>
					</section>

		<!-- Footer -->
			<footer id="footer" class="wrapper style1-alt">
				<div class="inner">
					<ul class="menu">
						<li>&copy; Hailey Martin</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
					</ul>
				</div>
			</footer>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrollex.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>

	</body>
</html>