Facebook Post Box Clone using HTML CSS & JavaScript

Hey friends, today in this blog, you’ll learn how to create a Facebook Post Box in HTML CSS & JavaScript. In the earlier blog, Now it’s time to create a Facebook Post Box and its drop-menu animation.

I believe you have seen the Facebook Post Box and its drop or options menu animation. You may be amazed by its cool, interactive, and attractive animation. I also liked its menu animation indeed, and today you’ll also learn how to create this one.

In this project (Facebook Post Box Clone), as you have seen in the preview image, there is a post box like Facebook. When you clicked on the privacy option then there is shown the privacy options for the post with a sliding animation like Facebook. If you didn’t understand what I’m saying then you can watch a demo or full video tutorial of it.

In the video, you have seen the demo of Facebook Post Box Clone and how I created it in HTML CSS & JavaScript. The animation when you clicked on the privacy option was the same as Facebook isn’t it?

I hope you liked this Facebook Post Box Clone and understood the codes behind creating this clone. The use of JavaScript in this post box is to toggle the options menu only. So, if you’re a beginner and don’t know JavaScript then you can also create this type of drop menu animation and be able to use it on other projects.

If you liked this clone and want to get source codes or files of it, then you can easily copy codes or download files from the bottom of this page.

Facebook Post Box Clone in HTML CSS [Source Codes]

To create Facebook Post Box in HTML CSS & JavaScript. First, you need to create two Files: HTML & CSS files. After creating these files just paste the following codes into your file. You can also download the source code files of this Facebook Post Box Clone from the given download button.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. You’ve to create a file with .html extension and remember you won’t get icons that are used on this post box. Download source files for it.

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

That’s all, now you’ve successfully created a Facebook Post Box in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Now if you can interest then you can download this source code for the Download button its given below.