Task 3: Recipe Card

Task 3: Recipe Card

                                           

In this exercise, we will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.

---

I start with formatting the image as:"baked-honey-soy-chicken1"~"baked-honey-soy-chicken5" for easy reference and also make the code more tidy and clean.

fig 1.0 image name

I had added in <div class "container"/> <div class "main"/> <div class "row"/> <div class "column"/> <div class "aside-left"/> <div class "aside-right"/> to divide different column and rows of the recipe. I had also added <div class "navi"/> for the menu and navigation on top. By coding the font color and background color to devide the page and menu.

fig 1.1 coding

I had continued the recipe step-by-step guide how to do the recipe. For the instruction and ingredient, I had use unordered list and ordered list which is <ol></ol> &<ul><ul>, the text color had been change to white and background had set as hot pink to devide the important part of page.

fig 1.2 ul & ol

I had added three recipe below the part of "What dishes serve with this recipe?", As the list from ccs, I listed the image clear and tidy for the width and height.

fig 1.3 image css

Here is the final link of the recipe card:

https://recipe-card-0352888.netlify.app/