Spaces:
Running
Running
File size: 5,097 Bytes
384d8b7 9113acd 384d8b7 9c67857 384d8b7 9c67857 384d8b7 9c67857 384d8b7 9c67857 384d8b7 9c67857 384d8b7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop | Pleiadian Collective</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Space+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--purple: #5a2d82;
--teal: #2bb3b3;
--deep-space: #0a0a1a;
--starlight: #fffae6;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background-color: var(--deep-space);
color: var(--starlight);
}
.navbar {
display: flex;
justify-content: space-between;
padding: 20px 5%;
align-items: center;
border-bottom: 1px solid var(--teal);
}
.logo {
font-family: 'Space Mono', monospace;
font-size: 1.8rem;
color: var(--teal);
}
.nav-links a {
margin: 0 15px;
color: var(--starlight);
text-decoration: none;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--teal);
}
.products-header {
text-align: center;
padding: 50px 0;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
padding: 0 5% 50px;
}
.product-card {
border: 1px solid var(--teal);
padding: 20px;
border-radius: 5px;
transition: transform 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(43, 179, 179, 0.2);
}
.product-image {
width: 100%;
height: 300px;
object-fit: cover;
margin-bottom: 15px;
}
.product-title {
font-size: 1.2rem;
margin-bottom: 10px;
color: var(--teal);
}
.product-price {
font-weight: bold;
margin-bottom: 15px;
}
.add-to-cart {
background: var(--teal);
color: var(--deep-space);
border: none;
padding: 10px 20px;
cursor: pointer;
width: 100%;
transition: opacity 0.3s;
}
.add-to-cart:hover {
opacity: 0.8;
}
footer {
text-align: center;
padding: 30px 0;
border-top: 1px solid var(--teal);
margin-top: 50px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">Pleiadian Collective</div>
<div class="nav-links">
<a href="index.html">Home</a>
<a href="products.html">Shop</a>
<a href="mission.html">Mission</a>
<a href="contact.html">Contact</a>
<a href="#"><i class="fas fa-shopping-cart"></i></a>
</div>
</nav>
<div class="products-header">
<h1>Starseed Collection</h1>
<p>Sacred designs for awakened beings</p>
</div>
<div class="products-grid">
<div class="product-card">
<img src="http://static.photos/abstract/640x360/111" alt="Pleiadian T-Shirt" class="product-image">
<h3 class="product-title">Pleiadian Activation Tee</h3>
<p>Channel higher frequencies with this sacred geometry design</p>
<div class="product-price">$34.99</div>
<a href="#" class="add-to-cart">Add to Cart</a>
</div>
<div class="product-card">
<img src="http://static.photos/abstract/640x360/222" alt="Orion Hoodie" class="product-image">
<h3 class="product-title">Orion Energy Hoodie</h3>
<p>Stay warm while carrying Orion's wisdom</p>
<div class="product-price">$59.99</div>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product-card">
<img src="http://static.photos/abstract/640x360/333" alt="Sirius Tank" class="product-image">
<h3 class="product-title">Sirius Star Tank</h3>
<p>Connect with your Sirius lineage</p>
<div class="product-price">$29.99</div>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product-card">
<img src="http://static.photos/abstract/640x360/444" alt="Arcturus Tote" class="product-image">
<h3 class="product-title">Arcturus Tote Bag</h3>
<p>Carry your essentials with Arcturian energy</p>
<div class="product-price">$24.99</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<footer>
<p>© 2023 Pleiadian Collective. All rights reserved.</p>
</footer>
</body>
</html> |