https://fiveoclocksomewhere.netlify.app/

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=8843224a-3682-4156-9bc8-d9dbb26f9bee
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
10    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
11    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
12    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
13    <link rel="manifest" href="/site.webmanifest" />
14    <!-- Compiled and minified CSS -->
15    <link
16      href="https://fonts.googleapis.com/icon?family=Material+Icons"
17      rel="stylesheet"
18    />
19    <link
20      rel="stylesheet"
21      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
22    />
23    <link rel="stylesheet" href="/css/style.css" />
24    <link rel="stylesheet" href="css/responsive.css" />
25    <title>Favorite Cocktail Recipe</title>
26  </head>
27  <body>
28    <main>
29      <div class="navbar-fixed">
30        <nav>
31          <div class="nav-wrapper white">
32            <a class='brand-logo center' href='/'>
33              <i id="glass-icon" class="material-icons hide-on-med-and-down"
34                >local_bar</i
35              >
36              Five O'Clock
37              <span class="hide-on-med-and-down">Somewhere</span></a
38            >
39            <a href="#" data-target="mobile-nav" class="sidenav-trigger right"
40              ><i class="material-icons hamburger">menu</i></a
41            >
42            <ul id="nav-mobile" class="right hide-on-med-and-down">
43              <li><a href='/random'>RANDOM</a></li>
44              <li><a href='/popular'>POPULAR</a></li>
45            </ul>
46          </div>
47        </nav>
48      </div>
49
50      <!-- Side Navigation HTML -->
51      <ul class="sidenav" id="mobile-nav">
52        <li><a href='/'>Home</a></li>
53        <li><a href='/popular'>Popular</a></li>
54        <li><a href='/random'>Random Drink</a></li>
55      </ul>
56
57      <div class="row">
58        <div class="col s12 m12 l6 left-main hide-on-med-and-down">
59          <div class="overlay"></div>
60          <a class='waves-effect waves-light btn btn-large' href='/popular'>Popular Drinks</a
61          >
62        </div>
63        <div class="col s12 m12 l6 right-main">
64          <div class="right-main-container">
65            <img
66              src="/img/cocktail2.png"
67              alt="Cocktail"
68              class="responsive-image"
69            />
70            <div class="cocktail-header-box">
71              <h1 class="flow-text">Find a drink for your 5 o'Clock</h1>
72              <form action="/search.html" method="GET" class="input-field">
73                <label for="cocktail">Find A Cocktail</label>
74                <input type="text" id="cocktail" name="cocktail" required />
75                <div class="search-buttons">
76                  <a class='waves-effect waves-light btn btn-small' href='/random'>Random Drink</a
77                  >
78                  <button
79                    class="waves-effect waves-light btn btn-small"
80                    type="submit"
81                  >
82                    Search<i class="material-icons right">send</i>
83                  </button>
84                </div>
85              </form>
86            </div>
87          </div>
88        </div>
89      </div>
90
91      <section class="latest-drinks" id="latest-drinks">
92        <h2 class="flow-text center">The latest Drinks for your next party</h2>
93        <hr />
94        <div class="container">
95          <div class="row" id="latest-drink-items"></div>
96        </div>
97      </section>
98    </main>
99    <footer class="page-footer">
100      <div class="container">
101        <div class="row">
102          <div class="col l6 s12">
103            <h5 class="white-text">Five o'clock Somewhere</h5>
104            <p class="grey-text text-lighten-4">
105              Powered by
106              <a
107                href="http://www.thecocktaildb.com"
108                target="_blank"
109                class="white-text"
110                >The Cocktail Database</a
111              >
112            </p>
113          </div>
114          <div class="col l4 offset-l2 s12">
115            <h5 class="white-text">Popular Links</h5>
116            <ul>
117              <li>
118                <a class='grey-text text-lighten-3' href='/'>Home</a>
119              </li>
120              <li>
121                <a class='grey-text text-lighten-3' href='/random'>Random Drink</a
122                >
123              </li>
124              <li>
125                <a class='grey-text text-lighten-3' href='/popular'>Popular Drinks</a
126                >
127              </li>
128            </ul>
129          </div>
130        </div>
131      </div>
132      <div class="footer-copyright">
133        <div class="container center">© 2025 5o'Clock Somewhere</div>
134      </div>
135    </footer>
136
137    <!-- Compiled and minified JavaScript -->
138    

138<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

138
139    

139<script src="js/main.js"></script>

139
140  </body>
141</html>