5+ CSS Recipe Layout Examples

This post contains a total of 5+ Hand-Picked CSS Recipe Layout Examples with Source Code. All the Recipe Layouts are made using CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Arman

Made by Arman. Simple CSS Recipe Layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected];400;500&display=swap");
html,
body {
  padding: 0;
  margin: 0;
  background-color: #f8f9fa;
  font-family: "Noto Sans JP", sans-serif;
  color: #333333;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

figcaption {
  display: none;
}

.container {
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}

.article {
  background-color: white;
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 718px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.thumbnail {
  max-width: 100%;
  width: 100%;
  max-height: 350px;
  margin: 0;
}
.thumbnail img {
  object-fit: cover;
  max-width: 100%;
  width: 100%;
  height: 100%;
}

.col {
  position: relative;
  padding: 1rem;
}

.meta-section {
  flex-direction: column;
}

@media (min-width: 718px) {
  .meta-section {
    display: flex;
    flex-direction: row-reverse;
  }

  .meta-wrapper {
    padding-left: 10px;
  }
}
.main-title {
  padding: 10px 10px;
  font-size: 24px;
  color: white;
  background-color: #ff6347;
  margin: 0;
}

.sub-title {
  font-size: 20px;
  padding: 10px 10px;
  background-color: #ff6347;
  color: white;
  text-align: center;
}

.background-image {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: 0;
}
.background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.background-image:before {
  content: " ";
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.8);
}

.ingredients-wrapper {
  position: relative;
  z-index: 2;
}

.recipe-details .list {
  list-style: none;
  padding: 0;
}
.recipe-details .list .list-item {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background-color: #eeeeee;
  border-radius: 3px;
  margin: 5px;
  font-size: 14px;
  font-style: italic;
  color: #557b97;
}

.ingredients {
  padding: 20px;
}
.ingredients li {
  padding: 5px;
}

.instructions {
  list-style: none;
  counter-reset: my-awesome-counter;
}
.instructions ul {
  padding: 15px;
}
.instructions li {
  padding: 5px 0;
}

.instructions > li {
  counter-increment: my-awesome-counter;
  margin-left: 0.5rem;
}
.instructions > li:before {
  content: "." counter(my-awesome-counter);
  display: inline-block;
  color: #ff6347;
  padding: 5px;
  margin: 5px;
  font-style: italic;
  font-weight: bold;
  width: 1em;
  margin-left: -1.5em;
  margin-right: 0.5em;
  text-align: right;
  direction: rtl;
}
</style>
</head>
<body>
  <div class="container">
    <article class="article">
      <div class="col meta-section">
        <div class="meta-wrapper">
          <h1 class="main-title">Heading</h1>
          <div class="description">
            <p>text</p>
          </div>
          <div class="recipe-details">
          <ul class="list">
            <li class="list-item">Servings: 4</li>
            <li class="list-item">Prep Time: 5 minutes</li>
            <li class="list-item">Cook Time: 25 minutes</li>
            <li class="list-item">Total Time: 30 minutes</li>
          </ul>
        </div>
        </div>
          <figure class="thumbnail">
          <img src="https://i.ibb.co/qBFggTm/shania-pinnata-7-E-v-Kgzahd8-unsplash.webp" alt="spaghetti with pesto sauce and cherry tomatoes.">
          	<figcaption>Photo by Shania Pinnata</figcaption>
        </figure>
        </div>
      <div class="col">
        <div class="ingredients-wrapper">
          <h2 class="sub-title">The Ingredients</h2>
          <ul class="ingredients">
            <li>text</li>
            <li>text</li>
          </ul>
          <p class="variation">text</p>
        </div>
        <figure class="background-image">
          <img src="https://i.ibb.co/Xkb6542/tamanna-rumee-nswz6t-Ipg-Zk-unsplash.webp" alt="tomato halves surrounded by basil leaves and peppercorns.">
        <figcaption>Photo by Tamanna Rumee</figcaption>
      </div>

      <div class="col">
        </figure>
        <h2 class="sub-title">The Process</h2>
        <ol class="instructions">
          <li>text</li>
          <li>text
            <ul>
              <li>text</li>
              <li>text</li>
            </ul>
          </li>
          <li>text</li>
        </ol>
      </div>
    </article>
  </div>
</body>
</html>

2. By Alex S Araujo

Made by Alex S Araujo. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800,600,500,400,300);
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&family=Indie+Flower&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: auto;
  height: auto;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}

.face {
  position: relative;
  max-width: 450px;
  min-width: 350px;
  height: 100%;
}

.face-front {
  background: rgba(0, 0, 0, 0.1);
}
.face-front .recipe-name {
  width: 80%;
  max-height: 20%;
  max-height: 22%;
  background: #f7a650;
  font-family: "indie flower";
  color: white;
  clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}
.face-front .recipe-name .span-1 {
  display: block;
  font-family: inherit;
  font-size: 80px;
  margin-left: 4%;
}
.face-front .recipe-name .span-2 {
  position: relative;
  font-family: inherit;
  font-size: 20px;
  margin-left: 8%;
  bottom: 40px;
}
.face-front .recipe-name {
  position: absolute;
}
.face-front .recipe-img {
  width: 100%;
  height: auto;
}
.face-front .recipe-img-caption {
  position: absolute;
  font-size: 12px;
  margin: 0 4%;
  bottom: 2%;
  color: #fff;
  z-index: 10;
}
.face-front .recipe-description {
  position: absolute;
  width: 100%;
  height: 42%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 10%, #000 90%);
}
.face-front .recipe-description p {
  color: white;
  margin: 2% 4%;
}

.face-details {
  display: flex;
  flex-direction: column;
  padding: 2% 4%;
  background: #fff;
}
.face-details .recipe-details ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.face-details .recipe-details ul li {
  width: 100px;
  height: 100px;
  display: block;
  margin: 10px 0;
  border-radius: 2px;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1);
  background: #f7a650;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.face-details .recipe-details ul li span {
  display: block;
}
.face-details .recipe-details ul li .detail {
  margin-top: 5px;
}
.face-details .recipe-details ul li .detail-info {
  position: relative;
  font-size: 50px;
  font-weight: 600;
}
.face-details .recipe-details ul li .detail-info .detail-time {
  position: absolute;
  font-size: 12px;
  right: -12px;
  bottom: 12px;
}
.face-details .recipe-ingredients {
  margin: 10px 0;
}
.face-details .recipe-ingredients .ingredients {
  list-style: none;
  margin-top: 20px;
}
.face-details .recipe-ingredients .ingredients li {
  margin-top: 15px;
}
.face-details .recipe-ingredients .ingredients li span {
  font-weight: 600;
  font-size: 18px;
}
.face-details .recipe-ingredients .variation {
  margin-top: 20px;
  padding: 5px;
  border-radius: 2px;
  color: #fff;
  background: #f7a650;
}
.face-details .recipe-process {
  margin: 15px 0;
}
.face-details .recipe-process .instructions {
  list-style-position: inside;
}
.face-details .recipe-process .instructions li {
  margin-top: 20px;
}
.face-details .recipe-process .instructions ul li {
  margin-left: 20px;
}

.title {
  color: #fff;
  margin-bottom: 5px;
  padding: 0 3px;
  width: 70%;
  height: 40px;
  line-height: 40px;
  background: #f7a650;
  clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}

ol {
  margin: 0 0 1.5em;
  padding: 0;
  counter-reset: item;
}

ol > li {
  margin: 0;
  padding: 0 0 0 2em;
  text-indent: -2em;
  list-style-type: none;
  counter-increment: item;
}

ol > li:before {
  display: inline-block;
  width: 1em;
  padding-right: 0.5em;
  font-weight: 600;
  font-size: 18px;
  text-align: right;
  content: counter(item) ".";
}

@media (min-width: 850px) {
  .container {
    margin: 5px 0;
    width: 850px;
    height: 550px;
    flex-direction: row;
    overflow: hidden;
  }

  .face-front {
    max-width: 40%;
    overflow: hidden;
  }

  .face-details {
    max-width: 60%;
    overflow: auto;
  }
}
</style>
</head>
<body>
  <div class="container">

	<div class="face face-front">
		<h1 class='recipe-name'><span class='span-1'>Heading</span> <span class='span-2'>Heading</span></h1>
		<figure>
			<img class='recipe-img' src="https://assets.codepen.io/652/shania-pinnata-7E-vKgzahd8-unsplash.jpg" alt="spaghetti with pesto sauce and cherry tomatoes.">

			<figcaption class='recipe-img-caption'><em>photo</em></figcaption>
		</figure>

		<div class="recipe-description">
			<p>Text</p>
		</div>
	</div>
	<div class="face face-details">
		<div class="recipe-details">
			<ul>
				<li>
					<span class='detail'>Servings:</span>
					<span class='detail-info'>4</span>
				</li>
				<li>
					<span class='detail'>Prep Time:</span>
					<span class='detail-info'>5<span class='detail-time'>m</span></span>

				</li>
				<li>
					<span class='detail'>Cook Time:</span>
					<span class='detail-info'>25<span class='detail-time'>m</span></span>

				</li>
				<li>
					<span class='detail'>Total Time:</span>
					<span class='detail-info'>30<span class='detail-time'>m</span></span>
				</li>
			</ul>
		</div>
		<div class="recipe-ingredients">
			<h2 class='title'>The Ingredients</h2>
			<ul class="ingredients">
				<li> <span>8 </span> text</li>
				<li> <span>2 </span> text</li>
			</ul>

			<p class="variation"> <b> text</b>more text.</p>
		</div>
		<div class="recipe-process">
			<h2 class='title'>The Process</h2>
			<ol class="instructions">
				<li>text</li>
					<ul>
						<li>text</li>
				</li>
				<li>text</li>
				<li>text</li>
			</ol>
		</div>
	</div>
</div>
</body>
</html>

3. By Elissavet Triantafyllopoulou

Made by Elissavet Triantafyllopoulou. Responsive Recipe Layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap");

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: "Baloo Tammudu 2", cursive;
	font-size: 1.2rem;
	line-height: 1.5rem;
}

figure {
	margin: 0;
}

img {
	border-radius: 2px;
	width: 100%;
	height: auto;
}

h1 {
	text-align: center;
	line-height: 3rem;
}

ul li,
ol li {
	margin: 1rem 0;
}

.container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"main-photo"
		"recipe";
	column-gap: 2rem;
	margin: 1rem;
	min-height: 100vh;
	background: #fff;
	box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
	padding: 1rem;
}

.main-photo {
	grid-area: main-photo;
}

.recipe-container {
	grid-area: recipe;
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.container {
		margin: 10px auto;
		max-width: 980px;
		grid-template-areas: "recipe main-photo";
		grid-template-columns: 8fr 4fr;
		grid-template-rows: 1fr;
		padding: 2rem;
	}
}
</style>
</head>
<body>
  <h1>heading</h1>
<div class="container">
	<div class="main-photo">
		<figure>
			<img src="https://images.unsplash.com/photo-1593253787226-567eda4ad32d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2434&q=80" alt="spaghetti with pesto sauce and cherry tomatoes.">
			<!-- full size image URL: https://images.unsplash.com/photo-1593253787226-567eda4ad32d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2434&q=80 -->
			<figcaption>caption</figcaption>
		</figure>
	</div>
	<div class="recipe-container">
		<div class="description">
			<p>some text </p>
			<figure>
				<img src="https://images.unsplash.com/photo-1606923829579-0cb981a83e2e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="tomato halves surrounded by basil leaves and peppercorns.">
				<!-- full size image URL: https://images.unsplash.com/photo-1606923829579-0cb981a83e2e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80-->

				<figcaption>caption</figcaption>
			</figure>
		</div>

		<div class="recipe_details">
			<ul>
				<li>Servings</li>
				<li>Prep Time</li>
				<li>Cook Time</li>
				<li>Total Time</li>
			</ul>
		</div>
		<h2>The Ingredients</h2>
		<ul class="ingredients">
			<li>some text</li>
			<li>some text</li>
		</ul>

		<p class="variation">Text</p>

		<h2>The Process</h2>
		<ol class="instructions">
			<li>text</li>
				<ul>
					<li>text</li>
					<li>text</li>
				</ul>
			</li>
			<li>text </li>
			<li>some text</li>
		</ol>
	</div>
</div>
</body>
</html>
 

4. By Ryan Mulligan

Made by Ryan Mulligan. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
@import url("https://fonts.googleapis.com/css2?family=Anonymous+Pro:[email protected];700&family=Caveat&display=swap");

:root {
	--space: 1rem;
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-lg: 2rem;
	--space-xl: 8rem;

	--font-primary: "Anonymous Pro", serif;
	--font-secondary: "Caveat", sans-serif;

	--color-primary: hsl(195 83% 30%);
	--color-primary-accent: hsla(195 83% 30% / 0.1);
	--color-secondary: hsl(195 83% 98%);
	--color-secondary-accent: hsl(0 79% 58% / 0.1);
}

* {
	box-sizing: border-box;
}

html {
	--bg-color: var(--color-secondary-accent);
	--size: var(--space-xl);
	
	padding: var(--space);
	background-color: var(--bg-color);
	background-image: 
		linear-gradient(to right, var(--bg-color) 50%, transparent 0),
		linear-gradient(0deg, var(--bg-color) 50%, transparent 0);
	background-size: var(--size) var(--size);
}

html::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--space-xl);
	background: var(--color-primary);
	box-shadow: inset 0 -2rem 4rem -2rem hsla(0 0% 0% / 0.2);
}

body {
	--dot: var(--space);
	--offset: calc(var(--dot) * -1);
	--dot-size: calc(var(--dot) * 2);

	position: relative;
	margin: var(--space-lg) auto var(--space-xl);
	padding: var(--space) var(--space-lg);
	max-width: 32rem;
	font-family: var(--font-primary);
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--color-primary);
	background-color: var(--color-secondary);
	background-image:
		radial-gradient(
			var(--color-primary) 40%,
			transparent calc(40% + 1px)
		);
	background-position: var(--offset) var(--offset), var(--dot) var(--dot);
	background-size: var(--dot-size) var(--dot-size);
	background-repeat: space no-repeat;
	box-shadow: 0 var(--space) var(--space) -6px var(--color-primary-accent);
}

figure {
	position: relative;
	display: grid;
	grid-template-areas: "figure";
	padding: 0;
	margin: 2rem 0;
}

figure > * {
	grid-area: figure;
}

figcaption {
	position: relative;
	place-self: end;
	padding: var(--space-xs) var(--space-sm);
	font-size: 0.8em;
	line-height: 1.2;
	background-color: var(--color-secondary);
	box-shadow: var(--space-xs) var(--space-xs) 0 var(--color-primary);
}

figure img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

h1,
h2 {
	font-family: var(--font-secondary);
	font-weight: 700;
	line-height: 1;
	transform: rotate(-2deg);
}

h1 {
	font-size: 3rem;
}

h2 {
	font-size: 2.5rem;
	margin: 2rem 0;
	margin-inline-start: -0.25em;
}

ul {
	padding-left: 1rem;
}

li + li,
li ul {
	margin-top: 1rem;
}

.description p {
	font-size: 1.6rem;
	font-family: var(--font-secondary);
	line-height: 1.2;
}

.recipe_details {
	--border: 2px dashed var(--color-primary-accent);

	margin: logical 0 calc(var(--space-lg) * -1);
	padding: logical var(--space-xs) var(--space);
	border-block-start: var(--border);
	border-block-end: var(--border);
}

.recipe_details ul {
	list-style: none;
}

.ingredients li,
.instructions ul li {
	list-style-type: square;
}

.ingredients li::marker,
.instructions ul li::marker {
	color: var(--color-primary-accent);
}

.instructions {
	counter-reset: count;
	margin-inline-start: calc(var(--space-lg) * -1);
	margin-inline-end: calc(var(--space-lg) * -1);
	padding: 0;
}

.instructions > li {
	counter-increment: count;
	position: relative;
	margin: 0;
	padding-inline-start: calc(var(--space-lg) + 1.5em);
	padding-inline-end: var(--space-lg);
	list-style: none;
}

.instructions > li::before {
	position: absolute;
	inset-block-start: -0.25em;
	inset-inline-end: calc(100% - 1.75em);
	content: counter(count) " โ€“";
	display: inline-block;
	font-family: var(--font-secondary);
	font-weight: bold;
	font-size: 1.5em;
	letter-spacing: -0.08em;
	transform: rotate(-6deg);
}

.instructions > li + li {
	padding-block-start: var(--space);
	margin-block-start: var(--space);
	border-block-start: 2px dashed var(--color-primary-accent);
}

.instructions > li + li::before {
	top: 0.25em;
	inset-block-start: 0.25em;
}

.instructions ul {
	width: 100%;
}
</style>
</head>
<body>
  <h1>heading</h1>
<figure>
	<img src="https://assets.codepen.io/652/shania-pinnata-7E-vKgzahd8-unsplash.jpg" alt="spaghetti with pesto sauce and cherry tomatoes.">
	<figcaption>image caption</figcaption>
</figure>

<div class="description">
	<p>lorem </p>
	<figure>
		<img src="https://assets.codepen.io/652/tamanna-rumee-nswz6tIpgZk-unsplash.jpg" alt="tomato halves surrounded by basil leaves and peppercorns.">

		<figcaption>image caption</figcaption>
	</figure>
</div>

<div class="recipe_details">
	<ul>
		<li>Serving</li>
		<li>Prep</li>
		<li>Cook</li>
		<li>Total</li>
	</ul>
</div>
<h2>The Ingredients</h2>
<ul class="ingredients">
	<li>lorem</li>
</ul>

<p class="variation">lorem</p>

<h2>The Process</h2>
<ol class="instructions">
	<li>lorem</li>
		<ul>
			<li>lorem</li>
		</ul>
	</li>
	<li>Lorem </li>
	<li>Lorem</li>
</ol>
</body>
</html>

5. By F A R I A T

Made by F A R I A T. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
      <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500;700;900&display=swap" rel="stylesheet">
  
<style>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: #f2f6f8;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #6c838e;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.2px;
}
body .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
body .container .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1300px;
  position: relative;
  z-index: 2;
}
body .container .wrapper .main {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  height: 800px;
  padding: 3em 0;
}
@media (max-width: 1025px) {
  body .container .wrapper .main {
    flex-flow: column;
    height: auto;
    padding: 3em 0;
  }
}
body .container .wrapper .main .main_image {
  width: 50%;
  display: flex;
  justify-content: center;
}
@media (max-width: 1025px) {
  body .container .wrapper .main .main_image {
    width: 100%;
  }
}
body .container .wrapper .main .main_image .main_image_txt {
  width: 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 60px 40px;
}
body .container .wrapper .main .main_image .main_image_txt figcaption {
  font-weight: 900;
  text-transform: uppercase;
  transform: rotate(-90deg);
  font-size: 10px;
  width: 400px;
  margin-bottom: 90px;
}
body .container .wrapper .main .main_image .dash {
  display: flex;
  width: 2px;
  height: 20px;
  background-color: #ff3482;
  margin-top: 100px;
}
body .container .wrapper .main .main_image img {
  border-radius: 14px;
  height: 700px;
}
body .container .wrapper .main .main_description {
  width: 50%;
}
@media (max-width: 1025px) {
  body .container .wrapper .main .main_description {
    width: 100%;
  }
}
body .container .wrapper .main .main_description .main_description_wrapper {
  padding: 7rem 0 0 2rem;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1025px) {
  body .container .wrapper .main .main_description .main_description_wrapper {
    text-align: center;
    padding: 4em 0 1em 0;
    align-items: center;
  }
}
body .container .wrapper .main .main_description .main_description_wrapper h1 {
  font-size: 50px;
  font-weight: 900;
  color: #283439;
  margin-bottom: 30px;
  line-height: 56px;
}
body .container .wrapper .main .main_description .main_description_wrapper p {
  font-size: 20px;
  font-weight: 500;
  color: #6c838e;
  width: 100%;
  max-width: 400px;
}
body .container .wrapper .main .main_description .main_description_wrapper .main_description_facts {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin-top: 40px;
}
@media (max-width: 1025px) {
  body .container .wrapper .main .main_description .main_description_wrapper .main_description_facts {
    justify-content: center;
  }
}
body .container .wrapper .main .main_description .main_description_wrapper .main_description_facts .main_description_facts_item {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  padding: 0.6em;
  background-color: #fff;
  border-radius: 6px;
  margin-right: 10px;
  margin-bottom: 10px;
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
}
body .container .wrapper .main .main_description .main_description_wrapper .main_description_facts .main_description_facts_item:hover {
  transform: translate(0, -4px);
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
  cursor: pointer;
}
body .container .wrapper .main .main_description .main_description_wrapper .main_description_facts .main_description_facts_item .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background-color: #ffeaf5;
  border-radius: 4px;
}
body .container .wrapper .main .main_description .main_description_wrapper .main_description_facts .main_description_facts_item .icon svg {
  fill: #ff3482;
  width: 14px;
}
body .container .wrapper .main .main_description .main_description_wrapper .main_description_facts .main_description_facts_item .text {
  margin: 0 10px;
}
body .container .wrapper .main .main_description .main_description_wrapper .main_description_facts .main_description_facts_item .text h5,
body .container .wrapper .main .main_description .main_description_wrapper .main_description_facts .main_description_facts_item .text p {
  font-weight: 900;
  color: #6c838e;
}
body .container .wrapper .main .main_description .main_description_wrapper .main_description_facts .main_description_facts_item .text h5 {
  font-size: 10px;
}
body .container .wrapper .main .main_description .main_description_wrapper .main_description_facts .main_description_facts_item .text p {
  font-size: 14px;
}
body .container .wrapper .main .main_description .main_description_wrapper .note {
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 410px;
  margin: 40px 0;
}
body .container .wrapper .main .main_description .main_description_wrapper .note .note_img {
  width: 150px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}
body .container .wrapper .main .main_description .main_description_wrapper .note .note_img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
body .container .wrapper .main .main_description .main_description_wrapper .note .note_txt h5 {
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 10px;
}
body .container .wrapper .main .main_description .main_description_wrapper .note .note_txt p {
  font-weight: 400;
  font-size: 14px;
}
body .container .wrapper .main .main_description .main_description_wrapper button {
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: none;
  background-color: #ffeaf5;
  border-radius: 50px;
  padding: 10px 50px 10px 10px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
  color: #ff3482;
  width: 100%;
  max-width: 180px;
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
}
body .container .wrapper .main .main_description .main_description_wrapper button .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: #fff;
  margin-right: 30px;
}
body .container .wrapper .main .main_description .main_description_wrapper button svg {
  width: 12px;
}
body .container .wrapper .main .main_description .main_description_wrapper button:hover {
  background-color: #ff3482;
  color: #fff;
  cursor: pointer;
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
}
@media (max-width: 1025px) {
  body .container .ingredients {
    padding-top: 4em 0;
  }
}
body .container .ingredients,
body .container .title {
  width: calc(100% - 20px);
  background-color: #fff;
  border-radius: 14px;
  position: relative;
  top: -125px;
  display: flex;
  justify-content: center;
}
@media (max-width: 1025px) {
  body .container .ingredients,
body .container .title {
    top: -90px;
  }
}
body .container .ingredients .wrapper,
body .container .title .wrapper {
  width: 100%;
  max-width: 1300px;
  position: relative;
  z-index: 2;
  padding-top: 15em;
  margin-bottom: 90px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
@media (max-width: 1025px) {
  body .container .ingredients .wrapper,
body .container .title .wrapper {
    padding: 4em 2em 2em 2em;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
  }
}
body .container .heading {
  font-weight: 900;
  font-size: 22px;
  color: #283439;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
}
@media (max-width: 1025px) {
  body .container .heading {
    margin-bottom: 2em;
  }
}
body .container .heading h1 {
  display: block;
}
body .container .heading span {
  display: block;
  color: #ff3482;
  font-size: 0.9rem;
  text-transform: uppercase;
  margin-right: 14px;
}
body .container .right-side {
  width: 70%;
}
@media (max-width: 1025px) {
  body .container .right-side {
    width: 100%;
  }
}
body .container .right-side .items {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
}
body .container .right-side .items li {
  display: block;
  padding: 10px;
  background-color: #fff;
  border: 2px solid #f2f6f8;
  border-radius: 8px;
  margin-right: 15px;
  margin-bottom: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  width: 44%;
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
}
@media (max-width: 1025px) {
  body .container .right-side .items li {
    width: 100%;
  }
}
body .container .right-side .items li:hover {
  border: 2px solid #ffeaf5;
  background-color: #fff;
  cursor: pointer;
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
}
body .container .right-side .items li:hover .icon {
  background-color: #ffeaf5;
  color: #ff3482;
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
}
body .container .right-side .items li .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  margin-right: 10px;
  font-style: normal;
}
body .container .right-side .items:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #f2f6f8;
  margin: 20px 0;
}
body .container .right-side .variation {
  padding: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 400px;
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
}
@media (max-width: 1025px) {
  body .container .right-side .variation {
    width: 100%;
    max-width: 100%;
    text-align: left;
  }
}
body .container .right-side .variation:hover {
  background-color: #f2f6f8;
  cursor: pointer;
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
}
body .container .right-side .variation .icon {
  margin-right: 20px;
  width: 60px;
  height: 60px;
  background-color: #ffeaf5;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}
body .container .right-side .variation .icon svg {
  fill: #ff3482;
}
body .container .right-side .variation .text p {
  margin-top: 6px;
  width: 100%;
  max-width: 300px;
}
body .container .process {
  top: 0;
  background-color: #f2f6f8;
}
body .container .process .wrapper {
  padding: 0;
}
@media (max-width: 1025px) {
  body .container .process .wrapper {
    padding: 0;
  }
}
body .container .process .wrapper .right-side {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 3em;
}
@media (max-width: 1025px) {
  body .container .process .wrapper .right-side {
    justify-content: space-around;
  }
}
body .container .process .wrapper .right-side h5 {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 900;
  margin-left: 15px;
}
@media (max-width: 1025px) {
  body .container .process .wrapper .right-side h5 {
    display: none;
  }
}
body .container .process .wrapper .right-side .steps {
  display: flex;
  flex-flow: row wrap;
}
@media (max-width: 1025px) {
  body .container .process .wrapper .right-side .steps {
    width: 100%;
    justify-content: space-around;
  }
}
body .container .process .wrapper .right-side .steps li {
  list-style: none;
  text-decoration: none;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  font-size: 14px;
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
}
body .container .process .wrapper .right-side .steps li:first-child {
  background-color: #ffeaf5;
  color: #ff3482;
}
body .container .process .wrapper .right-side .steps li:hover {
  background-color: #ffeaf5;
  color: #ff3482;
  cursor: pointer;
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
}
body .container .process .wrapper .right-side .separator {
  width: 100%;
  height: 1px;
  background-color: #6c838e;
  margin: 40px 0;
}
body .container .process .wrapper .right-side .actual_steps {
  width: 100%;
  display: flex;
}
@media (max-width: 1025px) {
  body .container .process .wrapper .right-side .arrows {
    display: none;
  }
}
body .container .process .wrapper .right-side .arrows div {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ff3482;
  margin: 10px 50px 10px 0;
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
}
body .container .process .wrapper .right-side .arrows div svg {
  fill: #6c838e;
  width: 14px;
}
body .container .process .wrapper .right-side .arrows div:hover {
  background-color: #ff3482;
  transition: all 100ms cubic-bezier(0.87, 0, 0.13, 1);
}
body .container .process .wrapper .right-side .arrows div:hover svg {
  fill: #fff;
}
body .container .process .wrapper .right-side .next svg {
  transform: rotate(180deg);
}
body .container .process .wrapper .right-side .text {
  padding: 2em;
  background-color: #fff;
  flex: 1;
  border-radius: 8px;
  text-align: left;
}
@media (max-width: 1025px) {
  body .container .process .wrapper .right-side .text {
    width: 100%;
  }
}
body .container .process .wrapper .right-side .text h2 {
  margin-bottom: 18px;
  text-transform: uppercase;
  color: #ff3482;
}
body .container .process .wrapper .right-side .text p {
  font-size: 16px;
}
</style>
</head>
<body>
  <div class="container">
	<div class="wrapper">
		<section class="main">
			<figure class="main_image">
				<div class="main_image_txt">
					<svg xmlns="http://www.w3.org/2000/svg" width="28" height="151" viewBox="0 0 28 151">
						<g id="Group_46" data-name="Group 46" transform="translate(-92.02 441.795) rotate(-90)">
							<text id="cookit" transform="translate(290.795 114.02)" fill="#283439" font-size="24" font-family="Roboto-Black, Roboto" font-weight="800">
								<tspan x="0" y="0">cookit</tspan>
							</text>
							<text id="com" transform="translate(394.795 114.02)" fill="#283439" font-size="24" font-family="Roboto-Black, Roboto" font-weight="800">
								<tspan x="0" y="0">com</tspan>
							</text>
							<text id="dot" transform="translate(367.795 111.02)" fill="#ff3482" font-size="14" font-family="Roboto-Black, Roboto" font-weight="800">
								<tspan x="0" y="0">dot</tspan>
							</text>
						</g>
					</svg>

					<div class="dash"></div>
					<figcaption>Photo by</figcaption>
				</div>
				<img src="https://assets.codepen.io/652/shania-pinnata-7E-vKgzahd8-unsplash.jpg" alt="spaghetti with pesto sauce and cherry tomatoes.">
			</figure>

			<div class="main_description">
				<div class="main_description_wrapper">
					<h1>heading</h1>
                    <p>enter text here</p>

					<div class="main_description_facts">
						<div class="main_description_facts_item">
							<div class="icon">
								<svg xmlns="http://www.w3.org/2000/svg" width="18.304" height="11.767" viewBox="0 0 18.304 11.767">
									<path id="Icon_ionic-md-people" data-name="Icon ionic-md-people" d="M14.73,12.778a2.452,2.452,0,1,0-2.5-2.451A2.481,2.481,0,0,0,14.73,12.778Zm-6.656,0a2.452,2.452,0,1,0-2.5-2.451A2.481,2.481,0,0,0,8.074,12.778Zm0,1.8c-1.955,0-5.824.94-5.824,2.86v2.206H14.017V17.436C14.017,15.515,10.029,14.576,8.074,14.576Zm6.656.45a4.44,4.44,0,0,0-.713.041,2.436,2.436,0,0,1,1.307,2.37v2.206h5.23V17.436C20.554,15.515,16.685,15.025,14.73,15.025Z" transform="translate(-2.25 -7.875)" fill="#ff3482" />
								</svg>
							</div>
							<div class="text">
								<h5>Servings</h5>
								<p>4 people</p>
							</div>
						</div>
						<div class="main_description_facts_item">
							<div class="icon">
								<svg xmlns="http://www.w3.org/2000/svg" width="20.919" height="20.919" viewBox="0 0 20.919 20.919">
									<path id="Icon_weather-time-1" data-name="Icon weather-time-1" d="M4.488,14.306A10.256,10.256,0,0,1,5.9,9.048,10.451,10.451,0,0,1,9.718,5.231a10.44,10.44,0,0,1,9.3-.576,10.553,10.553,0,0,1,3.335,2.229,10.242,10.242,0,0,1,2.229,3.344A10.388,10.388,0,0,1,19.016,23.92a10.425,10.425,0,0,1-8.137,0,10.293,10.293,0,0,1-5.573-5.555A10.067,10.067,0,0,1,4.488,14.306Zm2.3,0A7.9,7.9,0,0,0,9.2,20.047a7.846,7.846,0,0,0,5.759,2.406,7.9,7.9,0,0,0,4.078-1.1,8.241,8.241,0,0,0,2.982-2.973,8.092,8.092,0,0,0,0-8.165,8.2,8.2,0,0,0-2.982-2.982,8.134,8.134,0,0,0-8.156,0,8.365,8.365,0,0,0-2.991,2.982A7.866,7.866,0,0,0,6.792,14.306Zm7.357,0V8.12a.761.761,0,0,1,.771-.771.781.781,0,0,1,.548.223.724.724,0,0,1,.232.548V11.4l.7-1.208a.753.753,0,0,1,.483-.353.793.793,0,0,1,.957.548.683.683,0,0,1-.074.585L15.635,14.6a.693.693,0,0,1-.706.492.75.75,0,0,1-.548-.223A.785.785,0,0,1,14.149,14.306Z" transform="translate(-4.488 -3.828)" fill="#ff3482" />
								</svg>

							</div>
							<div class="text">
								<h5>Cook time</h5>
								<p>25 minutes</p>
							</div>
						</div>
						<div class="main_description_facts_item">
							<div class="icon">
								<svg xmlns="http://www.w3.org/2000/svg" width="20.919" height="20.919" viewBox="0 0 20.919 20.919">
									<path id="Icon_weather-time-1" data-name="Icon weather-time-1" d="M4.488,14.306A10.256,10.256,0,0,1,5.9,9.048,10.451,10.451,0,0,1,9.718,5.231a10.44,10.44,0,0,1,9.3-.576,10.553,10.553,0,0,1,3.335,2.229,10.242,10.242,0,0,1,2.229,3.344A10.388,10.388,0,0,1,19.016,23.92a10.425,10.425,0,0,1-8.137,0,10.293,10.293,0,0,1-5.573-5.555A10.067,10.067,0,0,1,4.488,14.306Zm2.3,0A7.9,7.9,0,0,0,9.2,20.047a7.846,7.846,0,0,0,5.759,2.406,7.9,7.9,0,0,0,4.078-1.1,8.241,8.241,0,0,0,2.982-2.973,8.092,8.092,0,0,0,0-8.165,8.2,8.2,0,0,0-2.982-2.982,8.134,8.134,0,0,0-8.156,0,8.365,8.365,0,0,0-2.991,2.982A7.866,7.866,0,0,0,6.792,14.306Zm7.357,0V8.12a.761.761,0,0,1,.771-.771.781.781,0,0,1,.548.223.724.724,0,0,1,.232.548V11.4l.7-1.208a.753.753,0,0,1,.483-.353.793.793,0,0,1,.957.548.683.683,0,0,1-.074.585L15.635,14.6a.693.693,0,0,1-.706.492.75.75,0,0,1-.548-.223A.785.785,0,0,1,14.149,14.306Z" transform="translate(-4.488 -3.828)" fill="#ff3482" />
								</svg>

							</div>
							<div class="text">
								<h5>Prep time</h5>
								<p>5 minutes</p>
							</div>
						</div>
						<div class="main_description_facts_item">
							<div class="icon">
								<svg xmlns="http://www.w3.org/2000/svg" width="20.919" height="20.919" viewBox="0 0 20.919 20.919">
									<path id="Icon_weather-time-1" data-name="Icon weather-time-1" d="M4.488,14.306A10.256,10.256,0,0,1,5.9,9.048,10.451,10.451,0,0,1,9.718,5.231a10.44,10.44,0,0,1,9.3-.576,10.553,10.553,0,0,1,3.335,2.229,10.242,10.242,0,0,1,2.229,3.344A10.388,10.388,0,0,1,19.016,23.92a10.425,10.425,0,0,1-8.137,0,10.293,10.293,0,0,1-5.573-5.555A10.067,10.067,0,0,1,4.488,14.306Zm2.3,0A7.9,7.9,0,0,0,9.2,20.047a7.846,7.846,0,0,0,5.759,2.406,7.9,7.9,0,0,0,4.078-1.1,8.241,8.241,0,0,0,2.982-2.973,8.092,8.092,0,0,0,0-8.165,8.2,8.2,0,0,0-2.982-2.982,8.134,8.134,0,0,0-8.156,0,8.365,8.365,0,0,0-2.991,2.982A7.866,7.866,0,0,0,6.792,14.306Zm7.357,0V8.12a.761.761,0,0,1,.771-.771.781.781,0,0,1,.548.223.724.724,0,0,1,.232.548V11.4l.7-1.208a.753.753,0,0,1,.483-.353.793.793,0,0,1,.957.548.683.683,0,0,1-.074.585L15.635,14.6a.693.693,0,0,1-.706.492.75.75,0,0,1-.548-.223A.785.785,0,0,1,14.149,14.306Z" transform="translate(-4.488 -3.828)" fill="#ff3482" />
								</svg>

							</div>
							<div class="text">
								<h5>Total time</h5>
								<p>30 minutes</p>
							</div>
						</div>

					</div>
					<figure class="note">
						<div class="note_img">
							<img src="https://assets.codepen.io/652/tamanna-rumee-nswz6tIpgZk-unsplash.jpg" alt="tomato halves surrounded by basil leaves and peppercorns.">
						</div>
						<div class="note_txt">
							<h5>enter text here</h5>
                            <p>enter text here</p>
						</div>
					</figure>
					<button>
						<i class="icon">
							<svg xmlns="http://www.w3.org/2000/svg" width="16.813" height="15.571" viewBox="0 0 16.813 15.571">
								<g id="Icon_feather-arrow-down" data-name="Icon feather-arrow-down" transform="translate(2.121 1.5)">
									<path id="Path_1" data-name="Path 1" d="M18,7.5V20.071" transform="translate(-11.715 -7.5)" fill="none" stroke="#ff3482" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
									<path id="Path_2" data-name="Path 2" d="M20.071,18l-6.285,6.285L7.5,18" transform="translate(-7.5 -11.715)" fill="none" stroke="#ff3482" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
								</g>
							</svg>
						</i>
						cookit
					</button>
				</div>
			</div>
		</section>
	</div>
	<section class="ingredients title">
		<div class="wrapper">
			<div class="heading">
				<span>the</span>
				<h1>Ingredients</h1>
			</div>
			<div class="right-side">
				<ul class="items">
					<li><i class="icon">1</i>text</li>
					<li><i class="icon">enter text here</li>
				</ul>
				<div class="variation">
					<i class="icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="12.055" height="17.221" viewBox="0 0 12.055 17.221">
							<path id="Icon_material-lightbulb-outline" data-name="Icon material-lightbulb-outline" d="M10.944,19.36a.864.864,0,0,0,.861.861h3.444a.864.864,0,0,0,.861-.861V18.5H10.944ZM13.527,3a6.025,6.025,0,0,0-3.444,10.97v1.946a.864.864,0,0,0,.861.861H16.11a.864.864,0,0,0,.861-.861V13.97A6.025,6.025,0,0,0,13.527,3Zm2.454,9.558-.732.517v1.98H11.805v-1.98l-.732-.517a4.305,4.305,0,1,1,4.908,0Z" transform="translate(-7.5 -3)" fill="#ff3482" />
						</svg>
					</i>
					<div class="text">
						<h3>Variation</h3>
						<p>enter text here</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="process title">
		<div class="wrapper">
			<div class="heading">
				<span>the</span>
				<h1>Process</h1>
			</div>
			<div class="right-side">
				<h5>steps</h5>
				<ul class="steps">
					<li>01</li>
					<li>02</li>
					<li>03</li>
					<li>04</li>
					<li>05</li>
					<li>06</li>
					<li>07</li>
					<li>08</li>
					<li>09</li>
					<li>10</li>
					<li>11</li>
				</ul>
				<div class="separator"></div>
				<div class="actual_steps">
					<div class="arrows">
						<div class="next">
							<svg xmlns="http://www.w3.org/2000/svg" width="19.46" height="19.46" viewBox="0 0 19.46 19.46">
								<path data-name="Path 5" d="M-62.176,223.517a1.5,1.5,0,0,0-2.121,0l-5.669,5.67V216.348a1.5,1.5,0,0,0-1.5-1.5,1.5,1.5,0,0,0-1.5,1.5v12.839l-5.67-5.67a1.5,1.5,0,0,0-2.121,0,1.5,1.5,0,0,0,0,2.121l8.228,8.228a1.5,1.5,0,0,0,.493.328l.022.007a1.49,1.49,0,0,0,.548.107,1.485,1.485,0,0,0,.547-.107l.022-.007a1.488,1.488,0,0,0,.493-.328l8.228-8.228A1.5,1.5,0,0,0-62.176,223.517Z" transform="translate(81.197 -214.848)" />
							</svg>
						</div>
						<div class="previous">
							<svg xmlns="http://www.w3.org/2000/svg" width="19.46" height="19.46" viewBox="0 0 19.46 19.46">
								<path data-name="Path 4" d="M-62.176,223.517a1.5,1.5,0,0,0-2.121,0l-5.669,5.67V216.348a1.5,1.5,0,0,0-1.5-1.5,1.5,1.5,0,0,0-1.5,1.5v12.839l-5.67-5.67a1.5,1.5,0,0,0-2.121,0,1.5,1.5,0,0,0,0,2.121l8.228,8.228a1.5,1.5,0,0,0,.493.328l.022.007a1.49,1.49,0,0,0,.548.107,1.485,1.485,0,0,0,.547-.107l.022-.007a1.488,1.488,0,0,0,.493-.328l8.228-8.228A1.5,1.5,0,0,0-62.176,223.517Z" transform="translate(81.197 -214.848)" />
							</svg>
						</div>
					</div>
					<div class="text">
						<h2>step 1</h2>
                        <p>enter text here</p>
					</div>
				</div>
			</div>
		</div>
	</section>
</div>
</body>
</html>

6. By Mark

Made by Mark. Responsive CSS recipe layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='//fonts.googleapis.com/css?family=Shadows+Into+Light:400'>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
  
<style>
html,
body {
  min-height: 100%;
}
body {
  font-size: 120%;
  line-height: 1.5;
  font-family: "Shadows Into Light", cursive;
}
.wrapper {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/170767/salad.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  min-height: 100vh;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: baseline;
}
a {
  text-decoration: none;
}
.container {
  width: 100%;
  float: right;
  background: transparent;
  margin-top: 500px;
}
@media only screen and (min-width: 768px) {
  .container {
    max-width: 740px;
    transform: rotate(-6deg);
    margin: -60px -80px 200px 0;
  }
}
h1 {
  color: #64e942;
  background: rgba(109, 44, 68, 0.9);
  font-size: 2em;
  font-family: "Shadows Into Light", cursive;
  padding: 24px;
  line-height: 1.2;
  text-transform: uppercase;
  float: left;
}
@media only screen and (min-width: 768px) {
  h1 {
    font-size: 3em;
    width: 90%;
    margin-left: 10%;
    padding: 72px 84px 24px 24px;
  }
}
h2 {
  color: #fffff0;
  font-size: 1.75em;
  font-family: "Shadows Into Light", cursive;
  line-height: 1.2;
  text-transform: uppercase;
}
.stuff {
  clear: both;
  background: rgba(100, 233, 66, 0.9);
  float: left;
  width: 100%;
  padding: 24px;
}
@media only screen and (min-width: 768px) {
  .stuff {
    width: 80%;
    margin-left: 20%;
    padding: 2em 2em 2em 4em;
  }
}
.stuff * {
  color: #6d2c44;
}
.stuff h2 {
  border-bottom: 3px double #6d2c44;
  display: table;
  margin-bottom: 12px;
}
.method {
  clear: both;
  float: left;
  width: 100%;
  background: rgba(109, 44, 68, 0.95);
  padding: 24px;
}
.method * {
  color: #64e942;
}
@media only screen and (min-width: 768px) {
  .columns {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: 36px;
         column-gap: 36px;
    width: 80%;
  }
}
.method h2 {
  display: table;
  margin-bottom: 12px;
  border-bottom: 3px double #64e942;
}
</style>
</head>
<body>
  <div class="wrapper"><div class="container">
  <h1>Chicken, spinach &amp; pomegranite salad</h1>
  <div class="stuff">
    <h2>Ingredients</h2>
    <ul>
      <li>Chicken</li>
      <li>Spinach</li>
    </ul>
  </div>
  <div class="method">
    <h2>Method</h2>
    <div class="columns">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi reiciendis numquam aut, dolores fugiat voluptatum in. Eaque nisi consectetur doloribus, asperiores deleniti, quibusdam laboriosam.</p>
      <p>Corporis, sunt veritatis! Soluta ipsum nostrum quia, similique, dolor deserunt quisquam iusto dignissimos! Nostrum quo voluptas velit vitae animi natus! Laboriosam voluptas, beatae accusantium!</p>
    </div>
  </div>
  </div>
</div>
  
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>