Skip to content

Commit 2d73e5b

Browse files
danialsourcedanialsource
committed
Initial commit
0 parents  commit 2d73e5b

File tree

8 files changed

+273
-0
lines changed

8 files changed

+273
-0
lines changed

‎LICENSE.txt‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 danialsource
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# 🌿🖤 Green & Black Tailwind Website 🖤🌿
2+
3+
A **sleek, modern website template** with a **green & black theme**, featuring an **animated background**, Hero section, Shop, Blog, and Login modal. Built with **TailwindCSS** & vanilla **JavaScript**, fully responsive and ready to deploy! 🚀
4+
5+
---
6+
7+
## 🗂 Project Structure
8+
```
9+
my-tailwind-website/
10+
├─ index.html # Main HTML file
11+
├─ style.css # Tailwind + custom CSS
12+
├─ script.js # JS for modal & animations
13+
├─ LICENSE # MIT License
14+
├─ README.md # Project documentation
15+
├─ pics/
16+
│ └─ images/ # Hero, product, blog images
17+
```
18+
19+
---
20+
21+
## ✨ Features
22+
23+
- Fully responsive layout 📱💻
24+
- Hero section with **animated background** 🌌
25+
- Shop section with **product cards** 🛒
26+
- Blog section with **card layout** 📝
27+
- Login modal popup 🔐
28+
- Modern **green & black color scheme** 🌿🖤
29+
- Smooth hover animations & transitions ✨
30+
- TailwindCSS ready for customization 🎨
31+
32+
---
33+
34+
## ⚡ Installation
35+
36+
1. **Clone the repository**
37+
```bash
38+
git clone https://github.com/yourusername/green-black-tailwind.git
39+
```
40+
2. **Build Tailwind**
41+
```bash
42+
npx tailwindcss -i ./style.css -o ./output.css --watch
43+
```
44+
45+
Open index.html
46+
```bash
47+
open index.html
48+
```
49+
## 🛠 Usage
50+
51+
. Edit index.html to change content ✏️
52+
53+
. Update images in pics/images/ 🖼
54+
55+
. Customize Tailwind in tailwind.config.js 🌈
56+
57+
Modify script.js for animations or modal behavior 🎬
58+
59+
## 📜 License
60+
61+
MIT License.
62+
Made with ❤️ & 🌿 by Danial

‎index.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Green & Black Animated Site</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body class="relative overflow-x-hidden bg-black text-green-400">
11+
12+
<canvas id="bg-canvas" class="fixed top-0 left-0 w-full h-full -z-10"></canvas>
13+
14+
<header class="fixed w-full z-20 backdrop-blur-md bg-black/70">
15+
<nav class="container mx-auto flex justify-between items-center p-6">
16+
<a href="#" class="text-2xl font-bold text-green-400">
17+
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-alipay" viewBox="0 0 16 16">
18+
<path d="M2.541 0H13.5a2.551 2.551 0 0 1 2.54 2.563v8.297c-.006 0-.531-.046-2.978-.813-.412-.14-.916-.327-1.479-.536-.303-.113-.624-.232-.957-.353a12.98 12.98 0 0 0 1.325-3.373H8.822V4.649h3.831v-.634h-3.83V2.121H7.26c-.274 0-.274.273-.274.273v1.621H3.11v.634h3.875v1.136h-3.2v.634H9.99c-.227.789-.532 1.53-.894 2.202-2.013-.67-4.161-1.212-5.51-.878-.864.214-1.42.597-1.746.998-1.499 1.84-.424 4.633 2.741 4.633 1.872 0 3.675-1.053 5.072-2.787 2.08 1.008 6.37 2.738 6.387 2.745v.105A2.551 2.551 0 0 1 13.5 16H2.541A2.552 2.552 0 0 1 0 13.437V2.563A2.552 2.552 0 0 1 2.541 0Z"></path>
19+
<path d="M2.309 9.27c-1.22 1.073-.49 3.034 1.978 3.034 1.434 0 2.868-.925 3.994-2.406-1.602-.789-2.959-1.353-4.425-1.207-.397.04-1.14.217-1.547.58Z"></path>
20+
</svg>
21+
</a>
22+
<ul class="flex gap-6">
23+
<li><a href="#shop" class="hover:text-green-300">Shop</a></li>
24+
<li><a href="#blog" class="hover:text-green-300">Blog</a></li>
25+
<li><a href="#hero" class="hover:text-green-300">Hero</a></li>
26+
<li><button id="loginBtn" class="hover:text-green-300">Login</button></li>
27+
</ul>
28+
</nav>
29+
</header>
30+
31+
<main class="pt-24 relative z-10">
32+
<section id="hero" class="flex flex-col lg:flex-row items-center justify-between px-6 lg:px-20 py-20 text-green-50">
33+
<div class="lg:w-1/2 space-y-6">
34+
<h1 class="text-5xl font-extrabold">Welcome to Green & Black</h1>
35+
<p class="text-lg text-green-200"> Explore cutting-edge products and insights that empower your creativity and drive your business forward.
36+
Join our community and experience the perfect blend of technology and design.</p>
37+
<div class="flex gap-4">
38+
<button class="px-6 py-3 bg-green-500 hover:bg-green-600 rounded-lg font-bold transition">Explore</button>
39+
<button class="px-6 py-3 border border-green-500 text-green-500 hover:bg-green-600 hover:text-black rounded-lg font-bold transition">Learn More</button>
40+
</div>
41+
</div>
42+
<div class="lg:w-1/2 mt-10 lg:mt-0">
43+
<img src="pics/heropic.jpg" class="rounded-lg shadow-xl" alt="Hero Image">
44+
</div>
45+
</section>
46+
47+
<section id="shop" class="py-20 px-6 bg-black/80">
48+
<h2 class="text-4xl font-bold text-center text-green-400 mb-10">Top Sales</h2>
49+
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
50+
<div class="bg-black/60 p-4 rounded-xl shadow-lg text-green-50 hover:scale-105 transition">
51+
<img src="pics/pic1.jpg" class="rounded-lg mb-4" alt="">
52+
<h3 class="font-bold text-lg mb-2">Product 1</h3>
53+
<p class="text-green-200 mb-4">High-quality product description goes here.</p>
54+
<button class="w-full py-2 bg-green-500 rounded-lg font-bold hover:bg-green-600 transition">Buy Now</button>
55+
</div>
56+
<div class="bg-black/60 p-4 rounded-xl shadow-lg text-green-50 hover:scale-105 transition">
57+
<img src="pics/pic1.jpg" class="rounded-lg mb-4" alt="">
58+
<h3 class="font-bold text-lg mb-2">Product 2</h3>
59+
<p class="text-green-200 mb-4">High-quality product description goes here.</p>
60+
<button class="w-full py-2 bg-green-500 rounded-lg font-bold hover:bg-green-600 transition">Buy Now</button>
61+
</div>
62+
<div class="bg-black/60 p-4 rounded-xl shadow-lg text-green-50 hover:scale-105 transition">
63+
<img src="pics/pic1.jpg" class="rounded-lg mb-4" alt="">
64+
<h3 class="font-bold text-lg mb-2">Product 3</h3>
65+
<p class="text-green-200 mb-4">High-quality product description goes here.</p>
66+
<button class="w-full py-2 bg-green-500 rounded-lg font-bold hover:bg-green-600 transition">Buy Now</button>
67+
</div>
68+
</div>
69+
</section>
70+
71+
<section id="blog" class="py-20 px-6 bg-black">
72+
<h2 class="text-4xl font-bold text-center text-green-400 mb-10">Latest Blog</h2>
73+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
74+
<div class="bg-black/60 p-4 rounded-xl shadow-lg text-green-50 hover:scale-105 transition">
75+
<img src="pics/pic2.jpg" class="rounded-lg mb-4" alt="">
76+
<h3 class="font-bold text-lg mb-2">Blog Post 1</h3>
77+
<p class="text-green-200 mb-4">Brief description of blog post content here.</p>
78+
<button class="w-full py-2 border border-green-500 rounded-lg font-bold hover:bg-green-600 hover:text-black transition">Read More</button>
79+
</div>
80+
<div class="bg-black/60 p-4 rounded-xl shadow-lg text-green-50 hover:scale-105 transition">
81+
<img src="pics/pic2.jpg" class="rounded-lg mb-4" alt="">
82+
<h3 class="font-bold text-lg mb-2">Blog Post 2</h3>
83+
<p class="text-green-200 mb-4">Brief description of blog post content here.</p>
84+
<button class="w-full py-2 border border-green-500 rounded-lg font-bold hover:bg-green-600 hover:text-black transition">Read More</button>
85+
</div>
86+
<div class="bg-black/60 p-4 rounded-xl shadow-lg text-green-50 hover:scale-105 transition">
87+
<img src="pics/pic2.jpg" class="rounded-lg mb-4" alt="">
88+
<h3 class="font-bold text-lg mb-2">Blog Post 3</h3>
89+
<p class="text-green-200 mb-4">Brief description of blog post content here.</p>
90+
<button class="w-full py-2 border border-green-500 rounded-lg font-bold hover:bg-green-600 hover:text-black transition">Read More</button>
91+
</div>
92+
</div>
93+
</section>
94+
</main>
95+
96+
<footer class="py-10 text-green-400 bg-black/90 text-center">
97+
&copy; 2022 Your Company
98+
</footer>
99+
100+
<div id="loginModal" class="fixed inset-0 flex items-center justify-center bg-black/70 hidden z-30">
101+
<div class="bg-black p-8 rounded-xl w-80 text-green-50">
102+
<h2 class="text-2xl font-bold mb-4 text-center">Login</h2>
103+
<input type="text" placeholder="Username" class="w-full mb-3 p-2 rounded bg-black/60 border border-green-500 focus:outline-none focus:ring-2 focus:ring-green-400">
104+
<input type="password" placeholder="Password" class="w-full mb-3 p-2 rounded bg-black/60 border border-green-500 focus:outline-none focus:ring-2 focus:ring-green-400">
105+
<button class="w-full py-2 bg-green-500 rounded-lg font-bold hover:bg-green-600 transition mb-2">Login</button>
106+
<button id="closeModal" class="w-full py-2 border border-green-500 rounded-lg hover:bg-green-600 hover:text-black transition">Close</button>
107+
</div>
108+
</div>
109+
110+
<script src="script.js"></script>
111+
</body>
112+
</html>

‎pics/heropic.jpg‎

839 KB
Loading

‎pics/pic1.jpg‎

1.55 MB
Loading

‎pics/pic2.jpg‎

1.23 MB
Loading

‎script.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
const canvas = document.getElementById('bg-canvas');
2+
const ctx = canvas.getContext('2d');
3+
let particles = [];
4+
const particleCount = 150;
5+
6+
function resize() {
7+
canvas.width = window.innerWidth;
8+
canvas.height = window.innerHeight;
9+
}
10+
window.addEventListener('resize', resize);
11+
resize();
12+
13+
class Particle {
14+
constructor() {
15+
this.x = Math.random() * canvas.width;
16+
this.y = Math.random() * canvas.height;
17+
this.radius = Math.random() * 2 + 1;
18+
this.dx = (Math.random() - 0.5) * 0.5;
19+
this.dy = (Math.random() - 0.5) * 0.5;
20+
}
21+
draw() {
22+
ctx.beginPath();
23+
ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
24+
ctx.fillStyle = '#00ff44';
25+
ctx.fill();
26+
}
27+
update() {
28+
this.x += this.dx;
29+
this.y += this.dy;
30+
if(this.x < 0 || this.x > canvas.width) this.dx *= -1;
31+
if(this.y < 0 || this.y > canvas.height) this.dy *= -1;
32+
this.draw();
33+
}
34+
}
35+
36+
for(let i=0;i<particleCount;i++) {
37+
particles.push(new Particle());
38+
}
39+
40+
function animate() {
41+
ctx.clearRect(0,0,canvas.width,canvas.height);
42+
particles.forEach(p => p.update());
43+
requestAnimationFrame(animate);
44+
}
45+
animate();
46+
47+
const loginBtn = document.getElementById('loginBtn');
48+
const loginModal = document.getElementById('loginModal');
49+
const closeModal = document.getElementById('closeModal');
50+
51+
loginBtn.addEventListener('click', ()=> loginModal.classList.remove('hidden'));
52+
closeModal.addEventListener('click', ()=> loginModal.classList.add('hidden'));

‎style.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
body, html {
2+
height: 100%;
3+
margin: 0;
4+
font-family: 'Poppins', sans-serif;
5+
}
6+
7+
canvas {
8+
display: block;
9+
}
10+
11+
img {
12+
transition: transform 0.5s ease;
13+
}
14+
15+
img:hover {
16+
transform: scale(1.05);
17+
}
18+
19+
button {
20+
transition: all 0.3s ease;
21+
}
22+
23+
button:hover {
24+
cursor: pointer;
25+
}
26+

0 commit comments

Comments
 (0)