<div class="component--job-item" style="margin-bottom: 50px">
<h3 class="title"><a href="#">Product Designer (UI/UX)</a></h3>
<div class="position">Product Designer (UI/UX)</div>
<p>
We are looking for a ui/ux web designer to redesign our website which is a subscription snack box company.
</p>
<div class="tags">
<a href="#">UI Design</a>
<a href="#">UX Design</a>
<a href="#">Prototyping</a>
</div>
</div>
<ul class="component--job-items" style="margin-bottom: 50px">
<li>
<a href="#">
<span class="avatar" style="--color: #8A9CFF">
R
</span>
<span class="detail">
<span class="title">Root</span>
<span class="position">Lead Designer</span>
</span>
<span class="location">
<img src="img/icon-location.svg" alt="">
Anywhere
</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar" style="--color: #FF6DA1">
K
</span>
<span class="detail">
<span class="title">Klarna</span>
<span class="position">Brand Designer</span>
</span>
<span class="location">
<img src="img/icon-location.svg" alt="">
Austin, TX
</span>
</a>
</li>
<li>
<a href="#">
<span class="avatar" style="--color: #FF8A8A">
B
</span>
<span class="detail">
<span class="title">Boulevard</span>
<span class="position">Senior Experience Designer</span>
</span>
<span class="location">
<img src="img/icon-location.svg" alt="">
Anywhere
</span>
</a>
</li>
</ul>
<aside class="component--job-filter" style="margin-bottom: 50px">
<form action="">
<div class="search">
<input type="text" placeholder="Search by keyword">
</div>
<h6>JOB TYPES</h6>
<ul class="checkbox-list">
<li>
<label>
<input type="checkbox">
<span class="checkbox"></span>
<span class="text">All</span>
</label>
</li>
<li>
<label>
<input type="checkbox">
<span class="checkbox"></span>
<span class="text">Full Time</span>
</label>
</li>
<li>
<label>
<input type="checkbox" checked>
<span class="checkbox"></span>
<span class="text">Freelance</span>
</label>
</li>
<li>
<label>
<input type="checkbox">
<span class="checkbox"></span>
<span class="text">Internship</span>
</label>
</li>
</ul>
<h6>LOCATION</h6>
<ul class="filter-form">
<li>
<label for="country">Country/Region</label>
<select name="" id="country">
<option value="">Norway</option>
<option value="">Norway</option>
<option value="">Norway</option>
<option value="">Norway</option>
</select>
</li>
<li>
<label for="city">City</label>
<select name="" id="city">
<option value="">Norway</option>
<option value="">Norway</option>
<option value="">Norway</option>
<option value="">Norway</option>
</select>
</li>
<li>
<button type="submit">Apply</button>
</li>
</ul>
</form>
</aside>
<a href="#" class="component--job-button">
See all jobs
<img src="img/icon-right-arrow.svg" alt="">
</a>
@import url('https://fonts.googleapis.com/css2?family=Mulish:[email protected];600;700;900&display=swap');
* {
padding: 0;
margin: 0;
list-style: none;
border: none;
text-decoration: none;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
font-family: 'Mulish', sans-serif;
&:focus {
outline: 0;
}
}
body {
background: #E7EAFB;
padding: 50px;
}
.component {
&--job-item {
background: #fff;
box-shadow: 0 21px 87px -35px rgba(#5062D3, .5);
border-radius: 20px;
max-width: 610px;
padding: 50px 50px 40px;
display: flex;
flex-direction: column;
.title {
margin-bottom: 5px;
font-size: 25px;
color: #111127;
font-weight: bold;
a {
color: #111127;
}
}
.position {
color: rgba(#111127, .7);
font-size: 16px;
margin-bottom: 24px;
}
p {
font-size: 18px;
color: #111127;
line-height: 26px;
margin-bottom: 25px;
}
.tags {
display: flex;
flex-wrap: wrap;
a {
padding: 7px 20px;
background: #E7EAFB;
border-radius: 30px;
font-size: 14px;
color: #111127;
margin: 0 10px 10px 0;
&:hover {
background: darken(#E7EAFB, 3%);
}
}
}
}
&--job-items {
display: flex;
flex-direction: column;
li {
margin-bottom: 15px;
a {
display: flex;
background: #fff;
border-radius: 10px;
align-items: center;
padding: 20px 45px 20px 20px;
transition: 300ms transform;
&:hover {
transform: scale(1.03);
}
.avatar {
min-width: 64px;
margin-right: 15px;
height: 64px;
border-radius: 50%;
font-size: 30px;
font-weight: bold;
display: grid;
place-items: center;
color: var(--color);
border: 2px solid #E7EAFB;
}
.detail {
display: flex;
flex-direction: column;
.title {
font-size: 20px;
font-weight: bold;
color: #111127;
margin-bottom: 9px;
}
.position {
font-size: 16px;
color: rgba(#111127, .7);
}
}
.location {
opacity: .6;
margin-left: auto;
display: flex;
align-items: center;
font-size: 16px;
color: #111127;
img {
margin-right: 5px;
}
}
}
}
}
&--job-filter {
width: 300px;
border-radius: 20px;
background: #fff;
padding: 30px;
form {
.search {
height: 76px;
margin: 0 -30px;
border-bottom: 1px solid #E7EAFB;
padding: 0 30px;
margin-bottom: 30px;
input {
height: 46px;
line-height: 106px;
background: transparent url(../img/icon-search.svg) no-repeat 8px;
font-size: 16px;
padding-left: 45px;
color: #111127;
&::placeholder {
color: rgba(#111127, .7);
}
}
}
h6 {
font-size: 12px;
font-weight: bold;
color: #111127;
margin-bottom: 15px;
}
.checkbox-list {
padding-top: 10px;
padding-bottom: 40px;
li {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
label {
display: flex;
cursor: pointer;
.checkbox {
width: 27px;
height: 27px;
border: 1px solid #E7EAFB;
border-radius: 5px;
background: #fff url(../img/icon-check.svg) no-repeat center;
min-width: 27px;
transition: 300ms background-color, 300ms border-color;
margin-right: 15px;
}
.text {
font-size: 16px;
color: #111127;
}
input {
display: none;
&:checked + .checkbox {
background-color: #8A9CFF;
border-color: #8A9CFF;
}
}
}
}
}
.filter-form {
li {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
label {
display: block;
font-size: 12px;
font-weight: bold;
color: #111127;
cursor: pointer;
margin-bottom: 10px;
}
select {
appearance: none;
height: 46px;
border: 2px solid #E7EAFB;
border-radius: 8px;
background: #ffffff url(../img/icon-down-arrow.svg) no-repeat calc(100% - 15px);
width: 100%;
padding: 0 40px 0 20px;
cursor: pointer;
text-overflow: ellipsis;
transition: 300ms border-color;
&:hover {
border-color: darken(#E7EAFB, 3%);
}
&:focus {
border-color: #8A9CFF;
}
}
button {
width: 100%;
height: 57px;
background: #8A9CFF;
border-radius: 8px;
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: bold;
box-shadow: 0 11px 30px -15px #6778E1;
transition: 300ms background-color;
&:hover {
background: darken(#8A9CFF, 10%);
}
}
}
}
}
}
&--job-button {
display: inline-flex;
align-items: center;
height: 71px;
background-color: #fff;
padding: 0 35px 0 45px;
font-size: 18px;
color: #111127;
border-radius: 10px;
box-shadow: 0 11px 30px -15px rgba(#6778E1, .54);
transition: 300ms transform;
&:hover {
transform: scale(1.03);
color: darken(#8A9CFF, 20%);
}
img {
margin-left: 25px;
}
}
}