<div class="container">
<div class="card mx-auto">
<div class="row">
<div class="logo ml-3 mb-3"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTxDRpxI5gXgaVmnO-VgcVUNOkca91jIpS75Flbzkz5W_5g5_V5&usqp=CAU"></div>
<div class="header right"><i class="fas fa-ellipsis-h"></i></div>
</div>
<div class="card-title">
<p class="heading">Lead Product Design <i class="far fa-compass"></i></p>
</div>
<p class="text-muted">You will be responsible for the visual design<br>for multi device.Understand basic design,<br>User journey, Ideation and Wireframing, etc...</p>
<div class="row btnrow my-4">
<div class="col-4 col-md-3"><button type="button" class="btn btn-outline-success btn-sm" style="background: #00ff002b;">Full Time</button></div>
<div class="col-4 col-md-3"><button type="button" class="btn btn-outline-primary btn-sm" style="background: #007bff33;">Min. 1 year</button></div>
<div class="col-4 col-md-3"><button type="button" class="btn btn-outline-danger btn-sm" style="background: #dc35452e;">Director</button></div>
</div>
<div class="mutual"><i class="fas fa-users"></i> <span>5 Friends work here</span></div>
<div class="row btnsubmit mt-4">
<div class="col-md-6 col-6"> <button type="button" class="btn btn-primary btn-lg"><span>Apply Now</span></button> </div>
<div class="col-md-6 col-6"> <button type="button" class="btn btn-dark btn-lg"><span>Message</span></button> </div>
</div>
</div>
</div>
body {
font-family: arial;
background: lightpink
}
.logo {
border: 1px solid #f6f6f6
}
.logo img {
width: 60px;
height: 60px
}
.card {
display: block;
padding: 3vh 2vh 7vh 5vh;
border: none;
border-radius: 15px;
margin-top: 5%;
margin-bottom: 5%;
max-width: 500px
}
.header {
margin-bottom: 5vh;
margin-right: 2vh;
float: right;
margin-left: auto
}
.far {
color: rgba(15, 198, 239, 0.97) !important;
font-size: 16px !important
}
p.heading {
font-weight: bold;
font-size: 25px
}
p.text-muted {
font-size: 17px;
font-weight: bold;
color: #a1a7ae !important
}
.btn-sm {
border-radius: 8px
}
.fas.fa-users {
color: rgba(15, 198, 239, 0.97) !important
}
.mutual span {
font-size: 14px;
color: #adb5bd;
font-weight: bold
}
.btn-primary.btn-lg {
border-radius: 30px;
width: 90%;
border: none;
background: #8c02e3
}
.btn-dark.btn-lg {
border-radius: 30px;
width: 90%;
border: none;
background: #dee2e6
}
.btn-dark span {
font-size: 14px;
text-align: center;
color: #0000008c;
font-weight: bold
}
.btn-primary span {
font-size: 14px;
text-align: center;
color: #fff;
font-weight: bold
}