tristan/willowmecreationsV2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

modified how navigation functions, updates to mobile site.

Browse source
This commit is contained in:
Tristan Smith 2024-05-26 18:46:50 -04:00
parent e31fbb2631
commit 77da2efd45
10 changed files with 152 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
404.html
View file

@ -13,14 +13,17 @@
<header class="header"> <header class="header">
<div class="container"> <div class="container">
<div class="logo"> <div class="logo">
<img src="img/logo.png" alt="WillowMeCreations logo"> <img src="img/logo-transparent.png" alt="WillowMeCreations logo">
</div> </div>
<nav class="topnav"> <nav class="topnav" id="myTopnav">
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="about.html">About</a> <a href="about.html">About</a>
<a href="news.html">News</a> <a href="news.html">News</a>
<a href="products.html">Products</a> <a href="products.html">Products</a>
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
<i class="fa fa-bars"></i>
</a>
</nav> </nav>
</div> </div>
</header> </header>

9
about.html
View file

@ -13,14 +13,17 @@
<header class="header"> <header class="header">
<div class="container"> <div class="container">
<div class="logo"> <div class="logo">
<img src="img/logo.png" alt="WillowMeCreations logo"> <img src="img/logo-transparent.png" alt="WillowMeCreations logo">
</div> </div>
<nav class="topnav"> <nav class="topnav" id="myTopnav">
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="about.html">About</a> <a href="about.html" class="active">About</a>
<a href="news.html">News</a> <a href="news.html">News</a>
<a href="products.html">Products</a> <a href="products.html">Products</a>
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
<i class="fa fa-bars"></i>
</a>
</nav> </nav>
</div> </div>
</header> </header>

14
contact.html
View file

@ -13,14 +13,17 @@
<header class="header"> <header class="header">
<div class="container"> <div class="container">
<div class="logo"> <div class="logo">
<img src="img/logo.png" alt="WillowMeCreations logo"> <img src="img/logo-transparent.png" alt="WillowMeCreations logo">
</div> </div>
<nav class="topnav"> <nav class="topnav" id="myTopnav">
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="about.html">About</a> <a href="about.html">About</a>
<a href="news.html">News</a> <a href="news.html">News</a>
<a href="products.html">Products</a> <a href="products.html">Products</a>
<a href="contact.html">Contact</a> <a href="contact.html" class="active">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
<i class="fa fa-bars"></i>
</a>
</nav> </nav>
</div> </div>
</header> </header>
@ -36,9 +39,8 @@
through our social media channels. Let's weave a thread of creativity and conversation together at through our social media channels. Let's weave a thread of creativity and conversation together at
WillowMeCreations – where every message is a stitch in our community's vibrant tapestry.</p> WillowMeCreations – where every message is a stitch in our community's vibrant tapestry.</p>
<h2>Contact Information</h2> <h2>Contact Information</h2>
<p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a><br>TikTok: <a <p>Email: <a href="mailto:willowmecreations@yahoo.com">willowmecreations@yahoo.com</a><br>
href="https://www.tiktok.com/@bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i> TikTok: <a href="https://www.tiktok.com/@bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i>bethanyrhodes6</a></p>
bethanyrhodes6</a></p>
</div> </div>
</section> </section>
</main> </main>

BIN
img/logo-transparent-wide.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 249 KiB

BIN
img/logo-transparent.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 484 KiB

7
index.html
View file

@ -13,14 +13,17 @@
<header class="header"> <header class="header">
<div class="container"> <div class="container">
<div class="logo"> <div class="logo">
<img src="img/logo.png" alt="WillowMeCreations logo"> <img src="img/logo-transparent.png" alt="WillowMeCreations logo">
</div> </div>
<nav class="topnav"> <nav class="topnav" id="myTopnav">
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="about.html">About</a> <a href="about.html">About</a>
<a href="news.html">News</a> <a href="news.html">News</a>
<a href="products.html">Products</a> <a href="products.html">Products</a>
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
<i class="fa fa-bars"></i>
</a>
</nav> </nav>
</div> </div>
</header> </header>

9
news.html
View file

@ -13,14 +13,17 @@
<header class="header"> <header class="header">
<div class="container"> <div class="container">
<div class="logo"> <div class="logo">
<img src="img/logo.png" alt="WillowMeCreations logo"> <img src="img/logo-transparent.png" alt="WillowMeCreations logo">
</div> </div>
<nav class="topnav"> <nav class="topnav" id="myTopnav">
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="about.html">About</a> <a href="about.html">About</a>
<a href="news.html">News</a> <a href="news.html" class="active">News</a>
<a href="products.html">Products</a> <a href="products.html">Products</a>
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
<i class="fa fa-bars"></i>
</a>
</nav> </nav>
</div> </div>
</header> </header>

9
products.html
View file

@ -13,14 +13,17 @@
<header class="header"> <header class="header">
<div class="container"> <div class="container">
<div class="logo"> <div class="logo">
<img src="img/logo.png" alt="WillowMeCreations logo"> <img src="img/logo-transparent.png" alt="WillowMeCreations logo">
</div> </div>
<nav class="topnav"> <nav class="topnav" id="myTopnav">
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="about.html">About</a> <a href="about.html">About</a>
<a href="news.html">News</a> <a href="news.html">News</a>
<a href="products.html">Products</a> <a href="products.html" class="active">Products</a>
<a href="contact.html">Contact</a> <a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
<i class="fa fa-bars"></i>
</a>
</nav> </nav>
</div> </div>
</header> </header>

20
script.js
View file

@ -29,3 +29,23 @@ function moveSlides(n) {
// Initial call to start the slideshow // Initial call to start the slideshow
showSlides(); showSlides();
function toggleMenu() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
document.addEventListener("DOMContentLoaded", function () {
var pathname = window.location.pathname;
var navLinks = document.querySelectorAll(".topnav a");
navLinks.forEach(function (link) {
if (link.getAttribute("href") === pathname.split("/").pop()) {
link.classList.add("active");
}
});
});

122
style.css
View file

@ -8,35 +8,70 @@ body {
/* Warm, cozy background color */ /* Warm, cozy background color */
} }
header { .header {
background-color: #333; display: flex;
flex-direction: column;
align-items: center;
background-color: #888;
/* Slightly lighter background color */
color: #fff; color: #fff;
padding: 20px 0; padding: 20px 0;
} }
.container { .container {
width: 90%; width: 90%;
max-width: 1200px; max-width: 1600px;
/* Increase max-width to allow more items in a line */
margin: 0 auto; margin: 0 auto;
} }
.logo {
margin-bottom: 10px;
/* Add some space between the logo and navigation */
display: flex;
justify-content: center;
/* Center the logo */
}
.logo img { .logo img {
width: 150px; width: 150px;
height: auto;
margin-bottom: 20px;
border: 2px solid #fff;
box-shadow: 0 0 10px #9b9b9b;
} }
.topnav { .topnav {
text-align: center; overflow: hidden;
background-color: #333;
position: relative;
display: flex;
justify-content: center;
/* Center the navigation links on desktop */
align-items: center;
} }
.topnav a { .topnav a {
color: #fff; display: block;
margin: 0 15px; color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none; text-decoration: none;
font-weight: 700; font-size: 17px;
} }
.topnav a:hover { .topnav a:hover {
color: #FFD700; background-color: #4b4b4b;
color: black;
}
.topnav a.active {
background-color: #91c993;
color: white;
}
.topnav a.icon {
display: none;
} }
.products { .products {
@ -52,9 +87,11 @@ header {
.product-grid { .product-grid {
display: flex; display: flex;
justify-content: center; justify-content: space-between;
gap: 20px; /* Spread items out evenly */
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px;
/* Space between items */
} }
.product-card { .product-card {
@ -62,12 +99,15 @@ header {
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: calc(33.333% - 20px); flex: 1 1 calc(30% - 20px);
/* Make each product card flexible */
margin-bottom: 20px; margin-bottom: 20px;
box-sizing: border-box;
/* Ensure padding and borders are included in the width */
} }
.product-card img { .product-card img {
width: 100%; width: 80%;
border-radius: 10px; border-radius: 10px;
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -228,7 +268,7 @@ header {
.product-grid { .product-grid {
display: flex; display: flex;
justify-content: center; justify-content: space-between;
gap: 20px; gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -238,8 +278,9 @@ header {
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: calc(33.333% - 20px); flex: 1 1 calc(30% - 20px);
margin-bottom: 20px; margin-bottom: 20px;
box-sizing: border-box;
} }
.product-card img { .product-card img {
@ -280,7 +321,8 @@ header {
text-align: center; text-align: center;
} }
.news h2, .news h3 { .news h2,
.news h3 {
font-family: 'Playfair Display', serif; font-family: 'Playfair Display', serif;
} }
@ -376,17 +418,6 @@ header {
} }
} }
@media (max-width: 480px) {
.product-card {
width: calc(100% - 20px);
}
.products p {
font-size: 0.9em;
max-width: 90%;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.news p { .news p {
font-size: 1em; font-size: 1em;
@ -451,4 +482,43 @@ header {
} }
} }
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {
flex-direction: column;
align-items: flex-start;
background-color: #333;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
width: 100%;
color: #f2f2f2;
}
.product-grid {
flex-direction: column;
}
.product-card {
width: 100%;
}
}
/* I fucking hate css */ /* I fucking hate css */