@Mageshwari-Balaguru
Posted
Hi, congratulations! you have completed the challenge.
I've some suggestions I am sure it will make your design more look a like a template design.
- Font-family : h1 ,h2 elements are young-serif, body content are outfit.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Young+Serif&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Young+Serif&display=swap" rel="stylesheet">- Image border radius : on your .recipe-image class add the below .recipe-image{ border-radius:10px; }
preparation time : It has background color and border radius.
- list items have some space on the left.
.prep-time{ background-color:#fff5fa; border-radius:5px; } .prep-time ul{ padding-left:50px; line-height: 2.5rem; list-style-type: square; }
- list-style-type : All the ol, ul having list-style on the template. on your code, only ingredient's part reflecting the CSS. use list-style-type instead list-style. .prep-time ul, .ingredients ul, .instructions ol { list-style: none; padding: 0; }
- Font-color : Kindly review readme file and use the text colors.
- Table : inside tr element add two td elements like below. -also use class to bold the second td element. -add only border bottom to all your td elements. -Wrap the second td content in strong element.
<tr> <td></td> <td class="bold"><strong>content</strong></td> </tr>.bold{ color:brown; } td{ width:40rem; border-bottom: 1px solid grey; }
I hope it will help. kindly feel free to contact.
Happy coding:)