Resolve review comments + Add Job Categories

css/style.css

@@ -3,32 +3,38 @@
 }
 
 @font-face {
-    font-family: oswald;
+    font-family: Oswald;
     font-weight: 500;
     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: "oswald";
+    font-family: "Oswald";
     font-weight: 700;
 }
 
-header h2{
+header h2 {
     font-size: 2rem;
     font-family: "Oswald", sans-serif;
     font-weight: 200;
-    color:#c8c8c8;
+    color:hsl(0, 0%, 78%);
     line-height: 2; 
     letter-spacing: 0.05rem;   
 }
 
-header p{
-    color: #959595;
+header p {
+    color: hsl(0, 0%, 58%);
     text-align: center;
     line-height: 2.3;
     padding: 0 5%;
@@ -41,9 +47,9 @@ header p{
 
 .background {
     position: absolute;
-    background-color: #161616;
+    background-color: hsl(0, 0%, 9%);
     width: 100%;
-    height: 67vh;
+    height: 74vh;
     overflow: hidden;
 }
 
@@ -70,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;
 
@@ -87,171 +93,197 @@ header{
     border-radius: 500px;
     font-size: 0.75rem;
     font-weight: 100;
-    font-family: "poppins";
+    font-family: "Poppins";
 }
 
 .tab.active {
-    background-color : #2cc38c;
+    background-color : hsl(158, 63%, 47%);
 }
 
-.card{
-    width: 350px;
+.job-card {
+    width: 20rem;
     border-radius: 20px;
     height: 320px;    
-
-    position: relative;   
+    
     background-color: white;  
-    box-shadow: 0 0 0.5rem #e1e1e1;     
+    box-shadow: 0 0 0.5rem hsl(0, 0%, 88%);     
     overflow: hidden;
 
     padding: 28px 20px 28px 20px; 
     margin-left: auto;
-    margin-right: auto;
-    left: 0;
-    right: 0;
+    margin-right: auto;   
     margin-top:40px;
     text-align: center;
 }
 
-.card-header-grid{
+.job-card-header {
     display: grid;
-    grid-template-columns: 0.5fr auto 0.5fr;
-    grid-template-rows: 50% 50%;
-    place-items: center center;
-    padding-bottom: 10px;
+    grid-template-columns: 3.5rem 1fr 1rem;
+    grid-template-rows: 1fr;
+    place-items: center center;  
+    gap:1rem; 
 }
 
-.grid-item1{
-    grid-column: 1/1;
-    grid-row: 1/2;   
-    align-self: baseline;
-    background: #F2F2F2;    
-
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;    
-    padding: 8px 4px 6px 8px;
+.job-designator-avatar {       
+    background: hsl(0, 0%, 95%);    
+    border-radius: 50%;    
+    padding: 9px 7px 9px 10px;
 }
 
-.grid-item1 > img{
-    width: 30px;
+.job-designator-avatar > img {
+    width: 100%;
 }
 
-.grid-item2{
-    color: #959595;   
-    grid-column: 2/3;
-    grid-row: 1/2; 
-    padding: 10px 4px 0px 8px;
+.job-designator-title {
+    color: hsl(0, 0%, 58%);         
 }
 
-.grid-item2 > h2{
-    margin:auto;
+.job-designator-title > h2 {  
     font-size: 1.5rem;   
-    font-family: "oswald";    
-    color: #767676
+    font-family: "Oswald";    
+    color: hsl(0, 0%, 46%)
 }
 
-.grid-item2 > p{
-    margin:auto;
+.job-designator-title > h4 {    
     text-align: left;
     text-transform: uppercase;
-    font-weight: normal;
+    font-weight: bold;
     font-size: 0.75rem;
-    letter-spacing: 0.5px;
-    padding-top: 10px;
-    font-family: "poppins";
-    color: #C7C7C7;
+    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;      
+}
 
-.grid-item3{
-    grid-column: 3/3;
-    grid-row: 1/2;   
-    padding: 10px 4px 0px 8px;
+.job-description-image {  
+    flex: 0 0 auto;
+    justify-self: center;    
+    margin-left: 0.75rem;
 }
 
-.grid-item3 > img{
-    width: 16px;
+.job-description {
+    text-transform: capitalize;
+    font-size: small;   
+    font-family: "Poppins";
+    color:hsl(0, 0%, 58%);   
+    margin-left: 1.25rem;
 }
 
-.separator{
+.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;
-    height: 1px;    
-    border-top:2px solid #EFEFEF;   
+    position: absolute;
+    width: 0;
+    height: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
 }
 
-.card-body-grid{
-    display: grid;
-    grid-template-rows: repeat(4,25px);
-    grid-template-columns: 20% auto;   
-    place-items: center;
-    grid-row-gap: 1rem;
-    padding-top: 18px;
+.job-categories{
+    position: relative;
+    background-color: hsl(0, 0%, 9%);
+    width: 100%;   
+    overflow: hidden;
+    margin-top: 7vw;
 }
 
-.card-body-grid-item-1{
-    grid-column: 1/2;
-    grid-row: 1/2; 
-    padding:4px;   
+.category-cards {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-evenly;
+    margin-bottom: 8rem;
 }
 
-.card-body-grid-item-2{
-    text-transform: capitalize;
-    font-size: small;
-    font-family: "poppins";
-    color:#959595;
-    
-    grid-column: 2/3;
-    grid-row: 1/2;
-    justify-self: start;
+.category-cards .card {
+    flex: 0 0 44%;
+    border-radius: 1.5rem;
+    padding: 14px;
+    margin: 6px;    
+    text-align: center;
 }
 
-.card-body-grid-item-3{
-    grid-column: 1/2;
-    grid-row: 2/3;  
+.category-cards img {
+    background: hsl(0, 0%, 95%);
+    border-radius: 50%;
+    padding: 10px;
 }
 
-.card-body-grid-item-4{
+.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:#959595;
+    font-family: "Poppins";
+    color: hsl(0, 0%, 58%);
+}
+.design-category {   
+    background-color: hsl(355, 53%, 91%);   
+    color: 	hsl(353, 54%, 74%);    
+}
 
-    grid-column: 2/3;
-    grid-row: 2/3;  
-    justify-self: start;
+.development-category {   
+    background-color: hsl(180, 52%, 90%);    
+    color: 	hsl(179, 30%, 57%);  
 }
 
-.card-body-grid-item-5{
-    grid-column: 1/2;
-    grid-row: 3/4;
+.marketing-category {   
+    background-color: hsl(83, 54%, 91%);    
+    color: hsl(79, 60%, 67%);
 }
 
-.card-body-grid-item-6{
-    text-transform: capitalize;
-    font-size: small;
-    font-family: "poppins";
-    color:#959595;
-    
-    grid-column: 2/3;
-    grid-row: 3/4;
-    justify-self: start;
+.operations-category {  
+    background-color: hsl(275, 57%, 91%); 
+    color: 	hsl(279, 39%, 72%);   
 }
 
-.card-body-grid-item-7{
-    grid-column: 1/4;
-    grid-row: 4/5;
-    justify-self: stretch;    
-    padding: 40px 8px 0px 20px;
-   
+.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;
 }
 
-.green-outline-button{
-    border-radius: 500px;
-    border:solid #2cc38c;
-    border-width: thin;
-    padding :12px;  
-    color: #2cc38c;
-    font-weight: bold;
-    font-family: "poppins";
+.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/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/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>

index.html

@@ -13,169 +13,234 @@
 
     <div class="background"></div>
 
-    <div class="foreground">
+    <main class="foreground">
         <header>
             <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 class="card">
-            <div class="card-header-grid">
-                    <div class="grid-item1">
-                        <img srcset = "./image/Developer.svg 480w,
-                                        ./image/Developer.svg 800w"
-                            sizes="(max-width : 750px) 480px,800px"                                       
-                            src = "./image/Developer.svg"
+        <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="grid-item2">
+                    <div class="job-designator-title">
                         <h2>Software Developer</h2>
-                        <p>developer</p>
+                        <h4>developer</h4>
                     </div>
-                    <div class="grid-item3">
-                        <img 
-                            srcset="./image/share.svg,
-                                    ./image/share.svg 0.5x,
-                                    ./image/share.svg 1x"    
+                    <div class="job-share-icon">
+                        <img                             
                             src="./image/share.svg"
-                            alt = "share icon"
+                            alt = "share"
                         >
                     </div>
             </div>
             <div class="separator"></div>
-            <div class="card-body-grid">
-                <div class="card-body-grid-item-1">
-                    <img src="./image/officechair.svg" alt="office chair image">                
-                </div>
-                <div class="card-body-grid-item-2">
-                    <p class="postion-count">4 open positions</p>
-                </div>
-                <div class="card-body-grid-item-3">
-                    <img src="./image/infinite.svg" alt="infinte logo">
-                </div>
-                <div class="card-body-grid-item-4">
-                    <p class="experience-count">Minimum 3 years Experience</p>
-                </div>
-                <div class="card-body-grid-item-5">
-                    <img src="./image/infinite.svg" alt="infinte logo">
-                </div>
-                <div class="card-body-grid-item-6">
-                    <p class="location">Montreal, Canada</p>
-                </div>   
-                <div class="card-body-grid-item-7">
-                    <section class="green-outline-button">Show more details</section>
-                </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="card">
-            <div class="card-header-grid">
-                    <div class="grid-item1">
-                        <img srcset = "./image/Developer.svg 480w,
-                                        ./image/Developer.svg 800w"
-                            sizes="(max-width : 750px) 480px,800px"                                       
-                            src = "./image/Developer.svg"
-                            alt = "A perosn avatar"
+        <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="grid-item2">
+                    <div class="job-designator-title">
                         <h2>Software Developer</h2>
-                        <p>developer</p>
+                        <h4>developer</h4>
                     </div>
-                    <div class="grid-item3">
-                        <img 
-                            srcset="./image/share.svg,
-                                    ./image/share.svg 0.5x,
-                                    ./image/share.svg 1x"    
+                    <div class="job-share-icon">
+                        <img                            
                             src="./image/share.svg"
-                            alt = "share icon"
+                            alt = "share"
                         >
                     </div>
             </div>
             <div class="separator"></div>
-            <div class="card-body-grid">
-                <div class="card-body-grid-item-1">
-                    <img src="./image/officechair.svg" alt="office chair image">                
-                </div>
-                <div class="card-body-grid-item-2">
-                    <p class="postion-count">4 open positions</p>
-                </div>
-                <div class="card-body-grid-item-3">
-                    <img src="./image/infinite.svg" alt="infinte logo">
-                </div>
-                <div class="card-body-grid-item-4">
-                    <p class="experience-count">Minimum 3 years Experience</p>
-                </div>
-                <div class="card-body-grid-item-5">
-                    <img src="./image/infinite.svg" alt="infinte logo">
-                </div>
-                <div class="card-body-grid-item-6">
-                    <p class="location">Montreal, Canada</p>
-                </div>   
-                <div class="card-body-grid-item-7">
-                    <section class="green-outline-button">Show more details</section>
-                </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="card">
-            <div class="card-header-grid">
-                    <div class="grid-item1">
-                        <img srcset = "./image/Developer.svg 480w,
-                                        ./image/Developer.svg 800w"
-                            sizes="(max-width : 750px) 480px,800px"                                       
-                            src = "./image/Developer.svg"
-                            alt = "A perosn avatar"
+        <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="grid-item2">
+                    <div class="job-designator-title">
                         <h2>Software Developer</h2>
-                        <p>developer</p>
+                        <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="grid-item3">
-                        <img 
-                            srcset="./image/share.svg,
-                                    ./image/share.svg 0.5x,
-                                    ./image/share.svg 1x"    
+                    <div class="job-share-icon">
+                        <img                             
                             src="./image/share.svg"
-                            alt = "share icon"
+                            alt = "share"
                         >
                     </div>
             </div>
             <div class="separator"></div>
-            <div class="card-body-grid">
-                <div class="card-body-grid-item-1">
-                    <img src="./image/officechair.svg" alt="office chair image">                
-                </div>
-                <div class="card-body-grid-item-2">
-                    <p class="postion-count">4 open positions</p>
-                </div>
-                <div class="card-body-grid-item-3">
-                    <img src="./image/infinite.svg" alt="infinte logo">
-                </div>
-                <div class="card-body-grid-item-4">
-                    <p class="experience-count">Minimum 3 years Experience</p>
-                </div>
-                <div class="card-body-grid-item-5">
-                    <img src="./image/infinite.svg" alt="infinte logo">
-                </div>
-                <div class="card-body-grid-item-6">
-                    <p class="location">Montreal, Canada</p>
-                </div>   
-                <div class="card-body-grid-item-7">
-                    <section class="green-outline-button">Show more details</section>
-                </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>