File: /var/www/quadcode-jobs/public/html/search.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/media/styles/styles.min.css">
<script src="/media/js/app.js"></script>
<title>Search jobs | quadcode</title>
</head>
<body class="app">
<input type="checkbox" id="menu-switcher">
<div class="app-inner">
<header class="app-header">
<div class="container">
<div class="app-header__inner">
<div class="app-header__logo">
<a class="app-header__logo-link" href="index.html">
<div class="brand-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.68 59.73" class="brand-logo__icon">
<path fill="currentColor" d="M19.06 5.51a.33.33 0 0 0-.13.5l.89 1.17 9 11.93.17.23 2.01 2.66 5.28 7 .53.66a.33.33 0 0 0 .37.1l.91-.38.53-.23.69-.3.28-.13 2.06-.9.18-.08h.08l.74-.32 1.76-.78 5.78-2.53a2.27 2.27 0 0 0 .77-.52v-.06a1.72 1.72 0 0 0 .38-.63 1.5 1.5 0 0 0 0-.73 1.43 1.43 0 0 0-.09-.27.69.69 0 0 0 0-.1 1.94 1.94 0 0 0-.2-.33l-6.34-8-.51-.65a.31.31 0 0 0-.37-.09l-1.74.74-.19.08-3.75 1.45a.33.33 0 0 0-.13.5c.15.22.34.47.39.53l.44.58 3 3.85v.07a.85.85 0 0 1 .13.22 1.21 1.21 0 0 1 0 .18 1.09 1.09 0 0 1 0 .18.62.62 0 0 1 0 .23.8.8 0 0 1-.08.16l-.05.06-.06.07-.09.07-.06.06a1.73 1.73 0 0 1-.27.15 1.53 1.53 0 0 1-.53.13 1.56 1.56 0 0 1-.53 0 1.37 1.37 0 0 1-.49-.18 1.14 1.14 0 0 1-.37-.32l-.68-.88-.62-.8-3.15-4.15-3.38-4.4-2.62-3.31-.1-.17a1.09 1.09 0 0 1-.05-.17.67.67 0 0 1 0-.37.89.89 0 0 1 .23-.35 1.33 1.33 0 0 1 .41-.27 2 2 0 0 1 .51-.21 2.33 2.33 0 0 1 .53 0 1.75 1.75 0 0 1 .47.17 1.21 1.21 0 0 1 .36.31l.19.24 3.4 4.4.72.92.48.64a.31.31 0 0 0 .38.1l5.77-2.46a.32.32 0 0 0 .13-.5l-7.36-9.34a2.18 2.18 0 0 0-.67-.56 3.1 3.1 0 0 0-.87-.31 3.23 3.23 0 0 0-1.94.18zM53.67 23.14v.35a.25.25 0 0 0 0 .07 1.41 1.41 0 0 1-.06.22v.06l-.05.12a2.4 2.4 0 0 1-.11.23.6.6 0 0 1-.06.11 1.92 1.92 0 0 1-.17.26v.06l-.23.27a3.88 3.88 0 0 1-.49.4l-.12.09a5.22 5.22 0 0 1-.62.34l-.27.11-.42.18-6.56 2.89-1.76.77-.73.32h-.08l-.18.08-.66.29-1.67.73-.69.3-.62.28-1.64.72a.32.32 0 0 1-.38-.1l-1.19-1.58-5.91-7.59-.17-.22-8.97-11.9-.68-.91-2.06-2.76-.47-.64a.31.31 0 0 0-.38-.1l-12.94 5.41a2.42 2.42 0 0 0-.39.21l-.1.06-.26.2h-.05a2.09 2.09 0 0 0-.24.28.16.16 0 0 0 0 .07 1.23 1.23 0 0 0-.14.25 1.11 1.11 0 0 0-.08.3 1.54 1.54 0 0 0 .29 1.1l1.28 1.77 8.2 11.34.15.21 1.23 1.7 4.5 6.23a2.28 2.28 0 0 0 .69.62 3.19 3.19 0 0 0 .92.35 3.55 3.55 0 0 0 1 .06 3 3 0 0 0 1-.26l.53-.23 1-.46 1.59-.69 3.47-1.52a.31.31 0 0 1 .38.11l.92 1.25a.33.33 0 0 1-.13.5l-4.62 2-.29.13-2.32 1-.27.12a5.35 5.35 0 0 1-1.65.42 5.47 5.47 0 0 1-1.67-.1 4.7 4.7 0 0 1-1.49-.57 3.62 3.62 0 0 1-1.12-1l-3.6-5-.16-.21-1.22-1.71-6.9-9.61-1.58-1.92-1.73-2.54a3.21 3.21 0 0 1-.19-.31l-.05-.1-.09-.21a.56.56 0 0 1 0-.12l-.14-.2v-.14a.75.75 0 0 1 0-.11v19.24a2 2 0 0 0 .09.33c0 .11.09.22.14.33a2.7 2.7 0 0 0 .2.31l15.78 22.57a3.79 3.79 0 0 0 1.07 1 4.65 4.65 0 0 0 1.44.56 5 5 0 0 0 1.6.1 4.87 4.87 0 0 0 1.58-.42l29.8-13.48a3.9 3.9 0 0 0 .82-.5 3.24 3.24 0 0 0 .61-.62 3.32 3.32 0 0 0 .39-.71 2.4 2.4 0 0 0 .16-.77v-20.07zm-29.35 5.78a.72.72 0 0 1-.12.23v.05l-.08.1-.08.06-.07.06a1.47 1.47 0 0 1-.28.16 1.66 1.66 0 0 1-.54.14 2.42 2.42 0 0 1-.54 0 1.61 1.61 0 0 1-.49-.19 1.14 1.14 0 0 1-.37-.32l-1.85-2.42-.41-.56-2-2.72-1.75-2.38-4.27-5.8a.75.75 0 0 1-.1-.17.61.61 0 0 1 0-.18.71.71 0 0 1 0-.38 1 1 0 0 1 .24-.36 1.43 1.43 0 0 1 .43-.27 2 2 0 0 1 .53-.13 1.87 1.87 0 0 1 .53 0 1.48 1.48 0 0 1 .47.18 1.19 1.19 0 0 1 .36.31l1.7 2.3 1.75 2.37 2 2.72.67.91 2.29 3.09 1.82 2.45a1 1 0 0 1 .17.41.75.75 0 0 1 0 .15.76.76 0 0 1-.01.19z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.21 38.9" class="brand-logo__text">
<path fill="currentColor" d="M165.11 5.05a5.05 5.05 0 1 1 5 5.05 5 5 0 0 1-5-5.05zm.79 0a4.25 4.25 0 1 0 8.5 0 4.25 4.25 0 0 0-8.5 0zm4.12.62h-1v2.33h-.86v-5.83h2.36a1.79 1.79 0 0 1 1.93 1.76 1.69 1.69 0 0 1-1.45 1.71l1.57 2.36h-1zm-1-2.79v2.05h1.5a1 1 0 0 0 1-1 1 1 0 0 0-1-1.05zM11.89 32.87a28.5 28.5 0 0 1-5.7.67h-1.19a5 5 0 0 1-3.65-1.37 5 5 0 0 1-1.35-3.65v-7.7a5.32 5.32 0 0 1 1.42-3.94 5.36 5.36 0 0 1 3.94-1.42h12.39v23.44h-5.86zm-4.02-3.87a23.71 23.71 0 0 0 4-.33v-8.67h-4.67a1.19 1.19 0 0 0-1.34 1.34v6.53a1.13 1.13 0 0 0 1.14 1.13zM29.3 28.69a14.39 14.39 0 0 0 4-.67v-12.56h5.86v18.08h-5.1l-.41-2a12.34 12.34 0 0 1-3.23 1.53 10.43 10.43 0 0 1-2.8.48h-1.5a4.73 4.73 0 0 1-5-5v-13.09h5.88v12.05a1.16 1.16 0 0 0 1.17 1.18zM43.36 16.12a101.69 101.69 0 0 1 11-.67 4.71 4.71 0 0 1 5 5v13.09h-5.05l-.4-2a12.25 12.25 0 0 1-3.24 1.53 10.31 10.31 0 0 1-2.79.48h-1.17a4.71 4.71 0 0 1-5-5v-1.55a4.18 4.18 0 0 1 1.37-3.32 4.91 4.91 0 0 1 3.65-1.38h6.86v-1.3a1.14 1.14 0 0 0-1.19-1.2c-1.45 0-3 .07-4.81.2s-3.16.24-4.23.3zm6.19 12.73a14 14 0 0 0 4-.67v-1.68h-4.83a1.14 1.14 0 0 0-.84.33 1.18 1.18 0 0 0-.34.84 1.15 1.15 0 0 0 1.18 1.17zM75.06 33.54l-.4-2a12 12 0 0 1-3.23 1.53 10.31 10.31 0 0 1-2.79.48h-1.51a4.71 4.71 0 0 1-5-5v-7.7a5.32 5.32 0 0 1 1.42-3.94 5.36 5.36 0 0 1 3.94-1.42h6.86v-5.72h5.86v23.77zm-4.75-4.85a14.46 14.46 0 0 0 4-.67v-8.02h-5a1.18 1.18 0 0 0-1.31 1.32v6.19a1.15 1.15 0 0 0 1.17 1.18zM99.27 32.87a104.22 104.22 0 0 1-11 .67 4.73 4.73 0 0 1-5-5v-7.7a5.32 5.32 0 0 1 1.43-3.94 5.33 5.33 0 0 1 3.93-1.42h10.64v4.52h-8.87a1.19 1.19 0 0 0-1.34 1.34v6.53a1.14 1.14 0 0 0 1.17 1.13c2 0 5-.17 9-.5zM120 28.18a4.92 4.92 0 0 1-5.35 5.36h-7.65a4.92 4.92 0 0 1-5.35-5.36v-7.37a5.32 5.32 0 0 1 1.35-3.94 5.31 5.31 0 0 1 4-1.42h7.71a5.31 5.31 0 0 1 3.93 1.42 5.32 5.32 0 0 1 1.36 3.94zm-5.86-6.87a1.18 1.18 0 0 0-1.31-1.31h-4a1.18 1.18 0 0 0-1.34 1.34v6.37a1.18 1.18 0 0 0 1.33 1.29h4a1.18 1.18 0 0 0 1.34-1.34zM135.67 33.54l-.4-2a12.34 12.34 0 0 1-3.27 1.52 10.43 10.43 0 0 1-2.8.48h-1.51a4.71 4.71 0 0 1-5-5v-7.7a5.32 5.32 0 0 1 1.42-3.94 5.36 5.36 0 0 1 3.94-1.42h6.86v-5.71h5.86v23.77zm-4.76-4.85a14.4 14.4 0 0 0 4-.67v-8.02h-5a1.19 1.19 0 0 0-1.34 1.34v6.19a1.16 1.16 0 0 0 1.17 1.18zM160.55 32.87a113.73 113.73 0 0 1-11.72.67 4.73 4.73 0 0 1-5-5v-7.73a5.32 5.32 0 0 1 1.43-3.94 5.31 5.31 0 0 1 3.93-1.42h6.7a5.31 5.31 0 0 1 3.93 1.42 5.32 5.32 0 0 1 1.43 3.94v5.87h-11.59v1.32a1.14 1.14 0 0 0 .34.83 1.11 1.11 0 0 0 .84.34c2.21 0 5.44-.17 9.71-.5zm-9.55-13.24a1.19 1.19 0 0 0-1.34 1.37v1.85h5.7v-1.85a1.19 1.19 0 0 0-1.36-1.37z"></path>
</svg>
</div>
</a>
</div>
<div class="app-header__menu">
<label class="app-header__menu-trigger hide-on-desktop" for="menu-switcher">
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-bars fa-w-14 fa-3x"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" ></path></svg>
</label>
<div class="app-header__nav-wrap">
<div class="app-header__nav-post-wrap">
<label class="app-header__menu-trigger hide-on-desktop action-marker for-close" for="menu-switcher">
<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-3x"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" class=""></path></svg>
</label>
<nav class="app-header__nav">
<a href="categories.html" class="app-header__nav-link">Job categories</a>
<a href="locations.html" class="app-header__nav-link">Locations</a>
<a href="about.html" class="app-header__nav-link">Who we are</a>
<a href="search.html" class="app-header__nav-link is-current-page">Search jobs</a>
</nav>
<div class="app-header__lang">
<a href="#" class="app-header__lang-item">Ru</a>
<a href="#" class="app-header__lang-item is-active">En</a>
</div>
<div class="app-header__social hide-on-desktop">
<a class="app-header__social-link" href="#to-instaram">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
</a>
<a href="#to-facebook" class="app-header__social-link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg>
</a>
<a href="#to-linkedin" class="app-header__social-link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="app-content search-jobs">
<section class="category-page for-search-jobs" style="--category-page-bg: url(https://picsum.photos/1920/500);">
<header class="category-page__header">
<div class="container">
<h1>Jobs at Quadcode</h1>
<div class="category-page__subtitle">
<span>4</span> positions in <span>4</span> location in <span>12</span> job categories
</div>
</div>
</header>
<div class="category-page__content">
<div class="container">
<div class="search-jobs__inner">
<div class="search-jobs__filter-picker">
<!-- TODO! WIP -->
<div class="welcome__search">
<div class="search">
<div class="search__field">
<input type="text" placeholder="Enter keywords">
</div>
<div class="search__field has-select ">
<div class="search-select js-category-selector-parent">
<select class="js-category-selector" multiple="multiple" data-placeholder="Choose category" placeholder="Choose category">
<option value="Administrative positions">Administrative positions</option>
<option value="Compliance & Security">Compliance & Security</option>
<option value="Customer Care">Customer Care</option>
<option value="Data & Analytics">Data & Analytics</option>
<option value="Engineering">Engineering</option>
</select>
</div>
</div>
<div class="search__field has-select">
<div class="search-select js-location-selector-parent">
<select class="js-location-selector" multiple="multiple" data-placeholder="Choose location" placeholder="Choose location">
<option value="Spb">Spb</option>
<option value="Turkey">Turkey</option>
<option value="London">London</option>
<option value="New zealan">New zealand</option>
<option value="Engineering">Engineering</option>
</select>
</div>
</div>
<div class="search__field search__field--submit">
<button type="submit" class="btn">Search</button>
</div>
</div>
</div>
</div>
<div class="search-jobs__filter">
<div class="filter">
<div class="filter__group">
<div class="filter__group-name">Locations</div>
<div class="filter__group-items">
<div class="filter__item">
<div class="tag">
<div class="tag__control">
<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-3x"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" class=""></path></svg>
</div>
<div class="tag__value">St. Petersburg</div>
</div>
</div>
<div class="filter__item">
<div class="tag">
<div class="tag__control">
<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-3x"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" class=""></path></svg>
</div>
<div class="tag__value">Sydney</div>
</div>
</div>
</div>
</div>
<div class="filter__group">
<div class="filter__group-name">Categories</div>
<div class="filter__group-items">
<div class="filter__item">
<div class="tag">
<div class="tag__control">
<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-3x"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" class=""></path></svg>
</div>
<div class="tag__value">Marketing</div>
</div>
</div>
<div class="filter__item">
<div class="tag">
<div class="tag__control">
<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-3x"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" class=""></path></svg>
</div>
<div class="tag__value">Administrative positions</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="search-jobs__list">
<div class="joblist">
<!-- If founded some jobs -->
<div class="joblist__items">
<div class="vacancy">
<div class="vacancy__row as-heading">
<div class="vacancy__job">Job</div>
<div class="vacancy__category">Category</div>
<div class="vacancy__location">Location</div>
</div>
<div class="vacancy__row">
<div class="vacancy__job">
<a href="position.html">Big Data Administrator / System Administrator Linux / DevOps</a>
</div>
<div class="vacancy__category">
<a class="link" href="#">Sales & Business Development</a>
</div>
<div class="vacancy__location">
<a class="link" href="#">St.Petersburg, Russia</a>
</div>
</div>
<div class="vacancy__row">
<div class="vacancy__job">
<a href="position.html">C++ Developer</a>
</div>
<div class="vacancy__category">
<a class="link" href="#">Legal</a>
</div>
<div class="vacancy__location">
<a class="link" href="#">London, Uk</a>
</div>
</div>
<div class="vacancy__row">
<div class="vacancy__job">
<a href="position.html">Senior Data Protection Officer (Quadcode Markets)</a>
</div>
<div class="vacancy__category">
<a class="link" href="#">Compliance & Security</a>
</div>
<div class="vacancy__location">
<a class="link" href="#">Gibraltar, UK</a>
</div>
</div>
</div>
</div>
<div class="joblist__pagination">
<div class="pagination">
<a href="#prevpage" class="pagination__prev">
<span class="pagination__icon">
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"></path></svg>
</span>
<span>previous</span>
</a>
<div class="pagination__page">
<span class="pagination__current">2</span>
<span class="pagination__total">2</span>
</div>
<a href="#nextpage" class="pagination__next is-not-available">
<span>next</span>
<span class="pagination__icon">
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg>
</span>
</a>
</div>
</div>
<!-- else -->
<div class="message">
<div class="message__title">
No open positions currently<br>
in <span>St.Petersburg</span>
</div>
<p class="message__text">
We might not have room for you at the moment, but we always want to hear from talented professionals. If you would like to submit your CV, we can get in touch with you should anything become available.
</p>
<div class="message__actions">
<a class="custom-button js-modal" href="#application" data-modal="application">Submit your CV</a>
</div>
</div>
<!-- end -->
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="app-footer">
<div class="container">
<div class="app-footer__inner">
<div class="app-footer__logo">
<div class="brand-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.68 59.73" class="brand-logo__icon">
<path fill="currentColor"
d="M19.06 5.51a.33.33 0 0 0-.13.5l.89 1.17 9 11.93.17.23 2.01 2.66 5.28 7 .53.66a.33.33 0 0 0 .37.1l.91-.38.53-.23.69-.3.28-.13 2.06-.9.18-.08h.08l.74-.32 1.76-.78 5.78-2.53a2.27 2.27 0 0 0 .77-.52v-.06a1.72 1.72 0 0 0 .38-.63 1.5 1.5 0 0 0 0-.73 1.43 1.43 0 0 0-.09-.27.69.69 0 0 0 0-.1 1.94 1.94 0 0 0-.2-.33l-6.34-8-.51-.65a.31.31 0 0 0-.37-.09l-1.74.74-.19.08-3.75 1.45a.33.33 0 0 0-.13.5c.15.22.34.47.39.53l.44.58 3 3.85v.07a.85.85 0 0 1 .13.22 1.21 1.21 0 0 1 0 .18 1.09 1.09 0 0 1 0 .18.62.62 0 0 1 0 .23.8.8 0 0 1-.08.16l-.05.06-.06.07-.09.07-.06.06a1.73 1.73 0 0 1-.27.15 1.53 1.53 0 0 1-.53.13 1.56 1.56 0 0 1-.53 0 1.37 1.37 0 0 1-.49-.18 1.14 1.14 0 0 1-.37-.32l-.68-.88-.62-.8-3.15-4.15-3.38-4.4-2.62-3.31-.1-.17a1.09 1.09 0 0 1-.05-.17.67.67 0 0 1 0-.37.89.89 0 0 1 .23-.35 1.33 1.33 0 0 1 .41-.27 2 2 0 0 1 .51-.21 2.33 2.33 0 0 1 .53 0 1.75 1.75 0 0 1 .47.17 1.21 1.21 0 0 1 .36.31l.19.24 3.4 4.4.72.92.48.64a.31.31 0 0 0 .38.1l5.77-2.46a.32.32 0 0 0 .13-.5l-7.36-9.34a2.18 2.18 0 0 0-.67-.56 3.1 3.1 0 0 0-.87-.31 3.23 3.23 0 0 0-1.94.18zM53.67 23.14v.35a.25.25 0 0 0 0 .07 1.41 1.41 0 0 1-.06.22v.06l-.05.12a2.4 2.4 0 0 1-.11.23.6.6 0 0 1-.06.11 1.92 1.92 0 0 1-.17.26v.06l-.23.27a3.88 3.88 0 0 1-.49.4l-.12.09a5.22 5.22 0 0 1-.62.34l-.27.11-.42.18-6.56 2.89-1.76.77-.73.32h-.08l-.18.08-.66.29-1.67.73-.69.3-.62.28-1.64.72a.32.32 0 0 1-.38-.1l-1.19-1.58-5.91-7.59-.17-.22-8.97-11.9-.68-.91-2.06-2.76-.47-.64a.31.31 0 0 0-.38-.1l-12.94 5.41a2.42 2.42 0 0 0-.39.21l-.1.06-.26.2h-.05a2.09 2.09 0 0 0-.24.28.16.16 0 0 0 0 .07 1.23 1.23 0 0 0-.14.25 1.11 1.11 0 0 0-.08.3 1.54 1.54 0 0 0 .29 1.1l1.28 1.77 8.2 11.34.15.21 1.23 1.7 4.5 6.23a2.28 2.28 0 0 0 .69.62 3.19 3.19 0 0 0 .92.35 3.55 3.55 0 0 0 1 .06 3 3 0 0 0 1-.26l.53-.23 1-.46 1.59-.69 3.47-1.52a.31.31 0 0 1 .38.11l.92 1.25a.33.33 0 0 1-.13.5l-4.62 2-.29.13-2.32 1-.27.12a5.35 5.35 0 0 1-1.65.42 5.47 5.47 0 0 1-1.67-.1 4.7 4.7 0 0 1-1.49-.57 3.62 3.62 0 0 1-1.12-1l-3.6-5-.16-.21-1.22-1.71-6.9-9.61-1.58-1.92-1.73-2.54a3.21 3.21 0 0 1-.19-.31l-.05-.1-.09-.21a.56.56 0 0 1 0-.12l-.14-.2v-.14a.75.75 0 0 1 0-.11v19.24a2 2 0 0 0 .09.33c0 .11.09.22.14.33a2.7 2.7 0 0 0 .2.31l15.78 22.57a3.79 3.79 0 0 0 1.07 1 4.65 4.65 0 0 0 1.44.56 5 5 0 0 0 1.6.1 4.87 4.87 0 0 0 1.58-.42l29.8-13.48a3.9 3.9 0 0 0 .82-.5 3.24 3.24 0 0 0 .61-.62 3.32 3.32 0 0 0 .39-.71 2.4 2.4 0 0 0 .16-.77v-20.07zm-29.35 5.78a.72.72 0 0 1-.12.23v.05l-.08.1-.08.06-.07.06a1.47 1.47 0 0 1-.28.16 1.66 1.66 0 0 1-.54.14 2.42 2.42 0 0 1-.54 0 1.61 1.61 0 0 1-.49-.19 1.14 1.14 0 0 1-.37-.32l-1.85-2.42-.41-.56-2-2.72-1.75-2.38-4.27-5.8a.75.75 0 0 1-.1-.17.61.61 0 0 1 0-.18.71.71 0 0 1 0-.38 1 1 0 0 1 .24-.36 1.43 1.43 0 0 1 .43-.27 2 2 0 0 1 .53-.13 1.87 1.87 0 0 1 .53 0 1.48 1.48 0 0 1 .47.18 1.19 1.19 0 0 1 .36.31l1.7 2.3 1.75 2.37 2 2.72.67.91 2.29 3.09 1.82 2.45a1 1 0 0 1 .17.41.75.75 0 0 1 0 .15.76.76 0 0 1-.01.19z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.21 38.9" class="brand-logo__text">
<path fill="currentColor"
d="M165.11 5.05a5.05 5.05 0 1 1 5 5.05 5 5 0 0 1-5-5.05zm.79 0a4.25 4.25 0 1 0 8.5 0 4.25 4.25 0 0 0-8.5 0zm4.12.62h-1v2.33h-.86v-5.83h2.36a1.79 1.79 0 0 1 1.93 1.76 1.69 1.69 0 0 1-1.45 1.71l1.57 2.36h-1zm-1-2.79v2.05h1.5a1 1 0 0 0 1-1 1 1 0 0 0-1-1.05zM11.89 32.87a28.5 28.5 0 0 1-5.7.67h-1.19a5 5 0 0 1-3.65-1.37 5 5 0 0 1-1.35-3.65v-7.7a5.32 5.32 0 0 1 1.42-3.94 5.36 5.36 0 0 1 3.94-1.42h12.39v23.44h-5.86zm-4.02-3.87a23.71 23.71 0 0 0 4-.33v-8.67h-4.67a1.19 1.19 0 0 0-1.34 1.34v6.53a1.13 1.13 0 0 0 1.14 1.13zM29.3 28.69a14.39 14.39 0 0 0 4-.67v-12.56h5.86v18.08h-5.1l-.41-2a12.34 12.34 0 0 1-3.23 1.53 10.43 10.43 0 0 1-2.8.48h-1.5a4.73 4.73 0 0 1-5-5v-13.09h5.88v12.05a1.16 1.16 0 0 0 1.17 1.18zM43.36 16.12a101.69 101.69 0 0 1 11-.67 4.71 4.71 0 0 1 5 5v13.09h-5.05l-.4-2a12.25 12.25 0 0 1-3.24 1.53 10.31 10.31 0 0 1-2.79.48h-1.17a4.71 4.71 0 0 1-5-5v-1.55a4.18 4.18 0 0 1 1.37-3.32 4.91 4.91 0 0 1 3.65-1.38h6.86v-1.3a1.14 1.14 0 0 0-1.19-1.2c-1.45 0-3 .07-4.81.2s-3.16.24-4.23.3zm6.19 12.73a14 14 0 0 0 4-.67v-1.68h-4.83a1.14 1.14 0 0 0-.84.33 1.18 1.18 0 0 0-.34.84 1.15 1.15 0 0 0 1.18 1.17zM75.06 33.54l-.4-2a12 12 0 0 1-3.23 1.53 10.31 10.31 0 0 1-2.79.48h-1.51a4.71 4.71 0 0 1-5-5v-7.7a5.32 5.32 0 0 1 1.42-3.94 5.36 5.36 0 0 1 3.94-1.42h6.86v-5.72h5.86v23.77zm-4.75-4.85a14.46 14.46 0 0 0 4-.67v-8.02h-5a1.18 1.18 0 0 0-1.31 1.32v6.19a1.15 1.15 0 0 0 1.17 1.18zM99.27 32.87a104.22 104.22 0 0 1-11 .67 4.73 4.73 0 0 1-5-5v-7.7a5.32 5.32 0 0 1 1.43-3.94 5.33 5.33 0 0 1 3.93-1.42h10.64v4.52h-8.87a1.19 1.19 0 0 0-1.34 1.34v6.53a1.14 1.14 0 0 0 1.17 1.13c2 0 5-.17 9-.5zM120 28.18a4.92 4.92 0 0 1-5.35 5.36h-7.65a4.92 4.92 0 0 1-5.35-5.36v-7.37a5.32 5.32 0 0 1 1.35-3.94 5.31 5.31 0 0 1 4-1.42h7.71a5.31 5.31 0 0 1 3.93 1.42 5.32 5.32 0 0 1 1.36 3.94zm-5.86-6.87a1.18 1.18 0 0 0-1.31-1.31h-4a1.18 1.18 0 0 0-1.34 1.34v6.37a1.18 1.18 0 0 0 1.33 1.29h4a1.18 1.18 0 0 0 1.34-1.34zM135.67 33.54l-.4-2a12.34 12.34 0 0 1-3.27 1.52 10.43 10.43 0 0 1-2.8.48h-1.51a4.71 4.71 0 0 1-5-5v-7.7a5.32 5.32 0 0 1 1.42-3.94 5.36 5.36 0 0 1 3.94-1.42h6.86v-5.71h5.86v23.77zm-4.76-4.85a14.4 14.4 0 0 0 4-.67v-8.02h-5a1.19 1.19 0 0 0-1.34 1.34v6.19a1.16 1.16 0 0 0 1.17 1.18zM160.55 32.87a113.73 113.73 0 0 1-11.72.67 4.73 4.73 0 0 1-5-5v-7.73a5.32 5.32 0 0 1 1.43-3.94 5.31 5.31 0 0 1 3.93-1.42h6.7a5.31 5.31 0 0 1 3.93 1.42 5.32 5.32 0 0 1 1.43 3.94v5.87h-11.59v1.32a1.14 1.14 0 0 0 .34.83 1.11 1.11 0 0 0 .84.34c2.21 0 5.44-.17 9.71-.5zm-9.55-13.24a1.19 1.19 0 0 0-1.34 1.37v1.85h5.7v-1.85a1.19 1.19 0 0 0-1.36-1.37z">
</path>
</svg>
</div>
</div>
<nav class="app-footer__nav">
<a href="categories.html" class="app-footer__nav-link">Job categories</a>
<a href="locations.html" class="app-footer__nav-link">Locations</a>
<a href="about.html" class="app-footer__nav-link">Who we are</a>
<a href="search.html" class="app-footer__nav-link">Search jobs</a>
</nav>
<div class="app-footer__social">
<a class="app-footer__social-link" href="#to-instaram">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor"
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z">
</path>
</svg>
</a>
<a href="#to-facebook" class="app-footer__social-link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor"
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z">
</path>
</svg>
</a>
<a href="#to-linkedin" class="app-footer__social-link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor"
d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z">
</path>
</svg>
</a>
</div>
<div class="app-footer__to-top">
<a href="#" class="btn-arrow btn-arrow--top js-scroll-trigger" data-scroll="top">
<div class="btn-arrow__arrow">
<span></span>
</div>
</a>
</div>
<div class="app-footer__disclamer">
<p>
All of the information on this website is protected by copyright and is legally
owned by QuadCode (company name) as its intellectual property (hereinafter —
Intellectual Property). You may not copy, link, publish, upload to external resources,
transmit, distribute or reproduce by any means or in any form any
portion of this website, including any text, images, audio and video materials or any
other Intellectual Property without prior written consent of QuadCode (company name).
Certain names, logos and signs featured on this website are registered trademarks.
QuadCode logo is a registered trademark in the European Union, Russian
Federation, Hong Kong and many other countries. The fact that QuadCode has not included any
product, feature, service name or logo to the list of its Intellectual
Property does not waive any intellectual property rights that QuadCode or its
affiliates, partners and (or) licensees have established in any such product, feature,
service name or logo, all of which intellectual property rights are expressly
reserved. QuadCode trademarks, service marks, trade names, corporate identity are important
company’s corporate assets and QuadCode requires that they be used properly. In order
to preserve its reputation and protect its trademarks and other Intellectual Property,
QuadCode diligently guards such objects against any violation.
</p>
</div>
<div class="app-footer__copyrights">
<span>All right reserved © 2019‑2020</span>
</div>
<div class="app-footer__terms">
<a href="#" class="app-footer__terms-link link">Terms and conditions</a>
<a href="#" class="app-footer__terms-link link">Privacy policy</a>
</div>
</div>
</div>
</footer>
<article id="application" class="modal modal--form">
<div class="modal__wrapper">
<div class="modal__inner">
<div class="modal__close js-close-modal">
<svg width="18px" height="18px" viewbox="0 0 18 18" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<path d="M0.888889 1L15.1111 15" transform="translate(1 1)" fill="none" fill-rule="evenodd"
stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
<path d="M0.888889 1L15.1111 15" transform="matrix(-1 0 0 1 17 1)" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
</svg>
</div>
<div class="modal__content">
<form action="" method="post" enctype="multipart/form-data" class="form js-form-validate" novalidate>
<div class="form__title">Submit your application</div>
<div class="custom-input">
<input class="form-input" type="text" placeholder="First name" required>
<div class="form-error">Please enter your name</div>
</div>
<div class="custom-input is-required">
<input class="form-input" type="text" placeholder="Surname" required>
<div class="form-error">Please enter your name</div>
<div class="form-placeholder">
Surname <span> *</span>
</div>
</div>
<div class="custom-input custom-phone is-required">
<input class="form-input" id="phone" placeholder="Phone" required>
<div class="form-error">Valid phone number is required</div>
<div class="form-placeholder">
Phone <span> *</span>
</div>
</div>
<div class="custom-input is-required">
<input class="form-input" type="email" placeholder="name@email.com" required>
<div class="form-error">Valid email is required</div>
<div class="form-placeholder">
name@email.com <span> *</span>
</div>
</div>
<div class="custom-textarea">
<textarea placeholder="Your message..."></textarea>
<div class="form-error"></div>
</div>
<div class="custom-upload">
<div class="custom-upload__inner js-file">
<div class="custom-upload__file js-file-item">
<div class="custom-upload__remove js-file-remove">
<svg width="10px" height="10px" viewbox="0 0 18 18" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg">
<path d="M0.888889 1L15.1111 15" transform="translate(1 1)" fill="none"
fill-rule="evenodd" stroke="currentColor" stroke-width="2"
stroke-linecap="square"/>
<path d="M0.888889 1L15.1111 15" transform="matrix(-1 0 0 1 17 1)"
fill="none" fill-rule="evenodd" stroke="currentColor"
stroke-width="2" stroke-linecap="square"/>
</svg>
</div>
</div>
<label class="custom-upload__label js-upload-file" for="add-cv">Upload your
CV</label>
<input class="custom-upload__input" name="file-1" id="add-cv" type="file">
</div>
</div>
<div class="custom-checkbox">
<input id="qwe123" type="checkbox">
<label for="qwe123" class="custom-checkbox__label-box"></label>
<label for="qwe123" class="custom-checkbox__label">
<span>By using this form you agree with the storage and processing of your data by this website in accordance with our <a
class="link text-underline"
href="#link-to-privacy policy">privacy policy</a></span>
</label>
</div>
<button class="custom-button is-full-width" data-open-form="#form-success" type="submit">
Submit
</button>
</form>
</div>
</div>
</div>
</article>
</div>
<script>
$(document).ready(function() {
const breakpointSm = window.matchMedia('(max-width: 767px)');
const categorySelect = $('.js-category-selector').select2({
dropdownParent: '.js-category-selector-parent',
closeOnSelect:false,
minimumResultsForSearch: Infinity
});
categorySelect.on('select2:close', () => {
if (breakpointSm.matches) {
document.activeElement.blur()
}
});
const locationSelector = $('.js-location-selector').select2({
dropdownParent: '.js-location-selector-parent',
closeOnSelect:false,
minimumResultsForSearch: Infinity
});
locationSelector.on('select2:close', () => {
if (breakpointSm.matches) {
document.activeElement.blur()
}
});
});
</script>
<script>
$(function () {
function showError(name, error) {
var $input = $("[name="+ name + "]");
$input.addClass('is-invalid');
var $group = $input.closest('.js-input-wrap');
$group.addClass('has-error');
$group.find('.form-error').text(error).show();
$input.on('focus', function () {
$input.removeClass('is-invalid');
$group.removeClass('has-error');
$group.find('.form-error').text(error).hide();
})
}
var $form = $('.js-form-validate');
$form.on('submit', function (event) {
event.preventDefault();
var $self = $(this);
var data = new FormData($self.get(0));
$.ajax({
url: 'http://quadcode-careers.dev.greasle.com/application',
method: "POST",
enctype: 'multipart/form-data',
processData: false,
data: data,
contentType: false,
cache: false,
dataType: "json",
beforeSend: function () {
$self.find('.js-submit').attr('disabled', 'disabled');
},
success: function (data) {
$self.find('.js-submit').attr('disabled', false);
if (data.success) {
$form.hide();
$('.form-success').show();
} else {
$form.hide();
$('.form-error').show();
}
},
error: function (res) {
$self.find('.js-submit').attr('disabled', false);
if (res.status === 422) {
var data = res.responseJSON.errors;
for (let i in data) {
showError(i, data[i][0]);
}
} else {
$form.hide();
$('.form-error').show();
}
}
});
});
});
</script>
</body>
</html>