<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',
}
});