<div class="component--recipe-1">
	<ul>
		<li>
			<img src="img/icon-clock.svg" alt="">
			30 min
		</li>
		<li>
			<img src="img/icon-pie.svg" alt="">
			6 serving
		</li>
		<li>
			<img src="img/icon-bar.svg" alt="">
			210 cals
		</li>
	</ul>
</div>

<div class="divider"></div>

<div class="component--recipe-2">
	<h6>Difficulty</h6>
	<ul>
		<li>
			Easy
		</li>
		<li class="active">
			Medium
		</li>
		<li>
			Hard
		</li>
	</ul>
</div>

<div class="divider"></div>

<div class="component--recipe-3">
	<h5>Search for recipes</h5>
	<form action="">
		<div class="icon">
			<img src="img/icon-search.svg" alt="">
		</div>
		<input type="text" placeholder="Search recipe">
	</form>
</div>

<div class="divider"></div>

<div class="component--recipe-4">
	<div class="cover"></div>
	<div class="inner">
		<div class="top-title">Subscribe today</div>
		<h5>Never miss a recipe</h5>
		<form action="">
			<input type="text" placeholder="Your email address">
			<button type="submit">Subscribe</button>
		</form>
		<p>
			We won’t send you spam. <br>
			Unsubscribe at any time.
		</p>
	</div>
</div>

<div class="divider"></div>

<div class="component--recipe-5">
	<a href="#" class="favorite-btn">
		<svg width="24px" height="20px" viewBox="0 0 24 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
				<g id="Day-1145-Recipe-Page-UI-Components---real-pixels" transform="translate(-612.000000, -570.000000)">
					<g id="Group-6" transform="translate(45.000000, 534.000000)">
						<g id="Group-4" transform="translate(554.000000, 20.000000)">
							<g id="Group" transform="translate(10.000000, 10.000000)">
								<polygon id="Path" points="0 0 30 0 30 30 0 30"></polygon>
								<path d="M15,25 L6.25,16.25 C4.17893219,14.0063432 4.3188432,10.5085678 6.5625,8.4375 C8.8061568,6.36643219 12.3039322,6.5063432 14.375,8.75 C14.7533278,9.00278087 15.2466722,9.00278087 15.625,8.75 C17.6960678,6.50634326 21.1938432,6.36643227 23.4374999,8.43750006 C25.6811567,10.5085679 25.8210678,14.0063432 23.75,16.25 L15,25" id="Path" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"></path>
							</g>
						</g>
					</g>
				</g>
			</g>
		</svg>
	</a>
	<a href="#" class="image">
		<img src="img/sample-1.png" alt="">
	</a>
	<div class="inner">
		<a href="#" class="title">Spinach Salad</a>
		<div class="description">
			Simple recipe for a weeknight or a celebration table. I promise it is one of the easiest salads you will ever make!
		</div>
		<div class="rating">
			<div>
				<img src="img/icon-star.svg" alt="">
				<img src="img/icon-star.svg" alt="">
				<img src="img/icon-star.svg" alt="">
				<img src="img/icon-star.svg" alt="">
				<img src="img/icon-star.svg" alt="">
			</div>
			<span class="text">14K</span>
		</div>
	</div>
</div>

<div class="divider"></div>

<div class="component--recipe-6">
	<a href="javascript:;" class="prev-btn">
		<img src="img/icon-arrow-left.svg" alt="">
	</a>
	<a href="javascript:;" class="next-btn">
		<img src="img/icon-arrow-right.svg" alt="">
	</a>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<a href="#">
					<img src="img/sample-4.png" alt="">
					<span class="title">
						Crispy Crouton Salad
					</span>
				</a>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/sample-3.png" alt="">
					<span class="title">
						Pancakes with yogurt
					</span>
				</a>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/sample-5.png" alt="">
					<span class="title">
						Crispy and Creamy Doughnuts
					</span>
				</a>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/sample-6.png" alt="">
					<span class="title">
						Perfect Neapolitan Pizza
					</span>
				</a>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/sample-7.png" alt="">
					<span class="title">
						Pancakes with yogurt
					</span>
				</a>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/sample-4.png" alt="">
					<span class="title">
						Crispy Crouton Salad
					</span>
				</a>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/sample-3.png" alt="">
					<span class="title">
						Pancakes with yogurt
					</span>
				</a>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/sample-5.png" alt="">
					<span class="title">
						Crispy and Creamy Doughnuts
					</span>
				</a>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/sample-6.png" alt="">
					<span class="title">
						Perfect Neapolitan Pizza
					</span>
				</a>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="img/sample-7.png" alt="">
					<span class="title">
						Pancakes with yogurt
					</span>
				</a>
			</div>
		</div>
	</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">

@import url('https://fonts.googleapis.com/css2?family=Mulish:[email protected];700&display=swap');

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family: 'Mulish', sans-serif;

  &:focus {
    outline: 0;
  }
}

body {
  background: #F1E8E6;
  padding: 50px;
}

.divider {
  height: 50px;
}

.component {
  &--recipe-1 {
    padding: 40px;
    border-radius: 15px;
    background: #fff;
    width: 467px;
    box-shadow: 0 16px 35px -30px #F55951;

    ul {
      display: flex;
      justify-content: space-between;

      li {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        color: #111127;

        img {
          margin-right: 10px;
        }
      }
    }
  }

  &--recipe-2 {
    background: #fff;
    width: 353px;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 60px -45px #F55951;

    h6 {
      font-weight: bold;
      font-size: 18px;
      color: #111127;
      margin-bottom: 20px;
    }

    ul {
      display: flex;
      margin: 0 -5px;

      li {
        flex: 1;
        background: #FAF2F0;
        border: 1px solid #EDD2CB;
        height: 40px;
        border-radius: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 5px;
        font-size: 16px;
        color: #111127;
        padding: 0 20px;

        &.active {
          background: #F55951;
          color: #fff;
          border-color: #F55951;
          box-shadow: 0 7px 20px -6px #F55951;
        }
      }
    }
  }

  &--recipe-3 {
    background: #F55951;
    border-radius: 25px;
    padding: 40px;
    width: 420px;
    box-shadow: 0 16px 35px -30px #F55951;

    h5 {
      font-size: 22px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 20px;
    }

    form {
      position: relative;

      .icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
      }

      input {
        width: 100%;
        height: 60px;
        border-radius: 15px;
        background: #fff;
        font-size: 16px;
        color: #111127;
        padding: 0 20px 0 60px;

        &::placeholder {
          color: rgba(#111127, .7);
        }
      }
    }
  }

  &--recipe-4 {
    width: 344px;
    background: #fff;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 20px 60px -45px #F55951;

    .cover {
      height: 181px;
      background: url(../img/sample-1.png) no-repeat center;
    }

    .inner {
      padding: 30px 30px 40px;
      text-align: center;

      .top-title {
        font-size: 12px;
        font-weight: bold;
        color: #111127;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 1.1px;
      }

      h5 {
        font-size: 22px;
        font-weight: bold;
        color: #111127;
        margin-bottom: 20px;
      }

      form {
        input {
          width: 100%;
          border: 1px solid #EDD2CB;
          height: 60px;
          border-radius: 5px;
          padding: 0 20px;
          font-size: 16px;
          color: #111127;
          caret-color: #F55951;
          margin-bottom: 10px;

          &:focus {
            border-color: #F55951;
          }

          &::placeholder {
            color: rgba(#111127, .7);
          }
        }

        button {
          width: 100%;
          height: 60px;
          border-radius: 5px;
          background: #F55951;
          color: #fff;
          cursor: pointer;
          font-size: 18px;
          font-weight: bold;
          box-shadow: 0 7px 20px -6px #F55951;
          margin-bottom: 30px;
        }
      }

      p {
        font-size: 14px;
        line-height: 20px;
        color: #111127;
      }
    }
  }

  &--recipe-5 {
    padding: 20px;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 20px 60px -45px #F55951;
    width: 624px;
    display: flex;
    position: relative;

    .favorite-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid #F2DBD5;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 300ms border-color;

      &:hover {
        border-color: #F55951;

        svg path {
          stroke: #F55951;
        }
      }

      svg path {
        stroke: #111127;
        transition: 300ms stroke;
      }

      &.active {
        border-color: #F55951;
        background: #F55951;

        svg path {
          stroke: #ffffff;
        }
      }
    }

    .image {
      display: flex;
      border-radius: 15px;
      overflow: hidden;
      width: 181px;
      min-width: 181px;

      img {
        width: 100%;
        height: 249px;
        object-fit: cover;
      }
    }

    .inner {
      margin-left: 25px;
      flex: 1;
      padding-top: 30px;

      .title {
        font-size: 22px;
        font-weight: bold;
        color: #111127;
        display: block;
        margin-bottom: 15px;
      }

      .description {
        font-size: 16px;
        color: #111127;
        line-height: 24px;
        margin-bottom: 15px;
      }

      .rating {
        display: flex;

        > div {

        }

        .text {
          font-size: 16px;
          font-weight: bold;
          color: rgba(#111127, .5);
          margin-left: 10px;
        }
      }
    }
  }

  &--recipe-6 {
    background: #fff;
    padding: 40px 84px;
    border-radius: 25px;
    width: 993px;
    position: relative;
    box-shadow: 0 20px 60px -45px #F55951;

    .next-btn, .prev-btn {
      position: absolute;
      top: 50%;
      width: 44px;
      height: 44px;
      background: rgba(#F2DBD5, .35);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translateY(-50%);
      transition: 300ms background-color;

      &.swiper-button-disabled {
        opacity: .3;
      }

      &:hover {
        background: rgba(#F2DBD5, .6);
      }
    }

    .next-btn {
      right: 20px;
    }

    .prev-btn {
      left: 20px;
    }

    .swiper-slide {
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px;
        border: 1px solid transparent;
        border-radius: 15px;
        transition: 300ms border-color;

        &:hover {
          border-color: #EDD2CB;
        }

        img {
          width: 91px;
          height: 91px;
          border-radius: 50%;
        }

        .title {
          text-align: center;
          font-size: 14px;
          color: #111127;
          margin-top: 17px;
          line-height: 18px;
        }
      }
    }
  }
}

var swiper = new Swiper('.component--recipe-6 .swiper-container', {
    slidesPerView: 5,
    spaceBetween: 10,
    navigation: {
        nextEl: '.component--recipe-6 .next-btn',
        prevEl: '.component--recipe-6 .prev-btn',
    }
});