𝙇𝙚𝙩'𝙨 𝙨𝙝𝙤𝙥 𝙞𝙩

HERE IS FACEBOOK CLONE TEMPLET PLEASE GIVE US YOUR GREATEFULL FEEDBACK

COPY THIS HTML CSS CODE

PLEASE CUSTOMIZE ALL ICONS FONTS IMAGES WITH YOUR CHOICE

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Facebook</title>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">

</head>

<body>

<div id="container">

<div class="top_container">

<div class="logo">

<span>f</span>

<div class="search">

<i class="fa fa-search" aria-hidden="true"></i>

<input type="text" placeholder="serch facebook">

</div>

</div>

<div class="logo_bars">

<i class="fa fa-home" aria-hidden="true"></i>

<i class="fa fa-flag" aria-hidden="true" ></i>

<i class="fa fa-tv" aria-hidden="true"></i>

<i class="fas fa-store"></i>

<i class="fa fa-users" aria-hidden="true"></i>

</div>

<div class="icon_more">

<div class="imgbx">

<img src="avi222.jpg" alt="">

</div>

<span style="margin-left: 4px;">Avi</span>

<div class="add">

<i class="fa fa-plus" aria-hidden="true"></i>

</div>

<div class="mssg">

<i class="fab fa-facebook-messenger"></i>

</div>

<div class="notifications">

<i class="fas fa-bell"></i>

</div>

<div class="down_bar">

<i class="fa fa-caret-down" aria-hidden="true"></i>

</div>

</div>

</div>

<div class="boxes">

<div class="side_container">

<ul style="margin-top: 22px;">

<li style="display: flex;">

<div class="imgbx" style="margin-left: 4px;">

<img src="avi222.jpg" alt="" style="height: 40px; width: 40px;">

</div>

<a href="" style="margin-left: 30px;">Avi</a>

</li>

<li style="display:flex;">

<div class="box">

<img src="covid.png" alt="">

</div>

<a href="">information center</a>

</li>

<li style="display:flex;">

<div class="box">

<img src="friends.png" alt="">

</div>

<a href="">freinds</a>

</li>

<li style="display:flex;">

<div class="box">

<img src="recent.png" alt="">

</div>

<a href="">most recent</a>

</li>

<li style="display:flex;">

<div class="box">

<img src="star.png" alt="">

</div>

<a href="">favorites</a>

</li>

<li style="display:flex;">

<div class="box">

<img src="group.png" alt="">

</div>

<a href="">group</a>

</li>

<li style="display:flex;">

<div class="box">

<img src="home.png" alt="">

</div>

<a href="">marketplace</a>

</li>

<li style="display:flex;">

<div class="box">

<img src="tv.png" alt="">

</div>

<a href="">watch</a>

</li>

<li style="display:flex; position: relative; left: -19px;">

<div class="down_bar" style="height: 38px; width: 38px; margin-left: 32px;">

<i class="fa fa-caret-down" aria-hidden="true"></i>

</div>

<a href="">see more</a>

</li>

<hr style="background: grey;opacity: .4;">

</ul>

<span>Your Shortcuts</span>

<div class="imgs" style="display: flex;

flex-direction: column; position: relative;">

<div class="imgbx" style="margin-bottom: 22px;">

<img src="nature.jpg" alt=""><d style="position: absolute;left: 43px;top: -5px;">Lorem.</d>

</div>

<div class="imgbx" style="margin-bottom: 22px;">

<img src="nature.jfif" alt=""><d style="position: absolute;left: 43px;top: -5px;">Lorem.</d>

</div>

<div class="imgbx">

<img src="nature.jfif" alt=""><d style="position: absolute;left: 43px;top: -5px;">Lorem.</d>

</div>

</div>

</div><br>

<div class="center_box">

<ul>

<li>

<div class="box2">

<img src="avi222.jpg" alt="" style="height: 70%; border-radius: 0px;">

<div class="add" style="position: absolute; top: 56%; left: 15%; background-color: #1877f2;">

<i class="fa fa-plus" aria-hidden="true"></i>

</div>

<span>create<br>story</span>

</div>

</li>

<li>

<div class="box2">

<img src="img1.jfif" alt="">

</div>

</li>

<li>

<div class="box2">

<img src="img2.jfif" alt="">

</div>

</li>

<li>

<div class="box2">

<img src="img4.jfif" alt="">

</div>

</li>

<li>

<div class="box2">

<img src="img5.jfif" alt="">

</div>

</li>

</ul>

<div class="post_box">

<div class="user_logo">

<img src="avi222.jpg" alt="" style="color: white">

<input type="text" placeholder="What's on your mind,avi?">

</div>

<hr style="height: 0px; margin-top: 4px; opacity: .2; background:#000; width: 100%">

<div class="icon_center">

<i class="fas fa-video"></i>Live Video

<i class="fas fa-images" style="color: lime;"></i>Photo/Video

<i class="fas fa-grin" style="color: yellow;"></i>Feeling/Activity

</div>

</div>

<div class="room_box">

<div class="room">

<i class="fas fa-video" style="color: cadetblue; margin-right: 10px;"></i>

Create room

</div>

<ul>

<li>

<div class="imgbx">

<img src="avi222.jpg" alt="">

<span2></span2>

</div>

</li>

<li><div class="imgbx">

<img src="img1.jfif" alt="">

</div>

</li>

<li><div class="imgbx">

<img src="img2.jfif" alt="">

<span2></span2>

</div>

</li>

<li><div class="imgbx">

<img src="img4.jfif" alt="">

<span2></span2>

</div>

</li>

<li><div class="imgbx">

<img src="img5.jfif" alt="">

</div>

</li>

<li><div class="imgbx">

<img src="img7.jfif" alt="">

<span2></span2>

</div>

</li>

<li><div class="imgbx">

<img src="img6.jfif" alt="">

</div>

</li>

<li><div class="imgbx">

<img src="avi.jpg" alt="">

<span2></span2>

</div>

</li>

<li><div class="imgbx">

<img src="nature.jpg" alt="">

</div>

</li>

</ul>

<i class="fad fa-chevron-circle-right"></i>

</div>

<div class="timline_box">

<div class="head">

<div class="imgbx">

<img src="avi222.jpg" alt="">

<span style="position: absolute; left: 132%; bottom: 19px">Avi</span><br><span style="position: absolute; left: 132%; bottom: 0px; opacity: .5; display: flex;">1h.<i class="fas fa-cog" style="font-size: 12px;"></i></span>

</div>

</div>

<i class="fas fa-ellipsis-h" style="

position: absolute; right: 12px; top: 25px;"></i>

<div class="imgtime">

<img src="avi222.jpg" alt="">

</div>

</div>

</div>

<i class="far fa-arrow-alt-circle-right"></i>

</div> 

<div class="right_box">

<span style="opacity: .6;">Sponserd</span>

<div class="content">

<div class="boxadd" style="margin-top: 12px;">

<img src="background.jpg" alt="">

</div>

<div class="text">

<span>Collaborate & Create <br>Amazing Graphic Design<br> For Free</span>

</div>

</div>

<div class="content">

<div class="boxadd" style="height: 100px;">

<img src="clo.jfif" alt="">

</div>

<div class="text" style="line-height: 22px;">

<span>Collaborate & Create <br>Amazing Graphic Design<br> For Free</span>

</div>

</div>

<hr style="opacity: .5;">

<div class="pages" style="padding: 5px; position: relative; width: 100vw; margin-top: 15px;">

<span>Your Pages</span>

<i class="fas fa-ellipsis-h" style="color: aliceblue;position: relative; left: 300px;"></i><br>

<div class="imgbx" style="margin-top: 12px;">

<img src="city.jpg" alt="">

</div>

<p style="position: absolute; top: 45px;left: 5%; color: #fff;">Nature Creation</p>

<div class="mains">

<i class="far fa-bell" style="color: grey; font-size: 22px;"></i><span style="font-size: 14px; opacity: .6;">20+ Notifications</span>

<i class="fa fa-bullhorn" aria-hidden="true" style="color: grey; font-size: 22px;"></i><span style="font-size: 14px; opacity: .6;">Create Promotion</span>

</div>

<hr style="opacity: .5;width: 410px">

</div>

<div class="freqst">

<div class="top">

<span>Freind Requests</span>

</div>

<div class="all">

<span style="color: #1877f2; font-weight: 300;">See All</span>

</div>

</div>

<div class="accept" style="position: relative;">

<div class="imgbx" >

<img src="rohit%20(1).jpg" alt="" style="height: 60px;width: 60px;"id="rohit">

<p style="position: absolute; top: 0px;left: 74px; color: #fff;">Rohit</p>

<div class="box22">

<div class="confirm">

confirm

</div>

<div class="Delete">

Delete

</div>

</div>

</div>

</div>

<hr style="opacity: .5;width: 410px; position: relative; top: 48px;">

<div class="birthday">

<span style="font-size: 17px;">Birthdays</span><br>

<i class="fa fa-gift" aria-hidden="true" style="color: #1877f2;"></i>

<span style="font-size: 17px; position: absolute;top: 47px;left: 52px;">john and 15 others have birhtdays Today.</span>

</div>

<hr style="opacity: .5;width: 410px; position: relative; top: 58px;">

</div>

</div>

</body>

</html>

<style>

*

{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family:sans-serif;

}

span

{

color: #ffffff;

}

span:hover,ul li:hover{

background-color: #2e2e2e;

border-radius: 13px;

transition: .3s;

}

.box2:hover

{

box-shadow: 2px 5px 2px #2e2e2e;

}

body

{

height: 100vh;

background-color: #000000;

overflow-x: hidden;

}

#container

{

height: 100vh;

width: 100vw;

background-color: #000000;

}

.top_container

{

width: 100%;

height: 8vh;

background-color:#171717;

position: relative;

}

.logo

{

color: #fff;

background-color: #1877F2;

height: 40px;

width: 40px;

border-radius: 50%;

position: relative;

top: 30%;

left: 12px;

}

.logo span

{

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-30%);

font-size: 35px;

font-weight: bolder;

cursor: pointer;

}

.search

{

position: absolute;

left: 50px;

top: 10%;

height: 4vh;

width: 200px;

background-color: #2E2E2E;

outline: none;

border-radius: 15px;

display: flex;

justify-content: center;

align-items: center;

}

.search i,input

{

margin: 5px;

color: #fff;

opacity: .6;

}

.search input

{

border: none;

outline: none;

background-color: #2e2e2e;

color: aliceblue;

}

.logo_bars

{

color: #fff;

opacity: .8;

display: flex;

justify-content: center;

align-items: center;

margin-right: 166px;

}

.logo_bars i

{

margin-left: 65px;

cursor: pointer;

font-size: 30px;

position:relative;

bottom: 22px;

}

.logo_bars i:nth-child(1)

{

margin-left: 0;

color: #1877f2;

}

.icon_more

{

width: 20%;

height: 6vh;

position: absolute;

top: 12px;

right: 17px;

color: #ffffff;

display: flex;

align-items: center;

}

.imgbx

{

height: 35px;

width: 35px;

border-radius: 50%;

position: relative;

}

.imgbx img

{

position: absolute;

height: 100%;

width: 100%;

object-fit: cover;

background-size: cover;

background-position: center;

border-radius: 50%;

cursor: pointer;

}

.icon_more .fa,.fab,.fa-bell

{

color: #ffffff;

cursor: pointer;

}

.add,.mssg,.notifications,.down_bar

{

height: 38px;

width: 38px;

border-radius: 50%;

background-color: #2E2E2E;

margin-left: 20px;

display: flex;

justify-content: center;

align-items: center;

}

.boxes

{

position: relative;

height: 100vh;

width: 100vw;

}

.side_container

{

height: 100vh;

width: 22%;

float: left;

padding: 12px;

line-height: 48px;

color: #ffffff;

text-transform: capitalize;

font-size: 14px;

}

.side_container ul li

{

list-style: none;

}

.side_container ul li a

{

text-decoration: none;

color: #ffffff;

margin-left: 18px;

}

.box

{

font-size: 20px;

cursor: pointer;

margin-left: 9px;

}

.box img

{

height: 45px;

width: 45px;

}

.center_box

{

height: 100%;

width: 40%;

color: #ffffff;

display: flex;

position: absolute;

left: 25%;

z-index: 111;

/* border: 2px solid red;*/

overflow: hidden;

}

.center_box ul

{

display: flex;

}

.center_box ul li

{

list-style: none;

margin-left: 8px;

height: 30px;

}

.center_box ul li:nth-child(1)

{

margin-left: 0;

}

.center_box .box2

{

height: 180px;

width: 120px;

background-color: #2e2e2e;

position: relative;

border-radius: 13px;

}

.center_box .box2 img

{

position: absolute;

height: 100%;

width: 100%;

object-fit: cover;

background-size: cover;

border-radius: 13px;

}

.center_box span

{

position: absolute;

bottom: 2px;

text-align: center;

left: 28%;

font-size: 13px;

text-transform: capitalize;

}

.fa-arrow-alt-circle-right

{

background-color: #2e2e2e;

border-radius: 50%;

color: aliceblue;

position: absolute;

top: 12%;

right: 519px;

z-index: 222;

font-size: 30px;

z-index: 2222;

}

.post_box

{

position: absolute;

left: 0px;

top: 30%;

background-color: #171717;

height: 14vh;

width: 40vw;

padding: 8px;

border-radius: 12px;

}

.post_box .user_logo

{

height: 35px;

width: 35px;

display: flex;

}

.post_box .user_logo img

{

height: 100%;

width: 100%;

object-fit: cover;

border-radius: 50%;

}

.post_box .user_logo input

{

background: #2e2e2e;

border: none;

outline: none;

border-radius: 15px;

padding-right: 380px;

text-align: inherit;

}

::-webkit-input-placeholder

{

padding: 8px;

}

.icon_center

{

display: flex;

align-items: center;

position: absolute;

top: 70px;

}

.icon_center i

{

margin-left: 70px;

margin-right: 10px;

}

.icon_center i:nth-child(1)

{

margin-left: 42px;

}

.fa-video

{

color: red;

}

.room_box

{

position: absolute;

top: 47%;

height: 8vh;

width: 100%;

background: #171717;

border-radius: 13px;

display: flex;

justify-content: space-around;

}

.room

{

display: flex;

position: absolute;

top: 20%;

left: 13px;

padding: 12px;

border: 1px solid #2E2E2E;

border-radius: 20px;

font-size: 13px;

width: 190px;

text-align: center;

}

.room_box ul

{

position: absolute;

top: 25%;

left: 38%;

}

.room_box ul li{

margin-left: 10px;

}

span2

{

position: absolute;

top: 67%;

left: 74%;

height: 8px;

width: 8px;

border-radius: 50%;

background-color: lime;

}

.fa-chevron-circle-right

{

position: absolute;

right: 0;

top: 12px;

color:whitesmoke;

font-size: 35px;

}

.timline_box

{

position: absolute;

top: 57%;

height: 600px;

width: 100%;

}

.timline_box .head

{

height: 10vh;

width: 100%;

background-color: #171717;

padding: 12px;

}

.imgtime

{

position: relative;

height: 100%;

width: 100%;

}

.imgtime img

{

object-fit: cover;

background-size: cover;

background-position: center;

height: 100%;

width: 100%;

}

.right_box

{

position: absolute;

top: 80px;;

right: 5px;

height: 100vh;

width: 28%;

padding: 5px;

}

.content

{

display: flex;

justify-content: space-between;

text-align: center;

line-height: 43px;

margin-bottom: 12px;

}

.right_box .boxadd

{

height: 170px;

width: 190px;

background-color: #2e2e2e;

border-radius: 12px;

}

.right_box .boxadd img

{

background-size: cover;

object-fit: cover;

height: 100%;

width: 100%;

border-radius: 12px;

}

.mains

{

display: flex;

flex-direction: column;

margin-top: 22px;

position: relative;

left: 20px;

}

.mains span

{

position: relative;

top: -17px;

left: 32px;

}

.freqst

{

display: flex;

justify-content: space-between;

margin-top: 9px;

padding: 9px;

}

.box22

{

position: relative;

display: flex;

}

.confirm

{

position: absolute;

height: 40px;

width: 150px;

background: #1877f2;

left: 72px;

top: 23px;

color: white;

display: flex;

justify-content: center;

align-items: center;

border-radius: 6px;

text-transform: capitalize;

font-weight: 600;

}

.Delete

{

position: absolute;

height: 40px;

width: 150px;

background: #2e2e2e;

left: 232px;

top: 23px;

color: white;

display: flex;

justify-content: center;

align-items: center;

border-radius: 6px;

font-weight: 600;

}

.birthday

{

position: relative;

top: 50px;

font-size: 33px;

}

@media only screen and (max-width:1070px)

{

.add, .mssg, .notifications, .down_bar {

height: 28px;

width: 28px;

font-size: 10px;

display: flex;

justify-content: center;

align-items: center;

}

}

@media only screen and (max-width:1063px)

{

.fa-home:before,.fa-flag:before, .fa-tv:before,.fa-store:before,.fa-users:before {

font-size: 16px;

margin-left: -23px;

}

}

@media only screen and (max-width:1390px)

{

.confirm,.Delete

{

width: 115px;

}

.Delete

{

left: 210px;

}

.text

{

font-size: 12px;

}

.icon_more

{

right: 49px;

}

.fa-arrow-alt-circle-right:before {

content: "\f35a";

position: absolute;

right: -61px;

}

.logo_bars {

margin-right: 129px;

}

}

@media only screen and (max-width:1280px)

{

.fa-arrow-alt-circle-right:before {

content: "\f35a";

position: absolute;

right: -78px;

}

.add, .mssg, .notifications, .down_bar{

height: 28px;

width: 28px;

}

}

@media only screen and (max-width:1358px)

{

.icon_center

{

font-size: 11px;

}

.right_box .boxadd {

height: 136px;

width: 190px;

background-color: #2e2e2e;

border-radius: 12px;

}

.room_box ul {

position: absolute;

top: 25%;

left: 47%;

}

.fa-home:before,.fa-flag:before,.fa-tv:before,.fa-store:before,.fa-users:before {

font-size: 23px;

margin-left: -13px;

}

.logo_bars {

margin-right: 129px;

}

.post_box .user_logo input {

padding-right: 242px;

}

}

@media only screen and (max-width:1225px)

{

.post_box .user_logo input {

padding-right: 202px;

}

.fa-arrow-alt-circle-right:before {

content: "\f35a";

position: absolute;

right: -103px;

}

}

@media only screen and (max-width:905px)

{

.post_box .user_logo input {

padding-right: 70px;

}

.fa-arrow-alt-circle-right:before {

content: "\f35a";

position: absolute;

right: -218px;

}

.fa-home:before,.fa-flag:before,.fa-tv:before,.fa-store:before,.fa-users:before {

font-size: 13px;

margin-left: -40px;

}

.logo_bars {

margin-left: 419px;

width: 70px;

}

.text, {

font-size: 9px;

line-height: 12px;

margin-top: 42px;

}

.room {

top: 28%;

left: 13px;

padding: 9px;

font-size: 10px;

width: 121px;

}

}

@media only screen and (max-width:1216px)

{

.confirm,.Delete

{

width: 90px;

}

.Delete

{

left: 190px;

}

}

@media only screen and (max-width:1025px)

{

.logo_bars {

margin-right: 84px;

}

.fa-home:before,.fa-flag:before,.fa-tv:before,.fa-store:before,.fa-users:before {

font-size: 13px;

}

element.style {

}

.search {

left: 50px;

top: 10%;

width: 140px;

justify-content: revert;

align-items: center;

font-size: 11px;

}

}

@media only screen and (max-width:1109px) {

.icon_center {

font-size: 7px;

margin-left: -29px;

}

}

@media only screen and (max-width:1190px)

{

.room_box ul {

position: absolute;

top: 25%;

left: 57%;

}

.imgbx img {

position: absolute;

height: 94%;

width: 87%;

}

}

@media only screen and (max-width:1025px)

{

.confirm, .Delete {

width: 68px;

height: 30px;

font-size: 9px;

}

.Delete {

left: 149px;

}

.imgbx img

{

height: 40px;

width: 40px;

}

}

.fa-flag:hover,.fa-tv:hover{

opacity: .4;

}

.fa-store:hover,.fa-users:hover

{

opacity: .4;

}

.search input {

border: none;

outline: none;

background-color: transparent;

}

</style>

THANK YOU HAVE A GOOD COADING JOURNEY

Comments