🚦 ट्रैफिक लाइट UI HTML और CSS से बनाना सीखें

🚦 ट्रैफिक लाइट UI HTML और CSS से बनाना सीखें

अगर आप HTML और CSS का अभ्यास करना चाहते हैं और कोई मज़ेदार प्रोजेक्ट ढूंढ रहे हैं — तो ट्रैफिक लाइट UI आपके लिए एक बेहतरीन शुरुआत है। इस लेख में हम एक सिंपल लेकिन सुंदर Traffic Light डिज़ाइन बनाएंगे सिर्फ HTML और CSS से।

📄 प्रोजेक्ट का उद्देश्य

इस प्रोजेक्ट से आप निम्नलिखित CSS कॉन्सेप्ट्स सीखेंगे:

• Flexbox के साथ Layout बनाना
• Border-radius और Box-shadow का उपयोग
• Transition से Smooth Effect
• Classes से एक्टिव एलिमेंट्स को स्टाइल देना

🧱 Step-by-Step Code

✅ HTML Structure:

<div class="traffic-light">
  <div class="light red active"></div>
  <div class="light yellow"></div>
  <div class="light green"></div>
</div>

🔹 इसमें तीन divs हैं — red, yellow, और green — जो एक vertical ट्रैफिक लाइट को दर्शाते हैं।

🎨 CSS Styling:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
  font-family: Arial, sans-serif;
}

.traffic-light {
  background-color: #333;
  width: 120px;
  height: 320px;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.light {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #555;
  border: 2px solid #222;
  transition: background-color 0.3s;
}

/* Active States */
.red.active {
  background-color: #ff0000;
  box-shadow: 0 0 20px #ff0000;
}

.yellow.active {
  background-color: #ffff00;
  box-shadow: 0 0 20px #ffff00;
}

.green.active {
  background-color: #00ff00;
  box-shadow: 0 0 20px #00ff00;
}

📌 Output Preview:

• ⚪ Initially, red light active रहेगी।
• ⚫ बाकी दो lights default gray रहेंगी।
• ✅ आप JavaScript जोड़कर लाइट को automatic cycle में भी बदल सकते हैं।

✨ क्या आपने सीखा?

✍️ लेखक: सिद्धार्थ जैन 📅 प्रकाशन तिथि: 2 अगस्त 2025