FB friend request page using Html & Css
In this design a user can view the friend request in different view i hope you like this design,thanks for your visit.
Source code below:
HTML
<!DOCTYPE html>
<html>
<head>
<title>fb.in</title>
<!-- font cdn -->
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- css reference link -->
<link rel="stylesheet" type="text/css" href="fb.css">
</head>
<body>
<div id="fb-cover">
<div id="but-con">
<img id="frm" src="cap.png" width="160px" height="160px">
<span id="ic" style="font-size:38px;position:relative;left:180px;top:-50px;color:green;visibility: hidden" class="material-icons"> check</span>
<p id="me">Sparkle</p>
<button id="cancel" onclick="ad()">Add Friend</button>
<button id="confirm" onclick="re()">Remove</button>
</div>
<button id="open" onclick="op()">
<span id="aa" style="font-size:36px" class="material-icons"> keyboard_arrow_right</span>
</button>
</div>
<div id="request">
<i class='fab fa-facebook-square' style='font-size:100px;color:#fff'></i>
<div id="loader"></div>
<div id="loading"></div>
<img id="i1" src="rl.png" width="200px" height="200px">
<img id="i2"src="rr.png" width="200px" height="200px">
<p id="h">Hi!</p>
<p id="rec">you have an new friend request</p>
</div>
<!-- script -->
<script type="text/javascript">
var g=document.getElementById('fb-cover');
var r=document.getElementById('request');
var o=document.getElementById('open');
var ic=document.getElementById('ic');
var h=document.getElementById("h");
var rec=document.getElementById("rec");
var aa=document.getElementById("aa");
function op(){
g.style.left="600px";
r.style.right="400px";
aa.style.transform="rotate(-180deg)";
}
function re(){
g.style.left="310px";
r.style.right="200px";
aa.style.transform="rotate(0deg)";
}
function ad(){
ic.style.visibility="visible";
g.style.left="310px";
r.style.right="200px";
h.innerHTML="Success" +"!";
h.style.position="relative";
h.style.right="-180px";
rec.innerHTML="your now friend to sparkle";
rec.style.position="relative";
rec.style.left="70px";
aa.style.transform="rotate(0deg)";
}
</script>
<!-- script end -->
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400&display=swap');
/*for font*/
*{
box-sizing: border-box;
}
body{
display: flex;
align-items:center;
justify-content: center;
background-color:#f1f1f1 ;
}
#fb-cover{
width:501px;
height: 290px;
background-color:#fff;
position: relative;
top:200px;
left:310px;
border-radius:0 10px 10px 0;
box-shadow:1px 2px 3px rgba(0,0,0,0.9);
transition-duration:3s;
}
#i1{
position: relative;
top:-48px;
right: -0px;
}
#i2{
position: relative;
top:-45px;
left:96px;
}
i{
position: relative;
left:200px;
}
#loader{
width: 90%;
height: 10px;
background-color: #fff;
border-radius: 5px;
position: relative;
top:65px;
right: -10px;
}
#rec{
position: relative;
top:-190px;
left:35px;
color:#fff;
font-size:30px;
font-family: 'Quicksand', sans-serif;
}
#h{
position: relative;
top:-150px;
right:-230px;
color:#fff;
font-size:38px;
font-family: 'Quicksand', sans-serif;
}
#request{
width:500px;
height: 300px;
background-color:rgb(0, 128, 247);
position: relative;
top:200px;
right:200px;
border-radius:10px 0 0 10px;
transition-duration:3s;
box-shadow:-1px 1px 3px rgba(0,0,0,0.9);
}
#open{
padding:5px ;
position: relative;
top:-185px;
left:501px;
color: #fff;
background-color:
rgb(0, 128, 247);
border: none;
border-radius:0px 10px 10px 0px;
}
#cancel{
padding:5px 25px 5px 25px;
position: relative;
top:-60px;
left:50px;
color: #fff;
background-color:
rgb(0, 128, 247);
font-size: 28px;
border:none;
border-radius:5px ;
font-family: 'Quicksand', sans-serif;
}
#confirm{
padding:5px 25px 5px 25px ;
position: relative;
top:-60px;
left: 100px;
color:rgb(0, 128, 247) ;
background-color: #f1f1f1;
font-size: 28px;
border:none;
border-radius:5px ;
font-family: 'Quicksand', sans-serif;
}
#frm{
position: relative;
left: 180px;
top:-0px;
}
#me{
position: relative;
left: 200px;
top:-40px;
font-size:35px;
font-family: 'Quicksand', sans-serif;
color:grey;
}
button{
cursor: pointer;
}
Comments
Post a Comment