For this assignment you are required to create a web page displaying a recipe of your...

For this assignment you are required to create a web page displaying a recipe of your choosing.

Your submission should appropriately use the basic head and body construction of an HTML document. Additionally you are required to appropriately use at least three different HTML element types.

For example you might use an unordered list for your ingredients, an ordered list for the steps of your recipe, and an image to show the final result. If you choose to use an existing recipe (not a bad idea) please remember to cite the original source somewhere in your submission.

You will also be required to use CSS styling to alter the appearance of your document. While you will not be graded on appearance per se, your recipe should look clean, organized, and easy to follow.

What is required in your submission?

HTML

• Proper doctype, html, head, body construction
• At least 3 different HTML elements (in body)
• An actual recipe (don’t just submit filler text)

CSS
• Internal CSS file (to be referenced in HTML head by creating a <style></style> element)
• Styling of at least one property using an element selector
• Styling of at least one property using an id selector
• Styling of at least one property using a class selector
• Setting at least 4 different properties, (for example setting font-style and text-align on instructions, background-color on the body, and padding on list items.)

Solutions

Expert Solution

HTML CODE:-

<!DOCTYPE html>
<html>
    <head>
        <title>
            Recipe
        </title>

    </head>
    <style>
        body{
            margin: 0;
            border: none;
        }
        #top{
            height: 100vh;
            background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url("bg.jpg");
              background-position:center;
             background-size:cover;
             background-attachment:fixed;
             margin-top: 0;
        }
        #heading{
            text-align: center;
            color: white;
            font-size: 80px;
            padding: 180px ;
        }
        #head2{
            text-align: center;
            font-size: 50px;
            margin: 0 0;
        }
        .list{
            list-style-type: none;
            text-align: center;
            font-size: 40px;
            line-height: 65px;
        }
        a{
            text-decoration: none;
            text-underline-offset: none;
            color: black;
        }
        .foods{
            background-color: cornsilk;
        }
        .head3{
            text-align: center;
            font-size: 35px;
            font-weight: 900;
        }
        .i{
            padding-left: 270px;
            width: 800px;
            height: 400px;
        }
        .h5{
            font-size: 30px;
        }
        .content{
            font-size: 20px;
        }

    </style>
    <body>
        <div id="top">
            <h1 id="heading">Recipe-Book</h1>   
        </div>
        <section class="Main">
            <div class="Recipe-List">
                <h2 id="head2">Recipes</h2>
                <ul class="list">
                   <a href="#1"> <li style="background-color: turquoise;">Kesar Pista Phirni</li></a>
                   <a href="#2"><li style="background-color:tomato">Dum Biryani Risotto</li></a> 
                    <a href="#3"><li style="background-color: burlywood;">Tandoori Blacked Pomfret</li></a>
                </ul>
            </div>

            <div class="foods" id="1">
                <h2 class="head3">Kesar Pista Phirni</h2>
                <img class="i" src="/1.jpg"  >
                <p><h3 class="h5">About Kesar Pista Phirni Recipe:</h3></p>
                <p class="content"> One Indian dessert that none of us can ever say no to is phirni. A bowl of chilled, nutty and delicious phirni can turn around a day for us. Here's a sugar-free kesar pista phirni that you can try at home this summer season.</p>
                <p><h3  class="h5">How to Make Kesar Pista Phirni</h3></p>
                <ol class="content">
                    <li> Bring the milk to a boil in a deep non-stick pan. Lower the heat and simmer, stirring continuously, till it reduces by half.</li>
                    <li>Add the ground rice, mixed with a little water, and stir well to prevent lumps from forming. Bring the mixture to a boil.</li>
                    <li>When it starts to thicken, lower the heat and simmer for a couple of minutes, stirring continuously. Add the cardamom powder and saffron, and mix well.</li>
                    <li> When the mixture attains a thick custard-like consistency, remove from heat and stir in the low-calorie sweetener.</li>
                    <li>Pour the mixture into 4 individual earthenware bowls while still warm. Sprinkle sliced pistachios and refrigerate for at least 2 hours. Serve chilled.</li>
                </ol>
                <p><h3  class="h5">Ingredients Of Kesar Pista Phirni</h3></p>    
                <ul class="content">
                    <li> A few saffron threads</li>
                    <li>10-12 pistachios (peeled and sliced), blanched</li>
                    <li>1 litre skimmed milk</li>
                    <li>3 tbsp coarsely ground rice</li>
                    <li>3 tbsp coarsely ground rice</li>
                    <li>3/4 tbsp green cardamom powder</li>
                    <li>3 tbsp low-calorie sweetener</li>

                </ul>
            </div>
            <div class="foods" id="2">
                <h2 class="head3">Dum Biryani Risotto</h2>
                <img class="i" src="/2.jpg"  >
                <p><h3 class="h5">About Dum Biryani Risotto Recipe:</h3></p>
                <p class="content">A delicious mix of Italian risotto with classic Indian biryani masala. Tandoori chicken tossed with risotto along with delectable makhani gravy. This risotto recipe is the perfect dish to serve for a dinner party or weekend brunches at home.</p>
                <p><h3  class="h5">How to Make Dum Biryani Risotto</h3></p>
                <ol class="content">
                    <li>Heat a pan and add the oil and butter.</li>
                    <li>Add onion, garlic, celery, leeks & saute.</li>
                    <li>Add biryani masala followed by tandoori chicken and saute.</li>
                    <li>Add 100 gm risotto, mix it well.</li>
                    <li>Heat another pan add makhani gravy and 50 gm risotto.</li>
                    <li>Heat another pan add butter, cream and 50 gm risotto.</li>
                    <li>Transfer risotto into pasta plate.</li>
                    <li>Garnish with coriander, mint and fried onion.</li>
                    <li>Serve with lemon wedge.</li>
                </ol>
                <p><h3 class="h5">Ingredients Of Dum Biryani Risotto</h3></p>    
                <ul class="content">
                    <li> 10 gms olive oil</li>
                    <li>10 gms butter</li>
                    <li>10 gms garlic , chopped</li>
                    <li>10 gms onion, chopped</li>
                    <li>5 gms celery, chopped</li>
                    <li>5 gms leeks, chopped</li>
                    <li>15 gms biryani masala</li>
                    <li>70 gms tandoori chicken</li>
                    <li>10 gms makhani gravy</li>
                    <li>1 gms coriander, chopped</li>
                    <li>1 gms mint, chopped</li>
                    <li>200 gms risotto</li>
                    <li>20 gms cream</li>
                    <li>5 gms salt</li>
                    <li>1 gms pepper</li>
                </ul>
            </div>
            <div class="foods" id="3">
                <h2 class="head3">Tandoori Blacked Pomfret</h2>
                <img class="i" src="/3.jpg"  >
                <p><h3 class="h5">About Tandoori Blacked Pomfret Recipe:</h3></p>
                <p class="content">A flavorful Indian-style main dish, inspired by the Cajun style cuisine, tandoori blackened pomfret is an absolutely delicious pick for just about any occasion.</p>
                <p><h3  class="h5">How to Make Tandoori Blacked Pomfret</h3></p>
                <ol class="content">
                    <li>Gather the ingredients. Wash the pomfret and clean it. Cut slits into the fish.</li>
                    <li>Marinate the fish with limejuice, salt, ginger garlic paste.</li>
                    <li>Mix together the paprika, cayenne, salt, garlic powder, onion powder, thyme, oregano, pepper, cream & hung curd.</li>
                    <li>Rub over each side of the pomfret.</li>
                    <li>Preheat the tandoor at 220 degree celsius.</li>
                    <li>Skewer the fish and cook in covered tandoor.</li>
                    <li>Grill the pomfret about 5 to 6 minutes on one side, until the seasonings are blackened.</li>
                    <li>Right before taking the fish out of the tandoor, apply melted butter and lime juice. And put back the fish in tandoor for the final colour and smoky flavor.</li>
                    <li>Once cooked through, remove the fish from skewer and plate.</li>
                    <li>Add coriander sprigs,lemon wedges.</li>
                    <li>Serve with grilled vegetables or your favorite sides.</li>
                 
                </ol>
                <p><h3  class="h5">Ingredients Of Tandoori Blacked Pomfret</h3></p>    
                <ul class="content">
                    <li>1 tsp red chilli powder</li>
                    <li>1/4 tsp cayenne pepper powder (optional)</li>
                    <li>1 tsp salt</li>
                    <li>1/2 tsp garlic powder</li>
                    <li>1/2 tsp onion powder</li>
                    <li>1 tsp dried thyme</li>
                    <li>1 tsp dried oregano</li>
                    <li>1/2 tsp black pepper</li>
                    <li>2 tbsp lemon juice</li>
                    <li>1/2 cup butter</li>
                    <li>1/4 cup fresh cream</li>
                    <li>1 tsp chaat masala</li>
                    <li>450 gms 1 piece pomfret</li>
                </ul>
            </div>
        </section>

    </body>
</html>

Images used

name of image:1

name of image:2

name of image:3

name of image:bg

Content file

About Kesar Pista Phirni Recipe: One Indian dessert that none of us can ever say no to is phirni. A bowl of chilled, nutty and delicious phirni can turn around a day for us. Here's a sugar-free kesar pista phirni that you can try at home this summer season!

How to Make Kesar Pista Phirni
1.Bring the milk to a boil in a deep non-stick pan. Lower the heat and simmer, stirring continuously, till it reduces by half.
2.Add the ground rice, mixed with a little water, and stir well to prevent lumps from forming. Bring the mixture to a boil.
3.When it starts to thicken, lower the heat and simmer for a couple of minutes, stirring continuously. Add the cardamom powder and saffron, and mix well.
4.When the mixture attains a thick custard-like consistency, remove from heat and stir in the low-calorie sweetener.
5.Pour the mixture into 4 individual earthenware bowls while still warm. Sprinkle sliced pistachios and refrigerate for at least 2 hours. Serve chilled.


Ingredients Of Kesar Pista Phirni
A few saffron threads
10-12 pistachios (peeled and sliced), blanched
1 litre skimmed milk
3 tbsp coarsely ground rice
3/4 tbsp green cardamom powder
3 tbsp low-calorie sweetener

About Dum Biryani Risotto Recipe: A delicious mix of Italian risotto with classic Indian biryani masala. Tandoori chicken tossed with risotto along with delectable makhani gravy. This risotto recipe is the perfect dish to serve for a dinner party or weekend brunches at home.

How to Make Dum Biryani Risotto
1.Heat a pan and add the oil and butter.
2.Add onion, garlic, celery, leeks & saute.
3.Add biryani masala followed by tandoori chicken and saute.
4.Add 100 gm risotto, mix it well.
5.Heat another pan add makhani gravy and 50 gm risotto.
6.Heat another pan add butter, cream and 50 gm risotto.
7.Transfer risotto into pasta plate.
8.Garnish with coriander, mint and fried onion.
9.Serve with lemon wedge.

Ingredients Of Dum Biryani Risotto
10 gms olive oil
10 gms butter
10 gms garlic , chopped
10 gms onion, chopped
5 gms celery, chopped
5 gms leeks, chopped
15 gms biryani masala
70 gms tandoori chicken
10 gms makhani gravy
1 gms coriander, chopped
1 gms mint, chopped
200 gms risotto
20 gms cream
5 gms salt
1 gms pepper
For garnishing:
10 gms fried onion
10 gms lemon wedges




About Tandoori Blacked Pomfret Recipe: A flavorful Indian-style main dish, inspired by the Cajun style cuisine, tandoori blackened pomfret is an absolutely delicious pick for just about any occasion.


How to Make Tandoori Blacked Pomfret
1.Gather the ingredients. Wash the pomfret and clean it. Cut slits into the fish.
2.Marinate the fish with limejuice, salt, ginger garlic paste.
3.Mix together the paprika, cayenne, salt, garlic powder, onion powder, thyme, oregano, pepper, cream & hung curd.
4.Rub over each side of the pomfret.
5.Preheat the tandoor at 220 degree celsius.
6.Skewer the fish and cook in covered tandoor.
7.Grill the pomfret about 5 to 6 minutes on one side, until the seasonings are blackened.
8.Right before taking the fish out of the tandoor, apply melted butter and lime juice. And put back the fish in tandoor for the final colour and smoky flavor.
9.Once cooked through, remove the fish from skewer and plate.
10.Add coriander sprigs,lemon wedges.
11.Serve with grilled vegetables or your favorite sides.

Ingredients Of Tandoori Blacked Pomfret
1 tsp red chilli powder
1/4 tsp cayenne pepper powder (optional)
1 tsp salt
1/2 tsp garlic powder
1/2 tsp onion powder
1 tsp dried thyme
1 tsp dried oregano
1/2 tsp black pepper
2 tbsp lemon juice
1/2 cup butter
1/4 cup fresh cream
100 gms hung curd
1 tsp chaat masala
1 tsp ginger garlic paste (1 part of ginger 3 parts of garlic)
450 gms 1 piece pomfret
6 Coriander sprigs

Resulting webpage:

venereology answered 2 years ago

Next > < Previous

Related Solutions

In this assignment you will create a web page about your favorite sports to play or...

In this assignment you will create a web page about your favorite sports to play or teams to watch. If you don’t watch or play sports, please make up your favorite sports to play or teams to watch. You will be incorporating images into your web page, as well as other concepts learned in this unit. Create an external style sheet using a text editor of your choosing. In the CSS file add the following style rules: A background image...

In this weeks assignment you will be sharing your favorite recipe with us via a web...

In this weeks assignment you will be sharing your favorite recipe with us via a web page. The recipe is of your choice and does not have to be a culinary creation, it can be anything! Your web page style and aesthetic should compliment your recipe, do some research for design inspiration if you cannot think of anything. Requirements: Use an external CSS & JS file, no internal or inline styles & scripts Please comment your JS to break down...

For your final project, you are to create a two-page web application of your choice. ASP.NET...

For your final project, you are to create a two-page web application of your choice. ASP.NET : C# You must include the following items: At least 5 different standard server controls At least 2 validation controls At least 1 navigation control ~ one must navigate back and forth to each page One session state element Upon completion of your two-page web application, you will provide a two page report describing the functions of the web application as well as each...

Web Projects If you are learning a web technology, you must create a new page that...

Web Projects If you are learning a web technology, you must create a new page that is web-accessible (use your individual burrow account) that includes a form with a field that allows the user to enter a number only. ● Create an input that allows a number to be entered. Only whole numbers should be allowed. ● Add a button below the input that says "Translate". ● When the button is clicked, it should grab the current number in the...

n this assignment, you will need to code a Web page that will allow a user...

n this assignment, you will need to code a Web page that will allow a user to enter their first and last names and indicate how many pets they have, if any. If they have pets, the user will be able to list up to three of their names. You will code validations on some of the fields and display error messages on the page when a field does not pass the validation test. If all the data entered is...

In this weeks assignment you will creating some character cards on a web page. These character...

In this weeks assignment you will creating some character cards on a web page. These character cards can be similar to a baseball card, Magic The Gathering Card. It is your choice and anything is fair game. Requirements: Use an external CSS & JS file, no internal or inline styles & scripts Please comment your JS to break down your understanding of what is happening. Please put your name in your code. Create at least 3 character card elements (div's...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...

You are designing a web page that allows users to create an event listing. The event...

You are designing a web page that allows users to create an event listing. The event listing should include the date, time, location, title, phone, email, coordinator, and description of the event. The location should be between 10 and 100 characters long. The title should be between 1 and 50 characters long. The description should be between 10 and 200 characters long. Phone number consists of numbers and dashes. Email has to have an @ symbol. All data elements should...

You are designing a web page that allows users to create an event listing. The event...

Your goal for this assignment is to create a wiki-style page in your Canvas Group space...

Your goal for this assignment is to create a wiki-style page in your Canvas Group space that highlights your plant's basic biology and anatomy. Use your group discussion forum this week to plan this page with your group members. Expectations for this assignment include: 1. at least one image (more is fine) that highlights what your plant looks like (actual + anatomy) 2. a written description of your plant's anatomy, highlighting the plant organ(s) of your plant that have been used by human civilization,...

Subjects