Bootstrap snippet: recent activity

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: user,profile,timeline,social network



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="panel"> <div class="panel-body profile-information"> <div class="col-md-3"> <div class="profile-pic text-center"> <img src="http://bootdey.com/img/Content/user_6.jpg" alt=""> </div> </div> <div class="col-md-9"> <div class="profile-desk text-center"> <h1>Deyson Bejarano</h1> <span class="text-muted">Project Manager</span> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor vestibulum imperdiet. Ut auctor accumsan erat, a vulputate metus tristique non. Aliquam aliquam vel orci quis sagittis. </p> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="panel act-content"> <div class="recent-act"> <div class="activity-icon terques"> <i class="fa fa-check"></i> </div> <div class="activity-desk"> <h2>1 Hour Ago</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor vestibulum imperdiet</p> </div> <div class="activity-icon terques"> <i class="fa fa-list"></i> </div> <div class="activity-desk"> <h2>2 Hour Ago</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor vestibulum imperdiet</p> </div> <div class="activity-icon terques"> <i class="fa fa-envelope"></i> </div> <div class="activity-desk"> <h2>3 Days Ago</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor vestibulum imperdiet</p> </div> </div> </div> </div> </div>
body{ margin-top:20px; color: #ccc; background-color: #f1f2f7; } a, a:hover, a:focus { text-decoration: none; outline: none; } .profile-information .profile-pic img { width: 160px; height: 160px; border-radius: 50%; -webkit-border-radius: 50%; border: 10px solid #f1f2f7; margin-top: 20px; } .profile-information .profile-desk h1 { color: #1fb5ad; font-size: 24px; font-weight: bold; margin-bottom: 0; } .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05); } .profile-information .profile-desk { border-right: 1px solid #ddd; padding-right: 30px; } .btn-primary { background-color: #1fb5ad; border-color: #1fb5ad; color: #FFFFFF; } .act-content{ padding:40px; } .recent-act h1 { text-align: center; color: #1fb5ad; font-size: 16px; font-weight: bold; text-transform: uppercase; } .activity-icon { border-radius: 50%; -webkit-border-radius: 50%; color: #FFFFFF; height: 30px; line-height: 30px; text-align: center; width: 30px; margin: 20px auto 20px; position: relative; } .activity-icon.terques { background: #8fd6d6; } .activity-icon { background: #C7CBD6; } .recent-act:before { background-color: #eeeeee; bottom: 0; content: ""; left: 50%; position: absolute; top: 50px; width: 2px; z-index: 0; } .activity-desk { padding: 15px 30px; background: #f2f2f2; border-radius: 5px; -webkit-border-radius: 5px; position: relative; text-align: center; } .activity-desk h2 { color: #1fb5ad; font-size: 14px; font-weight: bold; margin: 0 0 10px 0; text-transform: uppercase; }
Dey-Dey

recent activity

Dey-Dey
  Oct 19th 2015, 10:29
2.1K Views