Skip to content

Instantly share code, notes, and snippets.

@solyakin

solyakin/index.html

Created May 22, 2020 15:32
Show Gist options
  • Save solyakin/ee18879b00df9747018e2a33cd6f41a3 to your computer and use it in GitHub Desktop.
Save solyakin/ee18879b00df9747018e2a33cd6f41a3 to your computer and use it in GitHub Desktop.
Download ZIP
Soak Dev // source https://jsbin.com/yemutot
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Soak Dev</title>
<style id="jsbin-css">
body{
background-color: lightblue;
}
p{
font-size: 17px;
}
li{
font-size: 15px;
}
nav{
background-color:forestgreen;
}
nav h1{
font-weight:strong;
text-shadow: 3px 3px 3px grey;
text-decoration: underline;
padding top: 3px
padding bottom:3px
}
h2{
padding-top: 3px;
padding-bottom:3px;
}
nav #list ul{
list-style: none;
}
.paraf{
font-size: 20px;
}
.paradox{
width:150px;
height:auto;
}
.mention{
width: 300px;
height:auto;}
#items{
color: magenta;
}
div. inner-item{
colour: blue;
}
.another-heading{
background:skyblue;
}
#end{
background-color: grey;
font-family:italic;
}
ul.no-bullets{
list-style-image: url("https://i.imgur.com/fTVQINz.jpg"
);
list-style-position: inside;
}
span{
font-weight:bold;
}
.last{
text-decoration: underline;
}
.first{
font-family:none;
color: red;
}
</style>
</head>
<body>
<header>
<nav>
<h1>My favourite food-Peppered Rice</h1>
<div id="list">
<ul>
<li>Home</li>
<li>contact us</li>
<li>Gallery</li>
</ul>
</div>
</nav>
</header>
<p class="paraf">
Welcome to my page!</p>
<section class="paradox">
<p> Today I will be teaching you how my make my favourite food-<span class="first"> peppered rice</span>. It is a food known to my <span>tribe</span> and I will be thrill to teach you how to make it. <span class="last">Its very spicey and you would love it.</span>
</p>
<p class="mention">Below is a list of ingredient needed to prepare this dish</p>
</section>
<!--This is an unordered list of ingredients-->
<div id="items">
<ul class="no-bullets">
<li class="leaf">3 cups of Rice</li>
<li class="leaf">Fresh pepper</li>
<li class="leaf" >onion</li>
<li class="leaf" >1 cup of groundnut oil</li>
<li class="leaf" >Dry fish or beef</li>
<li class="leaf" >Iru (locust beans)</li>
<li class="leaf" > salt</li>
</ul>
</div>
<!--This is the end of the unordered list of ingredients-->
<h2 class="another-heading"> Steps on how to prepare this dish</h2>
<p> This is the fun part. Let's cook our peppered rice</p>
<!--This is an ordered list-->
<div class="procedure">
<ol>
<li>Wash the rice in warm water for atleast 30 seconds🍚 </li>
<li>Steam the rice for about 15 minutes then sieve out the water😀 </li>
<li>Now fry the pepper along with other ingredients in a frying pan for about 7minutes🌶️ </li>
<li>Mix the rice and the pepper ingredient together in a bigger pot 🍲</li>
<li>Add half cup of water to the whole mixture and heat for another 5 minutes
🍲 </li>
</ol>
</div>
<!--This is the end of the ordered list-->
<p> our meal is ready to be served. So simple right. Try it and give me feedbacks. I can't wait to see your reviews.</p>
<h3>Image list<h3>
<!-- start of an image list -->
<ul>
<li><img src="https://i.imgur.com/4AYYU3A.png" width= 250px height= auto alt="wrong image format">
</li>
<li><img src="https://i.imgur.com/4AYYU3A.png" width= 250px height= auto alt="wrong image format">
</li>
</ul>
<!-- end of an image list -->
<!-- Recipe link list -->
<h2 id="end">My Recipe Vs Five other recipe</h2>
<div class="contest">
<ul class="leaf">
<li><a href="https://cheflolaskitchen.com/jollof-rice">chef lola recipe</a></li>
<li><a href="https://www.africanbites.com/jellof-riceoven-baked/">African Bites</a></li>
<li><a href="https://elleyajoku.com/food/jollof-rice-recipe ">Elleya</a></li>
<li><a href="https://food52.com/recipes/61557-classic-nigerian-jollof-rice ">Food 52</a></li>
<li><a href="https://www.africanbites.com/jellof-riceoven-baked/">African Bites</a></li>
<li><a href="https://www.africanbites.com/jellof-riceoven-baked/">African Bites</a></li>
</ul>
</div>
<!-- here is a link to a website with numerous css properties https://www.tutorialrepublic.com/css-reference/css3-properties.php -->
<script id="jsbin-source-css" type="text/css">body{
background-color: lightblue;
}
p{
font-size: 17px;
}
li{
font-size: 15px;
}
nav{
background-color:forestgreen;
}
nav h1{
font-weight:strong;
text-shadow: 3px 3px 3px grey;
text-decoration: underline;
padding top: 3px
padding bottom:3px
}
h2{
padding-top: 3px;
padding-bottom:3px;
}
nav #list ul{
list-style: none;
}
.paraf{
font-size: 20px;
}
.paradox{
width:150px;
height:auto;
}
.mention{
width: 300px;
height:auto;}
#items{
color: magenta;
}
div. inner-item{
colour: blue;
}
.another-heading{
background:skyblue;
}
#end{
background-color: grey;
font-family:italic;
}
ul.no-bullets{
list-style-image: url("https://i.imgur.com/fTVQINz.jpg"
);
list-style-position: inside;
}
span{
font-weight:bold;
}
.last{
text-decoration: underline;
}
.first{
font-family:none;
color: red;
}</script>
</body>
</html>
Raw
jsbin.yemutot.css
body{
background-color: lightblue;
}
p{
font-size: 17px;
}
li{
font-size: 15px;
}
nav{
background-color:forestgreen;
}
nav h1{
font-weight:strong;
text-shadow: 3px 3px 3px grey;
text-decoration: underline;
padding top: 3px
padding bottom:3px
}
h2{
padding-top: 3px;
padding-bottom:3px;
}
nav #list ul{
list-style: none;
}
.paraf{
font-size: 20px;
}
.paradox{
width:150px;
height:auto;
}
.mention{
width: 300px;
height:auto;}
#items{
color: magenta;
}
div. inner-item{
colour: blue;
}
.another-heading{
background:skyblue;
}
#end{
background-color: grey;
font-family:italic;
}
ul.no-bullets{
list-style-image: url("https://i.imgur.com/fTVQINz.jpg"
);
list-style-position: inside;
}
span{
font-weight:bold;
}
.last{
text-decoration: underline;
}
.first{
font-family:none;
color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment