Half main page is done

src/img/icon_detail_vacancy.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 9V11H11V20H9V11H0V9H9V0H11V9H20Z" fill="#262262"/>
+</svg>

src/img/icon_label_top.svg

+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.311523 22.6274L45.5664 22.6274L65.0002 42.0613L65.0002 87.3162L0.311523 22.6274Z" fill="#262262"/>
+<path d="M42.5393 36.1466L36.5303 30.1376L35.2235 31.4443L37.4311 33.6519L31.8082 39.2749L33.3921 40.8588L39.015 35.2359L41.2325 37.4533L42.5393 36.1466ZM39.7075 47.4118C41.8854 49.5897 45.0137 49.6887 47.0827 47.6197C49.1516 45.5507 49.0527 42.4224 46.8748 40.2445C44.687 38.0567 41.5587 37.9776 39.4996 40.0366C37.4405 42.0957 37.5197 45.224 39.7075 47.4118ZM41.0737 46.0456C39.8362 44.8082 39.8065 42.9768 41.1232 41.6602C42.4398 40.3435 44.2712 40.3732 45.5086 41.6107C46.7461 42.8481 46.7758 44.6795 45.4591 45.9961C44.1425 47.3128 42.3111 47.2831 41.0737 46.0456ZM54.7825 48.3898L51.7829 45.3903L44.8533 52.3199L46.457 53.9236L48.3676 52.013L49.7634 53.4089C51.6146 55.2601 53.7331 55.458 55.2774 53.9137C56.8316 52.3595 56.6337 50.241 54.7825 48.3898ZM50.981 52.013L49.6743 50.7063L52.0799 48.3007L53.3866 49.6074C54.3667 50.5875 54.4162 51.528 53.6539 52.2902C52.9015 53.0426 51.9611 52.9931 50.981 52.013Z" fill="white"/>
+</svg>

src/img/icon_mail.svg

-<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M0 0.688477C0 3.78848 0 12.6885 0 15.6885C7.2 15.6885 12.5 15.6885 20 15.6885C20 12.6885 20 3.78848 20 0.688477C11.3 0.688477 8.8 0.688477 0 0.688477ZM2 13.6885V5.58848L10 12.5885L18 5.58848V13.5885H2V13.6885ZM18 2.98848L10 9.98848L2 2.98848V2.68848H18V2.98848Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect y="0.688477" width="20" height="15" fill="white"/>
-</clipPath>
-</defs>
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0C0 3.1 0 12 0 15C7.2 15 12.5 15 20 15C20 12 20 3.1 20 0C11.3 0 8.8 0 0 0ZM2 13V4.9L10 11.9L18 4.9V12.9H2V13ZM18 2.3L10 9.3L2 2.3V2H18V2.3Z" fill="#3C3B55"/>
 </svg>

src/img/icon_vacancy_respond.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 9V11H11V20H9V11H0V9H9V0H11V9H20Z" fill="#262262"/>
+</svg>

src/js/main.js

 console.log('hi');
-import '../scss/style.scss';
\ No newline at end of file
+import '../scss/style.scss';
+
+
+var imgSvg = document.querySelectorAll('.img-svg');
+
+for(var i = 0; i < imgSvg.length; i++)
+{
+    var img = imgSvg[i];
+    var imgClass = img.getAttribute('class');
+    var imgUrl = img.getAttribute('src');
+
+    var request = new XMLHttpRequest();
+    request.open('GET', imgUrl, false);
+
+    request.onload = function() {
+        if (this.status >= 200 && this.status < 400) {
+          // Success!
+          var data = this.response;
+          var parser = new DOMParser();
+          var htmlSvg = parser.parseFromString(data, 'text/html');
+          var svg = htmlSvg.querySelector('svg');
+
+          svg.setAttribute('class', 'img-svg');
+          console.log(svg);
+
+          // img.replaceWith(svg);
+          img.parentElement.insertBefore(svg, img);
+          img.parentElement.removeChild(img);
+          
+        }
+        else 
+        {
+          console.log('error!');
+        }
+      };
+      
+      request.onerror = function(e) {
+          console.log(e);
+        // There was a connection error of some sort
+      };
+      
+      request.send();
+}
+

src/scss/_custom.scss

@@ -20,6 +20,5 @@ $color-clicked: #88ab51;
 $color-ref: #262262;
 $color-current: #69678e;
 $color-disabled: #b7b6c3;
-$color-main-button: #ffffff;
-
+// $color-main-button: #ffffff;
 $body-bg-color: #f7f6fb;
\ No newline at end of file

src/scss/_fonts.scss

@@ -24,4 +24,13 @@
         url('../fonts/Montserrat-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
+}
+@font-face 
+{
+    font-family: 'Montserrat Light';
+    src: url('../fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/Montserrat-Light.woff') format('woff'),
+        url('../fonts/Montserrat-Light.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
 }
\ No newline at end of file