Added deliver, updated index to php

This commit is contained in:
2026-08-16 17:52:56 -05:00
parent 265f0ef25d
commit d2b52f7a42
5 changed files with 92 additions and 77 deletions
-25
View File
@@ -1,25 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="color-scheme" content="light dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alchemy Calculator</title>
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li>
<a href="/">
<img src="logo.png" alt="Company Name Home">
</a>
</li>
<li><a href="/about">About</a></li>
<li><a href="/shop">Shop</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
+13
View File
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="color-scheme" content="light dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alchemy Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php include 'nav.html'; ?>
</body>
</html>
+25 -37
View File
@@ -1,53 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="color-scheme" content="light dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alchemy Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li>
<a href="/">
<img src="img/logo.png" alt="Company Name Home">
<header class="site-header">
<nav class="navbar" aria-label="Profession Navigation">
<ul class="navbar__list">
<li class="navbar__item">
<a href="index.php" class="navbar__link">
<img src="img/logo.png" alt="Company Name Home" class="navbar__icon">
</a>
</li>
<li>
<a href="/alchemyIngredientPage.php">
<img src="/img/alchemy.png" alt="Alchemy">
<li class="navbar__item">
<a href="alchemyIngredientPage.php" class="navbar__link">
<img src="img/alchemy.png" alt="Alchemy" class="navbar__icon">
</a>
</li>
<li>
<a href="/">
<img src="Blacksmithing.png" alt="Blacksmithing">
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="Blacksmithing.png" alt="Blacksmithing" class="navbar__icon">
</a>
</li>
<li>
<a href="/">
<img src="Engineering.png" alt="Engineering">
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="Engineering.png" alt="Engineering" class="navbar__icon">
</a>
</li>
<li>
<a href="/">
<img src="Jewelcrafting.png" alt="Jewelcrafting">
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="Jewelcrafting.png" alt="Jewelcrafting" class="navbar__icon">
</a>
</li>
<li>
<a href="/">
<img src="Leatherworking.png" alt="Leatherworking">
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="Leatherworking.png" alt="Leatherworking" class="navbar__icon">
</a>
</li>
<li>
<a href="/">
<img src="Tailoring.png" alt="Tailoring">
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="Tailoring.png" alt="Tailoring" class="navbar__icon">
</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
</header>
+51 -15
View File
@@ -1,27 +1,63 @@
ul {
list-style-type: none;
:root {
--nav-height: 60px;
}
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--nav-height);
background-color: #333333;
z-index: 1000;
}
nav {
height: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.navbar__list {
display: flex;
align-items: center;
gap: 1.5rem;
height: 100%;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
list-style: none;
}
.navbar__icon {
display: block;
height: 25px;
width: 25px;
object-fit: contain;
}
.navbar__link:hover {
background-color: #111111;
}
.navbar__link:hover .navbar__icon {
transform: translateY(-4px); /* Gently lifts the icon upward */
filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.15)); /* Adds a slight glow or deeper shadow */
}
.navbar__link:active .navbar__icon {
background-color: #04AA6D;
filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.15)); /* Adds a slight glow or deeper shadow */
}
ul li a {
display: block;
color: white;
height: 25px;
width: 25px;
object-fit: contain;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
ul li a.active {
background-color: #04AA6D;
}
ul li a img {
width: 25px;
height: 25px;
}