<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="fb-cards-designs"> <div class="fb-clone-card"> <div class="fb-card-main-content"> <div class="fb-card-header"> <div class="user-post-info"> <div class="user-thumb"> <img src="https://randomuser.me/api/portraits/women/11.jpg" class="img-responsive" /> </div> <div class="user-information"> <p>Leona Gutierrez</p> <small>Sponsored</small> </div> </div> <div class="post-action"> <i class="fas fa-ellipsis-h"></i> </div> </div> <div class="fb-card-body simple-text-card simple-image-card simple-image-post"> <div class="images-container"> <a href="https://medium.com/@karthikricssion/how-to-design-a-printable-html-page-layout-802bc9ea61dd" target="_blank"> <img src="https://raw.githubusercontent.com/karthikricssion/facebook-card-design/master/assets/images/print-css.png" class="img-responsive" /> <div class="sponsord-post-title-links"> <small>medium.com/@karthikricssion</small> <h5>How to design a printable HTML page layout</h5> </div> </a> </div> </div> </div> <div class="fb-card-like-comment-holder"> <div class="fb-card-like-comment"> <div class="likes-emoji-holder"> <span>6.6k</span> </div> <div class="like-comment-holder"> <span>786 Commnets</span> <span>2K Shares</span> </div> </div> </div> <div class="fb-card-actions-holder"> <div class="fb-card-actions"> <div class="fb-btn-holder"> <a href="#"><i class="far fa-thumbs-up"></i> Like</a> </div> <div class="fb-btn-holder"> <a href="#"><i class="far fa-comment-alt"></i> Comment</a> </div> <div class="fb-btn-holder"> <a href="#"><i class="far fa-share-square"></i> Share</a> </div> </div> </div> <div class="fb-card-comments"> <div class="comment-input-holder"> <div class="user-thumb"> <img src="https://randomuser.me/api/portraits/women/85.jpg" class="img-responsive" /> </div> <div class="comment-input"> <div class="comment-box" placeholder="Write a comment..." contenteditable="true" placeholder="write a comment"></div> </div> </div> </div> </div> </div> <div class="created-by" style="text-align:center;margin-bottom:16px;"> <a href="https://github.com/karthikricssion/facebook-card-design">Complete code in github</a> </div>

body { background-color: #e9ebee; font-family: 'Roboto', sans-serif; } .img-responsive { width: 100%; margin: auto; } .fb-cards-designs { margin-top: 16px; } .user-thumb { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; float: left; margin-right: 8px; } .fb-clone-card { max-width: 500px; margin: auto; background-color: #fff; border: 1px solid #dddfe2; border-radius: 3px; margin-bottom: 10px; } .fb-clone-card .fb-card-main-content { padding: 12px; padding-bottom: 0; } .fb-clone-card .fb-card-main-content .fb-card-header { position: relative; } .fb-clone-card .fb-card-main-content .fb-card-header .user-post-info { overflow: hidden; } .fb-clone-card .fb-card-main-content .fb-card-header .user-post-info .user-information { float: left; line-height: 1.34; } .fb-clone-card .fb-card-main-content .fb-card-header .user-post-info .user-information p { color: #385898; cursor: pointer; text-decoration: none; font-size: 14px; line-height: 1.38; font-weight: 600; margin: 0; } .fb-clone-card .fb-card-main-content .fb-card-header .user-post-info .user-information small { color: #616770; font-size: 12px; } .fb-clone-card .fb-card-main-content .fb-card-header .post-action { position: absolute; top: 0; right: 0; cursor: pointer; } .fb-clone-card .fb-card-main-content .fb-card-header .post-action i { color: #606771; } .fb-clone-card .fb-card-main-content .fb-card-header .post-action:hover i { color: #1d2129; } .fb-clone-card .fb-card-main-content .fb-card-body.simple-text-card { margin-top: 6px; font-size: 14px; font-weight: normal; line-height: 1.38; } .fb-clone-card .fb-card-main-content .fb-card-body.simple-text-card p { margin: 0; } .fb-clone-card .fb-card-main-content .fb-card-body.simple-image-card { padding-bottom: 0; } .fb-clone-card .fb-card-main-content .fb-card-body.simple-image-card .images-container { margin-top: 12px; margin-left: -12px; margin-right: -12px; } .fb-clone-card .fb-card-main-content .fb-card-body.simple-image-post { padding-bottom: 0; } .fb-clone-card .fb-card-main-content .fb-card-body.simple-image-post a { display: block; text-decoration: none; } .fb-clone-card .fb-card-main-content .fb-card-body.simple-image-post a:hover { opacity: 0.8; } .fb-clone-card .fb-card-main-content .fb-card-body.simple-image-post .sponsord-post-title-links { background-color: #e9ebee; padding: 12px 10px; border-bottom: 1px solid #dddfe3; } .fb-clone-card .fb-card-main-content .fb-card-body.simple-image-post .sponsord-post-title-links small { color: #5f676f; text-transform: uppercase; font-size: 12px; } .fb-clone-card .fb-card-main-content .fb-card-body.simple-image-post .sponsord-post-title-links h5 { color: #1e2229; margin: 0; } .fb-clone-card .fb-card-actions-holder { display: flex; margin: 0 12px; min-height: 32px; padding: 4px 0; } .fb-clone-card .fb-card-actions-holder .fb-card-actions { display: flex; flex-direction: row; flex-grow: 1; order: 1; } .fb-clone-card .fb-card-actions-holder .fb-card-actions .fb-btn-holder { align-items: center; display: flex; flex: 1 0 0px; justify-content: center; } .fb-clone-card .fb-card-actions-holder .fb-card-actions .fb-btn-holder a { width: 100%; align-items: center; color: #606770; display: flex; flex: 1 0; font-weight: 600; height: 32px; justify-content: center; line-height: 14px; padding: 0 2px; position: relative; text-decoration: none; transition: 400ms cubic-bezier(0.08, 0.52, 0.52, 1) transform; font-size: 13px; border-radius: 3px; } .fb-clone-card .fb-card-actions-holder .fb-card-actions .fb-btn-holder a i { font-size: 18px; margin-right: 6px; } .fb-clone-card .fb-card-actions-holder .fb-card-actions .fb-btn-holder a:hover { background-color: #f2f2f2; } .fb-clone-card .fb-card-comments { border-top: 1px solid #dadde1; } .fb-clone-card .fb-card-comments .comment-input-holder { padding: 8px; } .fb-clone-card .fb-card-comments .comment-input-holder .user-thumb { width: 32px; height: 32px; } .fb-clone-card .fb-card-comments .comment-input-holder .comment-input { background-color: #f2f3f5; border: 1px solid #ccd0d5; border-radius: 16px; display: flex; justify-content: flex-end; } .fb-clone-card .fb-card-comments .comment-input-holder .comment-input .comment-box { font-size: 13px; cursor: text; flex: 1 1 auto; line-height: 16px; overflow: hidden; padding: 8px 12px; outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word; } .fb-clone-card .fb-card-comments .comment-input-holder .comment-input .comment-box[placeholder]:empty:before { content: attr(placeholder); color: #555; } .fb-clone-card .fb-card-like-comment-holder { align-items: center; border-bottom: 1px solid #dadde1; color: #606770; display: flex; line-height: 20px; margin: 10px 12px 0 12px; padding: 0 0 10px 0; } .fb-clone-card .fb-card-like-comment-holder .fb-card-like-comment { display: flex; flex: auto; justify-content: space-between; } .fb-clone-card .fb-card-like-comment-holder .fb-card-like-comment .like-comment-holder span { cursor: pointer; display: inline-block; text-decoration: none; white-space: nowrap; font-size: 13px; } .fb-clone-card .fb-card-like-comment-holder .fb-card-like-comment .like-comment-holder span:last-child { margin-left: 7px; } .fb-clone-card .fb-card-like-comment-holder .fb-card-like-comment .likes-emoji-holder span { cursor: pointer; display: inline-block; text-decoration: none; white-space: nowrap; font-size: 13px; }