Hey friends, today in this blog, you’ll learn how to create a Facebook Post Box in HTML CSS & JavaScript. In the earlier blog, I have shared how to Build A Currency Converter App in 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 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.
Video Tutorial of Facebook Post Box Clone
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.
You might like this:
- Pure CSS Text Typing Animation
- Login Form Validation in JavaScript
- Draggable Div Element in JavaScript
- YouTube Video Thumbnail Downloader
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>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Facebook Post Box Clone | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- FontAweome CDN Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<section class="post">
<header>Create Post</header>
<form action="#">
<div class="content">
<img src="icons/logo.png" alt="logo">
<div class="details">
<p>CodingNepal</p>
<div class="privacy">
<i class="fas fa-user-friends"></i>
<span>Friends</span>
<i class="fas fa-caret-down"></i>
</div>
</div>
</div>
<textarea placeholder="What's on your mind, CodingNepal?" spellcheck="false" required></textarea>
<div class="theme-emoji">
<img src="icons/theme.svg" alt="theme">
<img src="icons/smile.svg" alt="smile">
</div>
<div class="options">
<p>Add to Your Post</p>
<ul class="list">
<li><img src="icons/gallery.svg" alt="gallery"></li>
<li><img src="icons/tag.svg" alt="gallery"></li>
<li><img src="icons/emoji.svg" alt="gallery"></li>
<li><img src="icons/mic.svg" alt="gallery"></li>
<li><img src="icons/more.svg" alt="gallery"></li>
</ul>
</div>
<button>Post</button>
</form>
</section>
<section class="audience">
<header>
<div class="arrow-back"><i class="fas fa-arrow-left"></i></div>
<p>Select Audience</p>
</header>
<div class="content">
<p>Who can see your post?</p>
<span>Your post will show up in News Feed, on your profile and in search results.</span>
</div>
<ul class="list">
<li>
<div class="column">
<div class="icon"><i class="fas fa-globe-asia"></i></div>
<div class="details">
<p>Public</p>
<span>Anyone on or off Facebook</span>
</div>
</div>
<div class="radio"></div>
</li>
<li class="active">
<div class="column">
<div class="icon"><i class="fas fa-user-friends"></i></div>
<div class="details">
<p>Friends</p>
<span>Your friends on Facebook</span>
</div>
</div>
<div class="radio"></div>
</li>
<li>
<div class="column">
<div class="icon"><i class="fas fa-user"></i></div>
<div class="details">
<p>Specific</p>
<span>Only show to some friends</span>
</div>
</div>
<div class="radio"></div>
</li>
<li>
<div class="column">
<div class="icon"><i class="fas fa-lock"></i></div>
<div class="details">
<p>Only me</p>
<span>Only you can see your post</span>
</div>
</div>
<div class="radio"></div>
</li>
<li>
<div class="column">
<div class="icon"><i class="fas fa-cog"></i></div>
<div class="details">
<p>Custom</p>
<span>Include and exclude friends</span>
</div>
</div>
<div class="radio"></div>
</li>
</ul>
</section>
</div>
</div>
<script>
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.
It doesn’t seem to be specifically a modal, but it was what I was looking for. The idea is great and it will be great to use as a base to integrate into my social networking site that has content posts.
The good thing is that it uses pure CSS and very little JavaScript, avoiding conflicts so we can create based on our existing codes.
Hi, how would i add a way to mention people, on x? Where its blue text inside of the textarea, but the rest is a different color.
Thank you for your support. but, can we use them in our projects?
Are you considering applying PHP code functionality to make this actually work…I would pay for this if you are interested?
I like your tutorials and continue to watch for what you have in store next.
thnks
Matt
Superb….
hi How We Upload A Image From This Post App
Please make a comment stytem like this system
Okay, I’ll try!
Hy, i from Viet Nam. In my opinion, it’s great
Glad to hear that 🙂
Nice
I Love this website
Happy to hear that
Nice
Thank you so much
good job
Very nice tutorial sir. Thanks for free codes
You’re most welcome
excellent bro
thank you
very good
Thank you <3