create apple logo with html and css
Create a Apple Icon with HTML and CSS
यहां पर हमने एचटीएमएल और सीएसएस का उपयोग करके एक एनीमेटेड Apple आइकन बनाया है।
HTML Code:-
Code download karne ke liye Download button per click karen
- <!DOCTYPE html>: यह दस्तावेज़ के प्रकार को बताता है कि यह HTML5 है।
- <html lang="en">: यह HTML दस्तावेज़ की शुरुआत है और यह बताता है कि भाषा अंग्रेजी (en) है।
-
<head>: यह वेब पेज के मेटाडेटा (metadata) को रखने के लिए है।
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: यह वेब पेज को मोबाइल डिवाइस पर ठीक से दिखाने के लिए है।
- <title>Document</title>: यह वेब पेज का टाइटल है, जो ब्राउज़र के टैब पर दिखाई देता है।
- <body>: यह वेब पेज का मुख्य कंटेंट है।
- <h2> <i class="fa-brands fa-apple"> </i> </h2>: h2 टैग के भीतर एक fa-brands fa-apple आइकन है, जो Apple का लोगो दिखाता है।
CSS Code:-
Code download karne ke liye Download button per click karen
-
body: यह बॉडी एलिमेंट के लिए स्टाइल है।
-
display: flex;: यह बॉडी को एक फ्लेक्स कंटेनर बनाता है।
- justify-content: center;: यह बॉडी के कंटेंट को क्षैतिज (horizontal) रूप से केंद्रित करता है।
- align-items: center;: यह बॉडी के कंटेंट को लंबवत (vertical) रूप से केंद्रित करता है।
- height: 100vh;: यह बॉडी की ऊंचाई को पूरी स्क्रीन की ऊंचाई (viewport height) के बराबर करता है।
- background: #333;: यह बॉडी का बैकग्राउंड कलर black (#000) सेट करता है।
-
display: flex;: यह बॉडी को एक फ्लेक्स कंटेनर बनाता है।
-
h2 टैग के लिए एक हरा रंग का ग्लोइंग टेक्स्ट इफेक्ट है, जो एनीमेशन के साथ बदलता रहता है।
- text-shadow और animation की मदद से यह ग्लोइंग इफेक्ट दिया गया है। एनीमेशन हर 2 सेकंड में रंगों को बदलने के लिए hue-rotate फिल्टर का उपयोग करता है।
Comments
Post a Comment