Meet Recipe App Using HTML CSS And Javascript
Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.
📙Table Of Content
- Project Folder Structure
- Meet Recipe App HTML CODE
- Meet Recipe App CSS CODE
- Meet Recipe App Javascript CODE
- Live Preview Of Meet Recipe App
Project Folder Structure:
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
Meet Recipe App HTML CODE
<div id="root"></div>
Meet Recipe App CSS CODE
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@400;800&display=swap");
body {
font-family: "Kanit", sans-serif;
margin: 0;
background-color: black;
}
.App {
align-items: center;
background-color: #dbdad8;
display: flex;
height: 100vh;
justify-content: center;
user-select: none;
-webkit-user-select: none;
}
.phone {
background-color: #fff;
border-radius: 25px;
height: 560px;
overflow: hidden;
position: relative;
width: 300px;
}
.phone-content {
box-sizing: border-box;
padding: 20px;
position: absolute;
}
.pre-title {
display: block;
font-size: 16px;
font-style: italic;
margin-top: 52px;
text-align: center;
width: 100%;
}
.title {
display: block;
font-size: 36px;
font-weight: 900;
line-height: 36px;
text-align: center;
width: 100%;
}
.cook {
margin-top: -8px;
}
.bottomSheet {
position: absolute;
height: 100%;
}
.drag-area {
height: 500px;
opacity: 0.5;
position: absolute;
width: 300px;
z-index: 1;
}
.drag {
cursor: pointer;
}
.container {
box-sizing: border-box;
height: 500px;
padding: 20px;
position: absolute;
top: 60px;
width: 100%;
}
.content {
font-size: 28px;
font-weight: 900;
}
.icon {
left: 40px;
position: absolute;
top: 16px;
width: 20px;
}
.close {
left: 56px;
position: absolute;
top: 17px;
}
.content-title {
margin-bottom: 24px;
}
.content-subtitle {
font-size: 20px;
font-weight: 400;
margin-bottom: 20px;
}
.content-body {
font-size: 20px;
font-weight: 400;
line-height: 24px;
}
Meet Recipe App Javascript CODE
const { useState, useEffect, } = React;
const { useSpring, animated, config } = ReactSpring;
const { useDrag } = ReactUseGesture;
const THRESHOLD = 300;
function Close({ stroke, scale }) {
return (
<svg
className="close"
xmlns="http://www.w3.org/2000/svg"
height="20"
width="20"
>
<animated.g style={{ scale, transformOrigin: "50%" }}>
<path
d="M3 3l13 13M16 3L3 16"
fill="none"
strokeWidth="2.2"
strokeLinecap="round"
style={{ stroke }}
/>
</animated.g>
</svg>
);
}
function Veg({ fill }) {
return (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 25"
fill={fill}
>
<path d="M13.1 3.8c-.6-.3-1.3-.6-2.1-.7.2-1 .9-1.2 1.9-1.1.5 0 1-.4 1.1-.9S13.6 0 13.1 0C10.6-.2 9.2 1.2 9 3.1c-.7.1-1.4.3-2.1.7C3.7 1.5-.5 4.4.3 8.5L2 17.4c.3 1.5 1.6 2.6 3.1 2.6.9 0 1.6-.4 2.2-1 .7.6 1.7 1 2.7 1 1.1 0 2-.4 2.7-.9.5.6 1.3.9 2.1.9 1.5 0 2.8-1.1 3.1-2.6l1.7-8.9c.8-4.1-3.3-6.9-6.5-4.7zM5.1 18c-.5 0-1-.4-1.1-1L2.3 8.2c-.4-2 1.2-3.6 3-3-.8 1-1.1 2.2-.8 3.4l1.7 8.2c-.2.6-.3 1.2-1.1 1.2zm4.9 0c-1 0-1.7-.5-1.8-1L6.4 8.1C6.1 6.4 7.9 5 10 5c2 0 4 1.4 3.6 3.1-1.9 9.3-1.7 8.2-1.8 8.9-.1.5-.8 1-1.8 1zm7.7-9.8L16 17c-.1.6-.6 1-1.1 1-.7 0-.9-.5-1-1.2l1.7-8.3c.2-1.1 0-2.4-.8-3.4 1.7-.6 3.3 1 2.9 3.1z" />
</svg>
);
}
function Chicken({ fill }) {
return (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 25"
fill={fill}
>
<path d="M17.7 2.3C15.1-.3 12.5-1 9.9 1.6 8.2 3.3 6.9 6 6.7 8.4c-.1.5-.3 1-.6 1.3l-.9.9c-.5.5-1.3.6-1.9.6-.9-.1-1.8.2-2.4.9-1.2 1.2-1.2 3.1 0 4.2.5.5 1.2.8 2 .9 0 .7.3 1.4.9 2 1.2 1.2 3.1 1.2 4.2 0 .6-.6.9-1.5.9-2.4 0-.6 0-1.3.6-1.9l.9-.9c.3-.3.8-.5 1.3-.6 2.3-.2 5-1.5 6.7-3.2 2.6-2.7 1.9-5.3-.7-7.9zM17 8.7c-1.3 1.3-3.7 2.5-5.5 2.6-1 .1-1.9.5-2.5 1.2l-1 1c-.9.9-1.3 2.1-1.1 3.5 0 .3-.1.6-.3.8-.4.4-1 .4-1.4 0-.2-.2-.3-.5-.3-.8.1-1-.7-1.8-1.7-1.7-.3 0-.6-.1-.8-.3-.4-.4-.4-1 0-1.4.2-.2.5-.3.8-.3 1.4.1 2.6-.3 3.5-1.1l.9-.9c.7-.7 1.1-1.5 1.2-2.5 0-2.1 1.2-4.4 2.5-5.8 1.6-1.6 3-1.3 5 .7 1.9 1.9 2.3 3.3.7 5z" />
</svg>
);
}
function Fish({ fill }) {
return (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 25"
fill={fill}
>
<path d="M19.9 1c-.1-.5-.4-.8-.9-.9C10.9-.8 4.9 3.5 4.6 11.6l-3.8.7C0 12.5-.3 13.4.3 14L6 19.7c.6.6 1.5.3 1.7-.5l.8-3.8C16.6 15.1 20.8 9 19.9 1zM18 2c.1 2.1-.2 4.1-.8 5.7-2.4-.6-4.3-2.5-4.9-4.9 1.6-.6 3.5-.9 5.7-.8zM6 17l-3-3 1.6-.3c0 .2 0 .5.1.7.1.5.4.8.9.9.3 0 .5.1.8.1L6 17zm.6-3.6c-.2-3.8.8-7.4 3.8-9.6.9 2.7 3 4.9 5.8 5.8-2.2 3-5.8 4-9.6 3.8z" />
<path d="M15.6 4.9c.7.3 1.4-.2 1.4-.9 0-.4-.3-.8-.6-.9-.5-.2-1.1 0-1.3.5-.2.6.1 1.1.5 1.3z" />
</svg>
);
}
function Cook() {
return (
<svg
className="cook"
xmlns="http://www.w3.org/2000/svg"
width="260"
height="400"
>
<path
d="M154.193 179.977c-.278 1.194-6.235 55.415-6.235 55.415l-5.388 7.661-1.46 11.73 11.175 27.693h-82.82s-1.313-14.632-1.2-18.546c.114-3.913 2.108-18.266 2.108-18.266l-.191-14.573-3.137-63.538 28.066-9.052c16.955-2.918 41.907 9.768 41.907 9.768l17.175 11.708"
fill="#f03d5f"
/>
<path
d="M143.43 139.564c3.688-.231 6.516-3.314 8.55-6.4 1.898-2.879 3.523-6.116 3.54-9.566.015-2.995-1.18-5.848-2.355-8.603-1.209-2.838-2.44-5.711-4.34-8.141-1.902-2.43-4.584-4.403-7.645-4.783l2.25 37.493"
fill="#17282f"
/>
<path
d="M100.327 154.01l.037-.913 2.164-52.94 1.195-3.003 26.48-3.663c8.652-.674 16.11 5.999 16.418 14.672.34 9.636.376 21.414-.96 28.56-2.691 14.37-13.804 15.9-13.804 15.9s-.19 3.763-.397 9.197c-.155 4.105-3.78 15.938-7.886 16.054-1.765.05-6.578-1.48-8.876-1.814-14.482-2.116-14.371-22.05-14.371-22.05"
fill="#f8a58d"
/>
<path
d="M141.733 116.562c.007.978-.815 1.792-1.836 1.818-1.02.027-1.855-.742-1.863-1.721-.007-.979.815-1.792 1.835-1.82 1.021-.026 1.856.745 1.864 1.723M143.899 114.215c-.236.234-1.61-.841-3.602-.892-1.989-.077-3.479.907-3.688.657-.103-.11.142-.54.791-.986.64-.445 1.72-.864 2.961-.824 1.24.04 2.272.526 2.858 1.01.6.487.796.93.68 1.035M122.241 116.371c.008.978-.814 1.792-1.835 1.818-1.02.027-1.855-.743-1.862-1.721-.008-.979.814-1.793 1.834-1.82 1.021-.026 1.856.745 1.863 1.723M124.31 114.046c-.236.236-1.612-.84-3.602-.89-1.989-.079-3.479.906-3.688.655-.103-.11.14-.54.792-.985.64-.444 1.72-.864 2.96-.824 1.241.04 2.272.527 2.86 1.01.597.487.794.93.679 1.034M131.132 129.017c-.007-.114 1.237-.293 3.25-.495.51-.038.995-.126 1.09-.47.13-.365-.068-.92-.298-1.518l-1.397-3.914c-1.937-5.571-3.324-10.147-3.099-10.223.225-.076 1.978 4.378 3.914 9.95.465 1.373.91 2.683 1.333 3.935.177.583.49 1.248.21 2.004-.148.376-.53.642-.857.72-.33.091-.615.088-.868.097-2.02.052-3.274.027-3.278-.087"
fill="#17282f"
/>
<path
d="M131.857 152.624s-9.726.358-19.186-5.69c0 0 4.416 10.044 18.897 9.092l.29-3.402M130.157 133.793c-.69-.967-1.931-1.521-3.18-1.422-.868.07-1.753.463-2.297 1.152-.544.69-.682 1.685-.223 2.37.516.77 1.635.976 2.593.732s1.792-.847 2.587-1.449c.22-.166.445-.34.585-.574.14-.232.178-.54.017-.74"
fill="#f68260"
/>
<path
d="M125.232 130.233c.324-.01.269 2.152 2.077 3.737 1.804 1.591 4.116 1.412 4.124 1.714.027.137-.525.406-1.497.405-.956.007-2.34-.338-3.447-1.308-1.103-.972-1.554-2.241-1.603-3.13-.058-.906.198-1.435.346-1.418M125.04 106.255c-.212.537-2.193.224-4.538.441-2.348.171-4.252.803-4.548.309-.132-.237.21-.736.987-1.24.769-.503 1.988-.966 3.395-1.085 1.407-.114 2.686.144 3.527.514.849.369 1.268.806 1.177 1.061M143.326 108.43c-.364.443-1.723-.065-3.372-.132-1.647-.126-3.055.22-3.364-.262-.134-.234.098-.681.72-1.092.614-.41 1.63-.731 2.762-.666 1.132.068 2.104.504 2.665.984.57.48.749.952.589 1.168M100.183 116.332s-3.539 1.896-7.271 6.579c-2.295 2.88-3.787 6.604-3.214 10.243.795 5.041 5.168 8.629 9.23 11.717 2.342.34 4.083-2.243 4.45-4.582.365-2.337.037-4.864 1.144-6.955.993-1.877 2.956-3.026 4.264-4.697 2.436-3.109 2.27-7.483 1.676-11.388-.595-3.905.022-9.81 5.019-15.36 0 0-12.202 4.784-15.298 14.443"
fill="#17282f"
/>
<path
d="M95.857 129.334c2.132-3.03 1.57-7.48-.855-10.283-2.425-2.802-6.355-4.024-10.046-3.706-2.69.23-5.407 1.284-7.145 3.35-1.737 2.067-2.263 5.244-.82 7.526.798 1.262 2.187 2.455 1.867 3.913-.309 1.404-1.969 1.936-3.149 2.757-2.063 1.434-2.863 4.333-2.072 6.718.792 2.385 2.991 4.172 5.44 4.737 2.448.564 5.081-.01 7.24-1.297-.014 2.243 2.409 3.957 4.644 3.766 2.235-.19 4.127-1.815 5.325-3.712 1.69-2.68 2.274-5.938 2.2-9.105-.074-3.167-.764-6.284-1.45-9.376"
fill="#17282f"
/>
<path
d="M99.554 145.56c-.007.01-.12-.063-.33-.209l-.907-.657a51.242 51.242 0 01-3.213-2.578c-1.302-1.15-2.806-2.616-4.098-4.547-1.291-1.917-2.285-4.376-2.394-7.077-.042-1.343.14-2.675.607-3.865.451-1.196 1.165-2.225 1.955-3.076 1.607-1.695 3.4-2.786 4.817-3.776 1.44-.968 2.545-1.827 3.254-2.484.36-.324.622-.592.796-.78.178-.182.276-.275.286-.267.01.008-.07.117-.232.316-.156.204-.404.49-.751.834-.687.693-1.781 1.595-3.206 2.592-1.402 1.018-3.169 2.13-4.717 3.792-.762.835-1.44 1.828-1.868 2.976-.444 1.142-.617 2.425-.577 3.726.105 2.615 1.061 5.019 2.31 6.904 1.252 1.904 2.718 3.373 3.99 4.54 1.28 1.165 2.378 2.042 3.129 2.658l.863.711c.195.165.295.257.286.267"
fill="#33535f"
/>
<path
d="M89.265 127.293c-.06.034-.429-.738-1.347-1.723-.901-.98-2.442-2.137-4.431-2.626-1.99-.485-3.892-.172-5.144.282-1.27.449-1.953.963-1.99.905-.014-.018.143-.163.459-.383a7.5 7.5 0 011.44-.764c1.264-.528 3.24-.902 5.322-.394 2.079.511 3.66 1.755 4.537 2.809.446.527.747 1 .924 1.342.178.341.25.542.23.552M78.035 131.127c-.04-.004.218-.694 1.16-1.284.464-.29 1.084-.525 1.79-.646.708-.125 1.49-.147 2.304-.13 1.635.042 3.094.34 4.114.647 1.023.309 1.617.6 1.6.643-.019.051-.641-.154-1.666-.394a20.526 20.526 0 00-4.059-.532c-1.6-.058-3.053.115-3.953.635-.914.494-1.241 1.1-1.29 1.061M75.63 142.567c-.002-.067 1.001-.044 2.57-.35a15.135 15.135 0 005.69-2.4 15.125 15.125 0 004.216-4.516c.828-1.366 1.152-2.316 1.214-2.291.022.007-.037.25-.19.678a12 12 0 01-.802 1.744c-.774 1.42-2.178 3.254-4.229 4.684-2.049 1.431-4.254 2.117-5.853 2.354-.804.123-1.462.158-1.914.153-.453-.005-.703-.034-.702-.056M89.966 127.067c.028-.033.425.378 1.308.862.872.486 2.302.962 4.1.9a9.411 9.411 0 002.86-.551c.986-.36 1.98-.915 2.905-1.653 1.867-1.47 3.436-3.641 4.605-6.125 1.168-2.496 1.916-5.034 2.666-7.315.734-2.288 1.493-4.33 2.319-5.96.815-1.635 1.67-2.854 2.332-3.63.326-.391.601-.678.796-.862.195-.185.3-.278.31-.269.023.023-.376.421-.996 1.22-.623.796-1.434 2.022-2.211 3.654-.787 1.629-1.514 3.66-2.231 5.95-.73 2.283-1.47 4.835-2.656 7.367-1.186 2.522-2.796 4.738-4.726 6.233a10.625 10.625 0 01-3.012 1.674 9.541 9.541 0 01-2.956.524c-1.848.031-3.306-.5-4.174-1.033a4.405 4.405 0 01-.566-.378 2.932 2.932 0 01-.386-.316c-.197-.183-.296-.282-.287-.292"
fill="#33535f"
/>
<path
d="M110.508 114.095c.035.021-.254.422-.577 1.238-.325.816-.598 2.063-.704 3.635-.141 1.564-.083 3.475-.622 5.541-.548 2.05-1.802 4.138-3.67 5.73-1.853 1.612-4.13 2.52-6.246 2.692a11.638 11.638 0 01-5.508-.845 10.985 10.985 0 01-3.194-1.988 7.106 7.106 0 01-.72-.727c-.154-.175-.23-.271-.22-.28.03-.03.348.348 1.033.9.68.55 1.731 1.296 3.197 1.855 1.45.57 3.324.959 5.38.751 2.05-.186 4.242-1.071 6.04-2.634 1.812-1.544 3.036-3.562 3.585-5.544.54-1.992.515-3.9.688-5.473.14-1.583.457-2.854.83-3.667.187-.405.354-.71.493-.9.131-.194.205-.291.215-.284M151.976 132.23c-.024-.03.235-.22.611-.649a6.594 6.594 0 001.224-2.053 8.401 8.401 0 00.497-3.493c-.089-1.334-.516-2.775-1.196-4.17-1.386-2.802-3.294-4.949-4.54-6.59a17.773 17.773 0 01-1.364-2.038c-.283-.506-.407-.802-.388-.812.026-.014.192.259.51.738.316.479.795 1.156 1.444 1.953 1.288 1.59 3.248 3.727 4.666 6.59.696 1.43 1.13 2.918 1.203 4.308a8.362 8.362 0 01-.592 3.61c-.404.971-.94 1.652-1.36 2.055-.211.202-.385.347-.514.43-.126.09-.194.13-.201.121"
fill="#33535f"
/>
<path
d="M149.902 136.325c-.07-.057.94-.783 1.733-2.502a8.045 8.045 0 00.691-3.194c.031-1.24-.27-2.593-.816-3.923-.538-1.337-1.275-2.508-1.883-3.622a85.428 85.428 0 01-1.56-2.974 41.68 41.68 0 01-.965-2.049c-.211-.492-.308-.772-.286-.782.024-.01.165.25.414.72l1.066 1.993c.455.838 1.002 1.833 1.624 2.929.616 1.092 1.375 2.276 1.928 3.648.56 1.361.865 2.777.814 4.067a7.944 7.944 0 01-.794 3.296 6.88 6.88 0 01-1.322 1.861c-.19.193-.35.327-.463.413-.11.087-.173.128-.181.119"
fill="#33535f"
/>
<path
d="M99.5 118.19c4.791-8.18 11.498-15.791 20.72-17.993 9.22-2.203 18.63-.676 26.6 4.456V88.528l-11.512-37.16-8.974-4.73-21.191 12.105-5.484 44.697-.158 14.75"
fill="#f03d5f"
/>
<path
d="M99.5 118.19l.159-14.75 5.484-44.697 21.19-12.104 8.975 4.73 11.512 37.16v16.124a36.636 36.636 0 00-.897-.56c-5.378-3.238-11.367-4.875-17.486-4.875-2.728 0-5.481.325-8.217.979a23.682 23.682 0 00-4.79 1.711c-.47.226-.933.468-1.388.723l-.19.106c-6.042 3.447-10.741 9.288-14.351 15.453"
fill="#f9b2c4"
/>
<path
d="M146.369 89.112c-.007.011-.181-.07-.507-.239-.33-.16-.795-.436-1.431-.72a31.098 31.098 0 00-5.502-2.057 36.104 36.104 0 00-8.604-1.24 43.87 43.87 0 00-5.141.191c-1.778.182-3.617.408-5.413.986-3.604 1.145-6.8 2.904-9.5 4.758a33.35 33.35 0 00-6.466 5.802c-1.625 1.885-2.584 3.666-3.248 4.881l-.65 1.462c-.152.334-.236.508-.248.504-.012-.004.05-.186.179-.53.133-.342.317-.854.591-1.496.629-1.243 1.564-3.062 3.179-4.985 1.595-1.926 3.752-4.023 6.47-5.913 2.715-1.886 5.93-3.67 9.586-4.832 1.831-.588 3.703-.815 5.486-.992a43.277 43.277 0 015.184-.172c3.31.098 6.262.635 8.665 1.327a28.878 28.878 0 015.495 2.18c.629.304 1.085.6 1.403.782.317.189.478.293.472.303"
fill="#17282f"
/>
<path
d="M132.368 84.797c-.1.017-1.601-8.475-3.353-18.963-1.753-10.492-3.093-19.008-2.993-19.025.099-.017 1.6 8.472 3.352 18.964 1.753 10.49 3.093 19.008 2.994 19.024M118.324 86.33c-.1-.002.058-8.06.355-17.994.296-9.937.618-17.988.718-17.985.102.003-.058 8.058-.355 17.996-.296 9.934-.617 17.987-.718 17.984M106.37 93.024c-.012 0-.014-.133-.008-.385l.046-1.098c.047-.955.137-2.334.272-4.037.265-3.405.728-8.102 1.378-13.273.652-5.172 1.367-9.838 1.954-13.203.29-1.683.546-3.041.736-3.977l.229-1.076c.056-.246.09-.373.103-.371.013.002 0 .134-.031.383l-.16 1.089c-.156.994-.365 2.346-.623 3.993a486.938 486.938 0 00-3.329 26.458l-.387 4.024c-.047.441-.084.803-.114 1.094-.03.25-.052.38-.066.38M134.411 87.516c.052.005.028.624-.037 1.622-.084 1.136-.178 2.446-.284 3.893l-.296 3.893c-.084.995-.152 1.612-.204 1.61-.05-.002-.071-.622-.055-1.623.019-1.001.078-2.383.191-3.908.114-1.522.26-2.897.39-3.89.133-.994.246-1.603.295-1.597"
fill="#17282f"
/>
<path
d="M67.627 246.66c-.882-1.29-3.252-2.437-4.805-2.606-5.377-.587-10.277 1.728-14.512 5.092l-.833 1.515c-2.282 1.78-4.66 3.81-5.37 6.616-.71 2.806-.911 6.004-.97 8.898-.027 1.325.582 2.814 1.813 4.25.98 1.146 2.432 1.766 3.932 1.913 2.828.275 5.703-.472 8.193-1.84 2.491-1.367 4.617-3.333 6.42-5.529a31.474 31.474 0 006.55-13.962c.283-1.469.426-3.112-.418-4.347"
fill="#f03d5f"
/>
<path
d="M48.058 272.394c-.392 0-.785-.018-1.176-.056-1.5-.147-2.953-.767-3.932-1.912a8.594 8.594 0 01-1.28-1.948c-1.63-13.298 9.871-24.27 19.633-24.27 1.184 0 2.343.16 3.448.499l-.393-.267c1.291.475 2.649 1.312 3.27 2.22.475.697.638 1.524.638 2.376-.001.658-.098 1.331-.22 1.971a31.474 31.474 0 01-6.55 13.962c-1.804 2.196-3.93 4.162-6.42 5.53-2.146 1.177-4.578 1.895-7.018 1.895"
fill="#9c2438"
/>
<path
d="M67.045 167.553c-.843.281-42.781 59.722-43.906 63.658s-7.27 13.375 1.406 22.212c8.65 8.81 17.143 15.206 17.143 15.206-1.944-14.98 12.8-27.059 23.063-23.922l-7.872-5.343 17.995-23.898-7.829-47.913M154.193 179.977s6.598 8.246 8.248 13.59c1.41 4.564 8.886 25.67 8.886 25.67l13.625 33.767s-2.07 2.984-2.566 5.513c-.198 1.002-1.93 16.516-6.057 23.119l-21.855-9.77-2.754-19.562-3.762-16.912 3.894-45.38 2.34-10.035M92.855 158.976s5.622-5.17 7.156-5.893c0 0 1.778 6.063 6.975 8.935 5.196 2.872 8.589 5.965 8.589 6.375v7.521s-21.372-5.842-22.72-16.938"
fill="#f03d5f"
/>
<path
d="M96.431 197.246L138 194.735l-1.92-23.744-1.81-4.026-2.813-5.049s-.1 2.582-1.964 4.61c-3.427 3.729-8.446 4.465-8.446 4.465l-.82 4.923-21.047-8.7s-2.748 28.665-2.748 29.349"
fill="#f03d5f"
/>
<path
d="M121.046 170.991c.006 0-.004.11-.032.321l-.137.944c-.133.854-.324 2.082-.573 3.67l-.01.066-.067.002-17.099.524c-.92.025-1.86.052-2.821.08l-1.457.041c-.5.009-.965.022-1.419.183-.898.31-1.669 1.048-1.977 1.987-.168.474-.189.953-.163 1.49l.03 1.594.287 13.507c.318 13.142.522 25.044.462 33.66a595.07 595.07 0 01-.127 10.2l-.075 2.773-.029.72c-.009.163-.016.246-.022.246-.006 0-.011-.084-.016-.246-.001-.181-.003-.42-.007-.722l.007-2.773.012-10.199c-.007-8.613-.25-20.508-.57-33.651l-.272-13.51-.025-1.592c-.026-.512-.003-1.1.185-1.606.346-1.041 1.2-1.854 2.193-2.193.497-.176 1.04-.188 1.517-.194l1.457-.035 2.822-.068 17.103-.376-.077.067.648-3.659.177-.937c.043-.21.067-.315.075-.314"
fill="#17282f"
/>
<path
d="M101.968 185.086a1.78 1.78 0 11-3.56 0 1.78 1.78 0 013.56 0"
fill="#17282f"
/>
<path
d="M110.128 183.176c.012.107-2.004.368-4.437.936-2.436.558-4.361 1.209-4.398 1.108-.035-.087 1.853-.898 4.315-1.463 2.462-.575 4.514-.675 4.52-.58M107.145 186.705c-.033.1-1.397-.297-3.105-.652-1.707-.361-3.115-.544-3.106-.649.005-.096 1.447-.074 3.181.292 1.735.36 3.064.92 3.03 1.01M101.968 205.186a1.78 1.78 0 11-3.56 0 1.78 1.78 0 013.56 0"
fill="#17282f"
/>
<path
d="M110.128 203.275c.012.107-2.004.368-4.437.936-2.436.559-4.361 1.21-4.398 1.108-.035-.087 1.853-.898 4.315-1.463 2.462-.574 4.514-.675 4.52-.58M107.145 206.804c-.033.1-1.397-.297-3.105-.651-1.707-.361-3.115-.545-3.106-.65.005-.096 1.447-.074 3.181.293 1.735.36 3.064.919 3.03 1.008M101.968 225.284a1.78 1.78 0 11-3.56 0 1.78 1.78 0 013.56 0"
fill="#17282f"
/>
<path
d="M110.128 223.375c.012.106-2.004.367-4.437.935-2.436.559-4.361 1.21-4.398 1.109-.035-.087 1.853-.898 4.315-1.464 2.462-.573 4.514-.674 4.52-.58M107.145 226.904c-.033.1-1.397-.298-3.105-.652-1.707-.36-3.115-.544-3.106-.65.005-.095 1.447-.073 3.181.293 1.735.36 3.064.919 3.03 1.009M72.337 220.883c-.012-.003.022-.178.098-.507l.35-1.439c.31-1.247.77-3.048 1.297-5.284.524-2.234 1.106-4.906 1.56-7.905.454-2.994.751-6.325.642-9.816-.134-3.488-.733-6.788-1.663-9.664-.935-2.876-2.164-5.333-3.459-7.216-1.287-1.89-2.556-3.258-3.504-4.117-.452-.455-.861-.743-1.108-.974-.256-.221-.387-.343-.38-.353.008-.01.154.092.425.295.263.214.688.485 1.158.927.984.832 2.293 2.185 3.621 4.076 1.336 1.885 2.603 4.358 3.566 7.258.958 2.901 1.573 6.233 1.708 9.756.11 3.522-.199 6.874-.674 9.88-.474 3.01-1.085 5.683-1.642 7.914a166.779 166.779 0 01-1.41 5.26l-.416 1.421c-.099.323-.157.492-.169.488"
fill="#17282f"
/>
<path
d="M71.691 220.27c-.024.005-.108-.326-.238-.932a38.51 38.51 0 01-.451-2.581c-.323-2.19-.597-5.247-.552-8.63.052-3.382.413-6.431.798-8.61.191-1.09.373-1.968.524-2.568.147-.601.24-.93.265-.925.024.005-.022.345-.125.953-.109.607-.252 1.49-.41 2.58a67.597 67.597 0 00-.688 8.576 67.565 67.565 0 00.444 8.59 83.11 83.11 0 00.335 2.59c.086.612.123.953.098.957M31.889 238.503c-.005-.031.39-.1 1.087-.273.694-.189 1.673-.542 2.816-1.132 1.146-.584 2.442-1.408 3.915-2.286 1.475-.85 3.164-1.814 5.165-2.146 2-.382 3.967.127 5.501.9 1.562.779 2.74 1.818 3.708 2.675.96.877 1.657 1.668 2.12 2.224.462.56.696.885.678.9-.02.017-.292-.278-.784-.805a28.779 28.779 0 00-2.186-2.128c-.982-.825-2.164-1.829-3.683-2.564-1.505-.736-3.38-1.208-5.293-.842-1.918.315-3.582 1.246-5.058 2.076-1.473.857-2.793 1.666-3.968 2.226-1.172.568-2.185.892-2.897 1.04-.356.08-.641.096-.83.123-.19.02-.29.025-.291.012"
fill="#17282f"
/>
<path
d="M46.384 223.944c.01-.023.246.068.666.256.212.09.466.208.747.375.283.162.617.33.952.57.694.443 1.465 1.056 2.258 1.804a17.8 17.8 0 012.268 2.72 17.775 17.775 0 011.632 3.144c.386 1.02.652 1.968.792 2.78.092.402.119.774.16 1.098.044.324.056.604.057.835.01.46.003.712-.022.712-.071.005-.095-1.01-.447-2.593-.17-.792-.457-1.714-.851-2.707a19.111 19.111 0 00-1.624-3.067 19.111 19.111 0 00-2.2-2.682c-.764-.747-1.504-1.368-2.169-1.83-1.323-.937-2.25-1.35-2.22-1.415"
fill="#17282f"
/>
<path
d="M56.435 239.089a48.247 48.247 0 00-1.927-2.12c.676.626 1.2 1.18 1.587 1.59l.166.18.174.35m-24.926-.67c-.549 0-1.08-.133-1.407-.552-.584-.75-.096-1.852.512-2.583a9.167 9.167 0 014.501-2.93c.905-.258 2.06-.59 2.161-1.526.045-.413-.153-.81-.195-1.224-.086-.844.517-1.645 1.277-2.026.627-.314 1.338-.396 2.045-.396.148 0 .297.004.445.01 6.295.245 12.278 4.377 14.735 10.177l.23.465.028.21a22.099 22.099 0 00-1.76-1.803c-.969-.857-2.146-1.896-3.708-2.674-1.175-.594-2.606-1.03-4.11-1.03-.458 0-.923.04-1.39.129-2.002.332-3.691 1.296-5.166 2.146-1.473.878-2.77 1.702-3.915 2.286-.828.427-1.57.73-2.18.937-.44.127-.885.232-1.338.311a4.449 4.449 0 01-.765.073m24.51-.169l-.104-.122c.001-.024.003-.051.003-.083l.102.205m-17.999-2.063c.59-.341 1.207-.709 1.854-1.085 1.476-.83 3.14-1.76 5.058-2.076a7.195 7.195 0 011.352-.127c1.13 0 2.219.255 3.192.639a8.261 8.261 0 00-2.49-.379c-2.27 0-4.549.851-6.626 1.855-.783.378-1.559.78-2.34 1.173"
fill="#9c2438"
/>
<path
d="M56.261 238.739l-.166-.18a31.097 31.097 0 00-1.587-1.59c-1.466-1.498-3.092-2.814-5.031-3.431-.973-.384-2.061-.639-3.192-.639-.446 0-.898.04-1.352.127-1.918.315-3.582 1.246-5.058 2.076-.647.376-1.265.744-1.854 1.085-1.435.722-2.885 1.41-4.41 1.848.61-.207 1.353-.51 2.181-.937 1.146-.584 2.442-1.408 3.915-2.286 1.475-.85 3.164-1.814 5.165-2.146a7.44 7.44 0 011.391-.13c1.504 0 2.935.437 4.11 1.03 1.562.779 2.74 1.818 3.708 2.675.738.673 1.32 1.298 1.76 1.802.019.128.034.195.052.195.01 0 .018-.037.022-.11.036.042.07.083.105.122l.241.489"
fill="#0c1418"
/>
<path
d="M55.893 238.238c-.018 0-.033-.067-.052-.195a12.58 12.58 0 01-.028-.209l.105.211c0 .032-.002.06-.003.083-.004.073-.011.11-.021.11"
fill="#0c1418"
/>
<path
d="M147.958 235.392c.009.009-.081.114-.26.306l-.8.825c-.346.359-.777.79-1.304 1.263-.523.478-1.104 1.04-1.795 1.606-1.345 1.17-3.028 2.474-4.961 3.827a67.332 67.332 0 01-6.57 3.97 67.252 67.252 0 01-7.012 3.127c-2.215.816-4.246 1.452-5.976 1.888-.858.245-1.65.4-2.341.557-.69.162-1.29.27-1.783.35l-1.133.184c-.26.038-.397.053-.4.04-.002-.012.132-.05.387-.112.295-.065.664-.15 1.118-.25.488-.102 1.082-.23 1.765-.41.684-.176 1.47-.348 2.32-.607 1.715-.467 3.727-1.125 5.924-1.953a71.913 71.913 0 006.962-3.137 72.125 72.125 0 006.55-3.923c1.933-1.331 3.623-2.608 4.984-3.75.699-.55 1.29-1.096 1.824-1.557.538-.458.983-.873 1.343-1.216l.845-.774c.196-.175.304-.263.313-.254"
fill="#17282f"
/>
<path
d="M154.474 189.371c.013.003-.003.165-.045.472l-.203 1.34-.776 4.92c-.64 4.155-1.486 9.903-2.358 16.26-.851 6.342-1.62 12.081-2.186 16.288l-.662 4.937-.194 1.34c-.05.306-.08.467-.092.464-.013-.001-.006-.164.018-.473l.128-1.349.547-4.951a796.795 796.795 0 012.08-16.307c.872-6.359 1.758-12.103 2.465-16.251.36-2.073.657-3.75.89-4.903l.27-1.328c.066-.302.106-.46.118-.459M130.79 258.564c-.02-.014.117-.252.38-.67a61.08 61.08 0 011.157-1.743 138.79 138.79 0 014.05-5.589 137.598 137.598 0 014.317-5.388c.57-.674 1.04-1.213 1.373-1.578.333-.365.527-.559.545-.543.02.016-.136.242-.436.634l-1.283 1.65a465.51 465.51 0 00-4.226 5.445 476.729 476.729 0 00-4.13 5.518l-1.25 1.675c-.3.393-.475.603-.496.589M175.842 243.994c-.012.026-.405-.153-1.12-.462-.713-.31-1.75-.752-3.062-1.207-2.608-.904-6.387-1.912-10.615-1.786-1.046.05-2.064.224-2.961.611-.901.382-1.678.948-2.328 1.576-1.3 1.272-2.087 2.753-2.628 4.02-.54 1.275-.864 2.357-1.105 3.096-.235.743-.371 1.152-.396 1.145-.024-.007.066-.428.26-1.184.2-.754.486-1.85 1.004-3.156.517-1.296 1.295-2.829 2.63-4.16.667-.659 1.475-1.258 2.422-1.664.947-.414 2.01-.596 3.085-.647 4.31-.129 8.112.935 10.72 1.907 1.31.49 2.337.97 3.035 1.32.35.171.615.32.795.42.18.101.27.16.264.171"
fill="#17282f"
/>
<path
d="M170.604 233.008c.001.073-1.098.038-2.825.337-.865.142-1.876.408-2.967.788a20.14 20.14 0 00-3.385 1.621 20.217 20.217 0 00-2.985 2.278c-.835.8-1.531 1.579-2.051 2.284-1.051 1.403-1.52 2.398-1.586 2.363-.022-.01.085-.262.3-.71.104-.226.241-.497.43-.795.185-.3.377-.656.648-1.01.5-.735 1.189-1.548 2.027-2.375a18.936 18.936 0 013.026-2.345 18.902 18.902 0 013.464-1.628c1.119-.37 2.156-.614 3.038-.725.438-.08.842-.09 1.193-.118.352-.033.656-.031.904-.02.497.01.77.03.77.055"
fill="#17282f"
/>
<path
d="M176.232 277.353c-.591-4.572-3.78-8.67-7.989-10.553-3.333-1.492-7.941-1.834-11.11-.017-3.168 1.816-7.408 6.34-6.552 9.89l7.271 12.213c3.657 2.807 9.098 2.912 12.97.409 3.87-2.503 6-7.37 5.41-11.942"
fill="#f03d5f"
/>
<path
d="M164.59 291.087c-2.414 0-4.821-.73-6.738-2.2l-3.824-6.423-.205-.345-3.242-5.445a4.107 4.107 0 01-.112-.968c0-3.366 3.778-7.269 6.664-8.923 1.5-.86 3.32-1.236 5.177-1.236 2.067 0 4.178.467 5.933 1.253 4.208 1.882 7.398 5.981 7.989 10.553.065.509.098 1.021.097 1.534 0 .88-.097 1.76-.281 2.623-.674 3.144-2.527 6.04-5.227 7.785-1.842 1.191-4.04 1.792-6.231 1.792"
fill="#9c2438"
/>
<path
d="M173.967 286.255c-.027-.017.255-.49.715-1.362.424-.889.987-2.22 1.256-3.96.257-1.728.237-3.88-.535-6.077-.164-.558-.427-1.09-.668-1.647-.294-.53-.572-1.085-.944-1.596-.709-1.039-1.569-2.04-2.612-2.879a12.928 12.928 0 00-3.335-1.982 14.039 14.039 0 00-3.526-.827c-2.316-.196-4.422.184-6.066.801-1.652.609-2.882 1.364-3.669 1.957-.79.592-1.194.967-1.22.94-.007-.01.087-.109.276-.29.196-.172.456-.466.857-.762.77-.634 1.996-1.436 3.666-2.087 1.663-.658 3.81-1.076 6.186-.894 1.181.115 2.412.371 3.626.83a13.144 13.144 0 013.437 2.034c1.071.86 1.952 1.89 2.676 2.96.38.525.662 1.097.96 1.642.245.571.51 1.121.675 1.694.773 2.259.766 4.467.47 6.225a13.213 13.213 0 01-1.384 3.983c-.238.438-.467.753-.604.975-.145.219-.227.33-.237.322"
fill="#17282f"
/>
<path
d="M153.968 269.083c-.1.017-.95-4.776-1.9-10.702-.95-5.928-1.64-10.746-1.54-10.762.099-.015.95 4.776 1.9 10.704.95 5.926 1.639 10.744 1.54 10.76"
fill="#17282f"
/>
<path
d="M153.597 265.638c-.041-.165-.081-.33-.119-.496a480.798 480.798 0 00-.845-5.53c-.168-1.442-.333-2.857-.594-4.199-.232-1.19-.46-2.387-.692-3.596-.41-2.367-.713-3.953-.802-4.172a442.262 442.262 0 00-1.315-6.534l2.49 11.193 1.877 13.334"
fill="#8c8f8f"
/>
<path
d="M153.599 265.643l-.002-.005-1.877-13.334-2.49-11.193v-.005l3.713-.254c2.409-3.758 6.362-6.49 10.728-7.416.599-.127 1.217-.22 1.828-.22.338 0 .674.028 1.003.095-.566.128-1.17.296-1.802.505-1.11.392-2.298.924-3.464 1.628a18.936 18.936 0 00-3.026 2.345c-.838.827-1.527 1.64-2.027 2.375-.27.354-.463.71-.648 1.01a6.572 6.572 0 00-.43.795c-.215.448-.322.7-.3.71l.004.001c.077 0 .548-.984 1.582-2.364.52-.705 1.216-1.485 2.05-2.284a20.217 20.217 0 012.986-2.278 20.14 20.14 0 013.385-1.621 19.89 19.89 0 012.276-.655c.879.332 1.647 1.017 1.876 1.921.257 1.01-.357 2.234-1.383 2.424a7.699 7.699 0 014.86 3.852c.121.232.224.511.227.768a34.214 34.214 0 00-.92-.36c-2.463-.919-5.993-1.918-10.01-1.918-.235 0-.472.004-.71.01-1.075.052-2.138.234-3.085.648-.947.406-1.755 1.005-2.422 1.663-1.335 1.332-2.113 2.865-2.63 4.161-.518 1.305-.805 2.402-1.005 3.156-.193.756-.283 1.177-.26 1.184h.001c.027 0 .163-.408.396-1.145.241-.74.564-1.821 1.105-3.097.541-1.266 1.328-2.747 2.628-4.02.65-.627 1.427-1.193 2.328-1.575.897-.387 1.915-.56 2.961-.61.244-.008.484-.011.725-.011 3.934 0 7.432.944 9.89 1.796.345.12.672.239.978.354a.614.614 0 01-.153.262c-.195.195-.494.226-.773.226l-.064-.001c-1.717-.026-3.415-.382-5.131-.463-.206-.01-.414-.015-.622-.015-1.524 0-3.076.283-4.3 1.17-1.384 1.006-2.155 2.631-2.82 4.206-2.33 5.518-4.113 11.686-5.176 17.58"
fill="#9c2438"
/>
<path
d="M151.627 250.987c-.024-.007.066-.428.26-1.184.2-.754.486-1.85 1.004-3.156.517-1.296 1.295-2.829 2.63-4.16.667-.659 1.475-1.258 2.422-1.664.947-.414 2.01-.596 3.085-.647.238-.007.475-.01.71-.01 4.017 0 7.547.998 10.01 1.917.324.121.631.242.92.36a.825.825 0 01-.03.236 39.266 39.266 0 00-.978-.354c-2.458-.852-5.956-1.796-9.89-1.796-.24 0-.481.003-.725.01-1.046.05-2.064.224-2.961.611-.901.382-1.678.948-2.328 1.576-1.3 1.272-2.087 2.753-2.628 4.02-.54 1.275-.864 2.357-1.105 3.096-.233.737-.37 1.145-.396 1.145M154.809 242.68h-.004c-.022-.012.085-.263.3-.71.104-.227.241-.498.43-.796.185-.3.377-.656.648-1.01.5-.735 1.189-1.548 2.027-2.375a18.936 18.936 0 013.026-2.345 18.902 18.902 0 013.464-1.628c.631-.209 1.236-.377 1.802-.505a4.013 4.013 0 01.586.167 19.89 19.89 0 00-2.276.655 20.14 20.14 0 00-3.385 1.621 20.217 20.217 0 00-2.985 2.278c-.835.8-1.531 1.579-2.051 2.284-1.034 1.38-1.505 2.364-1.582 2.364M153.478 265.142c-.417-1.824-.632-3.7-.845-5.53.33 2.083.62 3.986.845 5.53m-2.131-13.325c-.263-1.373-.528-2.762-.802-4.172.09.219.392 1.805.802 4.172"
fill="#0c1418"
/>
<path
d="M68.629 272.01v-.005.005m-.337-5.93a91.727 91.727 0 00-.042-.532c-.297-3.677 2.12-19.864 2.123-19.884-.002.019-1.994 14.356-2.107 18.266-.016.537-.005 1.275.026 2.15m1.966-29.17a251.835 251.835 0 00-.314-7.06l.212.728.026.513.076 5.819"
fill="#8c8f8f"
/>
<path
d="M96.082 281.06c-3.318 0-6.626-.181-9.9-.715-6.682-1.09-12.924-3.396-17.553-8.335v-.005a136.84 136.84 0 00-.337-5.924 36.205 36.205 0 01-.026-2.15c.113-3.911 2.105-18.248 2.107-18.267 0 0 .045-3.553-.115-8.754l-.076-5.82-.026-.512 2.138 7.322c1.142 3.907 2.65 8.26 6.34 9.978 3.073 1.43 6.755.548 9.994 1.545 2.947.906 5.193 3.247 7.3 5.499 5.759 6.155 11.656 12.527 14.632 20.413.418 1.108.769 2.376.254 3.442-.725 1.503-2.702 1.795-4.369 1.89-3.446.197-6.91.393-10.363.393"
fill="#9c2438"
/>
<path
d="M114.698 171.972c-.006.025-.333-.049-.919-.203-.588-.147-1.425-.408-2.446-.77-2.044-.72-4.8-1.937-7.617-3.682-2.814-1.753-5.127-3.684-6.678-5.196a29.31 29.31 0 01-1.775-1.851c-.398-.457-.608-.718-.59-.735.02-.016.266.212.693.637a51.353 51.353 0 001.848 1.761 46.56 46.56 0 006.694 5.074 46.525 46.525 0 007.515 3.75c1.003.392 1.824.688 2.398.877.57.195.884.315.877.338M134.209 168.086c.021.014-.073.197-.264.52-.185.324-.494.77-.907 1.297-.823 1.054-2.147 2.384-3.866 3.507-1.724 1.117-3.476 1.788-4.773 2.114-.649.164-1.182.266-1.554.304-.371.043-.577.056-.58.031-.011-.063.802-.195 2.063-.583a18.86 18.86 0 004.645-2.172 18.88 18.88 0 003.867-3.366c.865-.996 1.315-1.686 1.369-1.652M137.45 172.403c.084.026-.647 1.892-2.279 3.702-1.619 1.824-3.392 2.755-3.427 2.674-.065-.093 1.58-1.14 3.156-2.917 1.59-1.762 2.45-3.512 2.55-3.46"
fill="#17282f"
/>
<path
d="M100.741 255.614s.163-.034.44-.089c1.548-.303 6.7-1.237 7.53-.407.98.98 7.956 7.834 7.956 7.834s-1.347 2.202-5.753 0c-4.406-2.204-10.173-7.338-10.173-7.338"
fill="#f8a58d"
/>
<path
d="M90.845 241.7a3.538 3.538 0 014.816.853l21.266 28.206-5.446 3.973L90.003 246.8a3.539 3.539 0 01.842-5.1"
fill="#17282f"
/>
<path
d="M42.216 260.587s25.257 4.098 28.736 4.377c3.478.278 13.079 10.436 15.862 11.41 2.782.973 10.296.835 10.296.835s13.636.709 14.053.006c.418-.702 1.253-.563 0-3.207-1.252-2.644-2.783-4.591-2.783-4.591s3.479 4.313 4.453 4.452c.974.14 3.061.39 2.922-1.475-.139-1.864-3.757-9.517-3.757-9.517s-1.53-3.573-4.313-4.36c-2.783-.788-14.888-6.632-14.888-6.632h-12.94l-15.106-7.178s-9.14-2.937-17.839 6.656c-1.712 1.886-2.957 4.148-3.782 6.557l-.914 2.667"
fill="#f8a58d"
/>
<path
d="M114.429 268.63c-.024.01-.156-.253-.375-.735l-.9-2.054-1.29-3.068c-.408-1.15-1.071-2.388-2.204-3.217-.564-.414-1.196-.712-1.81-.994l-1.789-.798c-1.143-.503-2.18-.94-3.051-1.303l-2.067-.858c-.488-.205-.755-.327-.745-.352.008-.023.291.054.794.219.504.165 1.227.418 2.113.75.886.334 1.935.749 3.088 1.235l1.803.782c.622.28 1.276.583 1.88 1.025 1.219.894 1.903 2.211 2.306 3.4l1.213 3.086.79 2.093c.179.499.267.779.244.788M101.729 261.622c.03-.035.554.342 1.335 1.035.78.692 1.807 1.71 2.832 2.93a28.474 28.474 0 012.391 3.301c.546.89.826 1.473.785 1.496-.046.028-.404-.507-1-1.354a48.57 48.57 0 00-2.455-3.208 48.758 48.758 0 00-2.73-2.978c-.73-.734-1.194-1.18-1.158-1.222M108.95 277.41c-.01.02-.202-.05-.532-.21a10.055 10.055 0 01-1.326-.817c-1.08-.76-2.385-2.04-3.688-3.547a207.902 207.902 0 01-3.307-3.88c-.832-1.005-1.327-1.643-1.29-1.676.039-.033.603.545 1.484 1.507.881.962 2.08 2.31 3.387 3.809 1.3 1.502 2.55 2.784 3.57 3.582 1.01.808 1.731 1.178 1.703 1.232M101.453 277.396c-.025.042-.526-.198-1.302-.651a30.475 30.475 0 01-2.91-1.959 34.464 34.464 0 01-2.679-2.266c-.651-.615-1.028-1.024-.995-1.06.076-.084 1.733 1.386 3.894 3.036 2.163 1.645 4.049 2.805 3.992 2.9"
fill="#f68260"
/>
<path
d="M142.888 287.891s-2.22-3.429-2.528-4.655c-.305-1.226 0-7.052-4.087-6.133v.423c.101.497 0 12.354 0 12.354l6.615-1.989"
fill="#f8a58d"
/>
<path
d="M90.523 294.097s-3.778 34.813 36.98 33.796c33.23-.827 32.645-33.216 32.645-33.216l-69.625-.58"
fill="#f03d5f"
/>
<path
d="M162.705 294.424c0 5.072-17.004 9.182-37.98 9.182-20.975 0-37.98-4.11-37.98-9.182 0-5.07 17.005-9.181 37.98-9.181 20.976 0 37.98 4.11 37.98 9.18"
fill="#f03d5f"
/>
<path
d="M125.29 299.9c-19.253 0-34.86-2.598-34.86-5.803s15.607-5.802 34.86-5.802c19.252 0 34.859 2.597 34.859 5.802 0 3.205-15.607 5.802-34.86 5.802"
fill="#9c2438"
/>
<path
d="M161.415 297.049c.004.005-.048.043-.154.111l-.47.295c-.413.262-1.043.615-1.869 1.04-1.653.847-4.144 1.907-7.36 2.76-3.213.866-7.11 1.562-11.463 2.141-4.361.538-9.195.74-14.259.702-5.063-.043-9.89-.211-14.264-.593-4.375-.389-8.29-1.02-11.522-1.793-3.236-.758-5.784-1.645-7.504-2.34-.869-.328-1.518-.644-1.964-.843l-.503-.236c-.113-.055-.17-.085-.167-.092a.754.754 0 01.182.059l.517.202c.455.176 1.111.471 1.986.777 1.732.653 4.28 1.5 7.511 2.221 3.227.738 7.13 1.341 11.493 1.71 4.363.363 9.181.52 14.238.563 5.054.038 9.87-.153 14.217-.67 4.338-.558 8.236-1.227 11.436-2.057 3.208-.816 5.697-1.835 7.363-2.638a36.27 36.27 0 001.895-.976c.2-.108.36-.195.489-.263.11-.058.17-.085.172-.08"
fill="#17282f"
/>
<path
d="M138.146 293.313s4.157-13.934 5.588-15.787c1.182-1.532 9.56-7.869 12.435-10.023a6.866 6.866 0 012.372-1.15c2.85-.754 5.692-1.254 10.383.776 5.007 2.167 6.396 6.897 6.396 6.897l-15.64 9.72-.61 6.582-12.588-3.21s.158-.67-.37-1.922c0 0-3.99 9.698-7.966 8.117"
fill="#f8a58d"
/>
<path
d="M123.057 283.42a80.28 80.28 0 01-3.968-5.833 61.782 61.782 0 01-2.295-4.167c-.49-1.014-.777-1.569-.813-1.553-.034.014.187.597.618 1.643.443 1.039 1.16 2.512 2.155 4.274a69.54 69.54 0 003.895 5.937c1.569 2.163 3.406 4.454 5.361 6.829 2.725 3.276 5.248 6.334 7.297 9.016l.564-.026c-2.049-2.788-4.628-5.965-7.436-9.34-1.954-2.372-3.796-4.645-5.378-6.78M113.057 273.437c-.035.017.208.593.663 1.622.452 1.031 1.111 2.52 1.884 4.377 1.552 3.712 3.539 8.908 5.273 14.795.547 1.965 1.127 3.875 1.812 5.646.181 0 .375-.002.563-.004-.693-1.797-1.277-3.746-1.848-5.797a120.236 120.236 0 00-5.442-14.793 92.833 92.833 0 00-2.05-4.315c-.515-1.004-.822-1.547-.855-1.531M114.431 271.766c-.033.019.236.587.751 1.6.516 1.013 1.277 2.47 2.237 4.26 1.925 3.579 4.622 8.507 7.904 13.776 1.9 3.066 3.808 5.876 5.574 8.327l.588-.018a175.811 175.811 0 01-5.695-8.6c-3.273-5.253-6.02-10.145-8.031-13.672l-2.39-4.176c-.572-.98-.905-1.514-.938-1.497M145.035 295.69c-1.378-3.43-3.693-6.263-6.194-8.5-2.507-2.257-5.192-4.008-7.702-5.604-2.518-1.588-4.878-3.031-6.932-4.495a48.433 48.433 0 01-8.803-8.026 57.375 57.375 0 01-2.045-2.528l-.513-.673c-.118-.15-.182-.226-.19-.22-.008.006.04.09.144.252l.47.706a41.27 41.27 0 001.97 2.601 46.441 46.441 0 008.74 8.205c2.054 1.493 4.412 2.962 6.914 4.563 2.494 1.608 5.147 3.36 7.607 5.595 2.459 2.22 4.695 4.976 6.037 8.332.39.946.716 1.938.932 2.954.181-.02.364-.037.541-.057a17.517 17.517 0 00-.976-3.105"
fill="#f3f2f1"
/>
<path
d="M143.774 297.994c-.757-1.972-1.989-4.198-3.736-6.377-1.741-2.188-3.997-4.29-6.506-6.283-2.515-1.989-5.025-3.716-7.265-5.332-2.245-1.612-4.219-3.123-5.797-4.486a43.212 43.212 0 01-3.556-3.423c-.79-.858-1.198-1.361-1.235-1.333-.014.012.072.15.25.403.174.255.454.616.824 1.071.744.91 1.902 2.162 3.46 3.574 1.557 1.41 3.52 2.966 5.755 4.604 2.23 1.643 4.726 3.38 7.22 5.354 2.492 1.976 4.725 4.039 6.456 6.169 1.737 2.124 2.98 4.287 3.769 6.203.123.302.23.593.334.88l.363-.033c-.105-.325-.205-.648-.336-.991M125.423 294.756a303.25 303.25 0 01-6.55-12.769l-1.887-3.92c-.445-.927-.708-1.432-.743-1.416-.035.014.162.549.548 1.503.389.953.975 2.32 1.73 3.998a197.76 197.76 0 006.417 12.868 208.922 208.922 0 002.695 4.79l.601-.012c-.908-1.59-1.852-3.28-2.811-5.042"
fill="#f3f2f1"
/>
<path
d="M131.019 288.47a144.106 144.106 0 01-10.678-11.72c-1.284-1.572-2.294-2.87-2.996-3.763-.698-.897-1.095-1.386-1.127-1.364-.03.022.308.554.954 1.491.65.935 1.616 2.27 2.864 3.88a119.584 119.584 0 0010.597 11.87c2.212 2.188 4.455 4.123 6.339 6.02 1.488 1.482 2.724 2.963 3.671 4.381.156-.01.31-.022.468-.034-.95-1.526-2.224-3.123-3.777-4.703-1.888-1.939-4.116-3.88-6.315-6.058M119.528 298.105c-.932-2.81-1.562-5.509-2.153-7.965-1.132-4.926-2.186-8.91-3.312-11.522-1.08-2.629-2.014-3.91-2.014-3.91-.007.005.032.095.117.266a33.059 33.059 0 011.698 3.723c1.058 2.621 2.048 6.59 3.132 11.531.568 2.466 1.176 5.176 2.099 8.021.182.538.38 1.087.588 1.638l.5.001c-.235-.6-.453-1.197-.655-1.783"
fill="#f3f2f1"
/>
<path
d="M147.73 289.657c0-.007.057-.01.167-.012.11-.005.273.01.487.021a29.97 29.97 0 011.86.222c1.605.256 3.943.594 6.73 1.49.695.251 1.393.535 2.108.927.348.207.704.456.956.83.267.376.318.882.199 1.328-.118.49-.552.8-.916 1.03-.368.242-.785.47-1.207.644-.847.357-1.732.678-2.67.928-3.709 1.03-7.874 1.84-12.284 2.362-8.831 1.044-16.896.839-22.696.625a285.618 285.618 0 01-6.873-.35l-1.866-.129-.485-.043c-.109-.011-.164-.02-.164-.028 0-.006.057-.01.167-.01l.486.008 1.87.061 6.874.234c5.798.147 13.847.31 22.645-.73 4.392-.52 8.54-1.317 12.238-2.324.92-.24 1.801-.554 2.632-.898.42-.173.795-.374 1.166-.613.368-.23.704-.477.792-.847.098-.376.064-.781-.151-1.086-.207-.315-.528-.553-.856-.75a14.749 14.749 0 00-2.051-.927c-2.739-.914-5.075-1.295-6.665-1.592a53.68 53.68 0 00-1.846-.29c-.424-.054-.646-.067-.647-.08"
fill="#17282f"
/>
<path
d="M151.125 281.045c.061.086-1.243 1.098-2.73 2.478-1.495 1.376-2.608 2.596-2.689 2.527-.073-.06.927-1.4 2.44-2.794 1.51-1.399 2.926-2.29 2.979-2.211M150.814 286.569c-.054.093-.97-.51-2.25-.467-1.28.011-2.17.651-2.227.559-.028-.034.153-.248.541-.474.385-.226.99-.433 1.68-.45.69-.012 1.302.17 1.695.38.397.21.587.417.561.452"
fill="#f68260"
/>
<path
d="M241.81 193.873a3.78 3.78 0 00-4.885 2.144l-5.635 15.092 7.009 2.574 5.677-14.945a3.778 3.778 0 00-2.167-4.865"
fill="#f03d5f"
/>
<path
d="M241.658 198.645a1.607 1.607 0 11-3.214 0 1.607 1.607 0 013.214 0M237.666 208.542a1.607 1.607 0 11-3.214 0 1.607 1.607 0 013.214 0"
fill="#fafaf9"
/>
<path
d="M231.29 211.109l-10.854 28.311 13.362-.167 10.896-23.394-13.404-4.75"
fill="#dadbd8"
/>
<path d="M203.942 239.42v43.056h37.44V239.42h-37.44" fill="#f03d5f" />
<path
d="M241.382 250.147c0 .1-8.382.183-18.719.183-10.34 0-18.72-.082-18.72-.183 0-.1 8.38-.182 18.72-.182 10.337 0 18.72.081 18.72.182M241.382 254.782c0 .1-8.382.183-18.719.183-10.34 0-18.72-.082-18.72-.183 0-.1 8.38-.181 18.72-.181 10.337 0 18.72.08 18.72.181M241.382 259.418c0 .1-8.382.182-18.719.182-10.34 0-18.72-.082-18.72-.182 0-.1 8.38-.183 18.72-.183 10.337 0 18.72.082 18.72.183M241.382 264.053c0 .1-8.382.182-18.719.182-10.34 0-18.72-.082-18.72-.182 0-.101 8.38-.182 18.72-.182 10.337 0 18.72.081 18.72.182M241.382 268.688c0 .1-8.382.183-18.719.183-10.34 0-18.72-.083-18.72-.183 0-.1 8.38-.182 18.72-.182 10.337 0 18.72.081 18.72.182M241.382 273.324c0 .1-8.382.182-18.719.182-10.34 0-18.72-.082-18.72-.182 0-.101 8.38-.183 18.72-.183 10.337 0 18.72.082 18.72.183"
fill="#fff"
/>
<path
d="M181.938 215.72l25.034 2.002s.715-12.159-11.014-13.446c-11.73-1.287-14.02 11.444-14.02 11.444"
fill="#33535f"
/>
<path
d="M213.838 239.42c-.475.166-3.076-6.073-5.808-13.933-2.734-7.862-4.563-14.369-4.088-14.534.475-.164 3.076 6.073 5.81 13.935 2.731 7.86 4.561 14.367 4.086 14.532M215.334 321.884c.002.012-.168.048-.494.107l-1.434.237-1.038.162c-.382.05-.798.08-1.244.126-.893.077-1.908.209-3.038.222l-1.773.06c-.616.019-1.257-.017-1.922-.025-1.33.003-2.744-.133-4.233-.248a62.566 62.566 0 01-9.552-1.764 62.554 62.554 0 01-9.118-3.352c-1.341-.66-2.627-1.265-3.77-1.945-.575-.332-1.146-.629-1.667-.957l-1.493-.957c-.965-.588-1.772-1.219-2.501-1.74-.36-.266-.704-.505-1.005-.742-.294-.241-.564-.465-.81-.669l-1.113-.935c-.252-.216-.38-.334-.372-.344.008-.01.153.09.42.288l1.152.88.827.642c.308.228.656.458 1.02.715.738.503 1.552 1.117 2.522 1.69l1.498.93c.523.322 1.093.61 1.669.935 1.143.665 2.427 1.255 3.763 1.904a64.61 64.61 0 009.075 3.306 64.724 64.724 0 009.488 1.781c1.481.123 2.886.27 4.209.28.66.014 1.299.056 1.912.047l1.764-.038c1.125.003 2.138-.11 3.03-.167.445-.035.862-.056 1.242-.095l1.039-.13 1.44-.17c.33-.035.505-.047.507-.034"
fill="#33535f"
/>
<path
d="M185.54 319.12c-5.253-.7-12.108 1.335-16.038 4.89a51.804 51.804 0 0016.038-4.89M185.806 319.187c1.924-4.94-.92-11.896-.92-11.896-.554-.939-.304 6.416.92 11.896M177.521 315.268c1.404-3.625-.635-8.718-.635-8.718-.399-.687-.237 4.704.635 8.718M193.22 320.909c1.404-3.625-.636-8.72-.636-8.72-.397-.685-.235 4.706.637 8.72M177.679 315.345c-3.909-.52-9.01.993-11.934 3.638a38.537 38.537 0 0011.934-3.638M194.02 321.497c-5.548.074-12.34 3.222-15.87 7.503a54.218 54.218 0 0015.87-7.503"
fill="#33535f"
/>
<path
d="M215.17 294.996c-2.25-3.378-6.425-5.37-10.466-4.992-4.041.378-7.775 3.11-9.359 6.846-1.334 3.147-1.16 6.828.158 9.981 1.318 3.154 3.71 5.79 6.534 7.714 7.397 5.038 18.127 4.811 25.001-.92 2.553-2.127 4.602-5.033 5.073-8.323.543-3.803-1.233-7.845-4.403-10.016-3.17-2.17-7.58-2.367-10.93-.487"
fill="#f03d5f"
/>
<path
d="M215.197 294.981c-.434-1.803-2.344-3.12-4.183-2.885l2.474 2.948c-1.343.169-2.558 1.123-3.042 2.386-.116.303-.151.726.137.877.19.1.422.018.62-.064l3.008-1.248c.204 1.672.825 3.29 1.792 4.67a12.254 12.254 0 001.135-4.698c1.107.49 2.215.981 3.322 1.473a4.963 4.963 0 00-1.56-2.46 8.257 8.257 0 002.778-1.086c.257-.158.538-.433.422-.71-.09-.214-.36-.274-.591-.296a10.96 10.96 0 00-6.336 1.316"
fill="#33535f"
/>
<path
d="M214.978 296.223a21.63 21.63 0 00-.826-10.031c.791-.177 1.767-.296 2.28.333.296.365.33.87.335 1.34.041 3.162-.567 6.33-1.776 9.252"
fill="#33535f"
/>
<path
d="M198.841 308.268c-.016.015-.211-.16-.52-.52a9.086 9.086 0 01-1.11-1.67c-.8-1.485-1.484-3.872-1.057-6.472.433-2.6 1.849-4.641 3.084-5.788a9.127 9.127 0 011.59-1.225c.408-.241.649-.344.66-.325.04.061-.903.543-2.069 1.733-1.16 1.167-2.488 3.16-2.905 5.665-.41 2.503.204 4.817.927 6.296.72 1.502 1.46 2.261 1.4 2.306M202.177 310.79c-.033.091-.56-.021-1.087-.4-.53-.378-.81-.84-.732-.9.079-.067.455.256.943.603.486.349.913.6.876.697"
fill="#fff"
/>
<path
d="M61.545 256.598c-.303.068 1.953 11.42 1.953 11.42h5.785l2.554-10.97s-4.282-1.803-10.292-.45"
fill="#33535f"
/>
<path
d="M58.063 320.494s-8.512-23.831-7.32-30.3c1.19-6.469 3.744-7.83 5.787-9.873 2.043-2.043 3.745-3.745 4.256-5.788.51-2.043 0-10.213 0-10.213s-1.532-2.384-1.021-3.234c.51-.852 13.107 0 13.107 0s0 1.361-1.021 2.892c0 0-.34 9.533.17 10.555.51 1.02 8.34 9.703 9.532 14.129 1.192 4.426-4.7 31.832-4.7 31.832h-18.79"
fill="#f3f2f1"
/>
<path
d="M58.063 320.494s.114-.009.33-.013l.96-.014 3.696-.03c3.226-.013 7.91-.034 13.804-.06l-.114.093a500.129 500.129 0 002.305-11.713c.783-4.322 1.628-9.034 2.208-14.091.136-1.264.257-2.552.285-3.854.012-.649.007-1.313-.116-1.935-.148-.624-.405-1.239-.691-1.839-1.198-2.39-2.839-4.632-4.541-6.873a180.162 180.162 0 00-2.651-3.355c-.45-.563-.908-1.121-1.35-1.71a5.06 5.06 0 01-.323-.477 2.33 2.33 0 01-.143-.584c-.057-.375-.08-.74-.1-1.11-.128-2.947-.04-5.93.047-8.956l.001-.05.029-.045a6.81 6.81 0 00.389-.67c.334-.664.565-1.41.602-2.122l.17.18c-2.873-.181-5.711-.326-8.49-.37-1.38-.006-2.781-.045-4.084.16-.144.025-.342.093-.36.12a.684.684 0 00-.083.374c.005.3.097.618.207.923.228.61.544 1.2.885 1.75l.025.042.003.044c.124 2.176.21 4.318.22 6.425 0 1.054-.007 2.098-.119 3.138-.095 1.067-.566 2.047-1.137 2.892-.577.849-1.255 1.598-1.94 2.314-.69.708-1.372 1.407-2.087 2.064-.714.65-1.413 1.285-2.013 1.993a10.849 10.849 0 00-1.5 2.288c-.787 1.624-1.255 3.352-1.532 5.03-.114.833-.094 1.679-.029 2.501.057.824.17 1.632.284 2.423.503 3.162 1.231 6.044 1.912 8.651 1.394 5.209 2.716 9.31 3.621 12.125.46 1.394.815 2.476 1.06 3.223.119.357.21.633.275.833.062.189.085.285.085.285s-.046-.093-.115-.275l-.303-.823c-.263-.726-.642-1.804-1.117-3.205-.942-2.804-2.298-6.896-3.724-12.104-.697-2.608-1.441-5.49-1.96-8.668-.12-.796-.237-1.609-.297-2.444-.069-.833-.095-1.69.022-2.564.277-1.711.742-3.453 1.545-5.124.403-.832.916-1.63 1.534-2.355.613-.729 1.326-1.378 2.034-2.027.703-.648 1.384-1.349 2.068-2.055.678-.71 1.343-1.45 1.9-2.273.55-.82.99-1.744 1.076-2.745.107-1.008.113-2.05.113-3.097a122.919 122.919 0 00-.23-6.404l.028.084c-.356-.577-.677-1.17-.92-1.82-.117-.326-.222-.664-.231-1.043a.989.989 0 01.156-.592c.228-.217.392-.2.572-.254 1.39-.22 2.763-.173 4.161-.172 2.79.043 5.63.187 8.51.37l.178.01-.009.172c-.042.818-.287 1.573-.64 2.285a7.164 7.164 0 01-.411.709l.03-.094c-.087 3.017-.175 6.007-.05 8.923.019.362.043.728.096 1.074.018.186.06.334.108.478.09.14.178.28.292.425.43.575.89 1.138 1.338 1.7.902 1.124 1.795 2.239 2.652 3.364 1.708 2.253 3.352 4.5 4.57 6.94.292.616.556 1.243.715 1.914.133.685.131 1.353.12 2.014-.032 1.323-.157 2.614-.296 3.884-.593 5.074-1.452 9.785-2.251 14.107a463.711 463.711 0 01-2.36 11.71l-.02.093h-.094c-5.918-.027-10.62-.046-13.86-.06l-3.676-.03-.942-.014c-.21-.004-.312-.014-.312-.014"
fill="#17282f"
/>
<path
d="M75.22 318.023c1.948-6.854 3.678-16.52 4.273-24.33.072-.938.072-2.023-.637-2.643-.867-.758-2.196-.353-3.293-.003a19.863 19.863 0 01-9.987.53c-3.226-.663-6.425-2.141-9.676-1.603-.816.135-1.67.44-2.133 1.127-.527.782-.4 1.817-.25 2.75 1.275 8 3.886 17.198 6.009 24.172H75.22"
fill="#f03d5f"
/>
<path
d="M77.358 292.031c.016.016-.194.262-.614.667-.419.407-1.064.957-1.925 1.55-1.709 1.19-4.394 2.483-7.588 2.884-3.194.402-6.116-.186-8.066-.917a15.242 15.242 0 01-2.249-1.025c-.508-.29-.77-.476-.76-.494.033-.065 1.135.622 3.094 1.275 1.944.66 4.81 1.192 7.936.8 3.124-.393 5.769-1.619 7.49-2.737 1.737-1.119 2.635-2.056 2.682-2.003"
fill="#fff"
/>
</svg>
);
}
function BottomSheet({
descriptor,
fill,
color,
offset,
dragAreaClipPath,
icon,
title,
}) {
const [expanded, setExpanded] = useState(false);
const [{ y }, set] = useSpring(() => ({ y: 500 }));
const props = useDrag(
({ movement: [x, y], down, tap }) => {
if (!down && tap) {
set({ y: expanded ? 500 : 200 });
setExpanded(!expanded);
return;
}
if (!down) {
if (y >= THRESHOLD) {
set({ y: 500 });
setExpanded(false);
} else {
set({ y: 200 });
setExpanded(true);
}
} else {
set({ y });
}
},
{
initial: () => [0, y.get()],
bounds: { left: 0, right: 0, top: 200, bottom: 500 },
rubberband: true,
}
);
return (
<>
<animated.div className="bottomSheet" style={{ y }}>
<div style={{ transform: `translateX(${offset}px)` }}>
<Close
stroke={color}
scale={y.to({
range: [200, 300],
output: [1, 0],
extrapolate: "clamp",
})}
/>
<animated.div
style={{
x: y.to({
range: [200, 300],
output: [-16, 0],
extrapolate: "clamp",
}),
}}
>
{icon}
</animated.div>
</div>
<svg className="top" height="100" width="300">
<path className="drag" d={descriptor} fill={fill} />
</svg>
<div className="container" style={{ backgroundColor: fill }}>
<div className="content" style={{ color }}>
<div className="content-title">{title}</div>
<div className="content-subtitle">Recipe By Codewithshobhit...</div>
<div className="content-body">1 cup of this</div>
<div className="content-body">2½ cups of that</div>
<div className="content-body">⅗ cups of something else</div>
</div>
</div>
</animated.div>
<animated.div
className="drag-area"
{...props()}
style={{
y,
clipPath: `polygon(${dragAreaClipPath})`,
}}
/>
</>
);
}
function App() {
return (
<div className="App">
<div className="phone">
<div className="phone-content">
<span className="pre-title">Welcome to the</span>
<span className="title">Today's recipe</span>
<Cook />
</div>
<BottomSheet
descriptor="M 217.48438,0 C 207.79841,0 200,7.7984043 200,17.484375 V 23.984375 32.515625 C 200,42.201596 192.20159,50 182.51562,50 H 0 V 100 H 117.48438 182.51562 300 V 50 50 32.515625 23.984375 17.484375 C 300,7.7984043 292.20159,0 282.51562,0 Z"
fill="#addff2"
color="#328DAB"
offset={200}
dragAreaClipPath="0px 50px, 0px 360px, 300px 360px, 300px 50px, 300px 0px, 200px 0px, 200px 50px"
icon={<Fish fill="#328DAB" />}
title="Today's fish"
/>
<BottomSheet
descriptor="M 117.48438 0 C 107.79841 0 100 7.7984043 100 17.484375 L 100 23.984375 L 100 32.515625 C 100 42.201596 92.201595 50 82.515625 50 L 0 50 L 0 100 L 117.48438 100 L 182.51562 100 L 300 100 L 300 50 L 217.48438 50 C 207.79841 50 200 42.201596 200 32.515625 L 200 23.984375 L 200 17.484375 C 200 7.7984043 192.20159 1.0821526e-16 182.51562 0 L 117.48438 0 z"
fill="indianred"
color="#fff"
offset={100}
dragAreaClipPath="100px 50px, 0px 50px, 0px 360px, 300px 360px, 300px 50px, 200px 50px, 200px 0px, 100px 0px"
icon={<Veg fill="#fff" />}
title="Today's veg"
/>
<BottomSheet
descriptor="M 17.484377,0 C 7.7984075,0 -2.5e-6,7.7984043 -2.5e-6,17.484375 V 23.984375 32.515625 L 0,50 V 50 100 H 117.48438 182.51562 300 V 50 H 117.48438 C 107.79841,50 99.524951,42.18994 99.999998,32.515625 V 23.984375 17.484375 C 99.999998,7.7984043 92.201588,0 82.515618,0 Z"
fill="#eeb5c4"
color="#9e194c"
offset={0}
dragAreaClipPath="0px 0px, 0px 360px, 100% 360px, 300px 50px, 100px 50px, 100px 0px"
icon={<Chicken fill="#9e194c" />}
title="Today's chicken"
/>
</div>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
Live Preview
See the Pen Meet Recipe App Using HTML CSS And Javascript by Codewithshobhit (@Codewithshobhit) on CodePen.
Star
Fork
Download
How to run this Html Css and Js Project in Our Browser?
first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.
Which Code Editor do you use to create those projects?
I am using VS Code Studio.
is this project responsive or not?
Yes! this project is a responsive project.
If you enjoyed reading this post and have found it useful for you, then please give share it with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram
if you have any confusion Comment below or you can contact us by filling out our Contact Us form from the home section. 🤞🎉
No comments:
Post a Comment