<!DOCTYPE html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<
meta
name="viewport" content=
"
width
=
device
-width,
initial-scale
=
1
.0">
<
link
rel="stylesheet" href=
"./style.css">
<
script
type="module" src=
</
script
>
<
title
>Facebook Post Box Clone</
title
>
</
head
>
<
body
>
<
main
class="post">
<
div
class="wrapper">
<
section
class="create-post">
<
header
class="header">
<
h1
>Create post</
h1
>
<
div
class="cross-icon">
<
div
class="cross-icon-mark"></
div
>
</
div
>
</
header
>
<
div
class="post-header">
<
div
class="profile-pic"></
div
>
<
div
class="user-info">
<
div
class="full-name">GeeksforGeeks</
div
>
<
div
class="post-audience">
<
div
class="friends-icon"></
div
>
<
span
class="audience-text">Friends</
span
>
<
div
class="drop-down"></
div
>
</
div
>
</
div
>
</
div
>
<
div
class="post-content">
<
textarea
name="post-desc" id="post-desc"
cols="30" rows="5"
placeholder="What's on you mind, Geek?"></
textarea
>
<
div
class="emoji-picker">
<
emoji-picker
class="light"></
emoji-picker
>
<
i
class="emoji" aria-label="Insert an emoji"
role="img"></
i
>
</
div
>
<
div
class="add-to-your-post">
<
span
class="add-to-post-text">Add to your post</
span
>
<
div
class="add-to-post-icons">
<
div
class="photo-video"></
div
>
<
div
class="tag-people"></
div
>
<
div
class="feeling-activity"></
div
>
<
div
class="check-in"></
div
>
<
div
class="gif"></
div
>
<
div
class="live-video"></
div
>
</
div
>
</
div
>
<
button
class="post-btn" disabled>Post</
button
>
</
div
>
</
section
>
<
section
class="post-audience-section">
<
header
class="post-audience-header">
<
div
class="arrow-left-icon"></
div
>
<
h1
>Post Audience</
h1
>
</
header
>
<
div
class="post-audience-content">
<
h4
>Who can see your post?</
h4
>
<
p
class="your-post-text">Your post will show up
in Feed, on your profile and in search results.</
p
>
<
p
> Your default audience is set to Only me,
but you can change the<
br
/> audience
of this specific
post.</
p
>
</
div
>
<
div
class="post-audience-options">
<
div
class="audience-option">
<
div
class="audience-option-left">
<
div
class="audience-option-icon earth"></
div
>
<
div
class="audience-option-details">
<
div
class="audience-option-text">Public</
div
>
<
span
class="audience-option-desc">Anyone on
or off Facebook</
span
>
</
div
>
</
div
>
<
div
class="audience-option-right">
<
div
class="radio-btn">
<
input
type="radio" name="audience-option-radio"
class="audience-option-radio">
</
div
>
</
div
>
</
div
>
<
div
class="audience-option">
<
div
class="audience-option-left">
<
div
class="audience-option-icon user-group"></
div
>
<
div
class="audience-option-details">
<
div
class="audience-option-text">Friends</
div
>
<
span
class="audience-option-desc">Your friends
on Facebook</
span
>
</
div
>
</
div
>
<
div
class="audience-option-right">
<
div
class="radio-btn">
<
input
type="radio" name="audience-option-radio"
class="audience-option-radio">
</
div
>
</
div
>
</
div
>
<
div
class="audience-option">
<
div
class="audience-option-left">
<
div
class="audience-option-icon user"></
div
>
<
div
class="audience-option-details">
<
div
class="audience-option-text">Friends except...</
div
>
<
span
class="audience-option-desc">Don't show
to some friends</
span
>
</
div
>
</
div
>
<
div
class="audience-option-right">
<
div
class="radio-btn">
<
input
type="radio" name="audience-option-radio"
class="audience-option-radio">
</
div
>
</
div
>
</
div
>
<
div
class="audience-option">
<
div
class="audience-option-left">
<
div
class="audience-option-icon specific-user"></
div
>
<
div
class="audience-option-details">
<
div
class="audience-option-text">
Specific friends</
div
>
<
span
class="audience-option-desc">Only
show to some friends</
span
>
</
div
>
</
div
>
<
div
class="audience-option-right">
<
div
class="radio-btn">
<
input
type="radio"
name="audience-option-radio"
class="audience-option-radio">
</
div
>
</
div
>
</
div
>
<
div
class="audience-option">
<
div
class="audience-option-left">
<
div
class="audience-option-icon lock"></
div
>
<
div
class="audience-option-details">
<
div
class="audience-option-text">Only me</
div
>
</
div
>
</
div
>
<
div
class="audience-option-right">
<
div
class="radio-btn">
<
input
type="radio"
name="audience-option-radio"
class="audience-option-radio">
</
div
>
</
div
>
</
div
>
<
div
class="audience-option">
<
div
class="audience-option-left">
<
div
class="audience-option-icon gear"></
div
>
<
div
class="audience-option-details">
<
div
class="audience-option-text">Custom</
div
>
<
span
class="audience-option-desc">Include
and exclude friends and lists</
span
>
</
div
>
</
div
>
<
div
class="audience-option-right">
<
div
class="radio-btn">
<
input
type="radio"
name="audience-option-radio"
class="audience-option-radio">
</
div
>
</
div
>
</
div
>
<
div
class="audience-option">
<
div
class="audience-option-left">
<
div
class="audience-option-icon star"></
div
>
<
div
class="audience-option-details">
<
div
class="audience-option-text">Close
friends</
div
>
<
span
class="audience-option-desc">Your
custom list</
span
>
</
div
>
</
div
>
<
div
class="audience-option-right">
<
div
class="radio-btn">
<
input
type="radio"
name="audience-option-radio"
class="audience-option-radio">
</
div
>
</
div
>
</
div
>
</
div
>
</
section
>
</
div
>
</
main
>
<
script
src="./script.js"></
script
>
</
body
>
</
html
>