<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>Job title</title>

<style>
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html,body{
    width:100%;
    min-height:100%;
}

body{
    background:#fff;
    color:#333;
    font-family:Arial,Helvetica,sans-serif;
    overflow-x:hidden;
}

/* TOP BAR */
.topbar{
    width:100%;
    height:54px;
    background:#08745a;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.top-title{
    color:#fff;
    font-size:20px;
    line-height:1;
    font-weight:700;
}

.back{
    position:absolute;
    left:52px;
    top:18px;
    width:15px;
    height:15px;
    border-left:3px solid #fff;
    border-bottom:3px solid #fff;
    transform:rotate(45deg);
    cursor:pointer;
}

/* PAGE */
.page{
    width:100%;
    padding:40px 51px 30px;
}

/* SELECT PROMOTED */
.section-title{
    display:flex;
    align-items:center;
    gap:28px;
    margin-bottom:49px;
}

.title-line{
    width:7px;
    height:49px;
    background:#f47745;
    border-radius:5px;
    flex-shrink:0;
}

.section-title-text{
    font-size:22px;
    font-weight:700;
    color:#27292d;
    line-height:1.15;
}

/* JOB CARD */
.job-card{
    width:100%;
    height:113px;
    background:#08745a;
    border-radius:20px 20px 0 0;
    overflow:hidden;
}

.job-card-title{
    height:100%;
    display:flex;
    align-items:center;
    padding:0 40px;
    color:#fff;
    font-size:20px;
    font-weight:700;
}

/* NOTICE */
.notice-row{
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:82px;
}

.notice-icon{
    width:35px;
    height:35px;
    border:2px solid #d96a72;
    border-radius:50%;
    color:#d96a72;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:500;
    line-height:1;
    flex-shrink:0;
}

.notice-text{
    color:#666;
    font-size:20px;
    line-height:1.2;
}

/* GUIDELINES */
.guidelines-row{
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:70px;
}

.check-icon{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#4caf50;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:700;
    line-height:1;
    flex-shrink:0;
}

.guidelines-text{
    color:#666;
    font-size:20px;
    line-height:1.2;
}

/* MOBILE */
@media(max-width:600px){

    .topbar{
        height:52px;
    }

    .top-title{
        font-size:18px;
    }

    .back{
        left:51px;
        top:17px;
        width:14px;
        height:14px;
        border-left-width:2px;
        border-bottom-width:2px;
    }

    .page{
        padding:35px 50px 28px;
    }

    .section-title{
        gap:27px;
        margin-bottom:47px;
    }

    .title-line{
        width:6px;
        height:48px;
        border-radius:4px;
    }

    .section-title-text{
        font-size:21px;
    }

    .job-card{
        height:111px;
        border-radius:20px 20px 0 0;
    }

    .job-card-title{
        padding:0 40px;
        font-size:19px;
    }

    .notice-row{
        gap:21px;
        margin-top:79px;
    }

    .notice-icon{
        width:35px;
        height:35px;
        font-size:21px;
    }

    .notice-text{
        font-size:19px;
    }

    .guidelines-row{
        gap:21px;
        margin-top:68px;
    }

    .check-icon{
        width:39px;
        height:39px;
        font-size:23px;
    }

    .guidelines-text{
        font-size:19px;
    }
}

/* SMALL PHONES */
@media(max-width:390px){

    .topbar{
        height:38px;
    }

    .top-title{
        font-size:16px;
    }

    .back{
        left:31px;
        top:16px;
        width:12px;
        height:12px;
    }

    .page{
        padding:28px 25px 24px;
    }

    .section-title{
        gap:16px;
        margin-bottom:24px;
    }

    .title-line{
        width:5px;
        height:28px;
    }

    .section-title-text{
        font-size:17px;
    }

    .job-card{
        height:52px;
        border-radius:14px 14px 0 0;
    }

    .job-card-title{
        padding:0 24px;
        font-size:16px;
    }

    .notice-row{
        gap:15px;
        margin-top:28px;
    }

    .notice-icon{
        width:18px;
        height:18px;
        border-width:2px;
        font-size:17px;
    }

    .notice-text{
        font-size:15px;
    }

    .guidelines-row{
        gap:15px;
        margin-top:23px;
    }

    .check-icon{
        width:21px;
        height:21px;
        font-size:18px;
    }

    .guidelines-text{
        font-size:15px;
    }
}

/* EXTRA SMALL */
@media(max-width:340px){

    .page{
        padding-left:18px;
        padding-right:18px;
    }

    .back{
        left:24px;
    }

    .section-title{
        gap:13px;
        margin-bottom:29px;
    }

    .title-line{
        width:4px;
        height:30px;
    }

    .section-title-text{
        font-size:15px;
    }

    .job-card{
        height:50px;
        border-radius:12px 12px 0 0;
    }

    .job-card-title{
        padding:0 18px;
        font-size:14px;
    }

    .notice-row{
        margin-top:40px;
        gap:12px;
    }

    .notice-icon{
        width:15px;
        height:15px;
        font-size:15px;
    }

    .notice-text{
        font-size:13px;
    }

    .guidelines-row{
        margin-top:36px;
        gap:12px;
    }

    .check-icon{
        width:18px;
        height:18px;
        font-size:16px;
    }

    .guidelines-text{
        font-size:13px;
    }
}
</style>
</head>

<body>

<header class="topbar">

    <div class="back" onclick="history.back()"></div>

    <div class="top-title">
        Job title
    </div>

</header>

<main class="page">

    <!-- SELECT PROMOTED -->
    <section class="section-title">

        <div class="title-line"></div>

        <div class="section-title-text">
            Select promoted
        </div>

    </section>

    <!-- JOB TITLE CARD -->
    <section class="job-card">

        <div class="job-card-title">
            Job title
        </div>

    </section>

    <!-- NOTICE TO EMPLOYEES -->
    <div class="notice-row">

        <div class="notice-icon">
            !
        </div>

        <div class="notice-text">
            Notice to Employees
        </div>

    </div>

    <!-- GUIDELINES -->
    <div class="guidelines-row">

        <div class="check-icon">
            ✓
        </div>

        <div class="guidelines-text">
            I have read the application guidelines
        </div>

    </div>

</main>

</body>
</html>