Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ergowijzer De Vorken</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<style>
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<header class="header">
<div class="logo">
<a href="index.html">
<img src="main/images/logoimage.png" alt="Logo" />
</a>
</div>
<div class="search-bar">
<input type="text" placeholder="Search..." />
</div>
<div class="nav-links">
<a href="index.html">Home</a>
<a href="main/about/about.html">About</a>
<a href="main/contact/contact.html">Contact Us</a>
<a href="main/blog/blog.html">Blog</a>
</div>
</header>
<div class="sub-nav">
<a href="html/chairs.html">Chairs</a>
<a href="html/keyboards.html">Keyboards</a>
<a href="html/mouses.html">Mouses</a>
<a href="html/desks.html">Desks</a>
<a href="html/glasses.html">Glasses</a>
</div>
<div class="hero-banner">
<div class="hero-content">
<h5>Most updated version</h5>
<h2>Ergonomic</h2>
<h2>Office Chair</h2>
<p>Perfect match with your office needs</p>
<button class="shop-now">More Details</button>
</div>
<div class="hero-image">
<img src="main/images/goatedfrontpageimage.png" alt="Ergonomic Office Chair" />
</div>
</div>
<div class="product-card" data-category="mouses">
<div class="product-grid">
<div class="product-item">
<div class="product-info">
<h3>Ergonomic Mouse</h3>
<p>For relaxation of the wrist</p>
<button class="buy-now">More Details</button>
</div>
<img src="main/images/mousegrid.png" alt="Ergonomic Mouse" />
</div>
<div class="product-item">
<div class="product-info">
<h3>Ergonomic Keyboard</h3>
<p>For maximum wrist comfort</p>
<button class="buy-now">More Details</button>
</div>
<img src="main/images/keyboardgrid.png" alt="Ergonomic Keyboard" />
</div>
<div class="product-item">
<div class="product-info">
<h3>Ergonomic Glasses</h3>
<p>Against blue light</p>
<button class="buy-now">More Details</button>
</div>
<img src="main/images/ergobluelightglasses.png" alt="Ergonomic Glasses" />
</div>
<div class="product-item">
<div class="product-info">
<h3>Have a look around..</h3>
</div>
</div>
</div>
</div>
<div class="browse-section">
<h2>Browse By Category</h2>
<div class="category-grid">
<a href="html/chairs.html">
<div class="category-item">
<img src="main/images/vectors/chairvector.png" alt="Chair" />
<span>Chairs</span>
</div>
</a>
<a href="html/desks.html">
<div class="category-item">
<img src="main/images/vectors/deskvector.png" alt="Desk" />
<span>Desks</span>
</div>
</a>
<a href="html/glasses.html">
<div class="category-item">
<img src="main/images/vectors/glassesvector.png" style="height: 40px; width: 60px; margin-bottom: 23px;" alt="Glasses" />
<span>Glasses</span>
</div>
</a>
<a href="html/keyboards.html">
<div class="category-item">
<img src="main/images/vectors/keyboardvector.png" style="height: 60px; width: 60px;" alt="Keyboard" />
<span>Keyboards</span>
</div>
</a>
<a href="html/mouses.html">
<div class="category-item">
<img src="main/images/vectors/mousevector.png" style="height: 40px; width: 40px; margin-bottom: 25px;" alt="Mouses" />
<span>Mouses</span>
</div>
</a>
</div>
<h1 style="display: flex; justify-content: center; margin-bottom: 30px; margin-top: 20px;">
Slide Through Our Products
</h1>
<div class="wrapper">
<div class="slider-wrap">
<div id="slider" class="slider">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
<div class="btn-wrap">
<i id="prev" class="material-icons btn"><</i>
<i id="next" class="material-icons btn">></i>
</div>
</div>
<section class="blog-cta">
<div class="cta-content">
<h2>Stay Healthy & Productive</h2>
<p>
Read our tips on ergonomics, mental well-being, and the best tools
for your workspace
</p>
<a href="main/blog/blog.html" class="cta-button">Read the blog</a>
</div>
</section>
<footer class="footer">
<div class="footer-column">
<p style="max-width: 400px; margin-left: 35px;">
We are a company that provides various services. Our mission is to provide the best
services to our customers. <br />
If you have any questions, please contact us.
</p>
<h2 style="display: flex; justify-content: center;">Our Socials</h2>
<div class="social-icons">
<a href="#"><img src="main/images/footer/twitter-footer.png" alt="Twitter" /></a>
<a href="#"><img src="main/images/footer/facebook-footer.png" alt="Facebook" /></a>
<a href="#"><img style="width: 50px; height: 60px; margin-top: -12px;" src="main/images/footer/mail-footer.png" alt="Mail" /></a>
<a href="#"><img src="main/images/footer/insta-footer.png" alt="Instagram" /></a>
</div>
</div>
<div class="footer-column">
<h4>Services</h4>
<ul>
<li><a href="#">Bonus program</a></li>
<li><a href="#">Gift cards</a></li>
<li><a href="#">Credit and payment</a></li>
<li><a href="#">Service contracts</a></li>
<li><a href="#">Non-cash account</a></li>
<li><a href="#">Payment</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Assistance to the buyer</h4>
<ul>
<li><a href="#">Find an order</a></li>
<li><a href="#">Terms of delivery</a></li>
<li><a href="#">Exchange and return of goods</a></li>
<li><a href="#">Guarantee</a></li>
<li><a href="#">Frequently asked questions</a></li>
<li><a href="#">Terms of use of the site</a></li>
</ul>
</div>
</footer>
<script>
// Slider script
const slider = document.getElementById("slider");
const nextBtn = document.getElementById("next");
const prevBtn = document.getElementById("prev");
let scrollAmount = 0;
nextBtn.addEventListener("click", () => {
slider.scrollBy({ left: 200, behavior: "smooth" });
});
prevBtn.addEventListener("click", () => {
slider.scrollBy({ left: -200, behavior: "smooth" });
});
// Fade-in on scroll
const faders = document.querySelectorAll(".fade-in");
const observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
}
});
},
{ threshold: 0.1 }
);
faders.forEach(fader => observer.observe(fader));
</script>
</body>
</html>