Html Tutorial with CSS Programs

<html>
<head></head>

<script type="text/javascript">


var width=100;
var difference=2;
//var intervalId=0;


function zoomIn()
{
	if(width<200)
	{
	width=width+difference;
	document.getElementById("img1").style.width=width;
	}

}

function zoomOut()

{
	if(width>100)
	{
	width=width-difference;
	document.getElementById("img1").style.width=width;

	}

}



 //Paneer
	function MoreDetails()
	{ var status=true
		
		{	
			document.body.style.backgroundAttachment="fixed";
			document.body.style.backgroundImage="url(malaipaneertikkair1.jpg)";
			document.getElementById("my_para").innerHTML="<p style=\"color:black;font-size:30px;\"><b>Paneer Tikka</b>:<br>When paneer tikka is served with a gravy, it is called paneer tikka masala.It is also served as with a wrap, paneer tikka roll, where the paneer tikka is wrapped into an Indian bread and served. A variant of paneer tikka is also made as a kebab.Over the years, there have been several variations, such as Kashmiri paneer tikka, where the paneer is stuffed with chopped almonds and grilled, a variety of Chinese food, paneer tikka masala chow mein, and dosa stuffed with paneer tikka.International fast food chains in India have also incorporated paneer tikka into their menus, such as Pizza Hut and Domino's which offer a paneer tikka topping on their pizzas, whereas Subway offers a paneer tikka sandwich and McDonald's has a paneer tikka wrap on its menu. ITC's Bingo brand of potato chips has experimented with a paneer tikka flavour of chips. Prior to that, in 2003, Nestle's Maggi experimented with a ready to cook variety of paneer tikka.Other companies also offer spice mixes and ready-to-eat variants of paneer tikka.</p>"

			
				
		}

	}
	
	
	
	function MoreDetailsDosa()
	{ var status=true
		
		{	
			document.body.style.backgroundAttachment="fixed";
			document.body.style.backgroundImage="url(Masala-Dosa.jpg)";
			document.getElementById("my_para").innerHTML="<p style=\"color:black;font-size:30px;\"> <b>Dosa</b>:<br>Dosa is a type of pancake or crèpe originating from the Indian subcontinent, made from a fermented batter. It is somewhat similar to a crepe in appearance. Its main ingredients are rice and black gram ground together in a fine, smooth batter with a dash of salt. Dosa is a typical part of the Southern Indian and Sri Lankan Tamil diets but is now popular all over the Indian subcontinent. Traditionally, dosas are served hot along with sambar, a stuffing of potatoes, and chutney. They can be consumed with idli podi as well.Dosa is indigenous to South India; its exact birthplace in that region is a matter of conjecture.[1] According to historian P. Thankappan Nair, dosa originated in the Udupi town of present-day Karnataka.[2] According to food historian K. T. Achaya, dosa (as dosai) was already in use in the ancient Tamil country around the 1st century AD, as per references in the Sangam literature.In popular tradition, the origin of dosa is linked to Udupi, probably because of the dish's association with the Udupi restaurants.[1] Also, the original Tamil dosa was softer and thicker. The thinner and crispier version of dosa was first made in present-day Karnataka.[4] A recipe for dosa (as dosaka) can be found in Manasollasa, a 12th-century Sanskrit encyclopedia compiled by Someshvara III, who ruled from present-day Karnataka.</p>"

		
		}

	}
	
	
	function MoreDetailsChole()
	{ var status=true
		
		{	
			document.body.style.backgroundAttachment="fixed";
			document.body.style.backgroundImage="url(Chole-Bhature.jpg)";
			document.getElementById("my_para").innerHTML="<p style=\"color:black;font-size:30px;\" ><b>Chole-Bhature</b>:<br>Chole (woreda), one of the 180 woredas in the Oromia region of EthiopiaChole, cooked or uncooked chickpeasChole masala, another name for chana masala, a chickpea dish in South Asia sometimes simply called Chole bhature, a combination of chana masala and fried bread called bhaturaChole-, a Latin prefix meaning bile, medical slang for cholecystitis, or a patient with cholecystitis, also medical slang for a cholecystectomy, a probable antecedent of the sport of golf citation needed, nickname for Soledad, California, as used by Chicano gangs[citation needed]Chole Shamba, another name for Mafia Island, part of the Tanzanian Zanzibar ArchipelagoKate Chole, a minor fictional character in the BBC soap opera EastEnders.</p>"


		
		}

	}
	
	
	function MoreDetailspao()
	{ var status=true
		
		{	
			document.body.style.backgroundAttachment="fixed";
			document.body.style.backgroundImage="url(Paohd.jpg)";
			document.getElementById("my_para").innerHTML="<p style=\"color:black;font-size:30px;\"><b>Pav-Bhaji</b>:<br>Pav bhaji has many variations in ingredients and garnishes, but is essentially a spiced mixture of mashed vegetables in a thick gravy, usually cooked on a flat griddle (tava) and served hot with a soft white bread roll.Variations on pav bhaji include:Cheese pav bhaji, with cheese on top of the bhajiFried pav bhaji, with the pav tossed in the bhajiPaneer pav bhaji, with paneer cheese in the bhajiMushroom pav bhaji, with mushrooms in the bhajiKhada pav bhaji, with vegetable chunks in the bhajiJain pav bhaji, without onions and garlic and with plantains instead of potatoesKolhapuri pav bhaji, using a spice mix common in KolhapurWhite pav bhaji, with no garam masala or no chilli powder.</p>"
		
		}

	}

 
  	function bigImage(img)
	{
		img.style.height="550px";
		img.style.width="400px";
		img.style.opacity="0.8";
		if(img=="_image")
		{
			_text.style.display="none";
		}
		
		
		
	}
	function normalImage(img)
	{
		img.style.height="400px";
		img.style.width="300px";
		img.style.opacity="1.0"
		if(img=="_image")
		{
			_text.style.display="inline-block";
		}
	}
 
 function bigImg(chole)
 {
	chole.style.height="100px";
	chole.style.width="150px";
 }
 
 function MouseOveropacity(Allo)
 {
	Allo.style.opacity="0.5";
 }
 
 function MouseOut(Allo)
 {
	Allo.style.opacity="0.8";
 }
 
 function mouseUp()
 {
 document.getElementById("cholecolor").style.color="red";

 }
 
 document.getElementById("mybtn").addEventListener("click",myfun);
 

 

</script>
<body id=aim>



<meta charset="utf-8">
<link rel="stylesheet" href="style.css" >
</head>

<body>
<div class="container">
<span class="text1">Welcome to</span>
<span class="text2">Bhojanalaya</span>
</div>
<div class="_Head" style="background-color:Orange" onclick="MoreDetails()">
<h3><center><a onmouseenter="MoreDetailsChole()" >chole&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a onclick="MoreDetails()" > Paneer</a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a onmouseover="MoreDetailsDosa()" >Dosa</a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a onmouseleave="MoreDetailspao()" >Pao-Bhaji</a></h3>
</div>

<marquee ><img src="chole.jpg"  width="150"	height="80"/>
<img src="bhindi.jpg"  width="150"	height="80"/>
<img src="dosa.jpg"  width="150"	height="80"/>
<img src="Pao.jpg"  width="150"	height="80"/>
<img src="phuket.jpg"  width="150"	height="80"/>
<img src="Paneer.jpg"  width="150"	height="80"/>
<img src="idli.jpg"  width="150"	height="80"/>
<img src="toffu.jpg"  width="150"	height="80"/>

</marquee>
<div id style="display:inline-block; width:auto;">

<div id="Allo" border=10 onmouseover="MouseOveropacity(this)" onmouseout="MouseOut(this)" width="500" height="300" style="display:inline-block;border-radius:20px; background-color:red; Opacitybackground-image:0.8;background-image:url('pao.jpg'); border-style:solid; border-width:3px; width:200px;  height:250px; margin-left:300px" >
</div>

<div border=10 style="display:inline-block; border-radius:20px; background-color:red; Opacitybackground-image:0.8; background-image:url('samosa.jpg');border-style:solid; border-width:3px; width:200px;  height:250px;" ></div>
<div id="chole" onclick="bigImg(this)"  onmouseup="bigImg(this)" border=10 style="border-radius:20px;display:inline-block; background-image:url('chole.jpg');border-style:solid; border-width:3px; width:200px;  height:250px;" ></div>
<div id="dosa" onclick="openwin()" border=10 style="display:inline-block; background-image:url('dosa.jpg');border-radius:20px;border-style:solid; border-width:3px; width:200px;  height:250px;" ></div>

<div id="img1" onmouseover="zoomIn()"  onclick="zoomOut()" src="vegetablebiryani.jpg"   width="100" border=10 style="display:inline-block;border-radius:20px; background-image:url('vegetablebiryani.jpg');border-style:solid; border-width:3px; width:200px;  height:250px;" ></div>

</div>



<div style="background-color:white;opacity:0.8;border-radius:10px">
<p id="my_para"></p>
</div>





</body></html>
								



CSS file

body
{
background:url("back.jpg");

}
.container
{
text-align:center;
position:absolute;
top:10%;
left:50%;
transform : translate(-50%,-50%);

}

.container span
{
color:black;
background-color:white;
text-transform: uppercase;
display : block;
}
.text1
{
	color:white;
	
	font-size:60px;
	font-weight:700;
	letter-spacing:8px;
	margin-bottom:20px;
	background:black;
	position : relative;
	animation : text 3s 1;
	
}
.text2
{
	font-size:30px;
	color:#6ab04c;
}

@keyframes text
{
0%
	{
	color: black;
	margin-bottom:-40px;
	}
30%
	{
	letter-spacing:25px;
	margin-bottom:-40px;
	}
85%
	{
		letter-spacing:8px;
		margin-bottom:-40px;
	}
}
._Head
{
	margin-top:180px;
}

Output :

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top