Added deliver, updated index to php
This commit is contained in:
@@ -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>
|
|
||||||
Executable
+13
@@ -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>
|
||||||
+24
-36
@@ -1,53 +1,41 @@
|
|||||||
<!DOCTYPE html>
|
<header class="site-header">
|
||||||
<html lang="en">
|
<nav class="navbar" aria-label="Profession Navigation">
|
||||||
<head>
|
<ul class="navbar__list">
|
||||||
<meta charset="UTF-8">
|
<li class="navbar__item">
|
||||||
<meta name="color-scheme" content="light dark">
|
<a href="index.php" class="navbar__link">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<img src="img/logo.png" alt="Company Name Home" class="navbar__icon">
|
||||||
<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">
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li class="navbar__item">
|
||||||
<a href="/alchemyIngredientPage.php">
|
<a href="alchemyIngredientPage.php" class="navbar__link">
|
||||||
<img src="/img/alchemy.png" alt="Alchemy">
|
<img src="img/alchemy.png" alt="Alchemy" class="navbar__icon">
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li class="navbar__item">
|
||||||
<a href="/">
|
<a href="" class="navbar__link">
|
||||||
<img src="Blacksmithing.png" alt="Blacksmithing">
|
<img src="Blacksmithing.png" alt="Blacksmithing" class="navbar__icon">
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li class="navbar__item">
|
||||||
<a href="/">
|
<a href="" class="navbar__link">
|
||||||
<img src="Engineering.png" alt="Engineering">
|
<img src="Engineering.png" alt="Engineering" class="navbar__icon">
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li class="navbar__item">
|
||||||
<a href="/">
|
<a href="" class="navbar__link">
|
||||||
<img src="Jewelcrafting.png" alt="Jewelcrafting">
|
<img src="Jewelcrafting.png" alt="Jewelcrafting" class="navbar__icon">
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li class="navbar__item">
|
||||||
<a href="/">
|
<a href="" class="navbar__link">
|
||||||
<img src="Leatherworking.png" alt="Leatherworking">
|
<img src="Leatherworking.png" alt="Leatherworking" class="navbar__icon">
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li class="navbar__item">
|
||||||
<a href="/">
|
<a href="" class="navbar__link">
|
||||||
<img src="Tailoring.png" alt="Tailoring">
|
<img src="Tailoring.png" alt="Tailoring" class="navbar__icon">
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
+51
-15
@@ -1,27 +1,63 @@
|
|||||||
ul {
|
:root {
|
||||||
list-style-type: none;
|
--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;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: #333333;
|
list-style: none;
|
||||||
display: flex;
|
}
|
||||||
|
|
||||||
|
.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 {
|
ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
color: white;
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
object-fit: contain;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul li a:hover {
|
|
||||||
background-color: #111111;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li a.active {
|
ul li a.active {
|
||||||
background-color: #04AA6D;
|
background-color: #04AA6D;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li a img {
|
|
||||||
width: 25px;
|
|
||||||
height: 25px;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user