Objective
इस प्रोजेक्ट का उद्देश्य HTML और CSS का उपयोग करके Color Gallery बनाना है, जिसमें विभिन्न प्रकार से Colors को प्रदर्शित किया जाएगा।
Project Requirements
- 10 अलग-अलग Color Boxes बनाइए।
- प्रत्येक Box में Color Name लिखिए।
- कुछ Colors Color Name से बनाइए।
- कुछ Colors RGB से बनाइए।
- कुछ Colors HEX से बनाइए।
- कुछ Colors HSL से बनाइए।
- प्रत्येक Box पर Border लगाइए।
- प्रत्येक Box में Padding दीजिए।
HTML Structure
HTML में प्रत्येक Color Box को <div> टैग की सहायता से बनाया जाता है।
Example
<div class="box">Red</div>
CSS Properties Used
1. Width
Box की चौड़ाई निर्धारित करता है।
width:180px;
2. Height
Box की ऊँचाई निर्धारित करता है।
height:120px;
3. Background Color
Box का रंग निर्धारित करता है।
background:red;
4. Border
Box के चारों ओर सीमा (Border) बनाता है।
border:2px solid black;
5. Padding
Content और Border के बीच की दूरी निर्धारित करता है।
padding:20px;
6. Border Radius
Box के कोनों को गोल बनाता है।
border-radius:10px;
7. Display Flex
Content को व्यवस्थित करने के लिए प्रयोग किया जाता है।
display:flex;
8. Justify Content
Text को Horizontal Center में लाता है।
justify-content:center;
9. Align Items
Text को Vertical Center में लाता है।
align-items:center;
10. Flex Wrap
Boxes को अगली लाइन में भेज देता है।
flex-wrap:wrap;
11. Gap
दो Boxes के बीच दूरी देता है।
gap:20px;
Types of Colors in CSS
1. Color Name
सबसे आसान तरीका।
background:red;
उदाहरण
- Red
- Blue
- Green
- Yellow
- Orange
2. RGB Color
RGB का अर्थ है
- R = Red
- G = Green
- B = Blue
प्रत्येक की Value
0 से 255
Example
background:rgb(255,0,0);
3. HEX Color
HEX Color हमेशा # से शुरू होता है।
Example
background:#ff0000;
कुछ उदाहरण
#000000
#ffffff
#00ff00
#0000ff
#ffff00
4. HSL Color
HSL का अर्थ
- H = Hue
- S = Saturation
- L = Lightness
Example
background:hsl(120,100%,50%);
Sample Colors
| Color Type | Example |
|---|---|
| Color Name | red |
| Color Name | green |
| RGB | rgb(255,165,0) |
| RGB | rgb(128,0,128) |
| HEX | #00BCD4 |
| HEX | #FF1493 |
| HSL | hsl(60,100%,50%) |
| HSL | hsl(180,100%,35%) |
Complete HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Color Gallery</title>
<style>
body{
font-family:Arial;
background:#f4f4f4;
padding:30px;
}
h1{
text-align:center;
}
.gallery{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
}
.box{
width:180px;
height:120px;
border:2px solid black;
padding:20px;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-size:20px;
font-weight:bold;
border-radius:10px;
}
</style>
</head>
<body>
<h1>Color Gallery</h1>
<div class="gallery">
<div class="box" style="background:red;">Red</div>
<div class="box" style="background:green;">Green</div>
<div class="box" style="background:blue;">Blue</div>
<div class="box" style="background:rgb(255,165,0);">RGB Orange</div>
<div class="box" style="background:rgb(128,0,128);">RGB Purple</div>
<div class="box" style="background:#00BCD4;">HEX Cyan</div>
<div class="box" style="background:#FF1493;">HEX Pink</div>
<div class="box" style="background:hsl(60,100%,50%); color:black;">HSL Yellow</div>
<div class="box" style="background:hsl(180,100%,35%);">HSL Teal</div>
<div class="box" style="background:hsl(300,70%,45%);">HSL Magenta</div>
</div>
</body>
</html>
Learning Outcomes
इस Mini Project को पूरा करने के बाद विद्यार्थी:
- HTML का Basic Structure बना सकेंगे।
<div>टैग का उपयोग करना सीखेंगे।- CSS से Box Design करना सीखेंगे।
- Border, Padding और Border Radius का प्रयोग कर सकेंगे।
- Flexbox Layout का उपयोग कर सकेंगे।
- Color Name, RGB, HEX और HSL द्वारा Colors लागू करना सीखेंगे।
- एक सरल और आकर्षक Color Gallery Web Page स्वयं तैयार कर सकेंगे।