<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Recipe (Web2Recipe)</title> <link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700,900|Playfair+Display:700i,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'> <style> body { background: #bfb1ac; font-family: "Raleway", sans-serif; } aside.context { text-align: left; text-transform: none; padding-right: 20px; color: #333; } aside.context a { text-decoration: none; color: #333; padding: 3px 0; border-bottom: 1px dashed; } aside.context a:hover { border-bottom: 1px solid; } footer { text-align: center; width: 100%; } footer a { text-decoration: none; display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: transparent; border: 1px dashed #333; color: #333; margin: 0 3px; } footer a:hover { background: rgba(0, 0, 0, 0.05); } footer a .icons { margin-top: 8px; display: inline-block; font-size: 14px; } .main-content { display: grid; grid-template-areas: "navigation recipe-recipe recipe-image" "context context recipe-image"; grid-template-columns: min-content auto 35%; grid-template-rows: auto min-content; margin: auto; min-height: 100vh; max-height: calc(100vh - 4em); background: #fff; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); } .context__wrapper { grid-area: context; background: #f7f7f7; color: #333; padding: 15px 20px; font: 400 12px/1.2 "Raleway", sans-serif; display: grid; align-items: center; grid-template-columns: auto max-content; } .navigation { grid-area: navigation; border-right: 1px solid #eee; writing-mode: vertical-rl; text-orientation: mixed; color: #dbc7b1; text-transform: uppercase; letter-spacing: 1px; padding: 20px; font: 16px "Playfair Display", serif; text-align: center; } .recipe-image { grid-area: recipe-image; background: url("https://i2.wp.com/www.vegrecipesofindia.com/wp-content/uploads/2010/01/masala-dosa-recipe-restaurant-style.jpg") no-repeat left center/cover; } .recipe-name { font: 900 45px Raleway; text-transform: uppercase; margin: 20px 0 5px; letter-spacing: 2px; color: #916953; position: relative; } .recipe-serving { font: 400 16px Raleway; color: #916953; margin: 20px 0; max-width: 300px; } .recipe-serving svg { width: 40px; } .recipe-serving svg path { fill: #916953; } .recipe-serving p { display: inline-block; vertical-align: top; margin: 12px 6px 6px; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #dbc7b1; } ::-webkit-scrollbar-thumb:hover { background: #d69762; } .recipe-recipe { grid-area: recipe-recipe; color: #999; overflow-y: auto; overflow-x: hidden; margin: 5px; max-height: 100%; padding: 50px 60px; display: grid; grid-gap: 20px; grid-template-columns: 30px auto; grid-template-rows: repeat(4, max-content); line-height: 1.6; } .recipe-recipe__title { grid-column: span 2; } .recipe-recipe__ingredients { grid-column: span 2; display: flex; flex-wrap: wrap; } .recipe-recipe__ingredients__item { flex: 1; padding: 0 40px 0 0; } .recipe-recipe__ingredients__item h4 { font: italic 20px/1.1 "Playfair Display", serif; color: #d69762; margin: 0 0 10px; margin-top: 30px; } .recipe-recipe__ingredients__item ul { margin: 0; padding: 0; list-style: none; } .recipe-recipe__ingredients__item ul li { padding: 5px 0; } .recipe-recipe__number { font: italic 30px/1 "Playfair Display", serif; color: #d69762; place-self: center; margin-top: -15px; } .recipe-recipe__steps { padding-right: 35px; } .recipe-recipe__subtitle { font: italic 30px/1 "Playfair Display", serif; color: #916953; margin: 45px 0 10px; grid-column: span 2; } .recipe-recipe__tips { grid-column: span 2; margin-top: 65px; position: relative; border: 2px solid #916953; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #916953; text-align: center; padding: 35px; } .recipe-recipe__tips svg { display: inline-block; padding: 10px; position: absolute; margin: auto; left: 0; right: 0; top: -40px; width: auto; background: #fff; width: 60px; fill: #916953; } .recipe-recipe__tips h4 { font: 900 24px Raleway; text-transform: uppercase; margin: 10px 0 15px; color: #543b2e; } @media screen and (max-width: 768px) { .main-content { margin: 0; max-height: none; grid-template-areas: "recipe-image" "recipe-recipe" "context"; grid-template-columns: auto; grid-template-rows: 300px auto max-content; } .navigation { display: none; } .recipe-image { height: 300px; width: 100%; } } /* @media screen and (max-width: 768px) { .main-content { margin: 0; max-height: none; grid-template-areas: "recipe-image" "recipe-recipe" "context"; grid-template-columns: auto; grid-template-rows: 300px auto max-content; } .navigation { display: none; } .recipe-image { height: 300px; width: 100%; } .recipe-recipe { padding: 25px; &__title { margin: 0; text-align: center; } .recipe-serving { margin: 20px auto; } } } */ </style> </head> <body> <!-- partial:index.partial.html --> <div class="main-content"> <div class="navigation">Generated by Web2Recipe</div> <div class="recipe-image"></div> <div class="recipe-recipe"> <div class="recipe-recipe__title"> <div class="recipe-name">Masala Dosa</div> <div class="recipe-recipe__ingredients"> <div class="recipe-recipe__ingredients__item"> <h4>Ingredients</h4> <ul><li>20 whole seeds <li>1 cup water <li>2 cups water <li>1 cup water <li>0.5 cup water <li>0.5 teaspoon salt (rock) <li>2 tablespoons oil <li>0.5 teaspoon mustard seeds <li>1 whole inch ginger <li>18 whole curry <li>3 whole green <li>0.25 teaspoon turmeric <li>1 whole asafoetida <li>0.5 cup water <li>3 tablespoons coriander (chopped) <li>18 whole cashews <li>0.25 teaspoon sugar </li> </div> </div> <div class="recipe-recipe__subtitle">Instructions</div> <div class="recipe-recipe__steps"> soak 3 to 4 dry kashmiri red chilies (kashmiri lal mirch) in warm water for 30 to 40 minutes - add the number of chilies as per your taste preferences and depending on the type of chilies - whether they are less hot or too pungent.</div> <br><div class="recipe-recipe__steps"> for a spicy taste in the chutney add 4 to 5 dry kashmiri red chilies. later drain all the water. break the chilies and add in a small grinder jar.</div> <br><div class="recipe-recipe__steps"> also add 2 tablespoons roasted chana dal (roasted bengal gram or bhuna chana dal), 4 to 5 garlic cloves, 1 teaspoon seedlees tamarind and ¼ cup chopped onions. also add salt as required.</div> <br><div class="recipe-recipe__steps"> if you do not like the raw taste of onions or garlic, then just sauté both in some oil for a few minutes and then add before grinding.</div> <br><div class="recipe-recipe__steps"> now add water as required and grind all the ingredients till smooth. grind the chutney to a slightly thick or medium consistency and not to a thin consistency.</div> <br><div class="recipe-recipe__steps"> remove the red dosa chutney in a bowl.</div> <br><div class="recipe-recipe__steps"> spread this red chutney after dosa becomes golden and crisp. then spread the potato masala. fold and serve mysore masala dosa.</div> <br><div class="recipe-recipe__steps"> this red chutney stays well in the refrigerator for 1 to 2 days. this red chutney recipe yields a small bowl of chutney which can be spread on 8 to 9 dosas.</div> <br> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> </body> </html>