A Pen by Daria

Thumbnail
This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DM_Daria ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Daria</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section id="vacancies" class="vacancies" data-name="vacancies">
    

    <div class="search-job">
        <div class="wrapper vacancies-block" data-aos="fade-in">
            <h2>Search our Vacancies</h2>
            <div class="career-info-location">
                <form  method="get" action="" role="search">
                    <div class="styled-select styled-select__location">
                        <select class="js-location">
                            <option {{ widget.tab_select_md }} value="js-md">MD</option>
                            <option {{ widget.tab_select_ro }} value="js-ro">RO</option>
                            <option {{ widget.tab_select_uk }} value="js-uk">UK</option>
                        </select>
                    </div>
                    
                    <div class="styled-select">
                        <select class="js-md js-jd-select jd-select active">
                            <option selected disabled hidden>Select a Role</option>
                            <option value="https://info.amdaris.com/careers-internship-chisinau-moldova">Internship MD</option>
                            <option value="https://info.amdaris.com/careers-net-software-developer-chisinau-moldova">.NET Developer</option>
                            <option value="https://info.amdaris.com/careers-senior-net-developer-chisinau-moldova">Senior .NET Developer</option>
                            <option value="https://info.amdaris.com/careers-qa-engineer-chisinau-moldova">QA Engineer</option>
                            <option value="https://info.amdaris.com/careers-senior-qa-engineer-chisinau-moldova">Senior QA Engineer</option>
                            <option value="https://info.amdaris.com/careers-php-developer-chisinau-moldova">PHP Developer</option>
                            <option value="https://info.amdaris.com/careers-scrum-master-chisinau-moldova">Scrum Master</option>
                            <option value="https://info.amdaris.com/careers-css-html-javascript-developer-chisinau-moldova">CSS, HTML, JavaScript Developer</option>
                            <option value="https://info.amdaris.com/careers-system-analyst-chisinau-moldova">System Analyst</option>
                            <option value="https://info.amdaris.com/careers-net-software-architect-chisinau-moldova">.NET Software Architect</option>
                        </select>
                        
                        <select class="js-ro js-jd-select jd-select">
                            <option selected disabled hidden>Select a Role</option>
                            <option value="https://info.amdaris.com/careers-internship-timisoara-romania">Internship RO</option>
                            <option value="https://info.amdaris.com/careers-net-software-developer-timisoara-romania">.NET Developer</option>
                            <option value="https://info.amdaris.com/careers-senior-net-developer-timisoara-romania">Senior .NET Developer</option>
                            <option value="https://info.amdaris.com/careers-qa-engineer-timisoara-romania">QA Engineer</option>
                            <option value="https://info.amdaris.com/careers-senior-qa-engineer-timisoara-romania">Senior QA Engineer</option>
                            <option value="https://info.amdaris.com/careers-php-developer-timisoara-romania">PHP Developer</option>
                            <option value="https://info.amdaris.com/careers-scrum-master-timisoara-romania">Scrum Master</option>
                            <option value="https://info.amdaris.com/careers-css-html-javascript-developer-timisoara-romania">CSS, HTML, JavaScript Developer</option>
                            <option value="https://info.amdaris.com/careers-system-analyst-timisoara-romania">System Analyst</option>
                            <option value="https://info.amdaris.com/careers-net-software-architect-timisoara-romania">.NET Software Architect</option>
                        </select>
                        
                        <select class="js-uk js-jd-select jd-select">
                            <option selected disabled hidden>Select a Role</option>
                            <option value="https://info.amdaris.com/careers-business-development-manager-bristol-uk">Business Development Manager</option>
                            <option value="https://info.amdaris.com/careers-pre-sales-consultant-bristol-uk">Pre-Sales Consultant</option>
                            <option value="https://info.amdaris.com/careers-sales-executive-bristol-uk">Sales Executive</option>
                            <option value="https://info.amdaris.com/careers-net-software-architect-bristol-uk">.Net Software Architect</option>
                            <option value="https://info.amdaris.com/careers-business-analyst-bristol-uk">Business Analyst</option>
                        </select>
                    </div>
                    
                    <button type="button" class="btnRole">SEARCH</button>
                </form>
            </div>
        </div>
        
    </div>
    <div id="job-list">
        <div class="job-list__tabs">
            <div class="wrapper">
                <!--<h6>Select location</h6>-->
                <div class="job-list-block__tabs">
                    <span class="js-loc-tab {{ widget.tab_active_md }}" data-location="js-md-list">Moldova</span>
                    <span class="js-loc-tab {{ widget.tab_active_ro }}" data-location="js-ro-list">Romania</span>
                    <span class="js-loc-tab {{ widget.tab_active_uk }}" data-location="js-uk-list">UK</span>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <div class="job-list-block">
                <div class="job-list-block__links active js-md-list js-locations-list">
                    <a href="https://info.amdaris.com/careers-internship-chisinau-moldova">Internship MD</a>
                    <a href="https://info.amdaris.com/careers-net-software-developer-chisinau-moldova">.NET Developer</a>
                    <a href="https://info.amdaris.com/careers-senior-net-developer-chisinau-moldova">Senior .NET Developer</a>
                    <a href="https://info.amdaris.com/careers-qa-engineer-chisinau-moldova">QA Engineer</a>
                    <a href="https://info.amdaris.com/careers-senior-qa-engineer-chisinau-moldova">Senior QA Engineer</a>
                    <a href="https://info.amdaris.com/careers-php-developer-chisinau-moldova">PHP Developer</a>
                    <a href="https://info.amdaris.com/careers-senior-php-developer-chisinau-moldova">Senior PHP Developer</a>
                    <a href="https://info.amdaris.com/careers-scrum-master-chisinau-moldova">Scrum Master</a>
                    <a href="https://info.amdaris.com/careers-css-html-javascript-developer-chisinau-moldova">CSS, HTML, JavaScript Developer</a>
                    <a href="https://info.amdaris.com/careers-system-analyst-chisinau-moldova">System Analyst</a>
                    <a href="https://info.amdaris.com/careers-net-software-architect-chisinau-moldova">.NET Software Architect</a>
                </div>
                
                <div class="job-list-block__links js-ro-list js-locations-list">
                    <a href="https://info.amdaris.com/careers-internship-timisoara-romania">Internship RO</a>
                    <a href="https://info.amdaris.com/careers-net-software-developer-timisoara-romania">.NET Developer</a>
                    <a href="https://info.amdaris.com/careers-senior-net-developer-timisoara-romania">Senior .NET Developer</a>
                    <a href="https://info.amdaris.com/careers-qa-engineer-timisoara-romania">QA Engineer</a>
                    <a href="https://info.amdaris.com/careers-senior-qa-engineer-timisoara-romania">Senior QA Engineer</a>
                    <a href="https://info.amdaris.com/careers-php-developer-timisoara-romania">PHP Developer</a>
                    <a href="https://info.amdaris.com/careers-senior-php-developer-timisoara-romania">Senior PHP Developer</a>
                    <a href="https://info.amdaris.com/careers-scrum-master-timisoara-romania">Scrum Master</a>
                    <a href="https://info.amdaris.com/careers-css-html-javascript-developer-timisoara-romania">CSS, HTML, JavaScript Developer</a>
                    <a href="https://info.amdaris.com/careers-system-analyst-timisoara-romania">System Analyst</a>
                    <a href="https://info.amdaris.com/careers-net-software-architect-timisoara-romania">.NET Software Architect</a>
                </div>
                
                <div class="job-list-block__links js-uk-list js-locations-list">
                    <a href="https://info.amdaris.com/careers-business-development-manager-bristol-uk">Business Development Manager</a>
                    <a href="https://info.amdaris.com/careers-pre-sales-consultant-bristol-uk">Pre-Sales Consultant</a>
                    <a href="https://info.amdaris.com/careers-sales-executive-bristol-uk">Sales Executive</a>
                    <a href="https://info.amdaris.com/careers-net-software-architect-bristol-uk">.Net Software Architect</a>
                    <a href="https://info.amdaris.com/careers-business-analyst-bristol-uk">Business Analyst</a>
                </div>
            </div>
        </div>
    </div>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/DM_Daria/a-pen-by-daria-LmRNbo */
    body{
        margin: 0;
        padding: 0;
        font-family: SegoeWPSemiLight ;
        line-height:1.6;
    }
    .vacancies .search-job {
        width:100%;
        background:#0469dc;
        color:#fff;
    }
    .vacancies .wrapper {
        max-width:1200px;
        margin:auto;
    }
    .vacancies .vacancies-block{
        display:flex;
        align-items: center;
    }
    .vacancies h2 {
        font-size:45px;
        font-family: SegoeWPSemiLBold;
        
    }

    .vacancies .career-info-location,
    .vacancies h2 {
        flex:0 0 50%;
    }
    .vacancies .career-info-location form{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .vacancies .btnRole {
        border:2px solid #fff;
        background:#0469dc;
        color:#fff;
        font-size:16px;
        padding:15px 70px;
    }
    .vacancies .career-info-location {
        width:100%;
        background-color:#0469dc;
        padding:60px 0;
        box-sizing:border-box;
    }
    .vacancies .career-info-location select {
       background: #0469dc;
       width: 100%;
       padding: 10px 5px;
       font-size: 12px;
       line-height: 2;
       border:0;
       border-radius: 0;
       -webkit-appearance: none;
       color:#fff;
    }
    .vacancies .career-info-location .styled-select {
        width: 100%;
        margin-right: 30px;
        display:inline-block;
        position: relative;
        font-size:12px;
        overflow: hidden;
        border-bottom: 1px solid #fff;
    }
    .vacancies .career-info-location .styled-select__location {
        flex: 0 0 50px;
    }
    
    .career-info-location .jd-select {
        display: none;
    }
    .career-info-location .jd-select.active {
        display: block;
    }
    
    .vacancies .career-info-location .styled-select:before {
        display: block;
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        width: 100%;
        background: #fff;
        transform: scaleX(0);
        transition: transform .2s ease;
    }
    .vacancies .career-info-location .styled-select:hover:before {
        transform: scaleX(1);
    }
    .vacancies .career-info-location .styled-select:after {
        content:'\f107';
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        position: absolute;
        right:0;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }
    .vacancies .job-list-block {
        padding: 10px 0 40px 0;
    }
    
    .vacancies .job-list-block__links {
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 -15px;
        display: none;
    }
    
    .vacancies .job-list-block__links.active {
        display: flex;
    }
    
    .vacancies .job-list-block__links a {
        flex: 0 0 33.333%;
        margin: 5px 0;
        padding: 0 15px;
    }
    
    .vacancies  .job-list-block a {
        text-decoration:none;
        color:#0078ff;
        font-size:18px;
    }
    .vacancies  .job-list-block a:hover,
    .vacancies  .job-list-block a:active,
    .vacancies  .job-list-block a:focus {
        color:#0254b1;
    }
    
    .job-list__tabs {
        margin-bottom: 30px;
        background: #0078ff;
    }
    
    .job-list__tabs .wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
    }
    
    .job-list__tabs h6 {
        font-size: 25px;
        margin: 0;
        font-weight: 500;
    }
    
    .job-list-block__tabs {
        display: flex;
        /*justify-content: flex-end;*/
        flex: 1 1 auto;
        margin: 0 -25px;
    }
    
    .job-list-block__tabs span {
        display: block;
        flex: 0 0 auto;
        text-align: center;
        position: relative;
        font-size: 20px;
        line-height: 1.5;
        transition: color .25s ease;
        padding: 20px 0 20px 0;
        cursor: pointer;
        margin: 0 25px;
    }
    
    .job-list-block__tabs span:after {
        display: block;
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4px;
        width: 100%;
        background: #fff;
        transform: scaleY(0);
        transition: transform .25s ease;
        transform-origin: bottom center;
    }
    

    .job-list-block__tabs span.active:after,
    .job-list-block__tabs span:hover:after {
        transform: scaleY(1);
    }
    
    @media screen and (max-width: 1224px) {
        .vacancies .wrapper {
            padding:0 30px;
        }
    }
    
    @media screen and (max-width: 1100px) {
        .vacancies .job-list-block a {
            font-size: 18px;
        }
    } 
    
    @media screen and (max-width: 1024px) {
        .vacancies .job-list-block {
            white-space: nowrap;
            flex-wrap: wrap;
            padding: 50px 0;
        }
    }
    
    @media screen and (max-width: 1000px) {
        .vacancies-block {
            flex-wrap:wrap;
        }
        .vacancies .career-info-location,
        .vacancies h2 {
            flex:0 0 100%;
        }
        
        .vacancies .career-info-location select {
           width: 100%;
           flex: 1 1 auto;
        }
        
        .vacancies h2 {
            margin-bottom: 0;
        }
        
        .vacancies .career-info-location {
            padding: 30px 15px;
        }
    }
    
    @media screen and (max-width: 900px) {
        .vacancies .job-list-block__links a {
            flex: 0 0 50%;
        }
    }
    
    
    @media (max-width: 650px) {
        .vacancies .career-info-location select {
            width: 230px;
        }
        .vacancies .career-info-location .styled-select {
            width: 230px;
        }
        .vacancies .job-list-block {
            flex-direction:column;
        }
        .vacancies  .job-list-block a {
            font-size: 17px;
            flex: 0 0 100%;
        }
    }
    
    @media screen and (max-width: 414px) {
        .search-job .wrapper {
            padding: 15px;
        }
        
        .vacancies h2 {
            font-size: 30px;
            margin-bottom: 10px;
        }
        
        .vacancies .career-info-location form {
            flex-wrap: wrap;    
        }
        
        .vacancies .career-info-location .styled-select {
            width: 100%;
            margin: 0;
            margin-bottom: 10px;
        }
        
        .vacancies .career-info-location .styled-select__location,
        .vacancies .career-info-location .styled-select {
            flex: 1 1 100%;
        }
        
        .vacancies .career-info-location {
            padding: 0;
        }
        
        .vacancies .btnRole {
            padding: 12px 70px;
            width: 100%;
        }
        
        .job-list .wrapper {
            padding: 0 15px;
        }
        
        .vacancies .job-list-block {
            padding: 30px 0;
        }
    }
    
    @media screen and (max-width: 736px) {
        .job-list__tabs .wrapper {
            flex-wrap: wrap;
        }
        
        .job-list-block__tabs {
            flex: 1 1 100%;
            width: 100%;
            justify-content: space-evenly;
            margin: 0;
        }
        
        .job-list-block__tabs span {
            margin: 0;
        }
        
        .job-list__tabs h6 {
            flex: 1 1 100%;
            width: 100%;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 10px;
        }
    }

/*Downloaded from https://www.codeseek.co/DM_Daria/a-pen-by-daria-LmRNbo */
 $("#vacancies .btnRole").click(function() {
        var location = $('#vacancies .js-location').val();
        var role_value = $('#vacancies .' + location).val();
        if (role_value) {
            window.open(role_value,'_parent');   
        }
    });
    
    $('#vacancies .js-location').change(function() {
        var location = $(this).val();
        $('#vacancies .js-jd-select').removeClass('active');
        $('#vacancies .' + location).addClass('active');
    });
    
    $('#vacancies .js-loc-tab').click(function() {
        $('#vacancies .js-loc-tab').removeClass('active');
        $('#vacancies .js-locations-list').removeClass('active');
        
        $(this).addClass('active');
        var list = $(this).data('location');
        $('#vacancies .' + list).addClass('active');
    })

Comments