Skip to content

Instantly share code, notes, and snippets.

@amani-joseph

amani-joseph/index.html

Created January 10, 2021 13:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save amani-joseph/e7e06539c66ebb18d9b0970ffdc769f8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save amani-joseph/e7e06539c66ebb18d9b0970ffdc769f8 to your computer and use it in GitHub Desktop.
Download ZIP
HOME-MADE CAKE // source https://jsbin.com/gixagah
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HOME-MADE CAKE</title>
<style id="jsbin-css">
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
body {
background-color: teal
}
div{
background-color: lightblue;
}
p {
color: green;
font-size: 30px;
background-color: lightblue;
}
ul {
font-size: 20px;
background-color: lightblue;
}
ol {
font-size: 20px;
background-color: lightblue;
}
h1 {
padding: 20px;
font-weight: 1000;
text-decoration: underline;
}
h2 {
padding: 30px;
}
img {
padding: 30px;
position: relative;
justify-content: right;
}
social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
a {
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
/* CSS Properties url link
https://www.w3schools.com/css/default.asp */
</style>
</head>
<body>
<h1>HOME-MADE CAKE</h1>
<p>
A homemade cake is definitely tastier than the store bought one . But many people believe that making a cake at home is difficult. The best thing about this cake is that you can add any flavour of your choice to suit your palate. If you get the quantities right, this cake will rise, be fluffy and taste delicious. This sponge cake can also be your base for most cream cake recipes that you prepare. One tip that makes this cake perfect is the right way to mix the wet and dry ingredients. It may seem a small thing, but adding both of them together at one go may lead to tiny lumps that may affect the texture of the cake. The trick is to gradually add them together, mixing a little at a time. This cake recipe is easy to follow and you can make your birthday cake out of it and trust us, it will not disappoint you. You can use heart shaped molds for making Valentine's Day or Anniversary Cake. If you want to make this sponge cake creamier, replace half of the milk with condensed milk.
</p>
<h2>Ingredients of Homemade Cake</h2>
<ol>
<li>
<img src="https://images.pexels.com/photos/1359330/pexels-photo-1359330.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="a home made Cake" width="800px" height="450px"/> </li>
<img src="https://images.pexels.com/photos/1721932/pexels-photo-1721932.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="a home made Cake" width="800px" height="450px"/> </li>
</ol>
<p>
<!-- List of ingredients -->
<ul>
<li>3 cups all purpose flour</li>
<li>4 cups egg</li>
<li>2 teaspoons baking soda</li>
<li>2 teaspoons vanilla essence</li>
<li>2 1 1/2 cups powdered sugar</li>
<li>1 cup butter</li>
<li>1 cup milk</li
</ul>
</p>
<div>
<a href="#">Buy Recipe Book</a>
</div>
<p>
<h2>How to make Homemade Cake</h2>
<!-- ordered list List -->
<ol>
<li>Cream together butter-sugar and then blend with beaten eggs🥞 &#x1F60B</li>
<li>Combine flour mix and beaten eggs🥚</li>
<li>Bake the cake as per your convenience🥧</li>
<li>Check with a knife or skewer if it is cooked and serve🔪</li>
<li>Enjoy&#x1F60B</li>
</ol>
</p>
<p>
Similar Recipes
<ul>
<li><a href="https://www.olivemagazine.com/recipes/baking-and-desserts/easy-banana-bread-with-peanut-butter-frosting/">Banana bread with peanut butter</a></li>
<li><a href="https://www.olivemagazine.com/recipes/baking-and-desserts/basic-sponge-cake/">Basic sponge cake</a></li>
<li><a href="https://www.olivemagazine.com/recipes/simple-victoria-sponge/">Simple victoria sponge</a></li>
<li><a href="https://www.olivemagazine.com/recipes/family/red-velvet-cake/">Red velvet cake</a></li>
<li><a href="https://www.olivemagazine.com/recipes/baking-and-desserts/easiest-ever-chocolate-fudge-cake/">chocolate fudge cake</a></li>
</ul>
</p>
<ul class="social">
<li><a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png"></a></li>
<li><a href="#"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></a></li>
<li><a href="#"><img src="https://i.ibb.co/ySwtH4B/instagram.png"></a></li>
</ul>
<script id="jsbin-source-css" type="text/css">@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
body {
background-color: teal
}
div{
background-color: lightblue;
}
p {
color: green;
font-size: 30px;
background-color: lightblue;
}
ul {
font-size: 20px;
background-color: lightblue;
}
ol {
font-size: 20px;
background-color: lightblue;
}
h1 {
padding: 20px;
font-weight: 1000;
text-decoration: underline;
}
h2 {
padding: 30px;
}
img {
padding: 30px;
position: relative;
justify-content: right;
}
social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
a {
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
/* CSS Properties url link
https://www.w3schools.com/css/default.asp */</script>
</body>
</html>
Raw
jsbin.gixagah.css
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
body {
background-color: teal
}
div{
background-color: lightblue;
}
p {
color: green;
font-size: 30px;
background-color: lightblue;
}
ul {
font-size: 20px;
background-color: lightblue;
}
ol {
font-size: 20px;
background-color: lightblue;
}
h1 {
padding: 20px;
font-weight: 1000;
text-decoration: underline;
}
h2 {
padding: 30px;
}
img {
padding: 30px;
position: relative;
justify-content: right;
}
social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
a {
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
/* CSS Properties url link
https://www.w3schools.com/css/default.asp */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment