So Hey Web Devs, Welcome to Another Web Development Project Which Is Facebook Post Clone Using HTML, CSS & JavaScript. In this Blog We Will Be Creating the UI (User Interface) Of Facebook Post Which Appears Before Posting Your Content On Facebook.
In this Project User Can Select The Post Visibility Means Friends, Public, Only Me And Many More It Will Work When the User Clicks On the Dropdown Menu.
Also Read:
• To-Do List HTML,CSS & JavaScript
• Glassmorphism Login Form Using HTML & CSS
• Random Quote Generator JavaScript
So this Is How your Facebook Post Clone Will Look Like After Adding To All Assets to the Web Page:
HTML CODE:
Copy the Following HTML Code Of the Project:
<!-- Project Created By Mr Programmer -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Create Post</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="faceboo-favicon.png">
<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 style="color: #fff;">Create Post</header>
<form action="#">
<div class="content">
<img src="icons/logo.png" alt="logo">
<div class="details">
<a href="https://mrprogrammer.in/" target="_blank" style="text-decoration: none; color: #fff;"><p>Mr Programmmer</p></a>
<div class="privacy">
<i class="fas fa-user-friends"></i>
<span style="color: #111;">Friends</span>
<i class="fas fa-caret-down"></i>
</div>
</div>
</div>
<textarea placeholder="What's on your mind, Mr Programmer?" spellcheck="false" style="color: #fff;" 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 style="color: #fff; background-color: #4599FF;" onclick="alert('You Have Been Pranked! This is a Clone 😂')">Post</button>
</form>
</section>
<section class="audience">
<header>
<div class="arrow-back"><i class="fas fa-arrow-left"></i></div>
<p style="color: #fff;">Select Audience</p>
</header>
<div class="content">
<p style="color: #fff;">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 style="color: #fff;">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 style="color: #111;">Friends</p>
<span style="color: #111;">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>CSS CODE:
CSS Code Of the Following Project:
/* 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;
}
textarea{
color: #fff;
background-color: #111;
}
textarea ::placeholder{
background-color: #fff;
color: #fff;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(#111, #222);
}
::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: #222;
}
.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: #eee;
}
form textarea:focus::placeholder{
color: #eee;
}
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: #fff;
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{
color: #111;
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 #fff;
}
.audience header .arrow-back{
position: absolute;
left: 25px;
width: 35px;
height: 35px;
cursor: pointer;
font-size: 15px;
color: #111;
border-radius: 50%;
background: #fff;
}
p{
color: #fff;
}
.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: #fff;
}
.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: #ffff;
}
.audience .list li:hover{
background: #111;
color: #fff;
}
.audience .list li .column .icon{
height: 50px;
width: 50px;
color: #111;
font-size: 23px;
border-radius: 50%;
background: #fff;
}
.audience .list li.active .column .icon{
background: #111;
color: #fff;
}
.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: #fff;
}
.list li .radio{
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
border: 1px solid #fff;
}
.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;
}So This Was it For Today See you In the Next Project With Some Awesome Codes, Till Then
Keep Coding Keep Exploring!
Founder & CEO at Mr Programmer
Founder & CEO of MrProgrammer.in | I help Learning Freaks to Step into the World of Programming and Our Mission is to Provide High Quality and Valuable Content to Our Users!
We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners.
We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace.
If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.
We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners.
We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace.
If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.
Latest posts by Tanmay Sinha (see all)
- The JS Developer’s Podcast [EP: 2] Variables and Data Manipulation - October 15, 2024
- YouTube Channels to Learn Coding: Top 9 Picks That Will Make a You Master - October 10, 2024
- The JS Developer’s Podcast [EP: 1] Introduction to JavaScript - September 27, 2024
Related posts:
Glassmorphism Login Form Using HTML & CSS5 min read
To-Do List HTML,CSS & JavaScript3 min read
Password Validation Using JavaScript3 min read
Create a Movie Website Using an API | Web Development Projects15 min read
Random Quote Generator JavaScript3 min read
Typing Animation Using HTML & CSS3 min read
Get Form Data In Google Sheets | Web Development Projects4 min read
10 Web Development Projects With Source Codes!7 min read
Pingback: Typing Animation Using HTML & CSS - Mr Programmer
Pingback: Password Validation Using JavaScript - Mr Programmer
Pingback: Email Automation Using Python - Mr Programmer
Pingback: Complete Web Development RoadMap 2022 | Web Development | - Mr Programmer
Pingback: 10 Web Development Projects With Source Codes! - Mr Programmer