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>
|
||||
<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>
|
||||
+51
-15
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user