youndme

<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<head>

<title>

</title>
</head>
<style>
.main
{
background:gray;
height:10%;
width:100%;
}
.home
{color:white;
position:absolute;
left:30%;
margin-top:1.5%;
cursor:pointer;
}
.about
{color:white;
position:absolute;
left:50%;
margin-top:1.5%;
cursor:pointer;
}
.contact
{color:white;
position:absolute;
left:70%;
margin-top:1.5%;
cursor:pointer;
}

.menu
{color:white;
position:absolute;
left:90%;
margin-top:1.5%;
cursor:pointer;
}
.last{
background:gray;
height:80%;
width:100%;
}
.main:hover tr{
}

.home:hover{background:white;
font-style:bold;}
.about:hover{background:white;
font-style:bold;}
.contact:hover{background:blue;
font-style:bold;}
.menu:hover{background:blue;
font-style:bold;}

.menuoption{
background:white;
height:87%;
width:20%;
position:absolute;
left:79.2%;
top:12%;
visibility:hidden;
}
.exit
{
position:absolute;
left:77%;
top:2%;
}

</style>
<script>
function menu()
{
   document.getElementById('menuoption').style.visibility="visible";
}
function exit()
{
  document.getElementById('menuoption').style.visibility="hidden"
}
</script>
<body>
<table>
<tr>
<td><legend><i style="font-size:10vw; position:absolute;left:2%;top:0%;color:white;" class="fa fa-handshake-o"></i></legend</td>
<td style="position:absolute;left:2%;top:20%;font-size:280%;font-style:bold;color:white;">You & Me</td>
<td class="home"><i class="fa fa-home"> </i><a href="php.php">HOME</a></td>
<td class="about"><i class="fa fa-user-o"> </i> <a href="card.html">ABOUT</a></td>
<td class="menu" id="menu" onclick="menu();"><i class="fa fa-bars"> </i> MENU</td>
<td class="contact"><i class="fa fa-phone"> </i><a href="contact.php">CONTACT US</a></td>
</tr>
</table>
<img src="desert.jpg" width="100%" height="100%">
<div class="body">
<div class="menuoption" id="menuoption">
<button class="exit" id="exit" onclick="exit();">EXIT</button>
</div>

<div class="last">
<td class="whatsapp"><i class="fa fa-whatsapp" style="font-size:30px; color:green; position:absolute;left:843px;bottom:-177;"></i><a href="https:\\web.whatsapp.com"><h1 style="position:absolute;left:870px;bottom:-200px;color:white;">Whatsapp</h1></td>
<td class="youtube"><i class="fa fa-youtube" style="font-size:30px; color:red; position:relative;left:836px;top:247px;"></i><a href="https:\\www.youtube.com"><h1 style="position:absolute;left:870px;bottom:-300px;color:white;">Youtube</h1></td>
<td class="facebook"><i class="fa fa-facebook" style="font-size:28px; position:relative;left:1090px;top:147px;"></i><a href="https:\\www.facebook.com"><h1 style="position:absolute;left:1150px;bottom:-200px;color:white;">Facebook</h1></td>
<td class="instra"><i class="fa fa-instagram" style="font-size:30px;position:relative;left:1065px;top:247px;"></i><a href="https:\\www.instagram.com"><h1 style="position:absolute;left:1150px;bottom:-300px;color:white;">Instragram</h1></td>
</div>


</body>
<html>