added job card

css/style.css

@@ -3,25 +3,47 @@
 }
 
 @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');
 }
 
 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:#c8c8c8;
+    line-height: 2; 
+    letter-spacing: 0.05rem;   
+}
+
+header p{
+    color: #959595;
+    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;
     width: 100%;
-    height: 60vh;
+    height: 67vh;
     overflow: hidden;
 }
 
@@ -63,9 +85,173 @@ 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 : #2cc38c;
+}
+
+.card{
+    width: 350px;
+    border-radius: 20px;
+    height: 320px;    
+
+    position: relative;   
+    background-color: white;  
+    box-shadow: 0 0 0.5rem #e1e1e1;     
+    overflow: hidden;
+
+    padding: 28px 20px 28px 20px; 
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    margin-top:40px;
+    text-align: center;
+}
+
+.card-header-grid{
+    display: grid;
+    grid-template-columns: 0.5fr auto 0.5fr;
+    grid-template-rows: 50% 50%;
+    place-items: center center;
+    padding-bottom: 10px;
+}
+
+.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;
+}
+
+.grid-item1 > img{
+    width: 30px;
+}
+
+.grid-item2{
+    color: #959595;   
+    grid-column: 2/3;
+    grid-row: 1/2; 
+    padding: 10px 4px 0px 8px;
+}
+
+.grid-item2 > h2{
+    margin:auto;
+    font-size: 1.5rem;   
+    font-family: "oswald";    
+    color: #767676
+}
+
+.grid-item2 > p{
+    margin:auto;
+    text-align: left;
+    text-transform: uppercase;
+    font-weight: normal;
+    font-size: 0.75rem;
+    letter-spacing: 0.5px;
+    padding-top: 10px;
+    font-family: "poppins";
+    color: #C7C7C7;
+}
+
+
+.grid-item3{
+    grid-column: 3/3;
+    grid-row: 1/2;   
+    padding: 10px 4px 0px 8px;
+}
+
+.grid-item3 > img{
+    width: 16px;
+}
+
+.separator{
+    display: block;
+    height: 1px;    
+    border-top:2px solid #EFEFEF;   
+}
+
+.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;
+}
+
+.card-body-grid-item-1{
+    grid-column: 1/2;
+    grid-row: 1/2; 
+    padding:4px;   
+}
+
+.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;
+}
+
+.card-body-grid-item-3{
+    grid-column: 1/2;
+    grid-row: 2/3;  
+}
+
+.card-body-grid-item-4{
+    text-transform: capitalize;
+    font-size: small;
+    font-family: "poppins";
+    color:#959595;
+
+    grid-column: 2/3;
+    grid-row: 2/3;  
+    justify-self: start;
+}
+
+.card-body-grid-item-5{
+    grid-column: 1/2;
+    grid-row: 3/4;
+}
+
+.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;
+}
+
+.card-body-grid-item-7{
+    grid-column: 1/4;
+    grid-row: 4/5;
+    justify-self: stretch;    
+    padding: 40px 8px 0px 20px;
+   
+}
+
+.green-outline-button{
+    border-radius: 500px;
+    border:solid #2cc38c;
+    border-width: thin;
+    padding :12px;  
+    color: #2cc38c;
+    font-weight: bold;
+    font-family: "poppins";
 }

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.

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/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

@@ -15,14 +15,165 @@
 
     <div 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>
         </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>
+                    <div class="grid-item2">
+                        <h2>Software Developer</h2>
+                        <p>developer</p>
+                    </div>
+                    <div class="grid-item3">
+                        <img 
+                            srcset="./image/share.svg,
+                                    ./image/share.svg 0.5x,
+                                    ./image/share.svg 1x"    
+                            src="./image/share.svg"
+                            alt = "share icon"
+                        >
+                    </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>
+        </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>
+                    <div class="grid-item2">
+                        <h2>Software Developer</h2>
+                        <p>developer</p>
+                    </div>
+                    <div class="grid-item3">
+                        <img 
+                            srcset="./image/share.svg,
+                                    ./image/share.svg 0.5x,
+                                    ./image/share.svg 1x"    
+                            src="./image/share.svg"
+                            alt = "share icon"
+                        >
+                    </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>
+        </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>
+                    <div class="grid-item2">
+                        <h2>Software Developer</h2>
+                        <p>developer</p>
+                    </div>
+                    <div class="grid-item3">
+                        <img 
+                            srcset="./image/share.svg,
+                                    ./image/share.svg 0.5x,
+                                    ./image/share.svg 1x"    
+                            src="./image/share.svg"
+                            alt = "share icon"
+                        >
+                    </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>
+        </div>
+
     </div>