<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>manish</title>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
});
});
</script>
<script>
$(document).ready(function(){
$("#flip1").click(function(){
$("#panel1").slideToggle();
});
});
</script>
<script>
$(document).ready(function(){
$("#flip2").click(function(){
$("#panel2").slideToggle();
});
});
</script>
<script>
$(document).ready(function(){
$("#flip3").click(function(){
$("#panel3").slideToggle();
});
});
</script>
<script>
$(document).ready(function(){
$("#flip4").click(function(){
$("#panel4").slideToggle();
});
});
</script>
<style>
#aj
{
border: 1px; height: 70px; width: 100%;
background-color: black;
}
#panel ,#flip
{
border-radius: 20px;
box-shadow: 0 0 15px white;
padding: 5px;
text-align: center;
background: red;
border: 2px solid black;
height: 30px;
width: 100px;
margin-left: 500px;
margin-top: -40px;
}
#panel
{
padding: ;
display: none;
height: 155px;
margin-left: -5px;
margin-top: 20px;
}
#panel1 ,#flip1
{
border-radius: 20px;
box-shadow: 0 0 15px white;
padding: 5px;
text-align: center;
background: red;
border: 2px solid black;
height: 30px;
width: 100px;
margin-left: 650px;
margin-top: -43px;
}
#panel1
{
padding: ;
display: none;
height: 155px;
margin-left: -5px;
margin-top: 20px;
}
#panel2 ,#flip2
{
border-radius: 20px;
box-shadow: 0 0 15px white;
padding: 5px;
text-align: center;
background: red;
border: 2px solid black;
height: 30px;
width: 100px;
margin-left: 800px;
margin-top: -43px;
}
#panel2
{
padding: ;
display: none;
height: 155px;
margin-left: -5px;
margin-top: 20px;
}
#panel3 ,#flip3
{
border-radius: 20px;
box-shadow: 0 0 15px white;
border-radius: 20px;
box-shadow: 0 0 15px white;
padding: 5px;
text-align: center;
background: red;
border: 2px solid black;
height: 30px;
width: 100px;
margin-left: 950px;
margin-top: -42px;
}
#panel3
{
padding: ;
display: none;
height: 155px;
margin-left: -5px;
margin-top: 20px;
}
#panel4 ,#flip4
{
border-radius: 20px;
box-shadow: 0 0 15px white;
padding: 5px;
text-align: center;
background: red;
border: 2px solid black;
height: 30px;
width: 100px;
margin-left: 1100px;
margin-top: -43px;
}
#panel4
{
padding: ;
display: none;
height: 155px;
margin-left: -5px;
margin-top: 20px;
}
</style>
</head>
<body bgcolor="cyan">
<div id="aj">
<font style="text-shadow: 0 0 40px blue;
margin-left: 30px;
margin-right: 30px;" size="7" color="blue">GAMING WEBSITE
</font>
<div id="flip" style="font-size: 20PX;">HOME
<div id="panel">hello! <br> hello <br> hello <br>hello<br> hello <br> hello <br>hello
</div>
</div>
<div id="flip1" style="font-size:20PX;">ABOUT US
<div id="panel1">hello! <br> hello <br> hello <br>hello<br> hello <br> hello <br>hello
</div>
</div>
<div id="flip2" style="font-size:20PX;">PRODUCT
<div id="panel2">hello! <br> hello <br> hello <br>hello<br> hello <br> hello <br>hello
</div>
</div>
<div id="flip3" style="font-size:20PX;">GAMING
<div id="panel3">hello! <br> hello <br> hello <br>hello<br> hello <br> hello <br>hello
</div>
</div>
<div id="flip4" style="font-size:20PX;">CONTACT
<div id="panel4">hello! <br> hello <br> hello <br>hello<br> hello <br> hello <br>hello
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment