Facebook Instagram Youtube
  • Home
  • Blog
  • HTML & CSS
    • Login Forms
    • Website Designs
    • Navigation Bars
    • Sidebar Menu
    • Card Designs
    • More
      • CSS Buttons
      • Glowing Effects
      • Social Media Buttons
      • Preloader or Loaders
      • Neumorphism Designs
  • JavaScript
    • Form Validation
    • Image Sliders
    • API Projects
    • JavaScript Games
    • Canvas Projects
  • PHP
  • Contact us
Search
CodingNepal CodingNepal
  • Home
  • Blog
    • 10 Easy JavaScript Games for Beginners with Source Code

      10 Easy JavaScript Games for Beginners with Source Code

      10 Best JavaScript Projects with Free Source Code JavaScript Projects for Beginners

      Top 10 JavaScript Projects for Beginners with Source Code

      Top 10 Profile Card Template Designs in HTML & CSS

      Top 10 Profile Card Template Designs in HTML & CSS

      Top 10 Website Templates Design in HTML CSS & JavaScript

      10+ Website Templates Design in HTML CSS and JavaScript

      Top 5 Sidebar Menu Templates in HTML CSS & JavaScript

      Top 15 Sidebar Menu Templates in HTML CSS & JavaScript

  • HTML & CSS
    • Login Forms
    • Website Designs
    • Navigation Bars
    • Sidebar Menu
    • Card Designs
    • More
      • CSS Buttons
      • Glowing Effects
      • Social Media Buttons
      • Preloader or Loaders
      • Neumorphism Designs
  • JavaScript
    • Form Validation
    • Image Sliders
    • API Projects
    • JavaScript Games
    • Canvas Projects
  • PHP
  • Contact us
Home HTML and CSS Facebook Post Box Clone in HTML CSS & JavaScript

Facebook Post Box Clone in HTML CSS & JavaScript

By
CodingNepal
-
September 13, 2021

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. 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.

 

  • TAGS
  • Clone Facebook Post Box HTML CSS
  • Create Facebook Post Box HTML CSS
  • Facebook
  • Facebook Clone HTML CSS
  • Facebook Post Box
  • Facebook Post Box Clone
Share
Facebook
WhatsApp
Twitter
Copy URL
    Previous articleDynamic Digital Clock in HTML CSS and JavaScript
    Next articleCreate a Website in HTML CSS and JavaScript
    CodingNepal

    RELATED ARTICLESMORE FROM AUTHOR

    How to Create Responsive Fiverr Website in HTML CSS and JavaScript

    How to Create Responsive Fiverr Website in HTML and CSS

    Create A Responsive Coffee Website in HTML and CSS

    Create A Responsive Coffee Website in HTML and CSS

    Create Beautiful Responsive Cards in HTML and CSS

    How to Create Responsive Cards in HTML and CSS

    Recent Posts

    Build An AI Image Generator Website in HTML CSS and JavaScript

    Build An AI Image Generator Website in HTML CSS and JavaScript

    December 15, 2023
    How to Create Responsive Fiverr Website in HTML CSS and JavaScript

    How to Create Responsive Fiverr Website in HTML and CSS

    October 11, 2023
    Create A Responsive Coffee Website in HTML and CSS

    Create A Responsive Coffee Website in HTML and CSS

    October 1, 2023
    Create Beautiful Responsive Cards in HTML and CSS

    How to Create Responsive Cards in HTML and CSS

    September 23, 2023
    Create A Responsive Footer in HTML and CSS Only

    Create A Responsive Footer Section in HTML and CSS

    September 16, 2023

    Featured Post

    Build An Image Editor in HTML CSS & JavaScript

    Build An Image Editor in HTML CSS & JavaScript

    CodingNepal - July 15, 2022 11

    Categories

    • HTML and CSS225
    • Javascript168
    • JavaScript Projects97
    • Login Form51
    • Card Design43
    • Navigation Bar35
    • Website Designs25
    • Image Slider21
    • CSS Buttons20
    • Sidebar Menu17
    • JavaScript Games16
    • API Projects15
    • Preloader or Loader15
    • Form Validation14
    • PHP12
    CodingNepal
    ABOUT US
    CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP... Read more
    FOLLOW US
    Facebook Instagram Youtube
    • About us
    • Terms & Conditions
    • Privacy policy
    • Contact us
    Copyright © 2024 CodingNepal All Rights Reserved

    AdBlock Detected

    Ad