Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="job">
 <div class="header">
  <div class="logo">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path xmlns="http://www.w3.org/2000/svg" d="M512 503.5H381.7a48 48 0 01-45.3-32.1L265 268.1l-9-25.5 2.7-124.6L338.2 8.5l23.5 67.1L512 503.5z" fill="#0473ff" data-original="#28b446" />
    <path xmlns="http://www.w3.org/2000/svg" fill="#0473ff" data-original="#219b38" d="M361.7 75.6L265 268.1l-9-25.5 2.7-124.6L338.2 8.5z" />
    <path xmlns="http://www.w3.org/2000/svg" d="M338.2 8.5l-82.2 234-80.4 228.9a48 48 0 01-45.3 32.1H0l173.8-495h164.4z" fill="#0473ff" data-original="#518ef8" />
   </svg>
   Milao
  </div>
  <div class="header-menu">
   <a href="#" class="active">Find Job</a>
   <a href="#">Company Review</a>
   <a href="#">Find Salaries</a>
  </div>
  <div class="user-settings">
   <div class="dark-light">
    <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" /></svg>
   </div>
   <div class="user-menu">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-square">
     <rect x="3" y="3" width="18" height="18" rx="2" ry="2" /></svg>
   </div>
   <img class="user-profile" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%283%29+%281%29.png" alt="">
   <div class="user-name">Suhayel Nasim</div>
  </div>
 </div>
 <div class="wrapper">
  <div class="search-menu">
   <div class="search-bar">
    <input type="text" class="search-box" autofocus />
    <div class="search item">Product Designer
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
      <path d="M18 6L6 18M6 6l12 12" /></svg>
    </div>
    <div class="search item">UI Designer
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
      <path d="M18 6L6 18M6 6l12 12" /></svg>
    </div>
   </div>
   <div class="search-location">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin">
     <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
     <circle cx="12" cy="10" r="3" />
    </svg>
    Londontowne, MD
   </div>
   <div class="search-job">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-briefcase">
     <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
     <path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16" /></svg>
    <input type="text" placeholder="Job Type">
   </div>
   <div class="search-salary">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="currentColor" stroke-width=".4">
     <path d="M12.6 18H9.8a.8.8 0 010-1.5h2.8a.9.9 0 000-1.8h-1.2a2.4 2.4 0 010-4.7h2.8a.8.8 0 010 1.5h-2.8a.9.9 0 000 1.8h1.2a2.4 2.4 0 010 4.7z" stroke="currentColor" />
     <path d="M12 20a.8.8 0 01-.8-.8v-2a.8.8 0 011.6 0v2c0 .5-.4.8-.8.8zM12 11.5a.8.8 0 01-.8-.8v-2a.8.8 0 011.6 0v2c0 .5-.4.8-.8.8z" stroke="currentColor" />
     <path d="M21.3 23H2.6A2.8 2.8 0 010 20.2V3.9C0 2.1 1.2 1 2.8 1h18.4C22.9 1 24 2.2 24 3.8v16.4c0 1.6-1.2 2.8-2.8 2.8zM2.6 2.5c-.6 0-1.2.6-1.2 1.3v16.4c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3V3.9c0-.7-.6-1.3-1.3-1.3z" stroke="currentColor" />
     <path d="M23.3 6H.6a.8.8 0 010-1.5h22.6a.8.8 0 010 1.5z" stroke="currentColor" /></svg>
    <input type="text" placeholder="Salary Range">
   </div>
   <button class="search-button">Find Job</button>
  </div>
  <div class="main-container">
   <div class="search-type">
    <div class="alert">
     <div class="alert-title">Create Job Alert</div>
     <div class="alert-subtitle">Create a job alert now and never miss a job</div>
     <input type="text" placeholder="Enter job keyword">
     <button class="search-buttons">Create Job Alerts</button>
    </div>
    <div class="job-time">
     <div class="job-time-title">Type of Employment</div>
     <div class="job-wrapper">
      <div class="type-container">
       <input type="checkbox" id="job1" class="job-style" checked>
       <label for="job1">Full Time Jobs</label>
       <span class="job-number">56</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job2" class="job-style">
       <label for="job2">Part Time Jobs</label>
       <span class="job-number">43</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job3" class="job-style">
       <label for="job3">Remote Jobs</label>
       <span class="job-number">24</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job4" class="job-style">
       <label for="job4">Internship Jobs</label>
       <span class="job-number">27</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job5" class="job-style">
       <label for="job5">Contract</label>
       <span class="job-number">76</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job6" class="job-style">
       <label for="job6">Training Jobs</label>
       <span class="job-number">28</span>
      </div>
     </div>
    </div>
    <div class="job-time">
     <div class="job-time-title">Seniority Level</div>
     <div class="job-wrapper">
      <div class="type-container">
       <input type="checkbox" id="job7" class="job-style">
       <label for="job7">Student Level</label>
       <span class="job-number">98</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job8" class="job-style">
       <label for="job8">Entry Level</label>
       <span class="job-number">44</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job9" class="job-style" checked>
       <label for="job9">Mid Level</label>
       <span class="job-number">35</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job10" class="job-style" checked>
       <label for="job10">Senior Level</label>
       <span class="job-number">29</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job11" class="job-style">
       <label for="job11">Directors</label>
       <span class="job-number">26</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job12" class="job-style">
       <label for="job12">VP or Above</label>
       <span class="job-number">56</span>
      </div>
     </div>
    </div>
    <div class="job-time">
     <div class="job-time-title">Salary Range</div>
     <div class="job-wrapper">
      <div class="type-container">
       <input type="checkbox" id="job1" class="job-style">
       <label for="job1">$700 - $1000</label>
       <span class="job-number">49</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job2" class="job-style">
       <label for="job2">$1000 - $1200</label>
       <span class="job-number">67</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job3" class="job-style">
       <label for="job3">$1200 - $1400</label>
       <span class="job-number">24</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job4" class="job-style">
       <label for="job4">$1500 - $1800</label>
       <span class="job-number">27</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job5" class="job-style" checked>
       <label for="job5">$2000 - $3000</label>
       <span class="job-number">76</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job6" class="job-style" checked>
       <label for="job6">$3000 - $4000</label>
       <span class="job-number">22</span>
      </div>
      <div class="type-container">
       <input type="checkbox" id="job6" class="job-style">
       <label for="job6">$4000 - $5000</label>
       <span class="job-number">18</span>
      </div>
     </div>
    </div>
   </div>
   <div class="searched-jobs">
    <div class="searched-bar">
     <div class="searched-show">Showing 46 Jobs</div>
     <div class="searched-sort">Sort by: <span class="post-time">Newest Post </span><span class="menu-icon">▼</span></div>
    </div>
    <div class="job-cards">
     <div class="job-card">
      <div class="job-card-header">
       <svg viewBox="0 -13 512 512" xmlns="http://www.w3.org/2000/svg" style="background-color:#2e2882">
        <g fill="#feb0a5">
         <path d="M256 92.5l127.7 91.6L512 92 383.7 0 256 91.5 128.3 0 0 92l128.3 92zm0 0M256 275.9l-127.7-91.5L0 276.4l128.3 92L256 277l127.7 91.5 128.3-92-128.3-92zm0 0" />
         <path d="M127.7 394.1l128.4 92 128.3-92-128.3-92zm0 0" />
        </g>
        <path d="M512 92L383.7 0 256 91.5v1l127.7 91.6zm0 0M512 276.4l-128.3-92L256 275.9v1l127.7 91.5zm0 0M256 486.1l128.4-92-128.3-92zm0 0" fill="#feb0a5" />
       </svg>
       <div class="menu-dot"></div>
      </div>
      <div class="job-card-title">UI / UX Designer</div>
      <div class="job-card-subtitle">
       The User Experience Designer position exists to create compelling and digital user experience through excellent design...
      </div>
      <div class="job-detail-buttons">
       <button class="search-buttons detail-button">Full Time</button>
       <button class="search-buttons detail-button">Min. 1 Year</button>
       <button class="search-buttons detail-button">Senior Level</button>
      </div>
      <div class="job-card-buttons">
       <button class="search-buttons card-buttons">Apply Now</button>
       <button class="search-buttons card-buttons-msg">Messages</button>
      </div>
     </div>
     <div class="job-card">
      <div class="job-card-header">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="background-color:#f76754">
        <path xmlns="http://www.w3.org/2000/svg" d="M0 .5h4.2v23H0z" fill="#042b48" data-original="#212121" />
        <path xmlns="http://www.w3.org/2000/svg" d="M15.4.5a8.6 8.6 0 100 17.2 8.6 8.6 0 000-17.2z" fill="#fefefe" data-original="#f4511e" /></svg>
       <div class="menu-dot"></div>
      </div>
      <div class="job-card-title">Sr. Product Designer</div>
      <div class="job-card-subtitle">
       The User Experience Designer position exists to create compelling and digital user experience through excellent design...
      </div>
      <div class="job-detail-buttons">
       <button class="search-buttons detail-button">Full Time</button>
       <button class="search-buttons detail-button">Min. 1 Year</button>
       <button class="search-buttons detail-button">Senior Level</button>
      </div>
      <div class="job-card-buttons">
       <button class="search-buttons card-buttons">Apply Now</button>
       <button class="search-buttons card-buttons-msg">Messages</button>
      </div>
     </div>
     <div class="job-card">
      <div class="job-card-header">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#fff" style="background-color:#55acee">
        <path d="M512 97.2c-19 8.4-39.3 14-60.5 16.6 21.8-13 38.4-33.4 46.2-58a209.8 209.8 0 01-66.6 25.4A105 105 0 00249.5 153c0 8.3.8 16.3 2.5 24A297.1 297.1 0 0135.6 67 105.1 105.1 0 0068 207.4c-16.9-.3-33.4-5.2-47.4-12.9v1.1c0 51 36.4 93.4 84 103.2-8.5 2.3-17.8 3.4-27.4 3.4-6.8 0-13.5-.3-20-1.8a106 106 0 0098.2 73.2A211 211 0 010 416.9 295.5 295.5 0 00161 464c193.2 0 298.8-160 298.8-298.7 0-4.6-.2-9.1-.4-13.6A209.4 209.4 0 00512 97.2z" /></svg>
       <div class="menu-dot"></div>
      </div>
      <div class="job-card-title">User Experience Designer</div>
      <div class="job-card-subtitle">
       The User Experience Designer position exists to create compelling and digital user experience through excellent design...
      </div>
      <div class="job-detail-buttons">
       <button class="search-buttons detail-button">Full Time</button>
       <button class="search-buttons detail-button">Min. 1 Year</button>
       <button class="search-buttons detail-button">Senior Level</button>
      </div>
      <div class="job-card-buttons">
       <button class="search-buttons card-buttons">Apply Now</button>
       <button class="search-buttons card-buttons-msg">Messages</button>
      </div>
     </div>
     <div class="job-card">
      <div class="job-card-header">
       <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff" style="background-color:#1e1f26">
        <path d="M24 7.6c0-.3 0-.5-.4-.6C12.2.2 12.4-.3 11.6 0 3 5.5.6 6.7.2 7.1c-.3.3-.2.8-.2 8.3 0 .9 7.7 5.5 11.5 8.4.4.3.8.2 1 0 11.2-8 11.5-7.6 11.5-8.4V7.6zm-1.5 6.5l-3.9-2.4L22.5 9zm-5.3-3.2l-4.5-2.7V2L22 7.6zM12 14.5l-3.9-2.7L12 9.5l3.9 2.3zm-.8-12.4v6L6.8 11 2.1 7.6zm-5.8 9.6l-3.9 2.4V9zm1.3 1l4.5 3.1v6l-9-6.3zm6 9.1v-6l4.6-3.1 4.6 2.8z" /></svg>
       <div class="menu-dot"></div>
      </div>
      <div class="job-card-title">Product Designer</div>
      <div class="job-card-subtitle">
       The User Experience Designer position exists to create compelling and digital user experience through excellent design...
      </div>
      <div class="job-detail-buttons">
       <button class="search-buttons detail-button">Full Time</button>
       <button class="search-buttons detail-button">Min. 1 Year</button>
       <button class="search-buttons detail-button">Senior Level</button>
      </div>
      <div class="job-card-buttons">
       <button class="search-buttons card-buttons">Apply Now</button>
       <button class="search-buttons card-buttons-msg">Messages</button>
      </div>
     </div>
     <div class="job-card">
      <div class="job-card-header">
       <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="background-color:#ffe80f">
        <path d="M9.5 9.3l-.7 2h1.4z" />
        <path d="M12 1C5.4 1 0 5.2 0 10.4c0 3.4 2.2 6.3 5.6 8-1.3 4.4-1.3 4.4-1 4.6.2.1.5 0 5.3-3.4l2.1.2c6.6 0 12-4.2 12-9.4S18.6 1 12 1zM6 13c0 .4-.3.7-.6.7s-.7-.3-.7-.7V9H3.6c-.4 0-.7-.4-.7-.7s.3-.7.7-.7H7c.4 0 .7.3.7.7s-.3.6-.7.6h-1zm5.4.7c-.7 0-.6-.6-.9-1.2h-2c-.4.6-.3 1.2-1 1.2s-.8-.4-.6-1.1l1.6-4.3a1 1 0 011-.7c.4 0 .8.3.9.7 1 3.4 2.6 5.4 1 5.4zm4-.1h-2.2c-1.2 0-.5-1.6-.7-5.3 0-.4.3-.7.7-.7s.7.3.7.7v4h1.5c.3 0 .6.3.6.6 0 .4-.3.7-.6.7zm5.4-.5l-.3.4c-1 .7-1.6-1.4-2.6-2.3l-.2.3V13c0 .4-.3.7-.7.7a.7.7 0 01-.7-.7V8.3a.7.7 0 011.4 0v1.5c1.3-1 2-2.7 2.8-2 .8.9-.9 1.6-1.5 2.5 1.6 2.2 1.9 2.3 1.8 2.8z" /></svg>
       <div class="menu-dot"></div>
      </div>
      <div class="job-card-title">UI / UX Designer</div>
      <div class="job-card-subtitle">
       The User Experience Designer position exists to create compelling and digital user experience through excellent design...
      </div>
      <div class="job-detail-buttons">
       <button class="search-buttons detail-button">Full Time</button>
       <button class="search-buttons detail-button">Min. 1 Year</button>
       <button class="search-buttons detail-button">Senior Level</button>
      </div>
      <div class="job-card-buttons">
       <button class="search-buttons card-buttons">Apply Now</button>
       <button class="search-buttons card-buttons-msg">Messages</button>
      </div>
     </div>
     <div class="job-card">
      <div class="job-card-header">
       <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="background-color: #fe5b5f">
        <path d="M12 20.6c-1.4 1.5-3.1 3-5.1 3.3-2 .8-5.9-1.3-5.9-5 0-2.5 3.2-8 6.6-15.1C8.5 1.9 9.4 0 12 0c2.6 0 3.5 1.8 4.6 4C23 17 23 17.7 23 19c0 4.4-5.5 8-11 1.7zm9.5-1.7c0-2-6.4-14.4-6.5-14.5-.9-1.9-1.4-2.9-3-2.9-1.8 0-2.3 1.5-3.2 3.2C2.5 17.2 2.5 18 2.5 19c0 3 3.7 6 8.5.6-2-2.6-3-4.8-3-6.6 0-2.7 2-4.2 4-4.2s4 1.5 4 4.2c0 1.8-1 4-3 6.6 4.6 5.2 8.5 2.5 8.5-.6zM12 10.2c-1.2 0-2.5.9-2.5 2.7 0 1.4.9 3.3 2.5 5.4 1.6-2.1 2.5-4 2.5-5.4 0-1.8-1.3-2.7-2.5-2.7z" fill="#fff" /></svg>
       <div class="menu-dot"></div>
      </div>
      <div class="job-card-title">UI Developer</div>
      <div class="job-card-subtitle">
       The User Experience Designer position exists to create compelling and digital user experience through excellent design...
      </div>
      <div class="job-detail-buttons">
       <button class="search-buttons detail-button">Full Time</button>
       <button class="search-buttons detail-button">Min. 1 Year</button>
       <button class="search-buttons detail-button">Senior Level</button>
      </div>
      <div class="job-card-buttons">
       <button class="search-buttons card-buttons">Apply Now</button>
       <button class="search-buttons card-buttons-msg">Messages</button>
      </div>
     </div>
     <div class="job-card">
      <div class="job-card-header">
       <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="background-color: #5c6bc0">
        <g fill="#fff">
         <path d="M3.6 21.2h14.2l-.6-2.2 5.8 5V2.5C23 1 21.8 0 20.4 0H3.6A2.6 2.6 0 001 2.5v16.2c0 1.4 1.2 2.5 2.6 2.5zM14 5.7zM6.5 7C8.3 5.6 10 5.7 10 5.7l.2.1c-2.3.6-3.3 1.6-3.3 1.6.1 0 4.6-2.7 10.1 0 0 0-1-1-3.1-1.5l.2-.2c.3 0 1.8 0 3.5 1.3 0 0 1.8 3.1 1.8 7 0 0-1.1 1.6-4 1.7l-.7-1a4 4 0 002.2-1.4c-3.2 2-6 1.7-9.3.3h-.1l-.4-.2s.6 1 2.2 1.4l-.8 1c-2.8 0-3.8-1.8-3.8-1.8 0-3.9 1.8-7 1.8-7z" />
         <path d="M14.3 12.8c.7 0 1.3-.6 1.3-1.4 0-.7-.6-1.3-1.3-1.3a1.3 1.3 0 000 2.7zM9.7 12.8c.7 0 1.3-.6 1.3-1.4 0-.7-.6-1.3-1.3-1.3a1.3 1.3 0 000 2.7z" />
        </g>
       </svg>
       <div class="menu-dot"></div>
      </div>
      <div class="job-card-title">User Interface Designer</div>
      <div class="job-card-subtitle">
       The User Experience Designer position exists to create compelling and digital user experience through excellent design...
      </div>
      <div class="job-detail-buttons">
       <button class="search-buttons detail-button">Full Time</button>
       <button class="search-buttons detail-button">Min. 1 Year</button>
       <button class="search-buttons detail-button">Senior Level</button>
      </div>
      <div class="job-card-buttons">
       <button class="search-buttons card-buttons">Apply Now</button>
       <button class="search-buttons card-buttons-msg">Messages</button>
      </div>
     </div>
     <div class="job-card">
      <div class="job-card-header">
       <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff" style="background-color:#ea4c88">
        <path d="M16.4 23.2C28.6 18.2 25.2 0 12 0a12 12 0 104.4 23.2zM5.3 20c.8-1.5 3.6-5.5 8.3-7 1 2.6 1.7 5.5 1.7 8.8-3.5 1.2-7.3.4-10-1.8zm11.5 1.2a27 27 0 00-1.7-8.4c2-.4 4.5-.2 7.2 1-.6 3.2-2.6 6-5.5 7.4zm5.7-9c-3-1.1-5.7-1.3-8-.8a28 28 0 00-1.1-2.3 20 20 0 006.5-4c1.7 1.9 2.7 4.3 2.6 7zM18.9 4c-.9.8-2.9 2.4-6.3 3.8A28 28 0 008 2.3C11.6.8 15.8 1.4 19 4zM6.6 3c.8.7 2.7 2.5 4.5 5.3a33 33 0 01-9.4 1.5c.6-3 2.4-5.4 4.9-6.9zm-5 8.3c4.2-.1 7.6-.8 10.3-1.7l1.1 2.1A17.4 17.4 0 004.2 19c-1.8-2-2.8-4.7-2.7-7.6z" /></svg>
       <div class="menu-dot"></div>
      </div>
      <div class="job-card-title">UI / UX Designer</div>
      <div class="job-card-subtitle">
       The User Experience Designer position exists to create compelling and digital user experience through excellent design...
      </div>
      <div class="job-detail-buttons">
       <button class="search-buttons detail-button">Full Time</button>
       <button class="search-buttons detail-button">Min. 1 Year</button>
       <button class="search-buttons detail-button">Senior Level</button>
      </div>
      <div class="job-card-buttons">
       <button class="search-buttons card-buttons">Apply Now</button>
       <button class="search-buttons card-buttons-msg">Messages</button>
      </div>
     </div>
     <div class="job-card">
      <div class="job-card-header">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path d="M113.5 309.4L95.6 376l-65 1.4A254.9 254.9 0 010 256c0-42.5 10.3-82.5 28.6-117.7l58 10.6 25.4 57.6a152.2 152.2 0 001.5 103z" fill="#fbbb00" />
        <path d="M507.5 208.2a256.3 256.3 0 01-91.2 247.4l-73-3.7-10.4-64.5c29.9-17.6 53.3-45 65.6-78H261.6V208.3h246z" fill="#518ef8" />
        <path d="M416.3 455.6a256 256 0 01-385.8-78.3l83-67.9a152.2 152.2 0 00219.4 78l83.4 68.2z" fill="#28b446" />
        <path d="M419.4 59l-83 67.8A152.3 152.3 0 00112 206.5l-83.4-68.2a256 256 0 01390.8-79.4z" fill="#f14336" /></svg>
       <div class="menu-dot"></div>
      </div>
      <div class="job-card-title">UX Designer</div>
      <div class="job-card-subtitle">
       The User Experience Designer position exists to create compelling and digital user experience through excellent design...
      </div>
      <div class="job-detail-buttons">
       <button class="search-buttons detail-button">Full Time</button>
       <button class="search-buttons detail-button">Min. 1 Year</button>
       <button class="search-buttons detail-button">Senior Level</button>
      </div>
      <div class="job-card-buttons">
       <button class="search-buttons card-buttons">Apply Now</button>
       <button class="search-buttons card-buttons-msg">Messages</button>
      </div>
     </div>
    </div>
    <div class="job-overview">
     <div class="job-overview-cards">
      <div class="job-overview-card">
       <div class="job-card overview-card">
        <div class="overview-wrapper">
         <svg viewBox="0 -13 512 512" xmlns="http://www.w3.org/2000/svg" style="background-color:#2e2882">
        <g fill="#feb0a5" >
         <path d="M256 92.5l127.7 91.6L512 92 383.7 0 256 91.5 128.3 0 0 92l128.3 92zm0 0M256 275.9l-127.7-91.5L0 276.4l128.3 92L256 277l127.7 91.5 128.3-92-128.3-92zm0 0" />
         <path d="M127.7 394.1l128.4 92 128.3-92-128.3-92zm0 0" />
        </g>
        <path d="M512 92L383.7 0 256 91.5v1l127.7 91.6zm0 0M512 276.4l-128.3-92L256 275.9v1l127.7 91.5zm0 0M256 486.1l128.4-92-128.3-92zm0 0" fill="#feb0a5" />
       </svg>
         <div class="overview-detail">
          <div class="job-card-title">UI / UX Designer</div>
          <div class="job-card-subtitle">
           2972 Westheimer Rd. Santa Ana.
          </div>
         </div>
         <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
          <path d="M20.8 4.6a5.5 5.5 0 00-7.7 0l-1.1 1-1-1a5.5 5.5 0 00-7.8 7.8l1 1 7.8 7.8 7.8-7.7 1-1.1a5.5 5.5 0 000-7.8z" /></svg>
        </div>
        <div class="job-overview-buttons">
         <div class="search-buttons time-button">Full Time</div>
         <div class="search-buttons level-button">Senior Level</div>
         <div class="job-stat">New</div>
         <div class="job-day">4d</div>
        </div>
       </div>
      </div>
      <div class="job-overview-card">
       <div class="job-card overview-card">
        <div class="overview-wrapper">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="background-color:#f76754">
        <path xmlns="http://www.w3.org/2000/svg" d="M0 .5h4.2v23H0z" fill="#042b48" data-original="#212121" />
        <path xmlns="http://www.w3.org/2000/svg" d="M15.4.5a8.6 8.6 0 100 17.2 8.6 8.6 0 000-17.2z" fill="#fefefe" data-original="#f4511e" /></svg>
         <div class="overview-detail">
          <div class="job-card-title">Sr. Product Designer</div>
          <div class="job-card-subtitle">
           1901 Thornridge Cir.Shiloh, Hawaii.
          </div>
         </div>
         <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
          <path d="M20.8 4.6a5.5 5.5 0 00-7.7 0l-1.1 1-1-1a5.5 5.5 0 00-7.8 7.8l1 1 7.8 7.8 7.8-7.7 1-1.1a5.5 5.5 0 000-7.8z" /></svg>
        </div>
        <div class="job-overview-buttons">
         <div class="search-buttons time-button">Full Time</div>
         <div class="search-buttons level-button">Senior Level</div>
         <div class="job-stat">New</div>
         <div class="job-day">4d</div>
        </div>
       </div>
      </div>
      <div class="job-overview-card">
       <div class="job-card overview-card">
        <div class="overview-wrapper">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#fff" style="background-color:#55acee">
        <path d="M512 97.2c-19 8.4-39.3 14-60.5 16.6 21.8-13 38.4-33.4 46.2-58a209.8 209.8 0 01-66.6 25.4A105 105 0 00249.5 153c0 8.3.8 16.3 2.5 24A297.1 297.1 0 0135.6 67 105.1 105.1 0 0068 207.4c-16.9-.3-33.4-5.2-47.4-12.9v1.1c0 51 36.4 93.4 84 103.2-8.5 2.3-17.8 3.4-27.4 3.4-6.8 0-13.5-.3-20-1.8a106 106 0 0098.2 73.2A211 211 0 010 416.9 295.5 295.5 0 00161 464c193.2 0 298.8-160 298.8-298.7 0-4.6-.2-9.1-.4-13.6A209.4 209.4 0 00512 97.2z" /></svg>
         <div class="overview-detail">
          <div class="job-card-title">User Experience Designer</div>
          <div class="job-card-subtitle">
           414 Parker Rd. Allentown, New york
          </div>
         </div>
         <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
          <path d="M20.8 4.6a5.5 5.5 0 00-7.7 0l-1.1 1-1-1a5.5 5.5 0 00-7.8 7.8l1 1 7.8 7.8 7.8-7.7 1-1.1a5.5 5.5 0 000-7.8z" /></svg>
        </div>
        <div class="job-overview-buttons">
         <div class="search-buttons time-button">Full Time</div>
         <div class="search-buttons level-button">Senior Level</div>
         <div class="job-stat">New</div>
         <div class="job-day">4d</div>
        </div>
       </div>
      </div>
      <div class="job-overview-card">
       <div class="job-card overview-card">
        <div class="overview-wrapper">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff" style="background-color:#1e1f26">
        <path d="M24 7.6c0-.3 0-.5-.4-.6C12.2.2 12.4-.3 11.6 0 3 5.5.6 6.7.2 7.1c-.3.3-.2.8-.2 8.3 0 .9 7.7 5.5 11.5 8.4.4.3.8.2 1 0 11.2-8 11.5-7.6 11.5-8.4V7.6zm-1.5 6.5l-3.9-2.4L22.5 9zm-5.3-3.2l-4.5-2.7V2L22 7.6zM12 14.5l-3.9-2.7L12 9.5l3.9 2.3zm-.8-12.4v6L6.8 11 2.1 7.6zm-5.8 9.6l-3.9 2.4V9zm1.3 1l4.5 3.1v6l-9-6.3zm6 9.1v-6l4.6-3.1 4.6 2.8z" /></svg>
         <div class="overview-detail">
          <div class="job-card-title">Product Designer</div>
          <div class="job-card-subtitle">
           4517 Washington Ave. Syracuse.
          </div>
         </div>
         <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
          <path d="M20.8 4.6a5.5 5.5 0 00-7.7 0l-1.1 1-1-1a5.5 5.5 0 00-7.8 7.8l1 1 7.8 7.8 7.8-7.7 1-1.1a5.5 5.5 0 000-7.8z" /></svg>
        </div>
        <div class="job-overview-buttons">
         <div class="search-buttons time-button">Full Time</div>
         <div class="search-buttons level-button">Senior Level</div>
         <div class="job-stat">New</div>
         <div class="job-day">4d</div>
        </div>
       </div>
      </div>
      <div class="job-overview-card">
       <div class="job-card overview-card">
        <div class="overview-wrapper">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="background-color:#ffe80f">
        <path d="M9.5 9.3l-.7 2h1.4z" />
        <path d="M12 1C5.4 1 0 5.2 0 10.4c0 3.4 2.2 6.3 5.6 8-1.3 4.4-1.3 4.4-1 4.6.2.1.5 0 5.3-3.4l2.1.2c6.6 0 12-4.2 12-9.4S18.6 1 12 1zM6 13c0 .4-.3.7-.6.7s-.7-.3-.7-.7V9H3.6c-.4 0-.7-.4-.7-.7s.3-.7.7-.7H7c.4 0 .7.3.7.7s-.3.6-.7.6h-1zm5.4.7c-.7 0-.6-.6-.9-1.2h-2c-.4.6-.3 1.2-1 1.2s-.8-.4-.6-1.1l1.6-4.3a1 1 0 011-.7c.4 0 .8.3.9.7 1 3.4 2.6 5.4 1 5.4zm4-.1h-2.2c-1.2 0-.5-1.6-.7-5.3 0-.4.3-.7.7-.7s.7.3.7.7v4h1.5c.3 0 .6.3.6.6 0 .4-.3.7-.6.7zm5.4-.5l-.3.4c-1 .7-1.6-1.4-2.6-2.3l-.2.3V13c0 .4-.3.7-.7.7a.7.7 0 01-.7-.7V8.3a.7.7 0 011.4 0v1.5c1.3-1 2-2.7 2.8-2 .8.9-.9 1.6-1.5 2.5 1.6 2.2 1.9 2.3 1.8 2.8z" /></svg>
         <div class="overview-detail">
          <div class="job-card-title">UI / UX Designer</div>
          <div class="job-card-subtitle">
           2711 Ash Dr. San Jose, South Dark.
          </div>
         </div>
         <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
          <path d="M20.8 4.6a5.5 5.5 0 00-7.7 0l-1.1 1-1-1a5.5 5.5 0 00-7.8 7.8l1 1 7.8 7.8 7.8-7.7 1-1.1a5.5 5.5 0 000-7.8z" /></svg>
        </div>
        <div class="job-overview-buttons">
         <div class="search-buttons time-button">Full Time</div>
         <div class="search-buttons level-button">Senior Level</div>
         <div class="job-stat">New</div>
         <div class="job-day">4d</div>
        </div>
       </div>
      </div>
      <div class="job-overview-card">
       <div class="job-card overview-card">
        <div class="overview-wrapper">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="background-color: #fe5b5f">
        <path d="M12 20.6c-1.4 1.5-3.1 3-5.1 3.3-2 .8-5.9-1.3-5.9-5 0-2.5 3.2-8 6.6-15.1C8.5 1.9 9.4 0 12 0c2.6 0 3.5 1.8 4.6 4C23 17 23 17.7 23 19c0 4.4-5.5 8-11 1.7zm9.5-1.7c0-2-6.4-14.4-6.5-14.5-.9-1.9-1.4-2.9-3-2.9-1.8 0-2.3 1.5-3.2 3.2C2.5 17.2 2.5 18 2.5 19c0 3 3.7 6 8.5.6-2-2.6-3-4.8-3-6.6 0-2.7 2-4.2 4-4.2s4 1.5 4 4.2c0 1.8-1 4-3 6.6 4.6 5.2 8.5 2.5 8.5-.6zM12 10.2c-1.2 0-2.5.9-2.5 2.7 0 1.4.9 3.3 2.5 5.4 1.6-2.1 2.5-4 2.5-5.4 0-1.8-1.3-2.7-2.5-2.7z" fill="#fff" /></svg>
         <div class="overview-detail">
          <div class="job-card-title">UI Developer</div>
          <div class="job-card-subtitle">
           1725 Preston Rd. Inglewood.
          </div>
         </div>
         <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
          <path d="M20.8 4.6a5.5 5.5 0 00-7.7 0l-1.1 1-1-1a5.5 5.5 0 00-7.8 7.8l1 1 7.8 7.8 7.8-7.7 1-1.1a5.5 5.5 0 000-7.8z" /></svg>
        </div>
        <div class="job-overview-buttons">
         <div class="search-buttons time-button">Full Time</div>
         <div class="search-buttons level-button">Senior Level</div>
         <div class="job-stat">New</div>
         <div class="job-day">4d</div>
        </div>
       </div>
      </div>
      <div class="job-overview-card">
       <div class="job-card overview-card">
        <div class="overview-wrapper">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="background-color: #5c6bc0">
        <g fill="#fff">
         <path d="M3.6 21.2h14.2l-.6-2.2 5.8 5V2.5C23 1 21.8 0 20.4 0H3.6A2.6 2.6 0 001 2.5v16.2c0 1.4 1.2 2.5 2.6 2.5zM14 5.7zM6.5 7C8.3 5.6 10 5.7 10 5.7l.2.1c-2.3.6-3.3 1.6-3.3 1.6.1 0 4.6-2.7 10.1 0 0 0-1-1-3.1-1.5l.2-.2c.3 0 1.8 0 3.5 1.3 0 0 1.8 3.1 1.8 7 0 0-1.1 1.6-4 1.7l-.7-1a4 4 0 002.2-1.4c-3.2 2-6 1.7-9.3.3h-.1l-.4-.2s.6 1 2.2 1.4l-.8 1c-2.8 0-3.8-1.8-3.8-1.8 0-3.9 1.8-7 1.8-7z" />
         <path d="M14.3 12.8c.7 0 1.3-.6 1.3-1.4 0-.7-.6-1.3-1.3-1.3a1.3 1.3 0 000 2.7zM9.7 12.8c.7 0 1.3-.6 1.3-1.4 0-.7-.6-1.3-1.3-1.3a1.3 1.3 0 000 2.7z" />
        </g>
       </svg>
         <div class="overview-detail">
          <div class="job-card-title">User Interface Designer</div>
          <div class="job-card-subtitle">
           2972 Westheimer Rd. Santa Ana.
          </div>
         </div>
         <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
          <path d="M20.8 4.6a5.5 5.5 0 00-7.7 0l-1.1 1-1-1a5.5 5.5 0 00-7.8 7.8l1 1 7.8 7.8 7.8-7.7 1-1.1a5.5 5.5 0 000-7.8z" /></svg>
        </div>
        <div class="job-overview-buttons">
         <div class="search-buttons time-button">Full Time</div>
         <div class="search-buttons level-button">Senior Level</div>
         <div class="job-stat">New</div>
         <div class="job-day">4d</div>
        </div>
       </div>
      </div>
       <div class="job-overview-card">
       <div class="job-card overview-card">
        <div class="overview-wrapper">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff" style="background-color:#ea4c88">
        <path d="M16.4 23.2C28.6 18.2 25.2 0 12 0a12 12 0 104.4 23.2zM5.3 20c.8-1.5 3.6-5.5 8.3-7 1 2.6 1.7 5.5 1.7 8.8-3.5 1.2-7.3.4-10-1.8zm11.5 1.2a27 27 0 00-1.7-8.4c2-.4 4.5-.2 7.2 1-.6 3.2-2.6 6-5.5 7.4zm5.7-9c-3-1.1-5.7-1.3-8-.8a28 28 0 00-1.1-2.3 20 20 0 006.5-4c1.7 1.9 2.7 4.3 2.6 7zM18.9 4c-.9.8-2.9 2.4-6.3 3.8A28 28 0 008 2.3C11.6.8 15.8 1.4 19 4zM6.6 3c.8.7 2.7 2.5 4.5 5.3a33 33 0 01-9.4 1.5c.6-3 2.4-5.4 4.9-6.9zm-5 8.3c4.2-.1 7.6-.8 10.3-1.7l1.1 2.1A17.4 17.4 0 004.2 19c-1.8-2-2.8-4.7-2.7-7.6z" /></svg>
         <div class="overview-detail">
          <div class="job-card-title">UI / UX Designer</div>
          <div class="job-card-subtitle">
           1976 Thornide Joshua. Andr Maria.
          </div>
         </div>
         <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
          <path d="M20.8 4.6a5.5 5.5 0 00-7.7 0l-1.1 1-1-1a5.5 5.5 0 00-7.8 7.8l1 1 7.8 7.8 7.8-7.7 1-1.1a5.5 5.5 0 000-7.8z" /></svg>
        </div>
        <div class="job-overview-buttons">
         <div class="search-buttons time-button">Full Time</div>
         <div class="search-buttons level-button">Senior Level</div>
         <div class="job-stat">New</div>
         <div class="job-day">4d</div>
        </div>
       </div>
      </div>
      <div class="job-overview-card">
       <div class="job-card overview-card">
        <div class="overview-wrapper">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path d="M113.5 309.4L95.6 376l-65 1.4A254.9 254.9 0 010 256c0-42.5 10.3-82.5 28.6-117.7l58 10.6 25.4 57.6a152.2 152.2 0 001.5 103z" fill="#fbbb00" />
        <path d="M507.5 208.2a256.3 256.3 0 01-91.2 247.4l-73-3.7-10.4-64.5c29.9-17.6 53.3-45 65.6-78H261.6V208.3h246z" fill="#518ef8" />
        <path d="M416.3 455.6a256 256 0 01-385.8-78.3l83-67.9a152.2 152.2 0 00219.4 78l83.4 68.2z" fill="#28b446" />
        <path d="M419.4 59l-83 67.8A152.3 152.3 0 00112 206.5l-83.4-68.2a256 256 0 01390.8-79.4z" fill="#f14336" /></svg>
         <div class="overview-detail">
          <div class="job-card-title">UX Designer</div>
          <div class="job-card-subtitle">
           2972 Westheimer Rd. Santa Ana.
          </div>
         </div>
         <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
          <path d="M20.8 4.6a5.5 5.5 0 00-7.7 0l-1.1 1-1-1a5.5 5.5 0 00-7.8 7.8l1 1 7.8 7.8 7.8-7.7 1-1.1a5.5 5.5 0 000-7.8z" /></svg>
        </div>
        <div class="job-overview-buttons">
         <div class="search-buttons time-button">Full Time</div>
         <div class="search-buttons level-button">Senior Level</div>
         <div class="job-stat">New</div>
         <div class="job-day">4d</div>
        </div>
       </div>
      </div> 
     </div>
     <div class="job-explain">
      <img class="job-bg" alt="">
      <div class="job-logos">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="background-color:#f76754">
        <path xmlns="http://www.w3.org/2000/svg" d="M0 .5h4.2v23H0z" fill="#042b48" data-original="#212121"></path>
        <path xmlns="http://www.w3.org/2000/svg" d="M15.4.5a8.6 8.6 0 100 17.2 8.6 8.6 0 000-17.2z" fill="#fefefe" data-original="#f4511e"></path></svg>
      </div>
      <div class="job-explain-content">
      <div class="job-title-wrapper">
       <div class="job-card-title">UI /UX Designer</div>
       <div class="job-action">
        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
          <path d="M20.8 4.6a5.5 5.5 0 00-7.7 0l-1.1 1-1-1a5.5 5.5 0 00-7.8 7.8l1 1 7.8 7.8 7.8-7.7 1-1.1a5.5 5.5 0 000-7.8z" /></svg>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></svg>
       </div>
       </div>
       <div class="job-subtitle-wrapper">
        <div class="company-name">Patreon <span class="comp-location">Londontowne, MD.</span></div>
        <div class="posted">Posted 8 days ago<span class="app-number">98 Application</span></div>
       </div>
       <div class="explain-bar">
        <div class="explain-contents">
        <div class="explain-title">Experience</div>
        <div class="explain-subtitle">Minimum 1 Year</div>
         </div>
        <div class="explain-contents">
        <div class="explain-title">Work Level</div>
        <div class="explain-subtitle">Senior level</div>
         </div>
        <div class="explain-contents">
        <div class="explain-title">Employee Type</div>
        <div class="explain-subtitle">Full Time Jobs</div>
         </div>
        <div class="explain-contents">
        <div class="explain-title">Offer Salary</div>
        <div class="explain-subtitle">$2150.0 / Month</div>
         </div>
       </div>
       <div class="overview-text">
        <div class="overview-text-header">Overview</div>
        <div class="overview-text-subheader">We believe that design (and you) will be critical to the company's success. You will work with our founders and our early customers to help define and build our product functionality, while maintaining the quality bar that customers have come to expect from modern SaaS applications. You have a strong background in product design with a quantitavely anf qualitatively analytical mindset. You will also have the opportunity to craft our overall product and visual identity and should be comfortable to flex into working.</div>
       </div>
       <div class="overview-text">
        <div class="overview-text-header">Job Description</div>
        <div class="overview-text-item">3+ years working as a product designer.</div>
        <div class="overview-text-item">A portfolio that highlights your approach to problem solving, as well as you skills in UI.</div>
        <div class="overview-text-item">Experience conducting research and building out smooth flows.</div>
        <div class="overview-text-item">Excellent communication skills with a well-defined design process.</div>
        <div class="overview-text-item">Familiarity with design tools like Sketch and Figma</div>
        <div class="overview-text-item">Up-level our overall design and bring consistency to end-user facing properties</div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
 outline: none;
 box-sizing: border-box;
}

:root {
 --body-bg-color: #e5ecef;
 --theme-bg-color: #fafafb;
 --body-font: "Poppins", sans-serif;
 --body-color: #2f2f33;
 --active-color: #0162ff;
 --active-light-color: #e1ebfb;
 --header-bg-color: #fff;
 --search-border-color: #efefef;
 --border-color: #d8d8d8;
 --alert-bg-color: #e8f2ff;
 --subtitle-color: #83838e;
 --inactive-color: #f0f0f0;
 --placeholder-color: #9b9ba5;
 --time-button: #fc5757;
 --level-button: #5052d5;
 --button-color: #fff;
}

.dark-mode {
 --body-bg-color: #1d1d1d;
 --theme-bg-color: #13131a;
 --header-bg-color: #1c1c24;
 --alert-bg-color: #292932;
 --body-color: #fff;
 --inactive-color: #292932;
 --time-button: #fff;
 --level-button: #fff;
 --active-light-color: #263d63;
 --border-color: #26262f;
 --search-border-color: #26262f;
}

::placeholder {
 color: var(--placeholder-color);
}

img {
 max-width: 100%;
}

html {
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
}

body {
 background-color: var(--body-bg-color);
 font-family: var(--body-font);
 font-size: 15px;
 color: var(--body-color);
}

.dark-light svg {
 margin-right: 8px;
 width: 22px;
 cursor: pointer;
 fill: transparent;
 transition: 0.5s;
}

.dark-mode {
 .dark-light svg {
  fill: #ffce45;
  stroke: #ffce45;
 }
 .job-card svg {
  box-shadow: none;
 }
 .search.item {
  color: var(--body-color);
  border-color: var(--body-color);
 }
 .search-location,
 .search-job,
 .search-salary {
  svg {
   color: var(--body-color);
  }
 }
 .detail-button {
  background-color: var(--inactive-color);
  color: var(--subtitle-color);
 }
}

.job {
 display: flex;
 flex-direction: column;
 max-width: 1400px;
 height: 100vh;
 margin: 0 auto;
 overflow: hidden;
 background-color: var(--theme-bg-color);
}

.logo {
 display: flex;
 align-items: center;
 font-weight: 600;
 font-size: 18px;
 cursor: pointer;
 svg {
  width: 24px;
  margin-right: 12px;
 }
}

.header {
 display: flex;
 align-items: center;
 transition: box-shadow 0.3s;
 flex-shrink: 0;
 padding: 0 40px;
 white-space: nowrap;
 background-color: var(--header-bg-color);
 height: 60px;
 width: 100%;
 font-size: 14px;
 justify-content: space-between;
 &-menu a {
  text-decoration: none;
  color: var(--body-color);
  font-weight: 500;
  &:hover {
   color:var(--active-color);
  }
  &:not(:first-child) {
   margin-left: 30px;
  }
  &.active {
   color: var(--active-color);
  }
 }
}

.user-settings {
 display: flex;
 align-items: center;
 font-weight: 500;
 svg {
  width: 20px;
  color: #94949f;
 }
}

.user-menu {
 position: relative;
 margin-right: 8px;
 padding-right: 8px;
 border-right: 2px solid #d6d6db;
 &:before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--header-bg-color);
  right: 6px;
  top: -1px;
  background-color: var(--active-color);
 }
}
.user-profile {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 object-fit: cover;
 margin-right: 10px;
}

.wrapper {
 width: 100%;
 display: flex;
 flex-direction: column;
 flex-grow: 1;
 scroll-behavior: smooth;
 padding: 30px 40px;
 overflow: auto;
}

.search-menu {
 height: 56px;
 white-space: nowrap;
 display: flex;
 flex-shrink: 0;
 align-items: center;
 background-color: var(--header-bg-color);
 border-radius: 8px;
 width: 100%;
 padding-left: 20px;
 div:not(:last-of-type) {
  border-right: 1px solid var(--search-border-color);
 }
}

.search-bar {
 height: 55px;
 width: 100%;
 position: relative;
 input {
  width: 100%;
  height: 100%;
  display: block;
  background-color: transparent;
  border: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%230162ff'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: 0 50%;
  padding: 0 25px 0 305px;
 }
}

.search-location,
.search-job,
.search-salary {
 display: flex;
 align-items: center;
 width: 50%;
 font-size: 14px;
 font-weight: 500;
 padding: 0 25px;
 height: 100%;
 input {
  width: 100%;
  height: 100%;
  display: block;
  background-color: transparent;
  border: none;
 }
 svg {
  margin-right: 8px;
  width: 18px;
  color: var(--active-color);
  flex-shrink: 0;
 }
}

.search-button {
 background-color: var(--active-color);
 height: 55px;
 border: none;
 font-weight: 600;
 font-size: 14px;
 padding: 0 15px;
 border-radius: 0 8px 8px 0;
 color: var(--button-color);
 cursor: pointer;
 margin-left: auto;
}

.search.item {
 position: absolute;
 top: 10px;
 left: 25px;
 font-size: 13px;
 color: var(--active-color);
 border: 1px solid var(--search-border-color);
 padding: 8px 10px;
 border-radius: 8px;
 display: flex;
 align-items: center;
 svg {
  width: 12px;
  margin-left: 5px;
 }
 &:last-child {
  left: 185px;
 }
}

.main-container {
 display: flex;
 flex-grow: 1;
 padding-top: 30px;
}

.search-type {
 width: 270px;
 display: flex;
 flex-direction: column;
 height: 100%;
 flex-shrink: 0;
}

.alert {
 background-color: var(--alert-bg-color);
 padding: 24px 18px;
 border-radius: 8px;
 &-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
 }
 &-subtitle {
  font-size: 13px;
  color: var(--subtitle-color);
  line-height: 1.6em;
  margin-bottom: 20px;
 }
 input {
  width: 100%;
  padding: 10px;
  display: block;
  border-radius: 6px;
  background-color: var(--header-bg-color);
  border: none;
  font-size: 13px;
 }
}

.search-buttons {
 border: none;
 color: var(--button-color);
 background-color: var(--active-color);
 padding: 8px 10px;
 border-radius: 6px;
 font-size: 13px;
 font-weight: 600;
 margin-top: 14px;
}

.job-wrapper {
 padding-top: 20px;
}

.job-time {
 padding-top: 20px;
 &-title {
  font-size: 14px;
  font-weight: 500;
 }
}

.type-container {
 display: flex;
 align-items: center;
 color: var(--subtitle-color);
 font-size: 13px;
 label {
  margin-left: 2px;
  display: flex;
  align-items: center;
  cursor: pointer;
 }
 & + & {
  margin-top: 10px;
 }
}

.job-number {
 margin-left: auto;
 background-color: var(--inactive-color);
 color: var(--subtitle-color);
 font-size: 10px;
 font-weight: 500;
 padding: 5px;
 border-radius: 4px;
}

.job-style {
 display: none;
}

.job-style + label:before {
 content: "";
 margin-right: 10px;
 width: 16px;
 height: 16px;
 border: 1px solid var(--subtitle-color);
 border-radius: 4px;
 cursor: pointer;
}

.job-style:checked + label:before {
 background-color: var(--active-color);
 border-color: var(--active-color);
 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e");
 background-position: 50%;
 background-size: 14px;
 background-repeat: no-repeat;
}

.job-style:checked + label + span {
 background-color: var(--active-light-color);
 color: var(--active-color);
}

.searched-jobs {
 display: flex;
 flex-direction: column;
 flex-grow: 1;
 padding-left: 40px;
}

@keyframes slideY {
 0% {
  opacity: 0;
  transform: translateY(200px);
 } 
}

.searched {
 &-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideY .6s both
  //display: none;
 }
 &-show {
  font-size: 19px;
  font-weight: 600;
 }
 &-sort {
  font-size: 14px;
  color: var(--subtitle-color);
  .post-time {
   font-weight: 600;
   color: var(--subtitle-color);
  }
  .menu-icon {
   font-size: 9px;
   color: var(--placeholder-color);
   margin-left: 6px;
  }
 }
}

.job-cards {
 padding-top: 20px;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-column-gap: 25px;
 grid-row-gap: 25px;
 animation: slideY .6s both;
 //display: none;
 @media screen and (max-width: 1212px) {
  grid-template-columns: repeat(2, 1fr);
 }
 @media screen and (max-width: 930px) {
  grid-template-columns: repeat(1, 1fr);
 }
}
.job-card {
 padding: 20px 16px;
 background-color: var(--header-bg-color);
 border-radius: 8px;
 cursor: pointer;
 transition: .2s;
 &:hover {
  transform: scale(1.02);
 }
 svg {
  width: 46px;
  padding: 10px;
  border-radius: 8px;
 }
 &-title {
  font-weight: 600;
  margin-top: 16px;
  font-size: 14px;
 }
 &-subtitle {
  color: var(--subtitle-color);
  font-size: 13px;
  margin-top: 14px;
  line-height: 1.6em;
 }
 &-header {
  display: flex;
  align-items: flex-start;
 }
}

.overview-card:hover {
 background: #2b2ecf;
 transition: none;
 transform: scale(1);
 svg {
  box-shadow: none;
 }
 .job-overview-buttons .search-buttons.time-button,
 .job-overview-buttons .search-buttons.level-button {
  background-color: #575ad8;
  color: #fff;
 }
 .job-card-title,
 .job-stat {
  color: #fff;
 }
 .job-card-subtitle,
 .job-day {
  color: #dedede;
 }
 .overview-wrapper .heart {
  color: #fff;
  border-color: #fff;
  &:hover {
   fill: red;
   stroke: red;
   transform: scale(1.1);
  }
 }
}

.detail-button {
 background-color: var(--active-light-color);
 color: var(--active-color);
 font-size: 11px;
 font-weight: 500;
 padding: 6px 8px;
 border-radius: 4px;
 & + & {
  margin-left: 4px;
 }
}

.job-card-buttons {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 margin-top: 4px;
}

.card-buttons,
.card-buttons-msg {
 padding: 10px;
 width: 100%;
 font-size: 12px;
 cursor: pointer;
}

.card-buttons {
 margin-right: 12px;
 &-msg {
  background-color: var(--inactive-color);
  color: var(--subtitle-color);
 }
}

.menu-dot {
 background-color: var(--placeholder-color);
 box-shadow: -6px 0 0 0 var(--placeholder-color),
  6px 0 0 0 var(--placeholder-color);
 width: 4px;
 height: 4px;
 border: 0;
 padding: 0;
 border-radius: 50%;
 margin-left: auto;
 margin-right: 8px;
}

.header-shadow {
 box-shadow: 0 4px 20px rgba(88, 99, 148, 0.17);
 z-index: 1;
}

@keyframes slide {
 0% {
  opacity: 0;
  transform: translateX(300px);
 } 
}

.job-overview {
 display: flex;
 flex-grow: 1;
 display: none;
 animation: slide .6s both;
 &-cards {
  display: flex;
  flex-direction: column;
  width: 330px;
  height: 100%;
  flex-shrink: 0;
 }
 &-card + &-card {
  margin-top: 20px;
 }
 &-buttons {
  display: flex;
  align-items: center;
  margin-top: 12px;
  .search-buttons {
   background-color: var(--inactive-color);
   font-size: 11px;
   padding: 6px 8px;
   margin-top: 0;
   font-weight: 500;
   &.time-button {
    color: var(--time-button);
    margin-right: 8px;
   }
   &.level-button {
    color: var(--level-button);
   }
  }
  .job-stat {
   color: var(--active-color);
   font-size: 12px;
   font-weight: 500;
   margin-left: auto;
  }
  .job-day {
   color: var(--subtitle-color);
   font-size: 12px;
   margin-left: 8px;
   font-weight: 500;
  }
 }

 .overview-wrapper {
  display: flex;
  align-items: center;
  svg:first-child {
   width: 42px;
   margin-right: 10px;
  }
  .heart {
   background: none;
   box-shadow: none;
   width: 24px;
   padding: 4px;
   color: var(--subtitle-color);
   border: 1px solid var(--border-color);
   margin-left: auto;
   margin-bottom: auto;
  }
 }
}

.overview-detail {
 .job-card-title,
 .job-card-subtitle {
  margin-top: 4px;
 }
 .job-card-subtitle {
  font-size: 12px;
  font-weight: 500;
 }
}

.job-explain {
 background-color: var(--header-bg-color);
 margin-left: 40px;
 border-radius: 0 0 8px 8px;
}

.job-bg {
 border-radius: 8px 8px 0 0;
 object-fit: cover;
 width: 100%;
 height: 180px;
 transition: .3s;
 position: relative;
}

.job-logos {
 margin-top: -30px;
 position: relative;
 margin-bottom: -36px;
 padding: 0 20px;
 svg {
  width: 66px;
  padding: 12px;
  background-color: #fff;
  border-radius: 10px;
  border: 4px solid var(--header-bg-color);
 }
}

.job-title-wrapper {
 display: flex;
 align-items: center;
 .job-card-title {
  font-size: 20px;
  margin-top: 0;
  font-weight: 600;
 }
}

.job-action {
 display: flex;
 align-items: center;
 margin-left: auto;
 svg {
  width: 32px;
  border: 1px solid var(--border-color);
  color: var(--subtitle-color);
  border-radius: 8px;
  padding: 6px;
  & + svg {
   margin-left: 12px;
  }
 }
}

.job-explain-content {
 padding: 50px 25px 30px;
}

.job-subtitle-wrapper {
 display: flex;
 align-items: center;
 margin-top: 20px;
 .posted {
  margin-left: auto;
 }
 .company-name {
  color: var(--active-color);
  font-weight: 600;
  font-size: 14px;
 }
 .comp-location,
 .posted {
  color: var(--subtitle-color);
  font-size: 12px;
  font-weight: 500;
 }
 .comp-location {
  position: relative;
  margin-left: 10px;
  &:before {
   content: "";
   width: 3px;
   height: 3px;
   border-radius: 50%;
   background-color: var(--placeholder-color);
   top: 49%;
   left: -8px;
   position: absolute;
  }
 }
 .app-number {
  color: var(--body-color);
  position: relative;
  margin-left: 12px;
  &:before {
   content: "";
   width: 3px;
   height: 3px;
   border-radius: 50%;
   background-color: var(--placeholder-color);
   top: 50%;
   left: -7px;
   position: absolute;
  }
 }
}

.explain {
 &-bar {
  margin-top: 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  height: 66px;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
 }
 &-title {
  color: var(--subtitle-color);
  font-size: 12px;
  line-height: 40px;
  white-space: nowrap;
 }
 &-subtitle {
  font-size: 13px;
  font-weight: 500;
  margin-top: -2px;
  white-space: nowrap;
 }
 &-contents {
  height: 66px;
  & + & {
   border-left: 1px solid var(--border-color);
   padding-left: 16px;
  }
 }
}

.overview-text {
 margin-top: 30px;
 &-header {
  font-weight: 600;
  margin-bottom: 25px;
 }
 &-subheader {
  font-size: 13px;
  line-height: 2em;
 }
 &-item {
  font-size: 13px;
  position: relative;
  display: flex;
  & + & {
   margin-top: 20px;
  }
  &:before {
   content: "";
   border: 2px solid #61bcff;
   border-radius: 50%;
   height: 8px;
   width: 8px;
   margin-right: 8px;
   flex-shrink: 0;
  }
 }
}

.detail-page {
 .job-overview {
  display: flex;
 }
 .job-cards,
 .searched-bar {
  display: none;
 }
 @media screen and (max-width: 1300px) {
  .search-type {
   display: none;
  }
  .searched-jobs {
   padding-left: 0;
  }
 }
}

@media screen and (max-width: 990px) {
 .explain-contents, .explain-bar {
  height: auto;
 }
 .explain-bar {
  flex-wrap: wrap;
  padding-bottom: 14px;
 }
 .explain-contents {
  width: 50%;
 }
 .explain-contents + .explain-contents {
  padding: 0;
  border: 0;
 }
 
 .explain-contents:nth-child(2) ~ .explain-contents {
   margin-top: 16px;
   border-top: 1px solid var(--border-color);
 }
 .job-subtitle-wrapper {
  flex-direction: column;
  align-items: flex-start;
 }
 .job-subtitle-wrapper .posted {
  margin-left: 0;
  margin-top: 6px;
 }
}

@media screen and (max-width: 930px) {
 .search-job, .search-salary { display: none; }
 .search-bar { width: auto; }
}
@media screen and (max-width: 760px) {
 .detail-page .job-overview-cards {
  display: none;
 }
 .user-name {
  display: none;
 }
 .user-profile {
  margin-right: 0;
 }
 .job-explain {
  margin-left: 0;
 } 
}
@media screen and (max-width: 730px) {
 .search-type {
  display: none;
 }
 .searched-jobs {
  padding-left: 0;
 } 
 .search-menu div:not(:last-of-type) {
  border: 0;
 }
 .job-cards {
   grid-template-columns: repeat(2, 1fr);
 }
 .search-location { display: none; }
}

@media screen and (max-width: 620px) {
 .job-cards {
   grid-template-columns: repeat(1, 1fr);
 }
 .header-menu a:not(:first-child) {
  margin-left: 10px;
 }
}

@media screen and (max-width: 590px) {
 .header-menu {
  display: none;
 }
}

@media screen and (max-width: 520px) {
 .search.item {
  display: none;
 }
 .search-bar { flex-grow: 1; }
 .search-bar input {
  padding: 0 0 0 30px;
 } 
 .search-button {
  margin-left: 16px;
 }
 .searched-bar {
  flex-direction: column;
  align-items: flex-start;
 }
 .searched-sort {
  margin-top: 5px;
 }
 .main-container {
  padding-top: 20px;
 }
}

@media screen and (max-width: 380px) {
 .explain-contents {
  width: 100%;
  margin: 0;
 }
 
 .explain-contents:nth-child(2) ~ .explain-contents {
  margin: 0;
  border: 0;
 }
 .wrapper {
  padding: 20px;
 }
 .header {
  padding: 0 20px;
 }
}
              
            
!

JS

              
                //$(document).ready(function() {
//$('.search-box').focus();
//});

const wrapper = document.querySelector(".wrapper");
const header = document.querySelector(".header");

wrapper.addEventListener("scroll", (e) => {
 e.target.scrollTop > 30
  ? header.classList.add("header-shadow")
  : header.classList.remove("header-shadow");
});

const toggleButton = document.querySelector(".dark-light");

toggleButton.addEventListener("click", () => {
 document.body.classList.toggle("dark-mode");
});

const jobCards = document.querySelectorAll(".job-card");
const logo = document.querySelector(".logo");
const jobLogos = document.querySelector(".job-logos");
const jobDetailTitle = document.querySelector(
 ".job-explain-content .job-card-title"
);
const jobBg = document.querySelector(".job-bg");

jobCards.forEach((jobCard) => {
 jobCard.addEventListener("click", () => {
  const number = Math.floor(Math.random() * 10);
  const url = `https://unsplash.it/640/425?image=${number}`;
  jobBg.src = url;

  const logo = jobCard.querySelector("svg");
  const bg = logo.style.backgroundColor;
  console.log(bg);
  jobBg.style.background = bg;
  const title = jobCard.querySelector(".job-card-title");
  jobDetailTitle.textContent = title.textContent;
  jobLogos.innerHTML = logo.outerHTML;
  wrapper.classList.add("detail-page");
  wrapper.scrollTop = 0;
 });
});

logo.addEventListener("click", () => {
 wrapper.classList.remove("detail-page");
 wrapper.scrollTop = 0;
   jobBg.style.background = bg;
});

              
            
!
999px

Console