<div class="viewport">
<div id="app">
<header>
<div class="left-content">
<a href="#" class="menu">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 7H21" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" />
<path d="M3 12H21" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" />
<path d="M3 17H21" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" />
</svg>
</a>
<h1>Category Shoes</h1>
</div>
<a href="#" class="shop-bag">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8.99999 22H15C19.02 22 19.74 20.39 19.95 18.43L20.7 12.43C20.97 9.99 20.27 8 16 8H7.99999C3.72999 8 3.02999 9.99 3.29999 12.43L4.04999 18.43C4.25999 20.39 4.97999 22 8.99999 22Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.4955 12H15.5045" stroke="#292D32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8.49451 12H8.50349" stroke="#292D32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</header>
<nav>
<ul>
<li></li>
</ul>
</nav>
<div class="search-container">
<div class="fake-input">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 20C15.9706 20 20 15.9706 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.9299 20.6898C19.4599 22.2898 20.6699 22.4498 21.5999 21.0498C22.4499 19.7698 21.8899 18.7198 20.3499 18.7198C19.2099 18.7098 18.5699 19.5998 18.9299 20.6898Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<input type="text" placeholder="Search">
</div>
<button class="filter">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 6.5H16" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M6 6.5H2" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10 10C11.933 10 13.5 8.433 13.5 6.5C13.5 4.567 11.933 3 10 3C8.067 3 6.5 4.567 6.5 6.5C6.5 8.433 8.067 10 10 10Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M22 17.5H18" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8 17.5H2" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M14 21C15.933 21 17.5 19.433 17.5 17.5C17.5 15.567 15.933 14 14 14C12.067 14 10.5 15.567 10.5 17.5C10.5 19.433 12.067 21 14 21Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="filters-category">
<div class="category active">
<div class="image">
<svg enable-background="new 0 0 512.002 512.002" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="m512 328.5c0-36.263-19.614-54.003-43.227-63.629-0.749-0.433-1.544-0.742-2.36-0.928-15.462-5.896-32.384-8.533-46.521-10.733-6.818-1.058-13.252-2.065-18.825-3.268-4.963-1.068-15.351-5.32-37.022-18.615-0.644-0.551-1.367-0.999-2.15-1.326-1.767-1.095-3.606-2.248-5.518-3.461 1.327-3.124 2.027-6.512 2.027-10.007 0-6.844-2.671-13.278-7.501-18.099-9.677-9.668-26.539-9.668-36.198 0l-0.067 0.067c-4.101-2.879-8.189-5.779-12.246-8.677 7.187-9.997 6.293-24.039-2.684-33.024-9.677-9.668-26.539-9.668-36.207 0l-2.639 2.638c-12.652-9.454-23.239-17.522-30.112-22.81-8.32-6.383-20.198-5.615-27.605 1.818l-17.527 17.519c-8.542 8.542-8.542 22.443 0 30.984l4.77 4.77c1.195 1.186 1.075 2.62 0.964 3.183-0.145 0.751-0.572 1.749-1.758 2.253-75.964 32.614-111.39-27.349-112.85-29.901-1.246-2.202-3.422-3.746-5.922-4.198-3.14-0.563-7.97-0.427-13.201 3.328-26.494 19.053-44.994 134.95-48.731 160.1l-8.421 24.55c-0.649 1.869-0.623 3.908 0.077 5.768 2.014 5.367 13.559 22.895 77.457 22.895l374.79-0.017c20.516-1.279 59.24-13.6 59.203-51.079-1e-3 -0.033 4e-3 -0.066 4e-3 -0.1zm-94.737-58.436c11.069 1.724 21.473 3.567 30.861 6.035-8.637 6.273-19.065 9.734-29.991 9.734-20.767 0-38.76-12.448-46.736-30.449 11.329 6.213 19.961 9.928 26.077 11.24 6.05 1.307 12.723 2.339 19.789 3.44zm-78.426-59.554c1.613 1.604 2.5 3.738 2.5 6.025 0 2.27-0.888 4.412-2.5 6.033l-0.387 0.387c-0.043 0.043-0.086 0.085-0.129 0.129l-17.583 17.583c-3.337 3.337-8.747 3.337-12.075 0-3.328-3.328-3.319-8.738 0-12.066l18.108-18.099c3.216-3.235 8.831-3.243 12.066 8e-3zm-57.237-44.143c2.278 0 4.42 0.887 6.033 2.5 3.328 3.328 3.328 8.738 0 12.066l-18.099 18.099c-3.328 3.337-8.747 3.328-12.075 0-1.613-1.604-2.492-3.746-2.492-6.033 0-2.278 0.887-4.42 2.492-6.033l10.41-10.405c0.035-0.037 0.073-0.07 0.108-0.108l7.59-7.586c1.613-1.613 3.755-2.5 6.033-2.5zm-85.274 46.473c6.11-2.62 10.513-8.124 11.785-14.711 1.297-6.741-0.819-13.645-5.658-18.475l-4.762-4.77c-1.894-1.894-1.894-4.958 0-6.852l17.527-17.519c1.374-1.382 3.593-1.536 5.129-0.35 6.556 5.033 16.465 12.597 28.313 21.472l-3.267 3.266c-4.83 4.83-7.492 11.264-7.492 18.099 0 6.844 2.662 13.269 7.492 18.099 4.992 4.992 11.546 7.484 18.108 7.484 6.554 0 13.107-2.492 18.099-7.484l8.839-8.839c3.952 2.83 7.942 5.664 11.944 8.485l-5.795 5.79c-9.967 9.984-9.967 26.214 0 36.198h9e-3c4.992 4.992 11.546 7.484 18.108 7.484 6.554 0 13.107-2.492 18.099-7.484l12.806-12.806c1.654 1.055 3.274 2.079 4.86 3.071 4.149 33.942 33.023 59.902 67.664 59.902 18.396 0 35.741-7.335 48.53-20.304 15.271 7.205 25.492 18.326 27.783 37.37h-467.29c3.05-19.306 6.614-38.03 10.398-55.178 11.421 8.05 25.123 12.511 39.249 12.511 32.532 0 59.832-22.453 66.621-53.426 15.403 0.508 33.025-2.497 52.905-11.033zm-130.68-31.574c7.833 10.675 27.927 33.45 60.735 40.521-5.666 22.391-25.752 38.447-49.582 38.447-12.973 0-25.479-5.026-34.945-13.893 8.359-33.862 17.238-58.806 23.792-65.075zm386.62 181.36h-374.26c-40.201 0-54.963-7.219-59.785-10.752l5.096-14.845h470.46c-6.703 22.967-40.411 25.513-41.509 25.597z" />
<path d="m181.23 299.87c0.01 0.011 0.018 0.023 0.028 0.035 0.021 0.024 0.038 0.05 0.059 0.074 0.08 0.092 0.168 0.173 0.252 0.26 0.104 0.11 0.206 0.222 0.315 0.327 0.057 0.054 0.118 0.104 0.176 0.157 0.163 0.148 0.33 0.291 0.505 0.427 0.017 0.013 0.034 0.024 0.051 0.037 0.825 0.628 1.773 1.121 2.831 1.421 0.777 0.222 1.562 0.324 2.338 0.324 2.399 0 4.666-1.019 6.262-2.746l45.834-40.109-9.105 31.983c-1.297 4.531 1.331 9.259 5.871 10.547 0.777 0.222 1.562 0.324 2.338 0.324 3.721 0 7.134-2.441 8.201-6.195l17.033-59.759c1.033-3.644-0.452-7.526-3.644-9.557-3.183-2.022-7.339-1.69-10.189 0.785l-46.453 40.646 9.085-31.873c1.289-4.54-1.34-9.259-5.871-10.556-4.523-1.323-9.25 1.331-10.547 5.871l-16.771 58.88c-1.147 2.847-0.712 6.208 1.401 8.697z" />
</svg>
</div>
<div class="name">Sneakers</div>
</div>
<div class="category">
<div class="image">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.042 512.042" style="enable-background:new 0 0 512.042 512.042;" xml:space="preserve">
<path d="M509.41,285.857l-8.544-19.961c-0.062-0.145-0.148-0.274-0.217-0.415c-1.405-3.563-3.674-7.096-7-10.449
c-13.832-13.941-43.274-21.605-92.647-21.5c-0.306,0-0.616,0.002-0.924,0.003c-1.215,0.005-2.437,0.013-3.676,0.027
c-0.841,0.009-1.692,0.022-2.544,0.036c-0.715,0.012-1.429,0.023-2.151,0.038c-1.378,0.027-2.773,0.062-4.179,0.1
c-0.129,0.004-0.253,0.005-0.382,0.009l-39.094-18.396l0.283-0.481c2.388-4.063,1.029-9.293-3.034-11.68
s-9.293-1.029-11.68,3.034l-1.076,1.83l-19.089-8.982l0.745-1.268c2.388-4.063,1.029-9.293-3.034-11.68
c-4.063-2.388-9.293-1.029-11.68,3.034l-1.538,2.618l-19.089-8.982l1.208-2.055c2.388-4.063,1.029-9.293-3.034-11.68
c-4.063-2.388-9.293-1.029-11.68,3.034l-2.001,3.405l-19.089-8.982l1.67-2.843c2.388-4.063,1.029-9.293-3.034-11.68
c-4.063-2.388-9.293-1.029-11.68,3.034l-2.463,4.192l-22.792-10.725c-3.898-1.834-8.553-0.475-10.851,3.169
c-0.889,1.41-2.811,4.099-5.736,7.639c-4.949,5.989-10.852,11.994-17.669,17.592c-4.23,3.474-8.584,6.616-13.051,9.434
c-0.322,0.146-0.643,0.305-0.957,0.496c-27.349,16.639-58.866,20.838-95.056,7.716c-0.322-0.117-0.645-0.208-0.968-0.285
c-8.825-3.316-17.923-7.646-27.313-13.115c-1.182-0.688-2.438-1.044-3.685-1.133c-6.901-1.739-13.609-11.559-13.609-20.661
c0-4.713-3.82-8.533-8.533-8.533s-8.533,3.821-8.533,8.533c0,14.104,8.42,28.597,20.317,34.84
c-0.567,3.004-1.178,6.241-1.829,9.673c-2.406,12.69-4.838,25.379-7.141,37.219c-0.323,1.661-0.323,1.661-0.647,3.32
c-5.292,27.113-9.114,45.528-10.229,48.988c-0.219,0.633-0.365,1.3-0.429,1.993c-0.012,0.127-0.014,0.252-0.02,0.379
c-0.007,0.139-0.022,0.276-0.022,0.417v50.901c0,4.64,3.707,8.43,8.346,8.531c0.878,0.019,0.878,0.019,5.054,0.112
c5.714,0.127,8.902,0.198,14.287,0.319c15.386,0.346,32.531,0.738,50.995,1.167c52.753,1.226,105.506,2.508,154.74,3.781
c25.951,0.671,50.263,1.324,72.639,1.952c14.707,0.413,28.514,0.813,41.355,1.201c70.483,2.135,118.744-10.72,149.103-32.552
C510.725,321.348,515.591,302.632,509.41,285.857z M232.252,298.179c-1.132-0.022-2.269-0.047-3.404-0.07
c-21.117-0.441-42.959-1.099-65.382-1.957c3.4-10.084,12.935-17.346,24.167-17.346h68.471c12.171,0,22.35,8.528,24.889,19.933
c-1.489-0.003-2.984-0.008-4.486-0.014c-0.279-0.001-0.557-0.002-0.836-0.003c-1.26-0.006-2.53-0.013-3.8-0.021
c-1.125-0.007-2.25-0.014-3.381-0.022c-0.796-0.006-1.594-0.012-2.393-0.019c-1.708-0.014-3.421-0.03-5.141-0.047
c-0.395-0.004-0.789-0.008-1.185-0.012c-3.279-0.035-6.585-0.077-9.906-0.124c-1.713-0.024-3.428-0.049-5.15-0.076
c-1.26-0.02-2.526-0.041-3.791-0.063c-1.456-0.025-2.915-0.051-4.377-0.078C235.118,298.234,233.689,298.207,232.252,298.179z
M392.313,250.696c0.666-0.013,1.329-0.026,1.987-0.037c0.699-0.011,1.403-0.023,2.093-0.031c0.547-0.007,1.083-0.01,1.624-0.014
c46.722-0.379,72.993,6.198,83.157,16.443c3.221,3.247,4.093,6.151,3.771,8.721c-10.292,9.508-45.696,16.696-99.856,20.248l0,0
L392.313,250.696z M182.538,190.079c7.714-6.334,14.379-13.114,19.994-19.91c0.943-1.141,1.804-2.216,2.583-3.218l14.958,7.039
l-5.562,9.465c-2.388,4.063-1.029,9.293,3.034,11.68s9.293,1.029,11.68-3.034l6.355-10.815l19.089,8.982l-6.025,10.252
c-2.388,4.063-1.029,9.293,3.034,11.68c4.063,2.388,9.293,1.029,11.68-3.034l6.818-11.602l19.089,8.982l-6.487,11.04
c-2.388,4.063-1.029,9.293,3.034,11.68s9.293,1.029,11.68-3.034l7.28-12.389l19.089,8.982l-6.95,11.827
c-2.388,4.063-1.029,9.293,3.034,11.68c4.063,2.388,9.293,1.029,11.68-3.034l7.743-13.176l36.224,17.045l-7.944,49.848
c-20.876,0.996-44.087,1.562-69.357,1.696c-2.738-20.863-20.574-36.976-42.187-36.976h-68.471
c-20.472,0-37.561,14.455-41.636,33.711c-15.678-0.664-31.485-1.414-47.348-2.244c-23.192-1.214-44.945-2.514-64.632-3.814
c-5.417-0.358-10.361-0.695-14.811-1.007c1.936-8.837,4.708-22.595,8.246-40.722c0.325-1.664,0.325-1.664,0.649-3.331
c2.309-11.87,4.745-24.584,7.156-37.298c0.353-1.859,0.694-3.663,1.023-5.404c5.037,2.576,10.008,4.843,14.921,6.845v2.07
c0,23.563,19.104,42.667,42.667,42.667h34.133c23.563,0,42.667-19.104,42.667-42.667v-11.664
C174.718,196.182,178.678,193.249,182.538,190.079z M153.602,208.52v2.025c0,14.137-11.463,25.6-25.6,25.6H93.869
c-12.802,0-23.405-9.402-25.295-21.676C99.812,223.26,128.284,220.386,153.602,208.52z M486.549,317.732
c-27.112,19.497-71.692,31.372-138.617,29.344c-12.855-0.388-26.674-0.788-41.392-1.202c-22.39-0.628-46.714-1.281-72.677-1.953
c-49.251-1.274-102.018-2.556-154.785-3.782c-18.468-0.429-35.617-0.821-51.008-1.167c-4.264-0.096-7.15-0.161-11.004-0.246
v-33.379c4.713,0.332,9.999,0.693,15.825,1.078c19.758,1.305,41.585,2.609,64.855,3.827
c52.015,2.722,103.454,4.606,151.681,5.288c0.059,0.001,0.118,0.002,0.177,0.003c0.877,0.012,1.762,0.027,2.637,0.039
c11.999,0.159,23.601,0.243,34.817,0.254c0.053,0,0.106,0,0.158,0c1.798,0.002,3.586,0.001,5.364-0.001
c0.118,0,0.235,0,0.353-0.001c1.745-0.003,3.48-0.007,5.205-0.013c0.109,0,0.216-0.001,0.325-0.001
c10.852-0.041,21.314-0.158,31.372-0.354c0.042-0.001,0.084-0.002,0.126-0.002c1.393-0.027,2.774-0.057,4.151-0.088
c0.381-0.008,0.765-0.016,1.146-0.025c1.238-0.028,2.466-0.058,3.691-0.089c0.498-0.012,0.997-0.025,1.492-0.038
c1.147-0.03,2.287-0.061,3.423-0.093c0.575-0.016,1.15-0.033,1.723-0.049c1.076-0.032,2.147-0.065,3.213-0.098
c0.613-0.019,1.225-0.039,1.835-0.059c1.025-0.034,2.047-0.068,3.063-0.104c0.648-0.023,1.293-0.046,1.938-0.07
c0.975-0.036,1.949-0.072,2.915-0.109c0.67-0.026,1.334-0.053,1.999-0.08c0.94-0.038,1.881-0.076,2.813-0.116
c0.668-0.028,1.328-0.058,1.991-0.088c0.921-0.041,1.843-0.081,2.755-0.124c0.681-0.032,1.353-0.065,2.029-0.098
c0.879-0.042,1.761-0.084,2.632-0.128c0.753-0.038,1.495-0.079,2.241-0.118c1.343-0.071,2.676-0.144,4-0.219
c0.927-0.053,1.856-0.105,2.773-0.159c0.615-0.037,1.221-0.075,1.832-0.113c0.891-0.055,1.783-0.109,2.664-0.166
c0.628-0.04,1.247-0.082,1.87-0.124c0.849-0.056,1.699-0.113,2.54-0.171c0.624-0.043,1.241-0.088,1.86-0.132
c0.836-0.06,1.672-0.12,2.499-0.181c0.597-0.044,1.19-0.09,1.782-0.135c0.837-0.064,1.67-0.129,2.497-0.195
c0.576-0.046,1.148-0.093,1.719-0.139c0.838-0.069,1.671-0.139,2.5-0.21c0.545-0.047,1.089-0.094,1.63-0.141
c0.853-0.075,1.699-0.151,2.542-0.228c0.501-0.046,1.003-0.092,1.5-0.138c0.888-0.083,1.767-0.169,2.643-0.254
c0.442-0.043,0.887-0.086,1.326-0.13c0.947-0.095,1.884-0.192,2.817-0.29c0.358-0.038,0.72-0.074,1.076-0.112
c1.137-0.121,2.262-0.245,3.378-0.371c0.139-0.016,0.282-0.031,0.421-0.047c2.584-0.294,5.11-0.6,7.578-0.918
c0.099-0.013,0.196-0.026,0.295-0.039c1.104-0.143,2.198-0.289,3.279-0.437c0.25-0.034,0.495-0.07,0.744-0.104
c0.931-0.129,1.856-0.26,2.77-0.393c0.291-0.042,0.578-0.086,0.867-0.128c0.86-0.127,1.714-0.256,2.557-0.386
c0.313-0.049,0.624-0.098,0.935-0.147c0.812-0.128,1.617-0.257,2.414-0.388c0.317-0.052,0.632-0.105,0.947-0.157
c0.788-0.132,1.568-0.265,2.342-0.4c0.301-0.053,0.602-0.105,0.901-0.158c0.787-0.14,1.565-0.281,2.336-0.425
c0.27-0.05,0.542-0.1,0.81-0.151c0.81-0.153,1.61-0.308,2.403-0.465c0.215-0.043,0.433-0.085,0.648-0.127
c0.873-0.175,1.734-0.352,2.586-0.532c0.126-0.027,0.256-0.053,0.382-0.079c3.978-0.845,7.72-1.743,11.222-2.695
c0.119-0.032,0.234-0.065,0.352-0.098c0.737-0.202,1.465-0.406,2.18-0.613c0.175-0.051,0.346-0.102,0.52-0.153
c0.651-0.191,1.295-0.383,1.928-0.578c0.2-0.061,0.396-0.124,0.594-0.185c0.6-0.188,1.193-0.377,1.776-0.569
c0.205-0.067,0.408-0.135,0.611-0.203c0.569-0.19,1.13-0.382,1.682-0.576c0.199-0.07,0.397-0.139,0.594-0.21
c0.55-0.196,1.09-0.395,1.624-0.595c0.184-0.069,0.369-0.138,0.551-0.207c0.548-0.209,1.085-0.421,1.615-0.634
c0.154-0.062,0.31-0.123,0.462-0.185c0.571-0.233,1.128-0.469,1.678-0.706c0.101-0.044,0.206-0.087,0.306-0.131
c1.975-0.864,3.813-1.76,5.51-2.688c0.045-0.025,0.088-0.05,0.133-0.075c0.503-0.277,0.995-0.557,1.473-0.84
c0.126-0.074,0.245-0.15,0.369-0.225c0.391-0.236,0.777-0.473,1.15-0.712c0.152-0.097,0.298-0.196,0.447-0.294
c0.226-0.149,0.459-0.296,0.678-0.446l0.423,0.986C497.023,301.602,494.277,312.164,486.549,317.732z" />
<path d="M196.268,244.676h51.2c4.713,0,8.533-3.82,8.533-8.533s-3.82-8.533-8.533-8.533h-51.2c-4.713,0-8.533,3.82-8.533,8.533
S191.556,244.676,196.268,244.676z" />
</svg>
</div>
<div class="name">Jordan</div>
</div>
<div class="category">
<div class="image">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 514.81 514.81" style="enable-background:new 0 0 514.81 514.81;" xml:space="preserve">
<g transform="translate(0 -1)">
<path d="M127.858,270.334c5.12,0,8.533-3.413,8.533-8.533s-3.413-8.533-8.533-8.533c-5.12,0-8.533,3.413-8.533,8.533
S122.738,270.334,127.858,270.334z" />
<path d="M127.858,236.201c5.12,0,8.533-3.413,8.533-8.533c0-5.12-3.413-8.533-8.533-8.533c-5.12,0-8.533,3.413-8.533,8.533
C119.325,232.788,122.738,236.201,127.858,236.201z" />
<path d="M505.885,267.774c-0.255-0.446-0.546-0.847-0.853-1.227v-1.333c0-5.973-5.12-12.8-14.507-17.067
c-13.653-6.827-36.693-11.093-70.827-11.093c-0.853,0-1.707,0-2.56,0c-9.387,0-19.627,0-29.867-1.707
c-15.36-2.56-24.747-8.533-26.453-15.36c-0.853-2.56-2.56-4.267-4.267-5.973c-0.853,0-1.707-0.853-2.56-0.853
c-2.56-0.853-4.267-0.853-6.827-0.853s-5.12,0.853-7.68,1.707l-6.827-5.12c-0.853-1.707-1.707-3.413-2.56-5.12
c-5.12-9.387-14.507-12.8-24.747-7.68l-5.973-2.56c-0.773-0.773-0.852-2.238-1.492-3.143c-0.427-1.015-1.067-1.976-1.921-2.83
c-0.31-0.31-0.639-0.582-0.975-0.836c-4.436-4.48-10.832-6.374-17.799-4.284c-1.707-0.853-2.56-1.707-4.267-2.56
c-1.707-1.707-3.413-2.56-4.267-3.413s-0.853-2.56-1.707-4.267c-4.267-6.827-11.947-9.387-19.627-5.12
c-0.853,0-1.707,0-2.56-0.853c-3.413-1.707-7.68-5.12-11.947-11.093c-7.68-11.093-23.893-19.627-37.547-19.627
c-17.067,0-26.453,13.653-22.187,34.133c-1.707,1.707-3.413,3.413-5.973,5.12c-10.24,6.827-25.6,10.24-46.933,8.533
c-0.853,0-2.56,0-4.267-0.853c-3.413-0.853-7.68-2.56-11.093-3.413c-4.267-2.56-8.533-5.12-10.24-7.68
c-6.827-8.533-21.333-14.507-34.987-14.507c-4.869,0-9.389,0.697-13.306,2.067c-11.548-2.373-20.827-13.075-20.827-25.107
c0-5.12-3.413-8.533-8.533-8.533s-8.533,3.413-8.533,8.533c0,17.249,9.786,31.825,24.217,38.601
c-0.039,0.141-0.068,0.285-0.104,0.427c-0.052,0.22-0.104,0.439-0.149,0.663c-0.252,1.198-0.395,2.435-0.393,3.718
c0,0.008-0.001,0.016-0.001,0.024c0,0.054,0.002,0.108,0.002,0.162c-0.011,1.335,0.091,2.732,0.322,4.192
c0.59,5.897,0.771,10.162,0.546,12.799c-0.245,0.688-0.546,1.2-0.546,1.708c-1.707,0.853-2.56,0.853-3.413,1.707
c-2.56,3.413-6.827,9.387-10.24,17.92c-9.387,20.48-13.653,43.52-6.827,67.413v0.81c-1.164,0.946-2.36,2.052-3.413,3.456
c-8.533,8.533-11.093,21.333-2.56,34.133c-0.853,0.853-0.853,0.853-0.853,1.707c-5.12,9.387-6.827,18.773-2.56,28.16
c5.973,16.213,27.307,26.453,64.853,30.72c2.56,0,4.267-0.853,6.827-1.707c0.853-0.853,2.56-1.707,5.12-3.413
c4.267-2.56,7.68-3.413,11.093-3.413c4.267,0,6.827,3.413,10.24,11.093c1.707,3.413,5.12,5.973,9.387,5.12
c0.853,0,2.56,0,5.12-0.853c4.267-0.853,9.387-1.707,14.507-2.56c14.507-2.56,29.013-5.973,43.52-10.24
c11.093-3.413,21.333-6.827,30.72-11.093c0.853,0,3.413-0.853,6.827-1.707c4.267-0.853,8.533-1.707,11.947-1.707
c5.973-0.853,10.24,0.853,11.093,1.707c6.827,7.68,27.307,18.773,44.373,23.893c23.04,6.827,41.813,3.413,51.2-13.653
c1.707,0,2.56,0,4.267,0.853c2.56,0.853,4.267,2.56,5.12,6.827c0.853,2.56,2.56,4.267,4.267,5.12s4.267,1.707,7.68,2.56
c7.68,2.56,15.36,3.413,23.893,1.707c11.093-1.707,19.627-7.68,25.6-17.067l4.267-1.707c1.707,0.853,2.56,1.707,4.267,2.56
c6.827,3.413,14.507,5.973,22.187,5.12c10.24-0.853,19.627-6.827,24.747-18.773l7.68-5.12h5.973c0.853,0,1.707,0,2.56-0.853
c5.12-2.56,12.8-6.827,21.333-13.653C515.272,322.388,522.098,296.788,505.885,267.774z M39.965,211.454
c0.853-0.853,0.853-0.853,1.707-1.707c1.707-0.853,2.56-2.56,3.413-4.267c2.352-4.116,3.488-9.448,3.409-16.273
c-0.02-3.021-0.267-6.374-0.732-10.087c18.698,14.512,28.897,37.504,28.897,61.347c0,18.717-6.789,36.584-18.669,51.068
c-0.858-0.191-1.743-0.407-2.653-0.647c-3.682-1.136-7.636-2.433-11.818-3.955c-4.835-1.922-10.047-4.326-15.5-7.214
c-1.903-7.293-2.74-14.586-2.61-21.792c0.251-12.321,3.251-24.185,8.583-35.382C35.698,218.281,38.258,214.868,39.965,211.454z
M80.072,180.734c4.267,5.12,10.24,9.387,17.067,12.8c7.68,3.413,15.36,5.12,20.48,5.973c25.6,2.56,44.373-1.707,58.027-11.093
c6.827-4.267,11.093-9.387,13.653-12.8c0.853-1.707,1.707-4.267,0.853-5.973c-3.413-13.653-0.853-17.067,5.12-17.067
c7.68,0,18.773,5.973,23.04,12.8c6.107,9.16,12.82,14.676,19.235,17.458l-19.235,19.235c-3.413,3.413-3.413,8.533,0,11.947
s8.533,3.413,11.947,0l26.17-26.17c1.762,1.942,4.004,4.001,6.257,5.69c3.941,2.365,7.144,4.711,9.629,5.731l-20.722,20.722
c-3.413,3.413-3.413,8.533,0,11.947s8.533,3.413,11.947,0l24.598-24.598l10.388,6.678c0.388,0.194,0.788,0.363,1.195,0.512
l-17.408,17.408c-3.413,3.413-3.413,8.533,0,11.947c3.413,3.413,8.533,3.413,11.947,0l23.359-23.359
c0.17,0.115,0.345,0.224,0.535,0.319l16.213,11.947c3.413,2.56,10.24-3.413,11.947-1.707c5.973,11.093,19.627,17.92,36.693,20.48
c11.093,1.707,23.04,2.56,33.28,1.707c0.853,0,1.707,0,2.56,0c31.573,0,52.053,3.413,63.147,9.387
c2.56,1.707,4.267,2.56,5.12,4.267c0,0-0.853,1.707-1.707,2.56c-1.707,3.413-4.267,6.827-5.973,9.387
c-1.707,2.56-2.56,4.267-4.267,5.973c-1.707,2.56-3.413,4.267-5.12,5.12l-1.707,0.853c-0.853,0.853-2.56,2.56-5.973,5.12
c-5.12,4.267-11.947,8.533-20.48,12.8c-51.2,25.6-127.147,28.16-232.107-8.533c-2.56-0.853-9.387-3.413-17.92-5.12
c-28.16-5.12-64.853-6.827-111.787-0.853c-0.534,0-1.116-0.001-1.737-0.007c10.546-15.802,16.243-34.513,16.243-53.753
c0-25.01-9.652-48.491-25.81-66.149C74.112,175.688,78.455,178.04,80.072,180.734z M479.432,326.654
c-3.413,3.413-7.68,5.973-11.947,8.533c-1.707,0.853-2.56,1.707-3.413,1.707l-6.827,0.853c-1.707,0-2.56,0.853-4.267,1.707
l-11.947,7.68c-1.707,0.853-2.56,2.56-3.413,4.267c-3.413,7.68-6.827,10.24-11.093,11.093c-3.413,0-8.533-0.853-12.8-3.413
c-2.56-1.707-4.267-2.56-5.973-3.413c-2.56-1.707-5.12-2.56-7.68-1.707l-11.947,4.267c-2.56,0.853-4.267,2.56-5.12,4.267
c-3.413,6.827-7.68,10.24-14.507,11.093c-5.12,0.853-11.093,0-16.213-1.707c-0.853,0-1.707-0.853-1.707-0.853
c-3.413-6.827-8.533-11.093-14.507-12.8c-5.12-1.707-10.24-1.707-15.36-0.853c-0.853,0-2.56,0.853-2.56,0.853
c-2.56,0.853-4.267,2.56-5.12,5.12c-3.413,10.24-14.507,12.8-32.427,7.68c-14.507-4.267-31.573-13.653-36.693-18.773
c-5.973-5.973-14.507-8.533-24.747-7.68c-5.12,0-9.387,0.853-14.507,2.56c-4.267,0.853-6.827,1.707-8.533,2.56
c-8.533,4.267-17.92,7.68-29.013,10.24c-12.8,4.267-27.307,6.827-41.813,10.24c-4.267,0.853-8.533,1.707-12.8,2.56
c-5.12-9.387-12.8-14.507-21.333-15.36c-6.827-0.853-14.507,1.707-21.333,5.12c-1.707,0.853-3.413,1.707-4.267,2.56
c-29.013-3.413-43.52-11.093-46.933-19.627c-1.707-4.267-0.853-8.533,1.707-13.653c0.853-1.707,2.56-3.413,2.56-4.267
c2.56-3.413,2.56-7.68,0-11.093c-6.827-8.533-5.973-14.507-1.707-19.627c16.213,6.827,29.867,11.093,41.813,13.653
c8.533,1.707,15.36,2.56,20.48,2.56c0.045-0.005,0.089-0.009,0.133-0.014c0.237,0.003,0.49,0.014,0.72,0.014
c21.304-2.367,40.232-3.455,57.047-3.437c19.189,0.063,35.603,1.578,49.62,4.291c5.12,0.853,8.533,1.707,11.947,2.56
c1.707,0.853,3.413,0.853,3.413,0.853c56.352,19.811,104.982,28.72,146.475,28.835c37.624,0.118,69.445-7.028,95.813-19.854
c0.879-0.427,1.752-0.861,2.618-1.301c15.36-7.68,25.6-15.36,30.72-21.333c2.56-1.707,5.12-4.267,7.68-7.68
c1.707-1.707,3.413-4.267,5.12-6.827C498.205,303.614,492.232,315.561,479.432,326.654z" />
<path d="M218.312,286.548c49.493,17.067,94.72,26.453,134.827,26.453c5.12,0,8.533-3.413,8.533-8.533
c0-5.973-4.267-9.387-8.533-9.387c-37.547,0-81.067-8.533-128.853-24.747c-4.267-1.707-9.387,0.853-11.093,5.12
S214.045,284.841,218.312,286.548z" />
</g>
</svg>
</div>
<div class="name">Sport</div>
</div>
<div class="category">
<div class="image">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.124 512.124" style="enable-background:new 0 0 512.124 512.124;" xml:space="preserve">
<g transform="translate(0 -1)">
<path d="M507.541,290.497c-19.933-19.749-46.038-36.307-78.313-45.178c-28.344-7.791-51.202-15.737-72.147-25.581
c-28.49-13.383-53.035-26.376-70.786-38.068c-4.271-2.813-10.039-1.264-12.326,3.31l-26.378,52.756L44.658,189.031
c-0.025-0.006-0.051-0.006-0.076-0.012c-0.384-0.088-0.776-0.152-1.178-0.186c-0.079-0.007-0.157-0.007-0.236-0.012
c-0.167-0.01-0.332-0.025-0.502-0.025c-9.435,0-17.067-7.631-17.067-17.067c0-4.713-3.82-8.533-8.533-8.533
s-8.533,3.82-8.533,8.533c0,14.174,8.625,26.319,20.916,31.481c-4.006,7.441-7.997,15.729-11.73,24.711
C6.657,254.542,0,281.793,0,308.262v17.067c0,14.142,11.458,25.6,25.6,25.6h443.733c23.563,0,42.667-19.104,42.667-42.667
c0-0.967-0.168-1.892-0.465-2.759C512.935,300.516,511.897,294.819,507.541,290.497z M285.004,201.07
c17.534,10.788,39.697,22.313,64.819,34.114c21.942,10.313,45.673,18.563,74.881,26.591c27.595,7.585,50.241,21.409,67.829,37.954
H235.675l22.073-44.14l2.078-4.154c0.01-0.02,0.016-0.041,0.026-0.061L285.004,201.07z M232.477,267.958L39.594,220.923
c1.971-4.079,3.958-7.924,5.921-11.501c0.456-0.832,0.887-1.606,1.291-2.322l192.948,46.308l-2.736,5.471L232.477,267.958z
M32.546,236.771l192.104,46.845l-4.42,8.84l-3.637,7.273H17.321C18.532,279.143,24.028,257.818,32.546,236.771z M469.333,333.862
H25.6c-4.716,0-8.533-3.817-8.533-8.533v-8.533h204.8h0.001h271.609C489.962,326.738,480.479,333.862,469.333,333.862z" />
</g>
</svg>
</div>
<div class="name">Sport</div>
</div>
<div class="category">
<div class="image">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g transform="translate(0 -1)">
<path d="M137.829,359.049c0.136,0.035,0.279,0.055,0.411,0.099C138.057,359.102,137.927,359.071,137.829,359.049z" />
<path d="M512,323.308c-1.707-9.387-7.68-17.067-16.213-23.04c-5.12-4.267-11.093-6.827-14.507-8.533
c-0.853-0.853-2.56-0.853-3.413-0.853c-1.707,0-4.267,0-7.68,0c-6.827,0-13.653-0.853-21.333-1.707
c-22.187-1.707-44.373-5.12-64.853-9.387c-37.547-8.533-64.853-20.48-79.36-36.693c-1.707-1.707-2.56-3.413-4.267-5.12
c-5.509-6.01-11.093-11.566-16.728-16.695c-0.112-0.125-0.218-0.252-0.339-0.372c-0.337-0.337-0.695-0.632-1.063-0.902
c-6.435-5.764-12.935-10.945-19.468-15.562c0.301-0.201,0.602-0.401,0.903-0.602c9.387-5.973,17.92-8.533,25.6-6.827
c4.267,0.853,7.68,2.56,11.947,6.827c17.92,17.067,34.133,14.507,43.52-1.707c2.56-4.267,4.267-8.533,5.12-11.093
c0.853-4.267-1.707-9.387-5.973-10.24c-4.267-0.853-9.387,1.707-10.24,5.973c0,1.707-1.707,4.267-2.56,6.827
c-4.267,6.827-7.68,7.68-17.067-1.707c-6.827-6.827-13.653-10.24-21.333-11.947c-12.8-2.56-25.6,1.707-38.4,9.387
c-2.669,1.525-4.979,3.218-6.966,4.856c-0.356-0.821-0.867-1.596-1.567-2.296c0,0-0.853-0.853-1.707-2.56
c-1.707-1.707-3.413-4.267-4.267-6.827c-2.56-3.413-4.267-7.68-5.12-10.24c-2.56-7.68-0.853-10.24,7.68-11.093
c17.92-2.56,27.307-11.093,28.16-23.893c0-5.12-1.707-10.24-4.267-15.36c-1.707-2.56-2.56-5.12-4.267-5.973
c-2.56-3.413-8.533-4.267-11.947-1.707s-4.267,8.533-1.707,11.947c0.853,0.853,1.707,1.707,2.56,3.413
c1.707,2.56,2.56,5.12,2.56,7.68c0,3.413-2.56,5.973-12.8,7.68c-20.48,2.56-27.307,16.213-22.187,33.28
c0.359,1.077,0.722,2.112,1.097,3.13c-1.664-0.57-3.177-1.042-4.51-1.423c-2.56-0.853-5.973,0-7.68,2.56l-17.067,17.067
c-58.027,56.32-104.96,59.733-141.653,33.28c-5.12-3.413-8.533-6.827-11.947-11.093c-1.707-1.707-3.413-3.413-4.267-4.267
c-3.413-5.12-11.093-4.267-13.653,0c-15.36,23.893-20.48,51.2-17.92,79.36c0.853,10.24,2.56,19.627,5.12,28.16
c0.033,0.1,0.065,0.198,0.097,0.298C2.351,326.238,0,329.303,0,333.548v42.667c0,5.12,3.413,8.533,8.533,8.533H128
c2.56,0,4.267-0.853,5.973-2.56l5.12-5.12c3.413,0.853,7.68,2.56,11.093,2.56c11.947,3.413,25.6,5.973,40.96,8.533
c60.587,11.093,122.027,16.213,179.2,11.093c52.907-5.12,99.84-18.773,137.387-41.813c2.56-1.707,4.267-4.267,4.267-6.827v-25.6
c0-0.492-0.05-0.966-0.126-1.429L512,323.308z M469.333,307.095c2.56,0,4.267,0,5.973,0c0.853,0,1.707,0.853,2.56,0.853
c2.56,1.707,5.12,3.413,7.68,5.12c3.413,2.56,5.12,5.12,6.827,6.827c-0.35,0.7-0.703,1.107-1.112,1.409
c-0.729,0.365-1.485,0.743-2.301,1.151c-8.533,4.267-19.627,7.68-32.427,11.093c-45.825,12.951-101.556,19.487-168.001,16.59
c15.004-13.541,50.089-21.478,95.468-24.27c16.633-0.792,31.784-9.679,40.017-23.233c7.741,0.987,15.486,1.871,23.129,2.753
C454.827,306.241,462.507,306.241,469.333,307.095z M302.933,266.988c22.187,17.92,57.173,28.16,99.84,34.987
c-6.827,5.12-13.653,7.68-21.333,7.68c-58.027,3.413-99.84,15.36-113.493,39.253c-34.987-2.56-73.387-7.68-112.64-15.36
c8.533-18.773,46.933-29.013,102.4-32.427C279.04,299.415,299.52,264.428,302.933,266.988z M27.307,236.268
c3.413,3.413,6.827,5.973,11.093,9.387c43.52,31.573,99.84,27.307,163.84-34.987l13.653-13.653c0.853,0,0.853,0,1.707,0.853
c5.12,1.707,11.093,4.267,17.067,7.68c0.184,0.096,0.37,0.202,0.554,0.299l-10.794,10.794c-3.413,3.413-3.413,8.533,0,11.947
c3.413,3.413,8.533,3.413,11.947,0l13.769-13.769c5.215,3.506,10.438,7.406,15.613,11.693l-15.729,15.729
c-3.413,3.413-3.413,8.533,0,11.947s8.533,3.413,11.947,0l16.377-16.377c3.41,3.306,6.776,6.772,10.077,10.403
c0.527,0.527,0.969,0.969,1.383,1.383c-0.808,1.072-1.383,2.261-1.383,3.737c-1.707,17.067-15.36,29.013-32.427,29.867
c-64.597,3.891-109.312,17.014-117.326,47.13c-2.981-0.626-5.956-1.246-8.967-1.903c-12.8-2.56-25.6-4.267-38.4-4.267H23.04
c0-0.853-0.853-2.56-0.853-4.267c-1.707-7.68-3.413-16.213-4.267-24.747C16.213,273.815,18.773,254.188,27.307,236.268z
M368.64,382.188c-55.467,5.12-116.053,0.853-174.933-10.24c-14.507-2.56-28.16-5.973-40.107-8.533
c-6.461-1.615-17.5-4.757-15.771-4.366c-2.507-0.643-5.694,0.231-8.122,2.659l-5.12,5.973H17.067v-25.6h74.24
c11.947,0,23.893,0.853,34.987,3.413c143.36,30.72,254.293,28.16,335.36,5.12c7.147-1.906,13.743-4.082,19.826-6.372
c4.86-1.673,9.322-3.36,13.454-5.196v6.448C459.947,365.975,417.28,377.921,368.64,382.188z" />
</g>
</svg>
</div>
<div class="name">Another</div>
</div>
</div>
<main>
<div class="product-carousel">
<div class="card">
<div class="img" style="background-color:#FCEBEB">
<span class="add-fav">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.62 20.81C12.28 20.93 11.72 20.93 11.38 20.81C8.48 19.82 2 15.69 2 8.68998C2 5.59998 4.49 3.09998 7.56 3.09998C9.38 3.09998 10.99 3.97998 12 5.33998C13.01 3.97998 14.63 3.09998 16.44 3.09998C19.51 3.09998 22 5.59998 22 8.68998C22 15.69 15.52 19.82 12.62 20.81Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<img src="https://www.design-fenix.com.ar/codepen/shoes/shoe-1.png" alt="">
</div>
<div class="description">
<div class="title-rating">
<h3>Product name</h3>
<span class="star">(5.0)</span>
</div>
<div class="brand">Nike</div>
<div class="price">$ 100,00</div>
</div>
<div class="cta">
<button>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 12H18" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M12 18V6" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<div class="card">
<div class="img" style="background-color:#ECEAF7">
<span class="add-fav">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.62 20.81C12.28 20.93 11.72 20.93 11.38 20.81C8.48 19.82 2 15.69 2 8.68998C2 5.59998 4.49 3.09998 7.56 3.09998C9.38 3.09998 10.99 3.97998 12 5.33998C13.01 3.97998 14.63 3.09998 16.44 3.09998C19.51 3.09998 22 5.59998 22 8.68998C22 15.69 15.52 19.82 12.62 20.81Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<img src="https://www.design-fenix.com.ar/codepen/shoes/shoe-2.png" alt="">
</div>
<div class="description">
<div class="title-rating">
<h3>Product name</h3>
<span class="star">(5.0)</span>
</div>
<div class="brand">Nike</div>
<div class="price">$ 120,00</div>
</div>
<div class="cta">
<button>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 12H18" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M12 18V6" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<div class="card">
<div class="img" style="background-color:#E2F1EA">
<span class="add-fav">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.62 20.81C12.28 20.93 11.72 20.93 11.38 20.81C8.48 19.82 2 15.69 2 8.68998C2 5.59998 4.49 3.09998 7.56 3.09998C9.38 3.09998 10.99 3.97998 12 5.33998C13.01 3.97998 14.63 3.09998 16.44 3.09998C19.51 3.09998 22 5.59998 22 8.68998C22 15.69 15.52 19.82 12.62 20.81Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<img src="https://www.design-fenix.com.ar/codepen/shoes/shoe-3.png" alt="">
</div>
<div class="description">
<div class="title-rating">
<h3>Product name</h3>
<span class="star">(5.0)</span>
</div>
<div class="brand">Nike</div>
<div class="price">$ 100,00</div>
</div>
<div class="cta">
<button>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 12H18" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M12 18V6" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<div class="card">
<div class="img" style="background-color:#ECEAF7">
<span class="add-fav">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.62 20.81C12.28 20.93 11.72 20.93 11.38 20.81C8.48 19.82 2 15.69 2 8.68998C2 5.59998 4.49 3.09998 7.56 3.09998C9.38 3.09998 10.99 3.97998 12 5.33998C13.01 3.97998 14.63 3.09998 16.44 3.09998C19.51 3.09998 22 5.59998 22 8.68998C22 15.69 15.52 19.82 12.62 20.81Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<img src="https://www.design-fenix.com.ar/codepen/shoes/shoe-2.png" alt="">
</div>
<div class="description">
<div class="title-rating">
<h3>Product name</h3>
<span class="star">(5.0)</span>
</div>
<div class="brand">Nike</div>
<div class="price">$ 120,00</div>
</div>
<div class="cta">
<button>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 12H18" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M12 18V6" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
</div>
</main>
<div class="section-title">
<h3>Most Popular</h3>
<a href="#">View all</a>
</div>
<div class="popular-card">
<div class="content-image" style="background-color:#ECEAF7">
<img src="https://www.design-fenix.com.ar/codepen/shoes/shoe-2.png" alt="">
</div>
<div class="content-description">
<h3 class="name">Product Name</h3>
<div class="brand">Nike</div>
<div class="price-star">
<div class="price">$ 80,00</div>
<div class="star">(5.0)</div>
</div>
</div>
<div class="cta">
<button>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 12H18" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M12 18V6" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
</div>
</div>.viewport {
width: 393px;
height: 851px;
border-radius: 32px;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.05);
margin: 40px auto;
@media (max-width: 540px) {
width: 100%;
height: 100vh;
border-radius: 0px;
margin: 0;
box-shadow: none;
}
#app {
padding-top: 10px;
height: 100%;
position: relative;
nav {
position: sticky;
bottom: 0;
left: 0;
right: 0;
//background: red;
height: 40px;
}
header {
margin: 10px 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
& > * {
padding: 20px;
}
.left-content {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
align-content: center;
h1 {
padding-left: 15px;
font-size: 18px;
line-height: 100%;
font-weight: 500;
font-family: "Poppins", sans-serif;
}
}
}
.search-container {
padding: 0 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
.fake-input {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
border-radius: 12px;
overflow: hidden;
background: #f6f5fa;
flex: auto;
margin-right: 10px;
svg {
padding: 0 10px;
path {
stroke: #8a8a8c;
}
}
input {
width: 100%;
border: 0;
background: transparent;
font-size: 15px;
height: 50px;
line-height: 50px;
font-family: "Poppins", sans-serif;
outline: none;
}
}
.filter {
flex: 0 50px;
height: 50px;
border: 0;
outline: none;
background: linear-gradient(#3b3b3b, #161415);
border-radius: 12px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
svg {
path {
stroke: white;
}
}
}
}
.filters-category {
display: flex;
padding: 30px;
overflow-x: hidden;
.category {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
border-radius: 25px;
padding: 2px;
margin-right: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transition: ease-in-out all 0.3s;
background: transparent;
cursor: pointer;
&.active {
background: linear-gradient(#3b3b3b, #161415);
padding: 2px 22px 2px 2px;
.name {
opacity: 1;
width: auto;
padding-left: 10px;
}
}
.image {
width: 40px;
border-radius: 40px;
height: 40px;
background: white;
display: flex;
align-items: center;
transition: ease-in-out all 0.3s;
svg {
height: 24px;
width: 100%;
}
}
.name {
font-family: "Poppins", sans-serif;
color: white;
font-size: 14px;
opacity: 0;
width: 0;
overflow: hidden;
transition: ease-in-out all 0.3s;
}
}
}
}
}
main {
display: flex;
position: relative;
flex-direction: column;
overflow: hidden;
align-items: center;
justify-content: center;
}
.product-carousel {
position: relative;
overflow: hidden;
height: 350px;
cursor: pointer !important;
}
.card {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 220px;
padding: 20px 14px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
border-radius: 24px;
margin-top: 60px;
user-select: none;
transform-origin: center bottom;
.img {
height: 190px;
margin-top: -60px;
border-radius: 12px;
overflow: hidden;
background-size: cover;
background-position: 50% 50%;
position: relative;
.add-fav {
position: absolute;
right: 10px;
top: 10px;
background: #da365f;
width: 24px;
height: 24px;
border-radius: 100%;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
svg {
width: 18px;
height: 18px;
fill: white;
path {
fill: white;
stroke: transparent;
}
}
}
img {
width: 80%;
margin: 5% auto;
display: block;
}
}
.description {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
margin: 20px 5px;
.title-rating {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
h3 {
font-family: "Poppins", sans-serif;
color: #333;
font-size: 16px;
font-weight: 500;
}
.star {
color: #ccc;
font-size: 14px;
}
}
}
.brand {
font-family: "Poppins", sans-serif;
color: #ccc;
font-size: 14px;
margin: 10px 0;
}
.price {
font-family: "Poppins", sans-serif;
color: #333;
font-size: 14px;
font-weight: 600;
}
.cta {
position: absolute;
right: 20px;
bottom: 20px;
button {
cursor: pointer;
border: 0;
outline: none;
background: linear-gradient(#3b3b3b, #161415);
border-radius: 100%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
svg {
width: 24px;
height: 24px;
path {
stroke: white;
}
}
}
}
}
.section-title {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
margin: 10px 25px;
h3 {
font-family: "Poppins", sans-serif;
color: #333;
font-size: 18px;
font-weight: 600;
}
a {
font-family: "Poppins", sans-serif;
color: #333;
font-size: 14px;
}
}
.popular-card {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
border-radius: 24px;
padding: 10px;
margin: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
align-content: center;
.content-image {
border-radius: 12px;
flex: 0 60px;
margin-right: 10px;
img {
width: 100%;
}
}
.content-description {
flex: auto;
.name {
font-family: "Poppins", sans-serif;
color: #333;
font-size: 16px;
font-weight: 500;
}
.brand {
font-family: "Poppins", sans-serif;
color: #ccc;
font-size: 14px;
margin: 10px 0;
}
.price-star {
display: flex;
flex-direction: row;
align-items: center;
.price {
font-family: "Poppins", sans-serif;
color: #333;
font-size: 14px;
font-weight: 600;
margin-right: 10px;
}
.star {
color: #ccc;
font-size: 14px;
}
}
}
.cta {
button {
cursor: pointer;
border: 0;
outline: none;
background: linear-gradient(#3b3b3b, #161415);
border-radius: 100%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
svg {
width: 24px;
height: 24px;
path {
stroke: white;
}
}
}
}
}
TweenLite.defaultEase = Linear.easeNone;
var picker = document.querySelector(".product-carousel");
var cells = document.querySelectorAll(".card");
var proxy = document.createElement("div");
var cellWidth = 210;
var numCells = cells.length;
var cellStep = 1 / numCells;
var wrapWidth = cellWidth * numCells;
var baseTl = new TimelineMax({ paused: true });
TweenLite.set(picker, {
width: wrapWidth - cellWidth
});
for (var i = 0; i < cells.length; i++) {
initCell(cells[i], i);
}
var animation = new TimelineMax({ repeat: -1, paused: true }).add(
baseTl.tweenFromTo(1, 2)
);
var draggable = new Draggable(proxy, {
allowContextMenu: true,
type: "x",
trigger: picker,
throwProps: true,
onDrag: updateProgress,
onThrowUpdate: updateProgress,
snap: {
x: snapX
}
});
function snapX(x) {
return Math.round(x / cellWidth) * cellWidth;
}
function updateProgress() {
animation.progress(this.x / wrapWidth);
}
function initCell(element, index) {
TweenLite.set(element, {
width: cellWidth,
scale: 0.6,
x: -cellWidth
});
TweenLite.set($(element).find(".img img"), {
rotation: 45
});
var tl = new TimelineMax({ repeat: 1 })
.to(element, 1, { x: "+=" + wrapWidth }, 0)
.to(
$(element).find(".img img"),
cellStep,
{ rotation: 0, repeat: 1, yoyo: true },
0.5 - cellStep
)
.to(element, cellStep, { scale: 1, repeat: 1, yoyo: true }, 0.5 - cellStep);
baseTl.add(tl, i * -cellStep);
}
$(".category").on("click", function () {
$(".category").removeClass("active");
$(this).addClass("active");
});
External CSS
This Pen doesn't use any external CSS resources.