-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (148 loc) · 5.53 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
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<title>Knoxville Cafe</title>
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/home-style.css">
</head>
<body onscroll="navGrow()">
<header id="headerSection" class="row justify-content-center align-items-center header-style">
<div class="row justify-content-end logo-row">
<div class="col-5 logo-circle">
<div class="row logo-word-contain justify-content-center align-items-center">
<div class="col-12 header-logo">Knoxville Cafe</div>
<div class="col-12 header-logo">~ Est. 2020 ~</div>
</div>
</div>
</div>
</header>
<div class="separate-sections row justify-content-center align-items-center">
<div class="col-12">A new cooperative for entrepreneurs,<br>remote workers, and coffee addicts alike!</div>
</div>
<!--About coffee-->
<div class="row coffee-style">
<!--natural-->
<div class="natural-card col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<div class="natural-top-layer">Regionally<br>Sourced</div>
</div>
<!--quality-->
<div class="quality-card col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<div class="quality-top-layer">Beverage<br>Variety</div>
</div>
</div>
<!--Productive Enviroment-->
<div class="row produce-style">
<div class="row align-items-center produce-top-layer">
<div class="col-12">Meet over coffee with Knoxville's movers<br>and shakers. Find mentors and mentees</div>
</div>
</div>
<!--About-->
<footer id="aboutInfo" class="row footer-style align-items-center justify-content-center">
<div class="col-8 col-sm-6 col-md-5 col-lg-5 col-xl-5">
<span><u>Address:</u></span>
<address>849 Bluff Drive<br>Knoxville, TN<br>37919</address>
</div>
<div class="col-8 col-sm-6 col-md-5 col-lg-5 col-xl-5">
<span><u>Hours of Operation:</u></span>
<p>
M-F: 10:00am-7:00pm<br>
Saturday: 9:00am-9:00pm<br>
Sunday: 12:00pm-6:00pm
</p>
</div>
</footer>
<nav id="navSelector" class="row justify-content-around align-items-center nav-style">
<div class="nav-brand-name col-7 col-sm-7 col-md-5 col-lg-5 col-xl-5">Knoxville Cafe</div>
<div class="hide-on-xs col-sm-7 col-md-6 col-lg-6 col-xl-6">
<div class="row nav-list">
<div class="col-2"><a id="nav-link" href="#headerSection">Home</a></div>
<div class="col-4"><a id="nav-link" href="mailto:hello@knoxville.cafe">Contact</a></div>
<div class="col-3"><a id="nav-link" href="#aboutInfo">About</a></div>
<div class="col-3"><a class="bigNavMenu" id="nav-link" href="#">Menu</a></div>
</div>
</div>
<!--add burger below here-->
<div class="col-3 col-sm-3 d-md-none d-lg-none">
<div id="burgerButton" class="burger">
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
</div>
</div>
</nav>
<!--This div will fill the entire screen with the nav menu on click of burger-->
<div id="navPopUp" class="row justify-content-center align-items-center nav-pop-up">
<div id="closeButton" class="close-button col-1">✕</div>
<div class="col-7 justify-content-center align-items-around pop-up-container">
<div class="col-12"><a id="nav-link-pop" href="#headerSection">Home</a></div>
<br>
<div class="col-12"><a id="nav-link-pop" href="mailto:hello@knoxville.cafe">Contact</a></div>
<br>
<div class="col-12"><a id="nav-link-pop" href="#aboutInfo">About</a></div>
<br>
<div class="col-12"><a class="smallNavMenu" id="nav-link-pop" href="#">Menu</a></div>
</div>
</div>
<div id="menuPopUp" class="row menu-style justify-content-center align-items-center">
<div id="menuClose" class="menu-close">✕</div>
<div class="menu-container col-10 col-sm-10 col-md-8 col-lg-7 col-xl-7">
<div class="menu-header">
<div class="menu-header-top">
<span>Knoxville Cafe - Menu</span>
</div>
</div>
<div class="row menu-list justify-content-center align-items-start">
<!--item list-->
<div class="col-6">
<span class="menu-heading"><u>Coffee</u></span>
<ul class="menu-items">
<li>Classic</li>
<li>Iced</li>
<li>Cold Brew</li>
<li>(decaf coming soon!)</li>
</ul>
</div>
<!--price and size list-->
<div class="col-6">
<span class="menu-heading"><u>Price</u></span>
<ul class="menu-items">
<li>$2.00</li>
<li>$3.50</li>
<li>$3.50</li>
</ul>
</div>
<!--espresso-->
<div class="col-6">
<span class="menu-heading"><u>Espresso</u></span>
<ul class="menu-items">
<li>Espresso</li>
<li>Latte</li>
<li>Mocha</li>
<li>Cappuchino</li>
<li>Americano</li>
<li>Macchiato</li>
</ul>
</div>
<!--price and size list-->
<div class="col-6">
<span class="menu-heading"><u>Price</u></span>
<ul class="menu-items">
<li>$2.00</li>
<li>$3.50</li>
<li>$3.50</li>
<li>$3.30</li>
<li>$3.00</li>
<li>$3.20</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/navAnimation.js"></script>
<script src="js/showMenu.js"></script>
</body>
</html>