Facebook Post Box UI Design using HTML and CSS only

Hey Friends today in this blog I'll be creating a Facebook Post Box UI Design Using HTML and CSS only. In this project Facebook Post Box UI Design you'll see the basic card (this idea was derived from a Facebook app) in this card you'll see a input test where user is meant to type their mind, just like the Facebook app when User types on that input text it expands and multiple functions comes in where you've an option to tag a friend and a picture/video or set location etc. In this model app design you'll see that if user clicks on the input text method it also expands just like the normal Facebook app giving you the option to see what you're typing. They are many functions in this app, this also looks like our last video that was published last month on Input Text Method Using HTML CSS and JavaScript. On that project you'll see that if user enters their details it will take you to a demo or basic website which I also created you can also logout if you want it's just like Instagram or Facebook where you can login and logout. Like I said earlier this project has many functions in the top left corner you'll see a toggle button when User clicks on that button the design turns dark like a dark-mode theme, like most app people use has a dark mode. I hope you like this project, and thank you for taking time to read this.

Video Tutorial of Facebook Post Box UI Design using HTML and CSS only

You might like this

Facebook Post Box UI Design using HTML and CSS only[Source Codes]

Pls feel free to download the source code by clicking on the download source code link.

Hope this helps you. Pls if there's any issue downloading this file don't hesitate to contact me (*email below)

Download Source Code

Contact Me: treasurealekhojie@yahoo.com

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Facebook Post Box HTML CSS UI Design</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="checkbox" name="" id="block">
    <div class="container">
      <div class="box">
        <div class="image">
          <img src="Alex Smith.jpeg" alt="">
        </div>
        <div class="main">
          <form action="" method="POST">
            <p>*You're to create textarea code</p>
            <button type="submit">POST</button>
            <div class="icons">
              <span>
                <i class="fa fa-video-camera"></i>Live</span>
                <span>
                  <i class="fa fa-image"></i>Photo</span>
                  <span>
                    <i class="fa fa-user"></i>Tag Friends</span>
            </div>
          </form>
        </div>
      </div>
    </div>
</body>
</html>

CSS CODE

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
::selection{
  background: #81ecec;
}
::-webkit-scrollbar{
  width: 3px;
}
::-webkit-scrollbar-track{
  border: 4px solid transparent;
  background: transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb{
  background: #a1a1a1;
  border: 1px solid transparent;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover{
  border-radius: 5px;
  background: #a1a1a1;
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #2980b9;
}
.container .box .image{
  width: 100px;
  height: 100px;
}
.container .box .image img{
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #1abc9c;
}
.box{
  width: 380px;
  height: 100px;
  background: #fff;
  border-radius: 8px;
  border-left: 2px solid #1abc9c;
  box-shadow: 0 0 4px rgba(0,0,0,.4);
}
.box .image{
  margin-top: 20px;
  padding-left: 20px;
}
.box .main{
  position: absolute;
  top: 46%;
  padding-left: 90px;
}
.box .main textarea{
  width: 200px;
  height: 28px;
  padding: 5px 10px;
  outline: none;
  border: 2px solid #ddd;
  border-radius: 20px;
  resize: none;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}
.box .main textarea:focus{
  position: absolute;
  width: 500px;
  height: 200px;
  bottom: -100%;
  right: -40%;
  padding-top: 20px;
  font-size: 15px;
}
.box .main textarea:focus ~ button{
  bottom: 110px;
  left: 310px;
}
.box .main i{
  padding-right: 5px;
}
.box .main span{
  padding: 5px 5px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}
.box .main span:hover{
  background: #ddd;
  border-radius: 8px;
}
.box .main button{
  position: relative;
  bottom: 17px;
  width: 50px;
  height: 28px;
  cursor: pointer;
  outline: none;
  border: none;
  background: #3498db;
  color: #fff;
  border-radius: 8px;
}
.box .main button:hover{
  background: #2980b9;
}
.box .main textarea:focus ~ button{
  background: #3498db;
  opacity: 0.6;
}
input[type="checkbox"]{
  position: absolute;
  top: 50px;
  left: 50px;
  width: 80px;
  height: 40px;
  -webkit-appearance: none;
  background: #fff;
  outline: none;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(0,0,0,.2);
  transition: all 0.3s ease;
}
input:checked[type="checkbox"]{
  background: #2c3e50;
}
input[type="checkbox"]::before{
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  top: 0;
  left: 0;
  background: #34495e;
  transition: all 0.3s ease;
}
input:checked[type="checkbox"]::before{
  background: #fff;
  left: 40px;
}
input:checked[type="checkbox"] ~ .container{
  background: #2c3e50;
}
input:checked[type="checkbox"] ~ .container .box{
  background: #2c3e50;
  color: #099FFF;
  border-color: #099FFF;
}
input:checked[type="checkbox"] ~ .container .box .image img{
  border-color: #099FFF;
}

Facebook Post Box UI Design using HTML and CSS only

Creative Tutorials

Post a Comment

Post a Comment

Contact Form