<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="box"> <div class="container-3"> <span class="icon"><i class="fa fa-search"></i></span> <input type="search" id="search" placeholder="Search..." /> </div> </div> <div class="leftbox"> <nav> <a id="dashboard"><i class="fas fa-tachometer-alt"></i></a> <a id="profile"> <i class="fas fa-user"></i> </a> <a id="settings"> <i class="fas fa-cog"></i> </a> <a id="messages"> <i class="fas fa-comments"></i> </a> <a id="notification"> <i class="fas fa-bell"></i> </a> </nav> </div> <div class="rightbox"> <div class="rb-container"> <ul class="rb"> <li class="rb-item" ng-repeat="itembx"> <div class="timestamp"> 3rd May 2020<br> 7:00 PM </div> <div class="item-title">Chris Serrano posted a photo on your wall.</div> </li> <li class="rb-item" ng-repeat="itembx"> <div class="timestamp"> 19th May 2020<br> 3:00 PM </div> <div class="item-title">Mia Redwood commented on your last post.</div> </li> <li class="rb-item" ng-repeat="itembx"> <div class="timestamp"> 17st June 2020<br> 7:00 PM </div> <div class="item-title">Lucas McAlister just send you a message.</div> </li> </ul> </div> </div> </div>

@import url("https://fonts.googleapis.com/css2?family=PT+Sans&display=swap"); body { background: #e8cbc0; } .container { background: #232931; width: 540px; height: 500px; margin: 0 auto; position: relative; margin-top: 10%; box-shadow: 2px 5px 20px rgba(119, 119, 119, 0.5); } .leftbox { top: -5%; left: 5%; position: absolute; width: 15%; height: 110%; background-color: #50d890; box-shadow: 3px 3px 15px rgba(119, 119, 119, 0.5); } nav { margin: 2.6em auto; } nav a { list-style: none; padding: 35px; color: #232931; font-size: 1.1em; display: block; transition: all 0.5s ease-in-out; } .rightbox { padding: 0em 34rem 0em 0em; height: 100%; } .rb-container { font-family: "PT Sans", sans-serif; width: 50%; margin: auto; display: block; position: relative; } .rb-container ul.rb { margin: 2.5em 0; padding: 0; display: inline-block; } .rb-container ul.rb li { list-style: none; margin: auto; margin-left: 10em; min-height: 50px; border-left: 1px dashed #fff; padding: 0 0 50px 30px; position: relative; } .rb-container ul.rb li:last-child { border-left: 0; } .rb-container ul.rb li::before { position: absolute; left: -18px; top: -5px; content: " "; border: 8px solid rgba(255, 255, 255, 1); border-radius: 500%; background: #50d890; height: 20px; width: 20px; transition: all 500ms ease-in-out; } .rb-container ul.rb li:hover::before { border-color: #232931; transition: all 1000ms ease-in-out; } ul.rb li .timestamp { color: #50d890; position: relative; width: 100px; font-size: 12px; } .item-title { color: #fff; } .container-3 { width: 5em; vertical-align: right; white-space: nowrap; position: absolute; } .container-3 input#search { width: 150px; height: 30px; background: #fbfbfb; border: none; font-size: 10pt; color: #262626; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0.9em 0 0 28.5em; box-shadow: 3px 3px 15px rgba(119, 119, 119, 0.5); } .container-3 .icon { margin: 1.3em 3em 0 31.5em; position: absolute; width: 150px; height: 30px; z-index: 1; color: #4f5b66; } input::placeholder { padding: 5em 5em 1em 1em; color: #50d890; }