Created
January 12, 2021 20:52
-
-
Save amani-joseph/481a0dd89ab96c171e6eb4af7163e5a7 to your computer and use it in GitHub Desktop.
HOME-MADE CAKE // source https://jsbin.com/gixagah
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 { | |
| justify-content: center; | |
| background-color: teal | |
| argin: auto; | |
| text-align: left; | |
| } | |
| div{ | |
| background-color: lightblue; | |
| border-radius: 5px; | |
| } | |
| span.highlight { | |
| background-color: red; | |
| border-radius: 5px; | |
| font-style: italic; | |
| } | |
| span.ingredients { | |
| background-color: purple; | |
| } | |
| p { | |
| color: green; | |
| font-size: 30px; | |
| background-color: lightblue; | |
| border-radius: 5px; | |
| } | |
| ul { | |
| font-size: 20px; | |
| background-color: lightblue; | |
| border-radius: 5px; | |
| list-style-type: square; | |
| } | |
| ol { | |
| font-size: 20px; | |
| background-color: lightblue; | |
| border-radius: 5px; | |
| list-style-type: lower-roman; | |
| } | |
| h1 { | |
| padding: 20px; | |
| font-weight: 1000; | |
| text-decoration: underline; | |
| } | |
| span { | |
| background-color: yellow; | |
| border-radius: 5px; | |
| } | |
| #my-ingredients { | |
| color: purple; | |
| } | |
| h2 { | |
| padding: 30px; | |
| } | |
| img { | |
| padding: 30px; | |
| position: relative; | |
| justify-content: right; | |
| border-radius: 5px; | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 80%; | |
| } | |
| #recipe { | |
| padding-left:100px; | |
| } | |
| social | |
| { | |
| position: absolute; | |
| z-index: 10; | |
| bottom: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| a.button { | |
| display: inline-block; | |
| font-size: 1em; | |
| background: #fff; | |
| border-radius: 5px; | |
| padding: 10px 30px; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| font-weight: 500; | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| margin-left: 10px; | |
| color: #111; | |
| letter-spacing: 2px; | |
| transition: 0.2s; | |
| } | |
| .other-recipe li a:hover | |
| { | |
| transform: scale(0.9) | |
| translateY(-9px); | |
| display: inline-block; | |
| margin-right: 20px; | |
| transition: 0.5s; | |
| } | |
| .social li | |
| { | |
| list-style: none; | |
| } | |
| .social li a | |
| { | |
| display: inline-block; | |
| margin-right: 50px; | |
| 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> | |
| <span class=highlight>A homemade cake </span>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 <span class=quantity>quantities </span> right, this cake will rise, be fluffy and taste delicious. This <span class=highlight>sponge cake </span> 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 <span class="ingredients">ingredients </span>. 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> | |
| <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"/> | |
| <div><p> | |
| <h2>Ingredients of Homemade Cake</h2> | |
| <!-- List of ingredients --> | |
| <ul id="my-ingredients"> | |
| <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 | |
| </p> | |
| </div> | |
| <div> | |
| <a class="button" href="#">Buy Recipe Book</a> | |
| </div> | |
| <p> | |
| <h2>How to make Homemade Cake</h2> | |
| <!-- ordered list List --> | |
| <ol class="my-other-cakes"> | |
| <li>Cream together butter-sugar and then blend with beaten eggs🥞 😋</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😋</li> | |
| </ol> | |
| </p> | |
| <p> | |
| Similar Recipes | |
| <ul class="other-recipe" id="recipe"> | |
| <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 { | |
| justify-content: center; | |
| background-color: teal | |
| argin: auto; | |
| text-align: left; | |
| } | |
| div{ | |
| background-color: lightblue; | |
| border-radius: 5px; | |
| } | |
| span.highlight { | |
| background-color: red; | |
| border-radius: 5px; | |
| font-style: italic; | |
| } | |
| span.ingredients { | |
| background-color: purple; | |
| } | |
| p { | |
| color: green; | |
| font-size: 30px; | |
| background-color: lightblue; | |
| border-radius: 5px; | |
| } | |
| ul { | |
| font-size: 20px; | |
| background-color: lightblue; | |
| border-radius: 5px; | |
| list-style-type: square; | |
| } | |
| ol { | |
| font-size: 20px; | |
| background-color: lightblue; | |
| border-radius: 5px; | |
| list-style-type: lower-roman; | |
| } | |
| h1 { | |
| padding: 20px; | |
| font-weight: 1000; | |
| text-decoration: underline; | |
| } | |
| span { | |
| background-color: yellow; | |
| border-radius: 5px; | |
| } | |
| #my-ingredients { | |
| color: purple; | |
| } | |
| h2 { | |
| padding: 30px; | |
| } | |
| img { | |
| padding: 30px; | |
| position: relative; | |
| justify-content: right; | |
| border-radius: 5px; | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 80%; | |
| } | |
| #recipe { | |
| padding-left:100px; | |
| } | |
| social | |
| { | |
| position: absolute; | |
| z-index: 10; | |
| bottom: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| a.button { | |
| display: inline-block; | |
| font-size: 1em; | |
| background: #fff; | |
| border-radius: 5px; | |
| padding: 10px 30px; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| font-weight: 500; | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| margin-left: 10px; | |
| color: #111; | |
| letter-spacing: 2px; | |
| transition: 0.2s; | |
| } | |
| .other-recipe li a:hover | |
| { | |
| transform: scale(0.9) | |
| translateY(-9px); | |
| display: inline-block; | |
| margin-right: 20px; | |
| transition: 0.5s; | |
| } | |
| .social li | |
| { | |
| list-style: none; | |
| } | |
| .social li a | |
| { | |
| display: inline-block; | |
| margin-right: 50px; | |
| 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); | |
| body { | |
| justify-content: center; | |
| background-color: teal | |
| argin: auto; | |
| text-align: left; | |
| } | |
| div{ | |
| background-color: lightblue; | |
| border-radius: 5px; | |
| } | |
| span.highlight { | |
| background-color: red; | |
| border-radius: 5px; | |
| font-style: italic; | |
| } | |
| span.ingredients { | |
| background-color: purple; | |
| } | |
| p { | |
| color: green; | |
| font-size: 30px; | |
| background-color: lightblue; | |
| border-radius: 5px; | |
| } | |
| ul { | |
| font-size: 20px; | |
| background-color: lightblue; | |
| border-radius: 5px; | |
| list-style-type: square; | |
| } | |
| ol { | |
| font-size: 20px; | |
| background-color: lightblue; | |
| border-radius: 5px; | |
| list-style-type: lower-roman; | |
| } | |
| h1 { | |
| padding: 20px; | |
| font-weight: 1000; | |
| text-decoration: underline; | |
| } | |
| span { | |
| background-color: yellow; | |
| border-radius: 5px; | |
| } | |
| #my-ingredients { | |
| color: purple; | |
| } | |
| h2 { | |
| padding: 30px; | |
| } | |
| img { | |
| padding: 30px; | |
| position: relative; | |
| justify-content: right; | |
| border-radius: 5px; | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 80%; | |
| } | |
| #recipe { | |
| padding-left:100px; | |
| } | |
| social | |
| { | |
| position: absolute; | |
| z-index: 10; | |
| bottom: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| a.button { | |
| display: inline-block; | |
| font-size: 1em; | |
| background: #fff; | |
| border-radius: 5px; | |
| padding: 10px 30px; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| font-weight: 500; | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| margin-left: 10px; | |
| color: #111; | |
| letter-spacing: 2px; | |
| transition: 0.2s; | |
| } | |
| .other-recipe li a:hover | |
| { | |
| transform: scale(0.9) | |
| translateY(-9px); | |
| display: inline-block; | |
| margin-right: 20px; | |
| transition: 0.5s; | |
| } | |
| .social li | |
| { | |
| list-style: none; | |
| } | |
| .social li a | |
| { | |
| display: inline-block; | |
| margin-right: 50px; | |
| 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