How to Create Responsive Menu in hindi

hello दोस्तों monkeyweb के इस नये blog How to create responsive menu in hindi में आपका स्वागत है आज मै आपके लिये एक बहुत ही responsive pop up menu को html se kaise code kare ये बताऊंगा

How to Use html code –

Block 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> how to Make Responsive menu </title>
<style>
<!-- paste your css code here if u want to use internal css>
</style>
</head>

<body>
<div id="myDIV">
	<div id="color">
	Monkeyweb
</div>
<a href="#"><i class=" fas fa-home"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<a href="#"><i class=" fas fa-user"></i></a>
<a href="#"><i class="fas fa-sign-in-alt"></i></a>
<script src="https://kit.fontawesome.com/dd8c49730d.js" crossorigin="anonymous"></script>
</div>
</body>

</html> 

तो सबसे पहले अपने Editor या notepad में आप ये एक file create करे और उसके बाद आप उसको Test.html या आप किसी भी नाम से save करे बस इस बात का ्यान रखे की उसका extention .html में ही होना चहिये

अब आपने जब file create कर ली हो तो उपर दिख रहे html code को सही से पूरा copy करके आप अपनी file जो अपने .html के साथ बनाई है उसमे save कर दे

How to use Css code –

Block 2


  
#myDIV {
  margin: auto;
  outline: #00ff00 solid 5px;
  width: 500px;
  height: 300px;
  animation: mymove 5s infinite;
  margin-bottom: 20%;
}

@keyframes mymove {
  50% {outline-width: 50px;}
}


body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #111;
}
#color {

font-size: 28px;
color: white;
font-family: Segoe Script;
margin-left: 300px;
margin-top:20px;
}


a {
display: block;
position: relative;
font-size: 50px;
margin: 0 20px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
transition: .4s linear;
color: #00ff00;
box-shadow: 4px 3px 1px white;
}
a:hover i {
animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes text-pop-up-top {
0% {
transform: translateY(0);
transform-origin: 50% 50%;

}

100% {
transform: translateY(-50px);
transform-origin: 50% 50%;
}

html code को सही तरह से copy और save करने के बाद आप अपने editor में आप एक नई file create करे और एक बार फिर Block 2 में दिख रहे css code को

पहले की तरह पूरा सही तरिके से copy करके अपनी इस new file में save कर दे लेकिन दोस्तों आपको यहाँ एक बात का ध्यान रखना है की आपको यहाँ अपनी file को
Test.css या आप किसी भी नाम से save करे लेकिन इसक extention .css ही रखे

Top 5 programming language ke bare me jane

Html file ko Css se kaise link kre –

Block 3

<link rel="stylesheet" type="text/css" href="Test.css">>
<style>

तो दोस्तों आपको internet पर इस तरह की बहुत सी पोस्ट मिल जायगी जो आपको code तो provide करा देती है लेकिन वो आपको ये सही ढंग से नहीं बताती की उसको

use कैसे करना है और दोस्तों इसमें सबसे बेसिक problem biggneer को आती है तो द्सोतो मै आपको सबसे basic problem के बारे में बताऊंगा जो लोगो को अक्सरहोती रहती है Html file ko Css se kaise link kre

तो दोस्तों किसी भी css code को html में add करने के बेसिक तीन तरिके है लेकिन मैने इस code के लिये जो तरीका use किया है आपको मै वह बताऊंगा तो उसकेlike आपको अपने section में बस एक tag का use करना है जिसके बाद आप आसनि से अपने HTML file ko css se link kre आप block 3क े code को copy करने save कर दे और उसमे src अपने file नाम के अनुसार सही कर le

Final Word –

monkeyweb.in

“So friends hope You like this blog   How to Create Responsive Menu in hindi and please Drop your valuable Comments about my blog and Also Share with your Friends be with us for more information | जय  हिन्द.”

Deo abhinav Srivastava

Leave a Comment

x