CocktailCarousel/index.html at main · KateIvesDev/CocktailCarousel · 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
<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="utf-8">
		<meta content=
    "width=device-width, height=device-height, initial-scale=1"
          name="viewport">

		<title>Find Your Cocktail</title>

		<!-- external CSS link -->
		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
		<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>

		<h1>Search By Cocktail Name</h1>
		<input type="text" name="" value="" id="cocktail-input">
		<button type="button" name="button" id="cocktail-button" class="search-btn">Get Cocktail</button>
		<section class="empty-search"></section>

		<section class="featured-drink">
			<h2 class="featured-heading">Featured Cocktail</h2>
			<div class="featured-content"></div>
		</section>
		<section class="drink-carousel">
			<div class="carousel-content"></div>
			<div class="carousel-button-wrapper"></div>
		</section>
		<footer>
			Recipes Credit: <a href="https://www.thecocktaildb.com/">The CocktailDB</a>
		<footer>


		<script type="text/javascript" src="js/main.js"></script>
	</body>
</html>