<!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>