Card for a job position for web design using HTM CSS

Step 1: `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>job positions</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- add style css -->
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
<section class="section">
    <div class="container">
        <div class="row md-m-25px-b m-45px-b justify-content-center text-center">
            <div class="col-lg-8">
                <h3 class="h1 m-15px-b">Job Positions</h3>
                <p class="m-0px font-2">Luper is an HTML5 template based on Sass and Bootstrap 4 with a modern and creative multipurpose design you can use it as a startup.</p>
            </div>
        </div>
        <div class="row">
            <!-- Job Listing Starts -->
            <!-- Repeat for all job positions -->

            <div class="col-sm-6 col-lg-4 m-15px-tb">
                <div class="media box-shadow-only-hover hover-top border-all-1 border-color-gray p-15px">
                    <a class="overlay-link" href="#"></a>
                    <div class="icon-50 theme-bg white-color border-radius-50 d-inline-block">
                        <i class="number">KH</i>
                    </div>
                    <div class="p-20px-l media-body">
                        <span class="theme2nd-bg white-color p-0px-tb p-10px-lr font-small border-radius-15">Full time</span>
                        <h6 class="m-5px-tb">Laravel Developer</h6>
                        <p class="m-0px font-small">Bank Phnom Penh, Kh</p>
                    </div>
                </div>
            </div>

            <!-- Add other job positions here following the same structure -->
            <!-- Job Listing Ends -->

            <div class="col-12 p-25px-t text-center">
                <a class="m-btn m-btn-radius m-btn-theme" href="#">Load More</a>
            </div>
        </div>
    </div>
</section>

<!-- script library -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Step 2: `assets/css/style.css`

body {
    margin-top: 20px;
}

.p-15px {
    padding: 15px;
}

.border-color-gray {
    border-color: #f2f3fa;
}

.border-all-1 {
    border: 1px solid;
}

.hover-top {
    position: relative;
    top: 0;
}

.m-15px-tb {
    margin-top: 15px;
    margin-bottom: 15px;
}

.overlay-link {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 0;
}

.border-radius-50 {
    border-radius: 50%;
}

.icon-50 {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 21px;
}

.white-color {
    color: #ffffff;
}

.theme-bg {
    background-color: #0050d8;
}

.icon-50 i.number {
    font-style: normal;
}

.icon-50 i {
    line-height: 50px;
}

.p-20px-l {
    padding-left: 20px;
}

.p-10px-lr {
    padding-left: 10px;
    padding-right: 10px;
}

.p-0px-tb {
    padding-top: 0px;
    padding-bottom: 0px;
}

.border-radius-15 {
    border-radius: 15px;
}

.theme2nd-bg {
    background-color: #53d267;
}

.m-0px {
    margin: 0px;
}

.font-small {
    font-size: 0.75rem;
    line-height: 1rem;
}

.green-bg-alt {
    background-color: rgba(17, 226, 121, 0.1);
}

.green-bg {
    background-color: #11e279;
}

.green-color {
    color: #11e279;
}

.blue-bg-alt {
    background-color: rgba(21, 178, 236, 0.1);
}

.blue-bg {
    background-color: #15b2ec;
}

.blue-color {
    color: #15b2ec;
}

.pink-bg-alt {
    background-color: rgba(241, 38, 153, 0.1);
}

.pink-bg {
    background-color: #f12699;
}

.pink-color {
    color: #f12699;
}

.yellow-bg {
    background-color: #ffbe3d;
}

.box-shadow-only-hover:hover {
    box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, 0.1);
}

.m-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #0050d8;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

.m-btn-radius {
    border-radius: 50px;
}

.m-btn-theme {
    background-color: #0050d8;
}

Explanation:

HTML:
- The HTML contains the main structure for job positions. It uses Bootstrap classes for layout, styling, and responsiveness.
- Each job position is wrapped inside a column (col-sm-6 col-lg-4) to make it responsive.
- The hover-top and other CSS classes will add interactivity and visual enhancements.
CSS:
- The CSS defines various utility classes like padding, borders, background colors, hover effects, and font sizes.
- You have different color classes (e.g., .theme-bg, .green-bg, .yellow-bg) to style the job positions and their icons.
- .box-shadow-only-hover:hover applies a box shadow when hovering over the job positions.

With this setup, you'll have a job listings page where the positions are displayed in a responsive grid layout, styled using Bootstrap and custom CSS. You can add more job listings by following the pattern.

Souy Soeng

Card for a job position for web design using HTM CSS

Step 1: `index.html`

Step 2: `assets/css/style.css`

Explanation: