Skip to content

Instantly share code, notes, and snippets.

@githubajaydhage

githubajaydhage/index.html

Created January 6, 2020 03:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save githubajaydhage/670691b3aa819be5529637cbe7a87c56 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save githubajaydhage/670691b3aa819be5529637cbe7a87c56 to your computer and use it in GitHub Desktop.
Download ZIP
List of food Items // source https://jsbin.com/boxoluh
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>List of food Items</title>
<style id="jsbin-css">
body{
background-color:lightblue;
}
h1{
font-style:italic ;
width:900px;
}
p{
font-size:25px;
margin-top:1px;
margin-left:12px;
margin-right:1px;
}
header{
background-color: red;
font-style:bold;
margin-top:50px;
margin-bottom:30px;
margin-right:40px;
margin-left:50px;
}
li img{
width:350px;
}
li{
font-style:italic;
background-color:palebrown;
padding-right:20px;
color:brown;
}
p{
font-style:american;
background-color:magenta;
padding-top:25px;
}
nav ul{
list-style:none;
padding-left:0;
display:flex;
justify-content:space-between;
background-color:yellow;
}
nav ul li{
margin:10px 10px;
}
nav a{
text-decoration:none;
color:brown;
display:block;
padding:0 10px;
}
div{
background-color:applegreen;
font-size:bold;
text-decoration:auto;
}
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#ingredients">Go to ingredients</a></li>
<li><a href="#directions">Go to directions</a>
</ul>
</nav>
<header>
<h1>Foody Restaurant </h1>
<h2>Egg is the main item:D</h2>
<p>My name is Ajay and today we are going to learn how to make egg curry</p>
<p>I like egg so much because it is healthy and good for your health</p>
</header>
<!---ordered list--->
<!---Food Items Needed--->
<ol>
<li>Egg</li>
<li>Water</li>
<li>Spices</li>
<li>Vegetable oil</li>
<ul>
<li>Break the egg 🙂</li>
<li> Add oil 🙂</li>
<li>Add the spices 🙂</li>
<li>Add water 🙂</li>
<p>
This the actual picture of our dish
</p>
<li><img src="https://i.imgur.com/8jjsCPe.jpg" alt="egg cake"/></li>
</ul>
</ol>
<!----Undordered list--->
<!----Things to be done for preparing curry--->
<div>
<ul>
<li>Turn on the gas</li>
<li>Heat the curry untill it turns yellow</li>
<li>Turn off the gas after 10 minutes</li>
<li>
Another picture of our food
</li>
<li><img src="https://i.imgur.com/bQXQ9bL.jpg"alt="egg cake"/></li>
</ul>
<footer>
<ul>
<li><a href="http://imgur.com/a/k6mAIBc">Go to egg cake site</a></li>
<li><a href="http://zomato.com">Best egg dishes click here</a></li>
<li><a href="mailto:zomato@gmail.com">Email me</a></li>
</ul>
<ul>
<li><a href="http:veggiespot.com">Best veggies</a></li>
<li><a href="http:goodfood.com">Hot and spicy food</a></li>
<li><img src="https://i.imgur.com/bQXQ9bL.jpg"alt="egg cake"/></li>
<p>This is the food varities</p>
</ul>
< div>
<li>Page created by ajay</li>
</div>
</footer>
<script id="jsbin-source-css" type="text/css">body{
background-color:lightblue;
}
h1{
font-style:italic ;
width:900px;
}
p{
font-size:25px;
margin-top:1px;
margin-left:12px;
margin-right:1px;
}
header{
background-color: red;
font-style:bold;
margin-top:50px;
margin-bottom:30px;
margin-right:40px;
margin-left:50px;
}
li img{
width:350px;
}
li{
font-style:italic;
background-color:palebrown;
padding-right:20px;
color:brown;
}
p{
font-style:american;
background-color:magenta;
padding-top:25px;
}
nav ul{
list-style:none;
padding-left:0;
display:flex;
justify-content:space-between;
background-color:yellow;
}
nav ul li{
margin:10px 10px;
}
nav a{
text-decoration:none;
color:brown;
display:block;
padding:0 10px;
}
div{
background-color:applegreen;
font-size:bold;
text-decoration:auto;
}
}
}</script>
</body>
</html>
Raw
jsbin.boxoluh.css
body{
background-color:lightblue;
}
h1{
font-style:italic ;
width:900px;
}
p{
font-size:25px;
margin-top:1px;
margin-left:12px;
margin-right:1px;
}
header{
background-color: red;
font-style:bold;
margin-top:50px;
margin-bottom:30px;
margin-right:40px;
margin-left:50px;
}
li img{
width:350px;
}
li{
font-style:italic;
background-color:palebrown;
padding-right:20px;
color:brown;
}
p{
font-style:american;
background-color:magenta;
padding-top:25px;
}
nav ul{
list-style:none;
padding-left:0;
display:flex;
justify-content:space-between;
background-color:yellow;
}
nav ul li{
margin:10px 10px;
}
nav a{
text-decoration:none;
color:brown;
display:block;
padding:0 10px;
}
div{
background-color:applegreen;
font-size:bold;
text-decoration:auto;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment