"Facebook Post Demo"
Pure CSS 1.0.0 Snippet by absoftlab

Post to Facebook Tweet this

<link href="//cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Facebook Post Layout</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="facebook-post"> <div class="head"> <div class="img1"> <img src="https://scontent.fdac52-1.fna.fbcdn.net/v/t1.0-9/51116857_456227228247679_4340289972750778368_n.jpg?_nc_cat=107&_nc_oc=AQk3K1SR-YtY-NMEEQ384h-eKtZn5_UNeHz9nV744Q0Tzzhj0mXnLMIJAoNqmUjkP4I&_nc_ht=scontent.fdac52-1.fna&oh=9f368c3f5707c58ecba70b428545fc93&oe=5E50D35A"> </div> <div class="name"> <div class="id-name"> <h3>Abdullah Al Mahmud</h3> </div> <div class="post-time"> <p>Just Now<p> </div> </div> <div class="dropdown"> <p><b>...<b></p> </div> </div> <div class="head-title"> <p> Cox's Bazar is a city, fishing port, tourism centre and district headquarters in southeastern Bangladesh. <p> </div> <div class="image"> <img src="https://i.ytimg.com/vi/ltyneiA3Etg/maxresdefault.jpg"> </div> <div class="like-comment"> <div class="lik"> <div class="lik-img"> <img src="https://pbs.twimg.com/media/EIi3HfqVUAAaBTj?format=png&name=240x240"> </div> <div class="lik-count"> <p>4523454</p> </div> </div> <div class="comm"> <p>24 Comment 2k Share</p> </div> </div> <div class="like"> <div class="btn-like"> <img src="https://pbs.twimg.com/media/EIi3HftVAAc1SAJ?format=png&name=240x240"> </div> <div class="btn-comment"> <img src="https://pbs.twimg.com/media/EIi3HftVAAUHWew?format=png&name=240x240"> </div> <div class="btn-share"> <img src="https://pbs.twimg.com/media/EIi3HfvVAAAKPmR?format=png&name=240x240"> </div> </div> <div class="comment"> <div class="img2"> <img src="https://scontent.fdac52-1.fna.fbcdn.net/v/t1.0-9/51116857_456227228247679_4340289972750778368_n.jpg?_nc_cat=107&_nc_oc=AQk3K1SR-YtY-NMEEQ384h-eKtZn5_UNeHz9nV744Q0Tzzhj0mXnLMIJAoNqmUjkP4I&_nc_ht=scontent.fdac52-1.fna&oh=9f368c3f5707c58ecba70b428545fc93&oe=5E50D35A"> </div> <div class="input"> <input type="text" placeholder="Comment here" id="comm"> </div> </div> </div> </body> </html>
*{ margin:0px; padding:0px; box-sizing:border-box; font-family:arial; } body{ } .facebook-post{ height:500px; width:450px; box-shadow: 0px 5px 10px -5px; margin:auto; margin-top:50px; border-radius:5px; overflow:hidden; } /*head css lalyout start here*/ .head{ height:70px; } .img1{ width:70px; height:70px; float:left; } .img1 img{ height:70px; width:70px; border-radius:50%; padding:10px; } .name{ width:310px; height:70px; float:left; box-sizing:border-box; } .id-name{ height:45px; box-sizing:border-box; display:block; } .id-name h3{ padding:10px; box-sizing:border-box; color:#1a1aa6; } .post-time{ height:25px; } .post-time p{ padding-left:10px; padding-bottom:10px; } .dropdown{ width:70px; height:70px; float:right; } .dropdown p{ word-spacing:40px; padding:10px; text-align:center; display:inline-block; float:right; width:50px; } /*head-title css start here*/ .head-title{ height:60px; } .head-title p{ font-weight:100; padding:10px; } .head-title p{ } /*image css start here*/ .image{ height:220px; } .image img{ height:220px; width:450px; } .image img{ } /*like-comment css start here*/ .like-comment{ height:45px; } .lik{ height:45px; width:225px; float:left; } .lik-img{ height:45px; width:45px; float:left; } .lik-img img{ height:45px; width:45px; padding:10px; } .lik-count{ height:45px; width:180px; float:right; } .lik-count p{ font-weight:200; line-height:45px; color:rgb(182, 179, 179); } .comm{ height:45px; width:225px; float:right; } .comm p{ font-weight:200; line-height:45px; float:right; padding-right:10px; color:rgb(182, 179, 179); } /*like css start here*/ .like{ height:45px; } .like img{ height:45px; width:45px; padding:10px; } .btn-like{ height:45px; width:150px; float:left; padding-left:30px; } .btn-like:hover{ transform:scale(1.2); transition:0.5s; } .btn-comment{ height:45px; width:150px; float:left; padding-left:60px; } .btn-comment:hover{ transform:scale(1.2); transition:0.5s; } .btn-share{ height:45px; width:150px; float:right; padding-left:80px; } .btn-share:hover{ transform:scale(1.2); transition:0.5s; } /*comment css start here*/ .comment{ height:60px; } .img2{ height:60px; width:60px; float:left; } .img2 img{ height:60px; width:60px; padding:10px; border-radius:50%; } .input{ height:60px; width:390px; float:right; padding:10px; } .input input{ height:40px; width:370px; padding:10px; border:none; border-radius:20px; background:lightgray; }

Related: See More

Paper Dashboard Angular

Questions / Comments: