<div class="container my-5">
<div class="row">
<div class="col-md-6 first"> <img src="https://imgur.com/DmHf6bG.png" width="90%" height="90%" class="p-5"> </div>
<div class="col-md-6 second">
<div class="row">
<div class="col-sm-4 col-4"><span>Works</span></div>
<div class="col-sm-4 col-4">Discover</div>
<div class="col-sm-4 col-4">Following</div>
</div>
<div class="row xyz"> <small class="searching">Search</small>
<div class="ml-auto"><i class="fas fa-search"></i></div>
</div>
<div class="card px-5">
<div class="media"> <span class="round"><img src="https://img.icons8.com/bubbles/50/000000/user.png" class="mr-3"></span>
<div class="media-body">
<div class="row d-flex">
<h6 class="pl-3"><strong>Eleanor Porter</strong></h6>
<div class="ml-auto mr-4"> <small class="text">1 min ago</small> </div>
</div>
<p class="text">you can create a free and professional<br>website all on your own</p>
</div>
</div>
<div class="row mt-2 ml-2">
<div class="col-md-2 col-sm-2 col-2 one"><img src="https://img.icons8.com/material-outlined/24/000000/art-book.png" /></div>
<div class="col-md-2 col-sm-2 col-2 offset-1 two"><img src="https://img.icons8.com/windows/32/000000/art-book.png" /></div>
<div class="col-md-2 col-sm-2 col-2 offset-1 three"><img src="https://img.icons8.com/material/24/000000/modern-art.png" /></div>
<div class="col-md-2 col-sm-2 col-2 offset-1 four"><img src="https://img.icons8.com/material-outlined/24/000000/art-prices--v2.png" /></div>
</div>
<form class="user mt-4">
<div class="form-group"> <textarea class="form-control" rows="4">Hi Eleanor, what are you thinking</textarea> </div> <button type="button" class="btn btn-primary btn-lg btn-block pb-3"><span>Comment ></span></button>
</form>
</div>
</div>
</div>
</div>
body {
background: #DEDEE6
}
.container {
border: none;
border-radius: 0
}
.col-md-6.first {
background-color: #4820A7
}
.second {
background-color: #F9F9F9;
padding: 40px 0 20px 70px
}
.col-sm-4 {
font-size: 10px;
font-weight: bold;
color: #C4C4C6 !important
}
.col-4 span {
color: #5B5B5B !important
}
.col-sm-4:hover {
color: #5B5B5B !important;
cursor: pointer
}
.xyz {
background-color: #fff;
border: none;
border-radius: 0;
margin: 30px 90px 0 0;
height: 40px
}
.searching {
margin: 12px 0 0 18px;
color: #C4C4C6 !important;
border: none;
font-weight: bold
}
.fa-search {
margin: 15px 12px;
color: #5B5D69;
font-size: 12px
}
.fa-search:hover {
font-size: 15px;
color: #4820A7
}
.card {
margin: 25px 90px 30px 0;
border: none;
border-radius: 0;
padding: 60px 0 60px 0
}
h6 {
color: #424242
}
h6:hover {
cursor: pointer
}
.round img {
border-radius: 100%;
border: 2px solid #7D71BB
}
.round img:hover {
cursor: pointer;
border: 2px solid #d8ff00
}
small.text {
font-size: 10px;
color: #E1E1E1
}
p.text {
font-size: 10px;
font-weight: bold;
color: #C4C4C6
}
.col-md-2 img {
align-self: center;
width: 12px;
height: 12px;
padding-bottom: 2px
}
.col-md-2 {
text-align: center;
border: none;
border-radius: 20px
}
.col-md-2:hover {
cursor: pointer;
background: #d8ff00 !important
}
.col-md-2.one {
background: #FCE5ED
}
.col-md-2.two {
background: #D2DFFF
}
.col-md-2.three {
background: #28a7455e
}
.col-md-2.four {
background: #ffc1075e
}
textarea.form-control {
border: none;
background: #F7F8FD;
font-size: 10px;
font-weight: bold;
color: #C4C4C6;
padding: 20px 0 0 20px
}
textarea.form-control:focus {
border: none;
box-shadow: none;
background: #F7F8FD;
letter-spacing: 1px;
color: #C4C4C6;
font-size: 10px;
font-weight: bold
}
.btn-primary {
background: #4E31A8 !important;
border: none
}
.btn-primary:focus {
background: #4E31A8 !important;
border: none;
box-shadow: none
}
.btn-primary span {
font-size: 12px;
color: #D2C1F8
}
@media screen and (max-width: 992px) {
.second {
padding-left: 35px
}
.xyz {
margin-right: 45px
}
.card {
margin-right: 45px
}
}