css/style.css

@@ -3,25 +3,53 @@
 }
 
 @font-face {
-    font-family: Lato;
+    font-family: Oswald;
     font-weight: 500;
-    src: url('../fonts/Lato/Lato-Regular.ttf');
+    src: url('../fonts/Oswald/static/Oswald-Regular.ttf');
+}
+
+@font-face {
+    font-family: Poppins;
+    font-weight: 500;
+    src: url('../fonts/Poppins/Poppins-Regular.ttf');
 }
 
 h1, h2, h3, h4, h5, h6 {
     margin : 0;
+    font-weight: 200;
 }
 
 body {
-    font-family: Lato;
+    font-family: "Oswald";
     font-weight: 700;
 }
 
+header h2 {
+    font-size: 2rem;
+    font-family: "Oswald", sans-serif;
+    font-weight: 200;
+    color:hsl(0, 0%, 78%);
+    line-height: 2; 
+    letter-spacing: 0.05rem;   
+}
+
+header p {
+    color: hsl(0, 0%, 58%);
+    text-align: center;
+    line-height: 2.3;
+    padding: 0 5%;
+    font-size: 1rem;
+    font-family: "Poppins",sans-serif;
+    font-weight: 400;
+    margin:0;
+
+}
+
 .background {
     position: absolute;
-    background-color: #161616;
+    background-color: hsl(0, 0%, 9%);
     width: 100%;
-    height: 60vh;
+    height: 74vh;
     overflow: hidden;
 }
 
@@ -48,10 +76,10 @@ header{
 }
 
 .tabs-holder {
-    width: 75%;
+    width: 22rem;
     margin: 0 auto;
     text-align: center;
-    background-color : #222222;
+    background-color : hsl(0, 0%, 13%);
     color: white;
     border-radius: 500px;
 
@@ -63,9 +91,199 @@ header{
     border-radius : 4px;
     padding: 10px;
     border-radius: 500px;
-    font-size: 13px;
+    font-size: 0.75rem;
+    font-weight: 100;
+    font-family: "Poppins";
 }
 
 .tab.active {
-    background-color : #59c692;
+    background-color : hsl(158, 63%, 47%);
+}
+
+.job-card {
+    width: 20rem;
+    border-radius: 20px;
+    height: 320px;    
+    
+    background-color: white;  
+    box-shadow: 0 0 0.5rem hsl(0, 0%, 88%);     
+    overflow: hidden;
+
+    padding: 28px 20px 28px 20px; 
+    margin-left: auto;
+    margin-right: auto;   
+    margin-top:40px;
+    text-align: center;
+}
+
+.job-card-header {
+    display: grid;
+    grid-template-columns: 3.5rem 1fr 1rem;
+    grid-template-rows: 1fr;
+    place-items: center center;  
+    gap:1rem; 
+}
+
+.job-designator-avatar {       
+    background: hsl(0, 0%, 95%);    
+    border-radius: 50%;    
+    padding: 9px 7px 9px 10px;
+}
+
+.job-designator-avatar > img {
+    width: 100%;
+}
+
+.job-designator-title {
+    color: hsl(0, 0%, 58%);         
+}
+
+.job-designator-title > h2 {  
+    font-size: 1.5rem;   
+    font-family: "Oswald";    
+    color: hsl(0, 0%, 46%)
+}
+
+.job-designator-title > h4 {    
+    text-align: left;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 0.75rem;
+    letter-spacing: 0.05rem;
+    margin-top: 4px;
+    font-family: "Poppins";
+    color: hsl(0, 0%, 78%);
+}
+
+.separator {
+    display: block;
+    height: 1px;    
+    border-top: 2px solid hsl(0, 0%, 94%);   
+    margin: 20px 0px;
+}
+
+.job-description-container {
+    display: flex;
+    flex-direction: row;      
+}
+
+.job-description-image {  
+    flex: 0 0 auto;
+    justify-self: center;    
+    margin-left: 0.75rem;
+}
+
+.job-description {
+    text-transform: capitalize;
+    font-size: small;   
+    font-family: "Poppins";
+    color:hsl(0, 0%, 58%);   
+    margin-left: 1.25rem;
+}
+
+.green-outline-button{
+    border-radius: 500px;
+    border: 1px solid hsl(158, 63%, 47%);   
+    padding :12px;  
+    color: hsl(158, 63%, 47%);
+    font-weight: bold;
+    font-family: "Poppins";
+    width: 94%;
+    margin: 0.25rem;
+}
+
+.job-categories::before {
+    content: "";
+    border-top: 4rem solid white;
+    border-right: 50vw solid hsl(0, 0%, 9%);
+    border-left: 50vw solid hsl(0, 0%, 9%);
+    border-bottom: solid hsl(0, 0%, 9%);
+    display: block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+}
+
+.job-categories{
+    position: relative;
+    background-color: hsl(0, 0%, 9%);
+    width: 100%;   
+    overflow: hidden;
+    margin-top: 7vw;
+}
+
+.category-cards {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-evenly;
+    margin-bottom: 8rem;
+}
+
+.category-cards .card {
+    flex: 0 0 44%;
+    border-radius: 1.5rem;
+    padding: 14px;
+    margin: 6px;    
+    text-align: center;
+}
+
+.category-cards img {
+    background: hsl(0, 0%, 95%);
+    border-radius: 50%;
+    padding: 10px;
+}
+
+.category-cards .tag-line {
+    font-size: 1.2rem;
+    font-weight: 600;    
+} 
+
+.category-cards .card-description {
+    text-transform: capitalize;
+    font-size: small;
+    font-family: "Poppins";
+    color: hsl(0, 0%, 58%);
+}
+.design-category {   
+    background-color: hsl(355, 53%, 91%);   
+    color: 	hsl(353, 54%, 74%);    
+}
+
+.development-category {   
+    background-color: hsl(180, 52%, 90%);    
+    color: 	hsl(179, 30%, 57%);  
+}
+
+.marketing-category {   
+    background-color: hsl(83, 54%, 91%);    
+    color: hsl(79, 60%, 67%);
+}
+
+.operations-category {  
+    background-color: hsl(275, 57%, 91%); 
+    color: 	hsl(279, 39%, 72%);   
+}
+
+.category-cards::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 0;
+    height: 0;       
+    left: 0;
+    border-left: 56vw solid hsl(0, 0%, 15%);
+    border-right: 72vw solid hsl(0, 0%, 15%);
+    border-top: 2rem solid hsl(0, 0%, 8%);
+    bottom: 0;
+}
+
+.jobs-by-category::before {
+    content: "";
+    display: block;    
+    border-left: 56vw solid transparent;
+    border-right: 42vw solid transparent;
+    border-top: 1rem solid hsl(0, 0%, 15%);
 }

fonts/Oswald/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Oswald Project Authors (https://github.com/googlefonts/OswaldFont)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

fonts/Oswald/README.txt

@@ -0,0 +1,68 @@
+Oswald Variable Font
+====================
+
+This download contains Oswald as both a variable font and static fonts.
+
+Oswald is a variable font with this axis:
+  wght
+
+This means all the styles are contained in a single file:
+  Oswald-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Oswald:
+  static/Oswald-ExtraLight.ttf
+  static/Oswald-Light.ttf
+  static/Oswald-Regular.ttf
+  static/Oswald-Medium.ttf
+  static/Oswald-SemiBold.ttf
+  static/Oswald-Bold.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them freely in your products & projects - print or digital,
+commercial or otherwise. However, you can't sell the fonts on their own.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

fonts/Poppins/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

image/Designing.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.24" height="22.502" viewBox="0 0 15.24 22.502">
+  <g id="Designing" transform="translate(0 0)">
+    <path id="Path_24" data-name="Path 24" d="M89.309,4.992a5.219,5.219,0,0,0-1.291,2.767H83.962a4.188,4.188,0,0,0-1.276-2.77.238.238,0,0,1-.044-.281c.366-.7.794-1.436,1.3-2.2A26.549,26.549,0,0,1,85.653.181l.029-.035a.4.4,0,0,1,.613,0l.037.046c.545.672,1.107,1.427,1.663,2.268.519.785.964,1.543,1.347,2.257A.24.24,0,0,1,89.309,4.992Z" transform="translate(-82.614 -0.001)" fill="#8186a5"/>
+    <path id="Path_25" data-name="Path 25" d="M155.942,4.717c-.383-.714-.829-1.472-1.347-2.257-.569-.861-1.144-1.631-1.7-2.314a.4.4,0,0,0-.613,0,16.182,16.182,0,0,0,1.285,2.811,3.735,3.735,0,0,1,.042,3.306l-.026.056a5.229,5.229,0,0,0-.42,1.441h1.456a5.219,5.219,0,0,1,1.291-2.767A.239.239,0,0,0,155.942,4.717Z" transform="translate(-149.214 0)" fill="#5e648b"/>
+    <path id="Path_26" data-name="Path 26" d="M0,0H4.056V1.33H0Z" transform="translate(5.407 9.088) rotate(180)" fill="#fff273"/>
+    <path id="Path_27" data-name="Path 27" d="M172.515,176.519h1.456v1.33h-1.456Z" transform="translate(-168.564 -168.761)" fill="#ffde1d"/>
+    <path id="Path_28" data-name="Path 28" d="M107.039,207.277v12.787a.134.134,0,0,1-.134.134h-4.786a.134.134,0,0,1-.134-.134V207.277a.493.493,0,0,1,.493-.493h4.069A.493.493,0,0,1,107.039,207.277Z" transform="translate(-101.134 -197.696)" fill="#5e648b"/>
+    <g id="Group_5" data-name="Group 5" transform="translate(2.797 0)">
+      <path id="Path_29" data-name="Path 29" d="M175.341,206.784h-1.4a.493.493,0,0,1,.493.493V220.2H175.7a.134.134,0,0,0,.134-.134V207.277A.493.493,0,0,0,175.341,206.784Z" transform="translate(-172.725 -197.696)" fill="#3a4270"/>
+      <circle id="Ellipse_1" data-name="Ellipse 1" cx="0.582" cy="0.582" r="0.582" transform="translate(0 5.02)" fill="#3a4270"/>
+      <path id="Path_30" data-name="Path 30" d="M152.434.193V5.422c0,.187-.152-.061-.34-.061s-.34.249-.34.061V.181l.029-.035a.4.4,0,0,1,.613,0l.037.046Z" transform="translate(-151.513 -0.002)" fill="#3a4270"/>
+    </g>
+    <path id="Path_31" data-name="Path 31" d="M101.985,234.978h5.054v.679h-5.054Z" transform="translate(-101.134 -224.651)" fill="#fff273"/>
+    <path id="Path_32" data-name="Path 32" d="M185.162,234.978h1.4v.679h-1.4Z" transform="translate(-180.655 -224.651)" fill="#ffde1d"/>
+    <path id="Path_33" data-name="Path 33" d="M299.545,18.271l-2.98.481-.587-.1-2.4-.389,2-6.187.742-2.3a.255.255,0,0,1,.485,0l.743,2.3Z" transform="translate(-284.309 -9.179)" fill="#ffd8a6"/>
+    <path id="Path_34" data-name="Path 34" d="M351.691,18.283l-2.98.481-.587-.1,2.389-.385-1.278-6.191-.512-2.478a.249.249,0,0,1,.226.176l.743,2.3Z" transform="translate(-336.455 -9.191)" fill="#ffc17c"/>
+    <path id="Path_35" data-name="Path 35" d="M299.549,206.784v13.28a.134.134,0,0,1-.134.134h-5.7a.134.134,0,0,1-.134-.134v-13.28Z" transform="translate(-284.308 -197.696)" fill="#ff95c2"/>
+    <path id="Path_36" data-name="Path 36" d="M402.585,206.784V220.2h1.044a.134.134,0,0,0,.134-.134v-13.28Z" transform="translate(-388.523 -197.696)" fill="#ff80b3"/>
+    <path id="Path_37" data-name="Path 37" d="M293.58,206.784h5.969v1.579H293.58Z" transform="translate(-284.308 -197.696)" fill="#fff273"/>
+    <path id="Path_38" data-name="Path 38" d="M402.585,206.784h1.178v1.579h-1.178Z" transform="translate(-388.523 -197.696)" fill="#ffde1d"/>
+    <path id="Path_39" data-name="Path 39" d="M340.954,12.073h-1.971l.742-2.3a.255.255,0,0,1,.486,0Z" transform="translate(-327.716 -9.172)" fill="#5e648b"/>
+    <path id="Path_40" data-name="Path 40" d="M362.737,12.092h-.458l-.512-2.478a.249.249,0,0,1,.226.176Z" transform="translate(-349.498 -9.191)" fill="#3a4270"/>
+    <path id="Path_41" data-name="Path 41" d="M338.819,242.707h1.988v11.835h-1.988Z" transform="translate(-327.559 -232.04)" fill="#ff5876"/>
+  </g>
+</svg>

image/Developer.svg

@@ -0,0 +1,23 @@
+<svg id="Developer" xmlns="http://www.w3.org/2000/svg" width="26.562" height="26.585" viewBox="0 0 26.562 26.585">
+  <path id="Path_4" data-name="Path 4" d="M270.939,38.414H260.875a1.516,1.516,0,0,0-1.516,1.516v5.693a1.515,1.515,0,0,0,1.516,1.516h3.58l-.579,2.335a.331.331,0,0,0,.523.343l3.486-2.678h3.053a1.516,1.516,0,0,0,1.516-1.516V39.93A1.516,1.516,0,0,0,270.939,38.414Zm0,0" transform="translate(-245.892 -36.419)" fill="#88dbfd"/>
+  <path id="Path_5" data-name="Path 5" d="M346.606,206.962l-.448,1.806a.331.331,0,0,0,.523.343l3.486-2.678h-2.873Zm0,0" transform="translate(-328.174 -195.715)" fill="#5abfe9"/>
+  <path id="Path_6" data-name="Path 6" d="M429.9,38.414h-2.873a1.516,1.516,0,0,1,1.516,1.516v5.693a1.516,1.516,0,0,1-1.516,1.516H429.9a1.516,1.516,0,0,0,1.516-1.516V39.93A1.516,1.516,0,0,0,429.9,38.414Zm0,0" transform="translate(-404.858 -36.419)" fill="#5abfe9"/>
+  <g id="Group_2" data-name="Group 2" transform="translate(17.592 4.165)">
+    <path id="Path_7" data-name="Path 7" d="M338.958,106.729l1.259-.817a.149.149,0,0,1,.094-.025.375.375,0,0,1,.337.362.227.227,0,0,1-.089.193l-.872.565.872.565a.227.227,0,0,1,.089.193.375.375,0,0,1-.337.362.15.15,0,0,1-.094-.025l-1.259-.817a.327.327,0,0,1,0-.555Zm0,0" transform="translate(-338.805 -104.554)" fill="#f2f2f2"/>
+    <path id="Path_8" data-name="Path 8" d="M386.585,80.481a.215.215,0,0,1-.02.094l-1.744,3.572a.248.248,0,0,1-.223.124.274.274,0,0,1-.277-.263.223.223,0,0,1,.025-.094l1.739-3.572a.218.218,0,0,1,.208-.124A.284.284,0,0,1,386.585,80.481Zm0,0" transform="translate(-381.957 -80.219)" fill="#f2f2f2"/>
+    <path id="Path_9" data-name="Path 9" d="M439.635,107.284l-1.258.817a.15.15,0,0,1-.094.025.375.375,0,0,1-.337-.362.227.227,0,0,1,.089-.193l.872-.565-.872-.565a.227.227,0,0,1-.089-.193.375.375,0,0,1,.337-.362.149.149,0,0,1,.094.025l1.258.817a.327.327,0,0,1,0,.555Zm0,0" transform="translate(-432.798 -104.554)" fill="#f2f2f2"/>
+  </g>
+  <path id="Path_10" data-name="Path 10" d="M21.136,242.106a3.444,3.444,0,0,0-2.107-2.9,49.874,49.874,0,0,0-5.539-1.75.826.826,0,0,1-.675-.812v-2.316h-4.4v2.316a.826.826,0,0,1-.675.812A49.874,49.874,0,0,0,2.2,239.2a3.444,3.444,0,0,0-2.107,2.9L0,247.627a1.1,1.1,0,0,0,1.1,1.115H20.126a1.1,1.1,0,0,0,1.1-1.115Zm0,0" transform="translate(0.002 -222.157)" fill="#fcc18b"/>
+  <path id="Path_11" data-name="Path 11" d="M202.7,242.106a3.444,3.444,0,0,0-2.107-2.9,49.874,49.874,0,0,0-5.539-1.75.826.826,0,0,1-.675-.812v-2.316H191.5v3.7a.826.826,0,0,0,.675.812,49.873,49.873,0,0,1,5.539,1.75,3.444,3.444,0,0,1,2.107,2.9l.087,5.247h1.776a1.1,1.1,0,0,0,1.1-1.115Zm0,0" transform="translate(-181.56 -222.157)" fill="#eaab65"/>
+  <path id="Path_12" data-name="Path 12" d="M89.59,121.426h-.578a.893.893,0,0,0-.88,1.076l.227,1.25c.176.927,1.233.5,1.233.5Zm0,0" transform="translate(-83.54 -115.121)" fill="#eaab65"/>
+  <path id="Path_13" data-name="Path 13" d="M292.333,121.426h.578a.893.893,0,0,1,.88,1.076l-.227,1.25c-.176.927-1.233.5-1.233.5Zm0,0" transform="translate(-277.153 -115.121)" fill="#fcc18b"/>
+  <path id="Path_14" data-name="Path 14" d="M122.126,5.846a4.553,4.553,0,0,0-6.409,0,4.848,4.848,0,0,0-1.478,3.562v4.738c0,2.24,2.911,4.56,4.682,4.56s4.682-2.32,4.682-4.56V9.408A4.848,4.848,0,0,0,122.126,5.846Zm0,0" transform="translate(-108.307 -4.292)" fill="#fcc18b"/>
+  <path id="Path_15" data-name="Path 15" d="M181.4,5.846a4.729,4.729,0,0,0-3.2-1.319,4.6,4.6,0,0,0-1.437.244,4.981,4.981,0,0,1,1.768,1.075,4.848,4.848,0,0,1,1.478,3.562v4.738c0,1.695-1.667,3.435-3.245,4.182a3.482,3.482,0,0,0,1.437.378c1.77,0,4.682-2.32,4.682-4.56V9.408A4.848,4.848,0,0,0,181.4,5.846Zm0,0" transform="translate(-167.583 -4.292)" fill="#eaab65"/>
+  <path id="Path_16" data-name="Path 16" d="M105.145,0H99.352a2.7,2.7,0,0,0-2.7,2.7V6.424a1.864,1.864,0,0,1,1.221.456.158.158,0,0,0,.268-.113V3.847a1.193,1.193,0,0,1,1.193-1.193h1.084a1.233,1.233,0,0,1,.78.278l.106.087a1.49,1.49,0,0,0,1.886,0l.106-.087a1.233,1.233,0,0,1,.78-.278h1.084a1.193,1.193,0,0,1,1.193,1.193V6.766a.158.158,0,0,0,.269.113,1.863,1.863,0,0,1,1.221-.456V2.7A2.7,2.7,0,0,0,105.145,0Zm0,0" transform="translate(-91.634)" fill="#426175"/>
+  <path id="Path_17" data-name="Path 17" d="M241.92,0h-1a4.071,4.071,0,0,1,.829,2.654h.19a1.193,1.193,0,0,1,1.193,1.193V6.766a.158.158,0,0,0,.269.113,1.864,1.864,0,0,1,1.221-.456V2.7A2.7,2.7,0,0,0,241.92,0Zm0,0" transform="translate(-228.409)" fill="#2c4456"/>
+  <path id="Path_18" data-name="Path 18" d="M19.029,304.531a32.729,32.729,0,0,0-3.9-1.3l-.281.106a11.963,11.963,0,0,1-8.475,0l-.281-.106a32.724,32.724,0,0,0-3.9,1.3,3.443,3.443,0,0,0-2.107,2.9L0,312.955a1.1,1.1,0,0,0,1.1,1.115H20.126a1.1,1.1,0,0,0,1.1-1.115l-.091-5.521A3.444,3.444,0,0,0,19.029,304.531Zm0,0" transform="translate(0.002 -287.486)" fill="#33bca5"/>
+  <path id="Path_19" data-name="Path 19" d="M59.432,312.683H45.722a.8.8,0,0,1-.793-.738l-.561-7.867a.8.8,0,0,1,.793-.851H59.993a.8.8,0,0,1,.793.851l-.561,7.868A.8.8,0,0,1,59.432,312.683Zm0,0" transform="translate(-42.063 -287.482)" fill="#f2f2f2"/>
+  <path id="Path_20" data-name="Path 20" d="M292.465,303.23H289.57a.8.8,0,0,1,.793.851l-.613,8.605H291.9a.8.8,0,0,0,.793-.738l.561-7.867A.8.8,0,0,0,292.465,303.23Zm0,0" transform="translate(-274.535 -287.486)" fill="#cdd6df"/>
+  <path id="Path_21" data-name="Path 21" d="M58.257,486.743H42.781a.692.692,0,0,1,0-1.383H58.257a.692.692,0,0,1,0,1.383Zm0,0" transform="translate(-39.904 -460.158)" fill="#cdd6df"/>
+  <path id="Path_22" data-name="Path 22" d="M185.323,380.193a1.107,1.107,0,1,1-1.107-1.107A1.107,1.107,0,0,1,185.323,380.193Zm0,0" transform="translate(-173.602 -359.402)" fill="#fff"/>
+</svg>

image/Development.svg

@@ -0,0 +1,17 @@
+<svg id="Development" xmlns="http://www.w3.org/2000/svg" width="21.41" height="21.41" viewBox="0 0 21.41 21.41">
+  <path id="Path_42" data-name="Path 42" d="M21.41,0V21.41H0V6.272L10.7,5.181l1.568-.163L18.232,0Zm0,0" fill="#deecf1"/>
+  <path id="Path_43" data-name="Path 43" d="M266.7,0V21.41H256V5.181l1.568-.163L263.527,0Zm0,0" transform="translate(-245.295)" fill="#c5d3dd"/>
+  <path id="Path_44" data-name="Path 44" d="M18.232,0l-4.7,6.272H0V0Zm0,0" fill="#537983"/>
+  <path id="Path_45" data-name="Path 45" d="M258.823,6.272H256V0h7.527Zm0,0" transform="translate(-245.295)" fill="#3e5959"/>
+  <g id="Group_6" data-name="Group 6" transform="translate(2.551 2.509)">
+    <path id="Path_46" data-name="Path 46" d="M121,60h1.254v1.254H121Zm0,0" transform="translate(-118.491 -60)" fill="#25d9f8"/>
+    <path id="Path_47" data-name="Path 47" d="M181,60h1.254v1.254H181Zm0,0" transform="translate(-175.982 -60)" fill="#25d9f8"/>
+    <path id="Path_48" data-name="Path 48" d="M61,60h1.254v1.254H61Zm0,0" transform="translate(-61 -60)" fill="#25d9f8"/>
+    <path id="Path_49" data-name="Path 49" d="M61,180v11.332H77.308V180Zm0,0" transform="translate(-61 -174.982)" fill="#25d9f8"/>
+  </g>
+  <path id="Path_50" data-name="Path 50" d="M256,180h8.154v11.332H256Zm0,0" transform="translate(-245.295 -172.473)" fill="#00c0f1"/>
+  <path id="Path_51" data-name="Path 51" d="M306.281,251.3l-.887-.887,2.065-2.065-2.065-2.065.887-.887,2.952,2.952Zm0,0" transform="translate(-292.624 -235.133)" fill="#c5d3dd"/>
+  <path id="Path_52" data-name="Path 52" d="M117.741,251.3l-2.952-2.952,2.952-2.952.887.887-2.065,2.065,2.065,2.065Zm0,0" transform="translate(-109.989 -235.133)" fill="#deecf1"/>
+  <path id="Path_53" data-name="Path 53" d="M222.463,251.053l-1.53,4.077-.351.941-1.179-.451,1.53-4.077.351-.941Zm0,0" transform="translate(-210.228 -240.122)" fill="#deecf1"/>
+  <path id="Path_54" data-name="Path 54" d="M257.53,251.053,256,255.13v-3.588l.351-.941Zm0,0" transform="translate(-245.295 -240.122)" fill="#c5d3dd"/>
+</svg>

image/Marketing.svg

@@ -0,0 +1,29 @@
+<svg id="Marketing" xmlns="http://www.w3.org/2000/svg" width="20.995" height="20.65" viewBox="0 0 20.995 20.65">
+  <path id="Path_55" data-name="Path 55" d="M71.7,326.056l-1.85-.379-1.07,1.108-3.648-2.879,2.433-1.66,2.587-2.831a.974.974,0,0,1,1.543.138l3.065,3.515a1.13,1.13,0,0,1-.274,1.713l-1.806,1.075A1.68,1.68,0,0,1,71.7,326.056Zm0,0" transform="translate(-62.102 -307.044)" fill="#ffe7cf"/>
+  <path id="Path_56" data-name="Path 56" d="M110.8,386.748l-.748-.858-3.119,1.859a1.68,1.68,0,0,1-.981.2l-1.62-.174-1.4,1.2,1.887,1.49,1.07-1.109,1.85.379a1.681,1.681,0,0,0,.981-.2l1.806-1.075A1.13,1.13,0,0,0,110.8,386.748Zm0,0" transform="translate(-99.011 -370.724)" fill="#efd5bd"/>
+  <path id="Path_57" data-name="Path 57" d="M153.148,290.749c-.361-.56-.8-.277-1.162-.837s.079-.844-.282-1.4-.8-.277-1.162-.837.079-.844-.283-1.4c-.221-.342-.621-1.049-.864-1.147l-1.949.963,3.392,5.35a1.106,1.106,0,0,0,1.529.33l.649-.418a.432.432,0,0,0,.136-.592Zm0,0" transform="translate(-141.662 -274.65)" fill="#344a5d"/>
+  <path id="Path_58" data-name="Path 58" d="M81.163,272.16l-1.531.945a.618.618,0,0,1-.851-.2l-.866-1.4a.618.618,0,0,1,.2-.851l1.531-.945a.383.383,0,0,1,.527.125l1.113,1.8A.383.383,0,0,1,81.163,272.16Zm0,0" transform="translate(-74.707 -258.859)" fill="#344a5d"/>
+  <path id="Path_59" data-name="Path 59" d="M96.971,55.858l-2.545,1.918a.988.988,0,0,0-.232,1.2l1.255,2.484a.643.643,0,0,0,.981.284l2.545-1.918,8.05-2.14-4.877-9.652Zm0,0" transform="translate(-89.703 -45.793)" fill="#fed066"/>
+  <path id="Path_60" data-name="Path 60" d="M124.176,206.367l-9.78,2.222-3.849,2.375.9,1.451a.87.87,0,0,0,1.2.284l3.108-1.918,9.831-2.14Zm0,0" transform="translate(-107.066 -198.343)" fill="#f5b556"/>
+  <path id="Path_61" data-name="Path 61" d="M100.054,219.961l-3.108,1.918a.87.87,0,0,1-1.2-.284l-1.533-2.484a.87.87,0,0,1,.284-1.2L97.607,216Zm0,0" transform="translate(-90.403 -207.555)" fill="#fd715c"/>
+  <path id="Path_62" data-name="Path 62" d="M114.4,254.059l-3.849,2.375.9,1.451a.87.87,0,0,0,1.2.284l1.554-.959,1.554-.959Zm0,0" transform="translate(-106.186 -243.954)" fill="#d83e3a"/>
+  <path id="Path_63" data-name="Path 63" d="M291.53,39.861l-.424.262a.468.468,0,0,1-.644-.153l-6.4-10.376a.468.468,0,0,1,.153-.644l.424-.262a.468.468,0,0,1,.644.153l6.4,10.376A.468.468,0,0,1,291.53,39.861Zm0,0" transform="translate(-273.619 -27.285)" fill="#fd715c"/>
+  <path id="Path_64" data-name="Path 64" d="M402.555,221.141l-1.053-1.707-1.221.753,1.053,1.707a.468.468,0,0,0,.644.153l.424-.262A.468.468,0,0,0,402.555,221.141Zm0,0" transform="translate(-384.492 -210.594)" fill="#d83e3a"/>
+  <path id="Path_65" data-name="Path 65" d="M246.718,396.567a.8.8,0,0,0,1.1.267l1.171-.716a.8.8,0,0,0-.838-1.371l-1.171.716A.8.8,0,0,0,246.718,396.567Zm0,0" transform="translate(-236.67 -379.055)" fill="#ffe7cf"/>
+  <path id="Path_66" data-name="Path 66" d="M249.418,396.179a.8.8,0,0,0-.391-.328.8.8,0,0,1-.377.793l-1.171.716a.8.8,0,0,1-.713.061.8.8,0,0,0,1.215.578l1.171-.716A.8.8,0,0,0,249.418,396.179Zm0,0" transform="translate(-236.828 -380.221)" fill="#efd5bd"/>
+  <path id="Path_67" data-name="Path 67" d="M235.914,362.517a.816.816,0,0,0,1.121.271l1.15-.7a.815.815,0,1,0-.851-1.392l-1.151.7A.815.815,0,0,0,235.914,362.517Zm0,0" transform="translate(-226.299 -346.01)" fill="#ffe7cf"/>
+  <path id="Path_68" data-name="Path 68" d="M238.6,362.253a.811.811,0,0,0-.384-.327.815.815,0,0,1-.383.8l-1.151.7a.814.814,0,0,1-.738.057.815.815,0,0,0,1.234.593l1.151-.7A.816.816,0,0,0,238.6,362.253Zm0,0" transform="translate(-226.444 -347.301)" fill="#efd5bd"/>
+  <path id="Path_69" data-name="Path 69" d="M217.508,332.837a.816.816,0,0,0,1.121.271l1.151-.7a.816.816,0,0,0-.851-1.392l-1.151.7A.816.816,0,0,0,217.508,332.837Zm0,0" transform="translate(-208.634 -317.529)" fill="#ffe7cf"/>
+  <path id="Path_70" data-name="Path 70" d="M220.172,332.652a.812.812,0,0,0-.374-.324.815.815,0,0,1-.385.787l-1.151.7a.814.814,0,0,1-.747.053.814.814,0,0,0,1.235.605l1.151-.7A.816.816,0,0,0,220.172,332.652Zm0,0" transform="translate(-208.756 -318.899)" fill="#efd5bd"/>
+  <path id="Path_71" data-name="Path 71" d="M200.158,302.4a.816.816,0,0,0,1.121.271l1.151-.7a.816.816,0,1,0-.851-1.392l-1.151.7A.816.816,0,0,0,200.158,302.4Zm0,0" transform="translate(-191.983 -288.32)" fill="#ffe7cf"/>
+  <path id="Path_72" data-name="Path 72" d="M203.085,301.6a.811.811,0,0,0-.457-.354.815.815,0,0,1-.371.866l-1.151.7a.812.812,0,0,1-.665.083.813.813,0,0,0,1.222.526l1.151-.7A.816.816,0,0,0,203.085,301.6Zm0,0" transform="translate(-192.369 -289.076)" fill="#efd5bd"/>
+  <path id="Path_73" data-name="Path 73" d="M123.054,299.986l-.213.13a.7.7,0,0,1-.97-.22l-.353-.578a.606.606,0,0,0-.839-.187c-.291,2.134-3.323,1.941-3.323,1.941l1.879-2.83a1.511,1.511,0,0,1,.512-.527l1.06-.658a1.08,1.08,0,0,1,1.494.333l1,1.631A.7.7,0,0,1,123.054,299.986Zm0,0" transform="translate(-112.766 -285.075)" fill="#ffe7cf"/>
+  <path id="Path_74" data-name="Path 74" d="M165.1,327.79l-.008-.013a.725.725,0,0,1-.238.236l-.214.13a.7.7,0,0,1-.969-.22l-.353-.578a.606.606,0,0,0-.839-.187,4.221,4.221,0,0,1-1.28,2.34,2,2,0,0,0,1.28-1.6.606.606,0,0,1,.839.187l.353.578a.7.7,0,0,0,.969.22l.214-.131A.7.7,0,0,0,165.1,327.79Zm0,0" transform="translate(-154.774 -313.863)" fill="#efd5bd"/>
+  <path id="Path_75" data-name="Path 75" d="M83.543,395.626l-2.989-3.551.984-.828a.074.074,0,0,1,.1.009l2.894,3.439a.074.074,0,0,1-.009.1Zm0,0" transform="translate(-77.342 -375.814)" fill="#cdd6df"/>
+  <path id="Path_76" data-name="Path 76" d="M113.217,428.162l-1.539-1.83-1.04.875,1.587,1.886.984-.828A.073.073,0,0,0,113.217,428.162Zm0,0" transform="translate(-106.175 -409.281)" fill="#96a4aa"/>
+  <path id="Path_77" data-name="Path 77" d="M402.034,89.411a.355.355,0,0,1-.186-.657l1.922-1.183a.355.355,0,0,1,.372.6l-1.922,1.183A.351.351,0,0,1,402.034,89.411Zm0,0" transform="translate(-385.824 -83.973)" fill="#dbd9d1"/>
+  <path id="Path_78" data-name="Path 78" d="M439.462,170.145l-.035,0-2.819-.274a.355.355,0,1,1,.069-.706l2.818.274a.355.355,0,0,1-.034.708Zm0,0" transform="translate(-418.821 -162.266)" fill="#dbd9d1"/>
+  <path id="Path_79" data-name="Path 79" d="M367.424,3.35a.355.355,0,0,1-.33-.483L368.121.227a.355.355,0,0,1,.661.257l-1.027,2.639A.355.355,0,0,1,367.424,3.35Zm0,0" transform="translate(-352.179 -0.001)" fill="#dbd9d1"/>
+  <path id="Path_80" data-name="Path 80" d="M6.955,406.788,3.725,403a.078.078,0,0,0-.1-.014L.182,405.7a.479.479,0,0,0-.182.376v1.1a.479.479,0,0,0,.479.479H6.106a.479.479,0,0,0,.373-.179l.473-.588A.078.078,0,0,0,6.955,406.788Zm0,0" transform="translate(0 -387.01)" fill="#3c5666"/>
+  <path id="Path_81" data-name="Path 81" d="M71.794,448.113l-1.532-1.8-2.255,2.668h2.938a.479.479,0,0,0,.373-.179l.473-.588A.078.078,0,0,0,71.794,448.113Zm0,0" transform="translate(-64.839 -428.335)" fill="#194451"/>
+</svg>

image/Operations.svg

@@ -0,0 +1,19 @@
+<svg id="Operations" xmlns="http://www.w3.org/2000/svg" width="23.995" height="23.995" viewBox="0 0 23.995 23.995">
+  <g id="Group_13" data-name="Group 13">
+    <path id="Path_82" data-name="Path 82" d="M217.61.356a.362.362,0,0,0-.327-.312Q216.773,0,216.251,0t-1.032.044a.362.362,0,0,0-.327.312l-.277,2,1.636.724,1.636-.724Z" transform="translate(-204.253)" fill="#8ebaff"/>
+    <path id="Path_83" data-name="Path 83" d="M105.383,22.839a.362.362,0,0,0-.439-.106q-.464.217-.916.477t-.871.554a.362.362,0,0,0-.128.433l.761,1.872,1.779-.191,1.055-1.445Z" transform="translate(-98.029 -21.603)" fill="#8ebaff"/>
+    <path id="Path_84" data-name="Path 84" d="M24.2,103.027a.362.362,0,0,0-.433.128q-.293.42-.554.871t-.477.916a.362.362,0,0,0,.106.439l1.6,1.241,1.445-1.055.191-1.779Z" transform="translate(-21.603 -98.028)" fill="#8ebaff"/>
+    <path id="Path_85" data-name="Path 85" d="M.356,214.893a.362.362,0,0,0-.312.327Q0,215.73,0,216.252t.044,1.032a.362.362,0,0,0,.312.327l2,.277.724-1.636-.724-1.636Z" transform="translate(0 -204.254)" fill="#8ebaff"/>
+    <path id="Path_86" data-name="Path 86" d="M22.839,320.227a.362.362,0,0,0-.106.439q.217.464.477.916t.554.871a.362.362,0,0,0,.433.128l1.872-.761-.191-1.779-1.445-1.055Z" transform="translate(-21.603 -303.585)" fill="#8ebaff"/>
+    <path id="Path_87" data-name="Path 87" d="M103.027,406.342a.362.362,0,0,0,.128.433q.42.293.871.554t.916.477a.362.362,0,0,0,.439-.106l1.241-1.6-1.055-1.445-1.779-.191Z" transform="translate(-98.028 -384.942)" fill="#8ebaff"/>
+    <path id="Path_88" data-name="Path 88" d="M214.893,435.888a.362.362,0,0,0,.327.312q.51.044,1.032.044t1.032-.044a.362.362,0,0,0,.327-.312l.277-2-1.636-.724-1.636.724Z" transform="translate(-204.254 -412.249)" fill="#8ebaff"/>
+    <path id="Path_89" data-name="Path 89" d="M320.227,407.7a.362.362,0,0,0,.439.106q.464-.217.916-.477t.871-.554a.362.362,0,0,0,.128-.433l-.761-1.872-1.779.191-1.055,1.445Z" transform="translate(-303.585 -384.943)" fill="#8ebaff"/>
+    <path id="Path_90" data-name="Path 90" d="M406.342,322.581a.362.362,0,0,0,.433-.128q.293-.42.554-.871t.477-.916a.362.362,0,0,0-.106-.439l-1.6-1.241-1.445,1.055-.191,1.779Z" transform="translate(-384.942 -303.585)" fill="#8ebaff"/>
+    <path id="Path_91" data-name="Path 91" d="M435.888,217.61a.362.362,0,0,0,.312-.327q.044-.51.044-1.032t-.044-1.032a.362.362,0,0,0-.312-.327l-2-.277-.724,1.636.724,1.636Z" transform="translate(-412.249 -204.253)" fill="#8ebaff"/>
+    <path id="Path_92" data-name="Path 92" d="M407.7,105.383a.362.362,0,0,0,.106-.439q-.217-.464-.477-.916t-.554-.871a.362.362,0,0,0-.433-.128l-1.872.761.191,1.779,1.445,1.055Z" transform="translate(-384.943 -98.029)" fill="#8ebaff"/>
+    <path id="Path_93" data-name="Path 93" d="M322.581,24.2a.362.362,0,0,0-.128-.433q-.42-.293-.871-.554t-.916-.477a.362.362,0,0,0-.439.106l-1.241,1.6,1.055,1.445,1.779.191Z" transform="translate(-303.585 -21.603)" fill="#8ebaff"/>
+  </g>
+  <path id="Path_94" data-name="Path 94" d="M55.777,46a9.777,9.777,0,1,0,9.777,9.777A9.777,9.777,0,0,0,55.777,46Zm0,17.381a7.6,7.6,0,1,1,7.6-7.6A7.6,7.6,0,0,1,55.777,63.381Z" transform="translate(-43.779 -43.779)" fill="#a3d1ff"/>
+  <path id="Path_95" data-name="Path 95" d="M84.328,76a8.328,8.328,0,1,0,8.328,8.328A8.328,8.328,0,0,0,84.328,76Zm1.448,8.328a1.448,1.448,0,1,1-1.448-1.448A1.448,1.448,0,0,1,85.777,84.328Zm-8.05,1.941a6.887,6.887,0,0,1,4.981-8.629.725.725,0,0,1,.9.7V80.78a3.621,3.621,0,0,0-2.71,4.7l-2.11,1.218A.725.725,0,0,1,77.726,86.27Zm11.585,2.8a6.879,6.879,0,0,1-9.967,0,.724.724,0,0,1,.165-1.124l2.109-1.217a3.619,3.619,0,0,0,5.42,0l2.109,1.217A.724.724,0,0,1,89.312,89.071Zm.561-2.378-2.11-1.218a3.621,3.621,0,0,0-2.71-4.7V78.344a.725.725,0,0,1,.9-.7A6.887,6.887,0,0,1,90.93,86.27a.725.725,0,0,1-1.058.424Z" transform="translate(-72.331 -72.331)" fill="#c7e3ff"/>
+  <path id="Path_96" data-name="Path 96" d="M205.673,203.5a2.173,2.173,0,1,0,2.173,2.173A2.173,2.173,0,0,0,205.673,203.5Zm0,2.9a.724.724,0,1,1,.724-.724A.724.724,0,0,1,205.673,206.4Z" transform="translate(-193.675 -193.675)" fill="#a3d1ff"/>
+</svg>

image/infinite.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.591" height="11.042" viewBox="0 0 22.591 11.042">
+  <g id="infinite" transform="translate(-1.06 -10.06)" opacity="0.6">
+    <path id="Path_3356" data-name="Path 3356" d="M12.356,15.581S10.19,11.25,6.671,11.25a4.332,4.332,0,1,0,0,8.662,5.359,5.359,0,0,0,3.519-1.444" transform="translate(0 0)" fill="none" stroke="#fc9524" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.38"/>
+    <path id="Path_3357" data-name="Path 3357" d="M18,15.581s2.165,4.331,5.684,4.331a4.332,4.332,0,1,0,0-8.662,5.531,5.531,0,0,0-3.519,1.444" transform="translate(-5.644 0)" fill="none" stroke="#fc9524" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.38"/>
+  </g>
+</svg>

image/location.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.5" height="23.099" viewBox="0 0 16.5 23.099">
+  <g id="location" transform="translate(-6.75 -2.25)">
+    <path id="Path_4397" data-name="Path 4397" d="M20.25,13.5A2.25,2.25,0,1,1,18,11.25,2.25,2.25,0,0,1,20.25,13.5Z" transform="translate(-3 -2.8)" fill="#fff"/>
+    <path id="Path_4398" data-name="Path 4398" d="M15,2.25a8.085,8.085,0,0,0-8.25,7.889c0,2.071.944,4.826,2.806,8.187a60.509,60.509,0,0,0,4.125,6.354,1.637,1.637,0,0,0,2.641,0,60.748,60.748,0,0,0,4.125-6.354c1.86-3.36,2.8-6.115,2.8-8.187A8.085,8.085,0,0,0,15,2.25ZM15,13.8a3.3,3.3,0,1,1,3.3-3.3A3.3,3.3,0,0,1,15,13.8Z" fill="#fff"/>
+  </g>
+</svg>

image/officechair.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.25" height="19" viewBox="0 0 14.25 19">
+  <path id="officechair" d="M13.657,11.875H11.875a1.2,1.2,0,0,1-1.188,1.188H8.313v2.375h2.969a.594.594,0,0,1,0,1.188H2.969a.594.594,0,0,1,0-1.188H5.938V13.063H3.563a1.133,1.133,0,0,1-.844-.353,1.154,1.154,0,0,1-.343-.835H.594A.571.571,0,0,1,.176,11.7.571.571,0,0,1,0,11.282V6.531a.571.571,0,0,1,.176-.417.571.571,0,0,1,.417-.176.571.571,0,0,1,.417.176.571.571,0,0,1,.176.417v4.156h4.75V9.482a10.463,10.463,0,0,1-1.169-.055A4.894,4.894,0,0,1,3.8,9.213a2.207,2.207,0,0,1-.77-.408,1.874,1.874,0,0,1-.473-.668,2.493,2.493,0,0,1-.186-1.011A8.916,8.916,0,0,1,3.711,1.856a4.068,4.068,0,0,1,6.829,0,8.92,8.92,0,0,1,1.336,5.269,2.479,2.479,0,0,1-.186,1.011,1.889,1.889,0,0,1-.473.668,2.189,2.189,0,0,1-.77.408,4.956,4.956,0,0,1-.965.213,10.288,10.288,0,0,1-1.169.055v1.206h4.75V6.531a.594.594,0,0,1,1.188,0v4.75a.6.6,0,0,1-.594.594ZM11.875,17.8a1.2,1.2,0,0,1-1.2,1.2,1.121,1.121,0,0,1-.835-.353A1.168,1.168,0,0,1,9.5,17.8a1.171,1.171,0,0,1,1.178-1.178,1.168,1.168,0,0,1,.844.343A1.121,1.121,0,0,1,11.875,17.8Zm-3.563,0a1.2,1.2,0,0,1-1.2,1.2,1.121,1.121,0,0,1-.835-.353,1.168,1.168,0,0,1-.343-.844,1.171,1.171,0,0,1,1.178-1.178,1.168,1.168,0,0,1,.844.343A1.121,1.121,0,0,1,8.313,17.8Zm-3.563,0a1.2,1.2,0,0,1-1.2,1.2,1.121,1.121,0,0,1-.835-.353,1.168,1.168,0,0,1-.343-.844,1.171,1.171,0,0,1,1.178-1.178,1.168,1.168,0,0,1,.844.343A1.121,1.121,0,0,1,4.75,17.8Z" fill="#50decb" opacity="0.9"/>
+</svg>

image/share.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.386" height="15.495" viewBox="0 0 14.386 15.495">
+  <path id="share" d="M13.843,12.181a2.764,2.764,0,0,0-2.15,1.045L7.652,10.7a2.466,2.466,0,0,0,0-1.459l4.041-2.526A2.764,2.764,0,1,0,11.079,5a2.648,2.648,0,0,0,.111.73L7.149,8.251a2.764,2.764,0,1,0,0,3.438l4.041,2.526a2.648,2.648,0,0,0-.111.73,2.764,2.764,0,1,0,2.764-2.764Zm0-8.844A1.658,1.658,0,1,1,12.185,5a1.658,1.658,0,0,1,1.658-1.658ZM5,11.628A1.658,1.658,0,1,1,6.657,9.97,1.658,1.658,0,0,1,5,11.628ZM13.843,16.6A1.658,1.658,0,1,1,15.5,14.945,1.658,1.658,0,0,1,13.843,16.6Z" transform="translate(-2.221 -2.214)"/>
+</svg>

index.html

@@ -13,18 +13,234 @@
 
     <div class="background"></div>
 
-    <div class="foreground">
+    <main class="foreground">
         <header>
-            <h1>Work With Us</h1>
-            <h4>Totally we have 11 job openings</h4>
+            <h2>Work with Us</h1>
+            <p>Totally we have 11 job openings<p>
         </header>
     
         <div class="tabs-holder">
-            <section class="tab active">Employment</section>
-            <section class="tab">Internship</section>
+            <article class="tab active">Employment</article>
+            <article class="tab">Internship</article>
         </div>
-    </div>
+
+        <div class="job-card">
+            <div class="job-card-header">
+                    <div class="job-designator-avatar">
+                        <img srcset = "./image/Developer.svg"
+                            sizes="(max-width : 750px) 480px,800px"                                                                 
+                            alt = "A perosn avatar"
+                        >
+                    </div>
+                    <div class="job-designator-title">
+                        <h2>Software Developer</h2>
+                        <h4>developer</h4>
+                    </div>
+                    <div class="job-share-icon">
+                        <img                             
+                            src="./image/share.svg"
+                            alt = "share"
+                        >
+                    </div>
+            </div>
+            <div class="separator"></div>
+            <div class="job-description-container">
+                <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">  
+                <p class="job-description">4 open positions</p>     
+            </div>
+            <div class="job-description-container">
+                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
+                <p class="job-description">Minimum 3 years Experience</p>
+            </div>
+            <div class="job-description-container">
+                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
+                <p class="job-description">Montreal, Canada</p>
+            </div>
+            <div class="job-description-container">
+                <section class="green-outline-button">Show more details</section>
+            </div>           
+        </div>
+
+        <div class="job-card">
+            <div class="job-card-header">
+                    <div class="job-designator-avatar">
+                        <img srcset = "./image/Developer.svg"                                        
+                            sizes="(max-width : 750px) 480px,800px"                                                                   
+                            alt = "Developer"
+                        >
+                    </div>
+                    <div class="job-designator-title">
+                        <h2>Software Developer</h2>
+                        <h4>developer</h4>
+                    </div>
+                    <div class="job-share-icon">
+                        <img                            
+                            src="./image/share.svg"
+                            alt = "share"
+                        >
+                    </div>
+            </div>
+            <div class="separator"></div>
+            <div class="job-description-container">
+                <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">  
+                <p class="job-description">4 open positions</p>     
+            </div>
+            <div class="job-description-container">
+                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
+                <p class="job-description">Minimum 3 years Experience</p>
+            </div>
+            <div class="job-description-container">
+                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
+                <p class="job-description">Montreal, Canada</p>
+            </div>
+            <div class="job-description-container">
+                <section class="green-outline-button">Show more details</section>
+            </div>  
+        </div>
+
+        <div class="job-card">
+            <div class="job-card-header">
+                    <div class="job-designator-avatar">
+                        <img src = "./image/Developer.svg"                                      
+                            sizes="(max-width : 750px) 480px,800px"                                                                   
+                            alt = "Developer"
+                        >
+                    </div>
+                    <div class="job-designator-title">
+                        <h2>Software Developer</h2>
+                        <h4>developer</h4>
+                    </div>
+                    <div class="job-share-icon">
+                        <img                            
+                            src="./image/share.svg"
+                            alt = "share"
+                        >
+                    </div>
+            </div>
+            <div class="separator"></div>
+            <div class="job-description-container">
+                <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">  
+                <p class="job-description">4 open positions</p>     
+            </div>
+            <div class="job-description-container">
+                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
+                <p class="job-description">Minimum 3 years Experience</p>
+            </div>
+            <div class="job-description-container">
+                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
+                <p class="job-description">Montreal, Canada</p>
+            </div>
+            <div class="job-description-container">
+                <section class="green-outline-button">Show more details</section>
+            </div>  
+        </div>       
+
+    </main>
     
+    <section class="job-categories">
+        <header>
+            <h2>Job Categories</h2>
+            <p>Choose your postions through given categories</p>
+        </header>  
+        <div class="category-cards">
+            <div class="design-category card">
+                <img src="./image/Designing.svg" alt="infinte logo" class="job-description-image">
+                <h4 class="tag-line">Designing</h4>
+                <p class="card-description">Lorem ipsum dolor sit amet</p>
+            </div>
+            <div class="development-category card">
+                <img src="./image/Development.svg" alt="infinte logo" class="job-description-image">
+                <h4 class="tag-line">Development</h4>
+                <p class="card-description">Lorem ipsum dolor sit amet</p>
+            </div>
+            <div class="marketing-category card">
+                <img src="./image/Marketing.svg" alt="infinte logo" class="job-description-image">
+                <h4 class="tag-line">Marketing</h4>
+                <p class="card-description">Lorem ipsum dolor sit amet</p>
+            </div>
+            <div class="operations-category card">
+                <img src="./image/Operations.svg" alt="infinte logo" class="job-description-image">
+                <h4 class="tag-line">Operations</h4>
+                <p class="card-description">Lorem ipsum dolor sit amet</p>
+            </div>
+        </div>           
+    </section>
+
+    <div class="jobs-by-category">
+        <div class="job-card">
+            <div class="job-card-header">
+                    <div class="job-designator-avatar">
+                        <img srcset = "./image/Developer.svg"
+                            sizes="(max-width : 750px) 480px,800px"                                                                 
+                            alt = "A perosn avatar"
+                        >
+                    </div>
+                    <div class="job-designator-title">
+                        <h2>UI/UX Designer</h2>
+                        <h4>Designer</h4>
+                    </div>
+                    <div class="job-share-icon">
+                        <img                             
+                            src="./image/share.svg"
+                            alt = "share"
+                        >
+                    </div>
+            </div>
+            <div class="separator"></div>
+            <div class="job-description-container">
+                <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">  
+                <p class="job-description">4 open positions</p>     
+            </div>
+            <div class="job-description-container">
+                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
+                <p class="job-description">Minimum 3 years Experience</p>
+            </div>
+            <div class="job-description-container">
+                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
+                <p class="job-description">Montreal, Canada</p>
+            </div>
+            <div class="job-description-container">
+                <section class="green-outline-button">Show more details</section>
+            </div>           
+        </div>
+
+        <div class="job-card">
+            <div class="job-card-header">
+                    <div class="job-designator-avatar">
+                        <img srcset = "./image/Developer.svg"
+                            sizes="(max-width : 750px) 480px,800px"                                                                 
+                            alt = "A perosn avatar"
+                        >
+                    </div>
+                    <div class="job-designator-title">
+                        <h2>Testing Engineer</h2>
+                        <h4>Designer</h4>
+                    </div>
+                    <div class="job-share-icon">
+                        <img                             
+                            src="./image/share.svg"
+                            alt = "share"
+                        >
+                    </div>
+            </div>
+            <div class="separator"></div>
+            <div class="job-description-container">
+                <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">  
+                <p class="job-description">4 open positions</p>     
+            </div>
+            <div class="job-description-container">
+                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
+                <p class="job-description">Minimum 3 years Experience</p>
+            </div>
+            <div class="job-description-container">
+                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
+                <p class="job-description">Montreal, Canada</p>
+            </div>
+            <div class="job-description-container">
+                <section class="green-outline-button">Show more details</section>
+            </div>           
+        </div>
+    </div>
 
 </body>
 </html>