Merge pull request #12 from Rod-Freedom/drinkshtml

Starting the drinks html
Rod-Freedom · May 8, 2024 · 785dc1e · 785dc1e
2 parents 01d71cc + b7d418c
commit 785dc1e
Showing 1 changed file with 44 additions and 4 deletions.
diff --git a/drink.html b/drink.html
@@ -3,10 +3,50 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pokeholic | Drink Selected!</title>
-    <script src="./assets/js/drink.js"></script>
+    <meta name="description" content="Gotta Drink'em All!">
+    <link rel="shortcut icon" href="./assets/images/Ph-Favicon-square.png" type="image/x-icon">
+    <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=Jersey+10&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Rubik+Mono+One&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./assets/CSS/style.css">
+    <link rel="stylesheet" href="./assets/CSS/drink.css">
+    <script defer src="https://kit.fontawesome.com/fef0315d16.js" crossorigin="anonymous"></script>
+    <script defer src="https://cdn.tailwindcss.com"></script>
+    <script defer src="./assets/js/logic.js"></script>
+    <script defer src="./assets/js/drink.js"></script>
+    <title>Pokeholic | Gotta Drink'em All!</title>
 </head>
-<body>
-
+<body class="flex flex-col justify-between relative overflow-x-hidden">
+    <div class="front-bg-filter z-0"></div>
+        <header class="w-full h-1/6 flex flex-row justify-center items-start relative z-10">
+            <div class="brand-bg absolute h-1/2 w-full top-0 z-0"></div>
+            <div class="font-brand-title color-brand title-brand flex flex-row flex-nowrap justify-start header-div z-10 h-5/6 md:pl-16 pl-2 mr-auto">
+                <h1 class="letter front" data-rotation="-.2">P</h1>
+                <h1 class="letter back" data-rotation="-.1">o</h1>
+                <h1 class="letter middle" data-rotation="-.05">k</h1>
+                <h1 class="letter front" data-rotation=".05">E</h1>
+                <h1 class="letter middle" data-rotation="-.05">h</h1>
+                <h1 class="letter back" data-rotation=".1">ó</h1>
+                <h1 class="letter front" data-rotation=".1">L</h1>
+                <h1 class="letter middle" data-rotation=".05">i</h1>
+                <h1 class="letter back" data-rotation=".2">c</h1>
+            </div>
+
+            <div class="flex justify-end items-center header-div z-10 h-4/6 div-dex md:pr-16 pr-2 ml-auto">
+                <button id="btn-dex" class="flex items-center justify-center py-4 px-6 text-white/75">
+                    <h1 class="font-brand-title text-4xl booze-dex pl-1 pr-8">BOOZE-DEX</h1>
+                    <i class="fa-regular fa-game-console-handheld md:text-6xl lg:text-7xl text-5xl"></i>
+                </button>
+            </div>
+        </header>
+    <main class="flex z-10 relative w-full py-16 px-8">
+
+    </main>
+    <footer class="flex flex-col items-center h-3/12 brand-bg border-t-slate-500 border-t-2 z-10">
+        <a id="GH-link" href="https://github.com/Rod-Freedom/P1-Pokeholic" target="_blank" class="h-1/3 flex flex-row justify-center items-center text-2xl w-fit text-slate-300 hover:text-slate-50">
+            <i class="fa-brands fa-github"></i>
+            <h3 class="ml-3 font-content font-light underline-offset-4 link-text"><span class="font-bold">PokEhólic</span> GitHub</h3>
+        </a>
+    </footer>
 </body>
 </html>