Facebook Post Box Clone in HTML CSS & JavaScript

Hey friends, today in this blog, you’ll learn how to create a Facebook Post Box in HTML CSS & JavaScript. 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 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.

<!DOCTYPE html>

<html>

<head>

<title>FB Post Clone</title>

</head>

<body>

<header>Create Post</header>

<p>CodeTech</p>

<span>Friends</span>

</div>

</div>

</ul>

</div>

</form>

</section>

<p>Select Audience</p>

</header>

<span>Your post will show up in News Feed, on your profile and in search results.</span>

</div>

<li>

<p>Public</p>

<span>Anyone on or off Facebook</span>

</div>

</li>

<p>Friends</p>

<span>Your friends on Facebook</span>

</div>

</li>

<li>

<p>Specific</p>

<span>Only show to some friends</span>

</div>

</li>

<li>

</div>

</li>

<li>

<p>Custom</p>

<span>Include and exclude friends</span>

</div>

</li>

</ul>

</section>

</div>

const container = document.querySelector(".container"),

privacy = container.querySelector(".post .privacy"),

arrowBack = container.querySelector(".audience .arrow-back");

privacy.addEventListener("click", () => {

container.classList.add("active");

});

arrowBack.addEventListener("click", () => {

container.classList.remove("active");

});

</script>

</body>

</html>

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.

/* Import Google Font - Poppins */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

body{

display: flex;

align-items: center;

justify-content: center;

min-height: 100vh;

background: linear-gradient(#00C6FF, #0078FF);

}

::selection{

color: #fff;

background: #1a81ff;

}

.container{

width: 500px;

height: 480px;

overflow: hidden;

background: #fff;

border-radius: 10px;

transition: height 0.2s ease;

box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);

}

.container.active{

height: 590px;

}

.container .wrapper{

width: 1000px;

display: flex;

}

.container .wrapper section{

width: 500px;

background: #fff;

}

.container img{

cursor: pointer;

}

.container .post{

transition: margin-left 0.18s ease;

}

.container.active .post{

margin-left: -500px;

}

.post header{

font-size: 22px;

font-weight: 600;

padding: 17px 0;

text-align: center;

border-bottom: 1px solid #bfbfbf;

}

.post form{

margin: 20px 25px;

}

.post form .content,

.audience .list li .column{

display: flex;

align-items: center;

}

.post form .content img{

cursor: default;

max-width: 52px;

}

.post form .content .details{

margin: -3px 0 0 12px;

}

form .content .details p{

font-size: 17px;

font-weight: 500;

}

.content .details .privacy{

display: flex;

height: 25px;

cursor: pointer;

padding: 0 10px;

font-size: 11px;

margin-top: 3px;

border-radius: 5px;

align-items: center;

max-width: 98px;

background: #E4E6EB;

justify-content: space-between;

}

.details .privacy span{

font-size: 13px;

margin-top: 1px;

font-weight: 500;

}

.details .privacy i:last-child{

font-size: 13px;

margin-left: 1px;

}

form :where(textarea, button){

width: 100%;

outline: none;

border: none;

}

form textarea{

resize: none;

font-size: 18px;

margin-top: 30px;

min-height: 100px;

}

form textarea::placeholder{

color: #858585;

}

form textarea:focus::placeholder{

color: #b3b3b3;

}

form :where(.theme-emoji, .options){

display: flex;

align-items: center;

justify-content: space-between;

}

.theme-emoji img:last-child{

max-width: 24px;

}

form .options{

height: 57px;

margin: 15px 0;

padding: 0 15px;

border-radius: 7px;

border: 1px solid #B9B9B9;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

}

form .options :where(.list, li),

.audience :where(.arrow-back, .icon, li .radio){

display: flex;

align-items: center;

justify-content: center;

}

form .options p{

color: #595959;

font-size: 15px;

font-weight: 500;

cursor: default;

}

form .options .list{

list-style: none;

}

.options .list li{

height: 42px;

width: 42px;

margin: 0 -1px;

cursor: pointer;

border-radius: 50%;

}

.options .list li:hover{

background: #f0f1f4;

}

.options .list li img{

width: 23px;

}

form button{

height: 53px;

color: #fff;

font-size: 18px;

font-weight: 500;

cursor: pointer;

color: #BCC0C4;

cursor: no-drop;

border-radius: 7px;

background: #e2e5e9;

transition: all 0.3s ease;

}

form textarea:valid ~ button{

color: #fff;

cursor: pointer;

background: #4599FF;

}

form textarea:valid ~ button:hover{

background: #1a81ff;

}

.container .audience{

opacity: 0;

transition: opacity 0.12s ease;

}

.container.active .audience{

opacity: 1;

}

.audience header{

padding: 17px 0;

text-align: center;

position: relative;

border-bottom: 1px solid #bfbfbf;

}

.audience header .arrow-back{

position: absolute;

left: 25px;

width: 35px;

height: 35px;

cursor: pointer;

font-size: 15px;

color: #747474;

border-radius: 50%;

background: #E4E6EB;

}

.audience header p{

font-size: 22px;

font-weight: 600;

}

.audience .content{

margin: 20px 25px 0;

}

.audience .content p{

font-size: 17px;

font-weight: 500;

}

.audience .content span{

font-size: 14px;

color: #65676B;

}

.audience .list{

margin: 15px 16px 20px;

list-style: none;

}

.audience .list li{

display: flex;

cursor: pointer;

margin-bottom: 5px;

padding: 12px 10px;

border-radius: 7px;

align-items: center;

justify-content: space-between;

}

.list li.active,

.audience .list li.active:hover{

background: #E5F1FF;

}

.audience .list li:hover{

background: #f0f1f4;

}

.audience .list li .column .icon{

height: 50px;

width: 50px;

color: #333;

font-size: 23px;

border-radius: 50%;

background: #E4E6EB;

}

.audience .list li.active .column .icon{

background: #cce4ff;

}

.audience .list li .column .details{

margin-left: 15px;

}

.list li .column .details p{

font-weight: 500;

}

.list li .column .details span{

font-size: 14px;

color: #65676B;

}

.list li .radio{

height: 20px;

width: 20px;

border-radius: 50%;

position: relative;

border: 1px solid #707070;

}

.list li.active .radio{

border: 2px solid #4599FF;

}

.list li .radio::before{

content: "";

width: 12px;

height: 12px;

border-radius: inherit;

}

.list li.active .radio::before{

background: #4599FF;

}

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.

Facebook Post Box Clone in HTML CSS & JavaScript

Facebook Post Box Clone in HTML CSS & JavaScript

Facebook Post Box Clone in HTML CSS [Source Codes]

Download

Post a Comment

Featured Post

Responsive Flat Pricing Card List Design – Using HTML & CSS

Contact Form