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>Computer Glasses Store</title>
<link rel="stylesheet" href="style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Figtree;
}
body {
background-color: #f5f5f5;
}
header {
background-color: #efeeee;
padding: 15px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
margin-left: 100px;
}
.logo img {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #333;
}
.search-bar {
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 20px;
padding: 7px 15px;
display: flex;
align-items: center;
margin-left: 200px;
}
.search-bar input {
border: none;
background: transparent;
outline: none;
width: 400px;
}
.nav-links {
display: flex;
gap: 25px;
margin-right: 100px;
}
.nav-links a {
text-decoration: none;
color: #333;
}
.sub-nav {
background-color: #333;
color: white;
display: flex;
justify-content: space-around;
padding: 17px 0;
}
.sub-nav a {
color: white;
text-decoration: none;
font-size: 14px;
}
.breadcrumb {
max-width: 1200px;
margin: 20px auto 0;
padding: 0 20px;
display: flex;
align-items: center;
}
.breadcrumb a {
color: #666;
text-decoration: none;
font-size: 14px;
}
.breadcrumb .separator {
margin: 0 10px;
color: #666;
}
.breadcrumb .current {
color: #000;
font-weight: 500;
font-size: 14px;
}
.product-header {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.product-count {
font-weight: 600;
}
.sort-by {
font-size: 14px;
cursor: pointer;
}
.products-grid {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.product-card {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.product-image {
position: relative;
padding-top: 100%;
background-color: #f5f5f5;
}
.product-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 30px;
}
.wishlist-icon {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.wishlist-icon svg {
width: 15px;
height: 15px;
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
.wishlist-icon.active svg path {
fill: #ff4057;
stroke: #ff4057;
}
.product-info {
padding: 15px;
}
.product-title {
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;
color: #333;
height: 40px;
overflow: hidden;
}
.product-price {
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
}
.product-button {
width: 100%;
padding: 10px;
background-color: #000;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.3s;
}
.product-button:hover {
background-color: #333;
}
.pagination {
display: flex;
justify-content: center;
margin: 40px 0;
}
.page-number {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 5px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
cursor: pointer;
}
.page-number.active {
background-color: #000;
color: #fff;
}
.page-arrow {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 5px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
cursor: pointer;
}
.category a {
text-decoration: none; /* Removes the underline */
color: inherit; /* Uses the same color as the parent element */
display: block; /* Makes the link fill the entire category div */
width: 100%;
height: 100%;
}
.category a:hover {
color: inherit; /* Maintains the same color on hover */
}
.notification {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
padding: 12px 20px;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
z-index: 1000;
transition: transform 0.3s, opacity 0.3s;
transform: translateY(0);
opacity: 1;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 900px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.products-grid {
grid-template-columns: 1fr;
}
.header-container {
flex-wrap: wrap;
}
.search-bar {
order: 3;
max-width: 100%;
margin-top: 15px;
margin-right: 0;
}
}
</style>
</head>
<body>
<header class="fade-in">
<div class="logo">
<a href="../index.html">
<img src="../main/images/logoimage.png" alt="Logo"> </div>
</a>
<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 fade-in">
<a href="chairs.html">Chairs</a>
<a href="keyboards.html">Keyboards</a>
<a href="mouses.html">Mouses</a>
<a href="desks.html">Desks</a>
<a href="glasses.html">Glasses</a>
</div>
<div class="breadcrumb">
<a href="#">Home</a>
<span class="separator">/</span>
<a href="#">Catalogs</a>
<span class="separator">/</span>
<span class="current">Desks</span>
</div>
<div class="product-header">
<div class="product-count">Selected Products: 15</div>
<div class="sort-by">By rating</div>
</div>
<div class="products-grid">
<!-- Product 1 -->
<div class="product-card" data-category="desks">
<div class="product-image">
<img src="..//desks/undef_src_sa_picid_899519_x_376_type_whitesh_image-removebg-preview.png" alt="Electric Adjustable Standing Desk 180 x 80 cm Black DESTINES">
<div class="wishlist-icon">
<svg viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
</div>
<div class="product-info">
<div class="product-title">Electric Adjustable Standing Desk 180 x 80 cm Black DESTINES</div>
<div class="product-price">$490</div>
<button class="product-button details">More details</button>
</div>
</div>
<!-- Product 2 -->
<div class="product-card" data-category="desks">
<div class="product-image">
<img src="..//desks/undef_src_sa_picid_899114_x_1000_type_whitesh_quality_100_image-removebg-preview.png" alt="Adjustable Standing Desk 120 x 72 cm White and Black DESTINAS">
<div class="wishlist-icon">
<svg viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
</div>
<div class="product-info">
<div class="product-title">Adjustable Standing Desk 120 x 72 cm White and Black DESTINAS</div>
<div class="product-price">$340</div>
<button class="product-button details">More details</button>
</div>
</div>
<!-- Product 3 -->
<div class="product-card" data-category="desks">
<div class="product-image">
<img src="..//desks/undef_src_sa_picid_946124_type_whitesh_image-removebg-preview.png" alt="Adjustable Laptop Stand 65 x 48 cm Dark Wood ACADEMIA">
<div class="wishlist-icon">
<svg viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
</div>
<div class="product-info">
<div class="product-title">Adjustable Laptop Stand 65 x 48 cm Dark Wood ACADEMIA</div>
<div class="product-price">$150</div>
<button class="product-button details">More details</button>
</div>
</div>
<!-- Product 4 -->
<div class="product-card" data-category="desks">
<div class="product-image">
<img src="..//desks/undef_src_sa_picid_840232_x_1000_type_whitesh_quality_100_image-removebg-preview.png" alt="Electric Adjustable Standing Desk 120 x 60 cm with USB port Light Wood and White KENLY">
<div class="wishlist-icon">
<svg viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
</div>
<div class="product-info">
<div class="product-title">Electric Adjustable Standing Desk 120 x 60 cm with USB port Light Wood and White KENLY</div>
<div class="product-price">$510</div>
<button class="product-button details">More details</button>
</div>
</div>
<!-- Product 5 -->
<div class="product-card" data-category="desks">
<div class="product-image">
<img src="..//desks/images-removebg-preview.png" alt="Electric Adjustable Standing Desk 180 x 80 cm Black DESTINAS">
<div class="wishlist-icon">
<svg viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
</div>
<div class="product-info">
<div class="product-title">Electric Adjustable Standing Desk 180 x 80 cm Black DESTINAS</div>
<div class="product-price">$520</div>
<button class="product-button details">More details</button>
</div>
</div>
<!-- Product 6 -->
<div class="product-card" data-category="desks">
<div class="product-image">
<img src="..//desks/undef_src_sa_picid_899114_x_1000_type_whitesh_quality_100_image-removebg-preview (2).png" alt="Adjustable Standing Desk 120 x 72 cm Black and White DESTINAS">
<div class="wishlist-icon">
<svg viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
</div>
<div class="product-info">
<div class="product-title">Adjustable Standing Desk 120 x 72 cm Black and White DESTINAS</div>
<div class="product-price">$570</div>
<button class="product-button details">More details</button>
</div>
</div>
<!-- Product 7 -->
<div class="product-card" data-category="desks">
<div class="product-image">
<img src="..//desks/undef_src_sa_picid_927803_x_1000_type_whitesh_quality_100_image-removebg-preview.png" alt="Electric Adjustable Left Corner Desk 160 x 59 cm Black and White DESTINES">
<div class="wishlist-icon">
<svg viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
</div>
<div class="product-info">
<div class="product-title">Electric Adjustable Left Corner Desk 160 x 59 cm Black and White DESTINES</div>
<div class="product-price">$890</div>
<button class="product-button details">More details</button>
</div>
</div>
<!-- Product 8 -->
<div class="product-card" data-category="desks">
<div class="product-image">
<img src="..//desks/undef_src_sa_picid_946086_type_whitesh_image-removebg-preview.png" alt="Adjustable Laptop Stand 70 x 40 cm Light Green SCHOLA">
<div class="wishlist-icon">
<svg viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
</div>
<div class="product-info">
<div class="product-title">Adjustable Laptop Stand 70 x 40 cm Light Green SCHOLA</div>
<div class="product-price">$110</div>
<button class="product-button details">More details</button>
</div>
</div>
<!-- Product 9 -->
<div class="product-card" data-category="desks">
<div class="product-image">
<img src="..//desks/undef_src_sa_picid_898882_x_1000_type_whitesh_quality_100_image-removebg-preview.png" alt="Adjustable Standing Desk 120 x 72 cm Dark Wood and Black DESTINAS">
<div class="wishlist-icon">
<svg viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
</div>
<div class="product-info">
<div class="product-title">Adjustable Standing Desk 120 x 72 cm Dark Wood and Black DESTINAS</div>
<div class="product-price">$560</div>
<button class="product-button details">More details</button>
</div>
</div>
</div>
<div class="pagination">
<script src="..//shop.js"></script>
</div>
<footer class="footer">
<div class="footer-column">
<p style="max-width: 400px;">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>Our Socials</h2>
<div class="social-icons">
<a href="#" aria-label="Twitter"> <img src="../main/images/footer/twitter-footer.png" alt="Twitter"></a>
<a href="#" aria-label="Facebook"> <img src="../main/images/footer/facebook-footer.png" alt="Facebook"></a>
<a href="#" aria-label="Mail"> <img style="width: 50px; height: 60px; margin-top: -12px;" src="../main/images/footer/mail-footer.png" alt="Mail"></a>
<a href="#" aria-label="Instagram"> <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>
<style>
/* Wishlist */
.wishlist-icon.active svg path {
fill: #ff4057;
stroke: #ff4057;
}
/* Product animations */
.product-card {
transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Notification */
.notification {
position: fixed;
bottom: 20px;
right: 20px;
background: #333;
color: white;
padding: 12px 20px;
border-radius: 4px;
z-index: 1000;
animation: fadeIn 0.3s;
}
/* Modal */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
animation: fadeIn 0.3s;
}
.modal-content {
background: white;
padding: 25px;
border-radius: 8px;
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
gap: 20px;
position: relative;
}
.close-modal {
position: absolute;
top: 15px;
right: 15px;
font-size: 24px;
cursor: pointer;
background: none;
border: none;
}
.modal-image {
flex: 1;
min-width: 300px;
}
.modal-image img {
width: 100%;
border-radius: 8px;
}
.modal-info {
flex: 1;
min-width: 300px;
}
.modal-price {
font-size: 24px;
font-weight: bold;
margin: 10px 0;
}
.modal-rating {
color: gold;
margin-bottom: 15px;
}
.modal-description {
margin-bottom: 20px;
line-height: 1.5;
}
.modal-features {
margin-bottom: 20px;
}
.modal-features ul {
padding-left: 20px;
}
.modal-features li {
margin-bottom: 8px;
}
.modal-buy {
background: #000;
color: white;
border: none;
padding: 12px 20px;
width: 100%;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
font-size: 16px;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 768px) {
.modal-content {
flex-direction: column;
}
.modal-image, .modal-info {
min-width: 100%;
}
}
</style>
</body>
</html>