profile facebook

In this example below you will see how to do a profile facebook with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mediabersama, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mediabersama ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>profile facebook</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<html>
<head>
<title>mikrotik hotspot > status</title>
$(if refresh-timeout)
<meta http-equiv="refresh" content="$(refresh-timeout-secs)">
$(endif)
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta http-equiv="expires" content="-1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<style type="text/css">
<!--

-->
</style>
<script language="JavaScript">
<!--
$(if advert-pending == 'yes')
    var popup = '';
    function focusAdvert() {
	if (window.focus) popup.focus();
    }
    function openAdvert() {
	popup = open('$(link-advert)', 'hotspot_advert', '');
	setTimeout("focusAdvert()", 1000);
    }
$(endif)
    function openLogout() {
	if (window.name != 'hotspot_status') return true;
        open('$(link-logout)', 'hotspot_logout', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=280,height=250');
	window.close();
	return false;
    }
//-->
</script>
</head>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0"
$(if advert-pending == 'yes')
	onLoad="openAdvert()"
$(endif)
>
  <div class="navatas">
<div class="topnav" id="myTopnav">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
</div>
  <div class="mainwrapper">
   <div class="contentwrp"> 
<div class="bannerpr">
  <img style='margin-bottom:px' src="http://mymfb.com/file/pic/photo/2012/06/cabe216ee1e1e6aa2ea0b3722ae3f011_1024.jpg"/>
</div>
<div class="profile">
  <img style='margin-bottom:px' src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/13726837_1721866661400333_3723110438667772556_n.jpg?oh=f2f24c599d2f7d7d4bdfc4d5a1f0a797&oe=5A5CB2A8"/>
</div>
  <div class="name">
      <h1>Leli Soenarko</h1>
  </div>
    
  <table width="100%" height="100%">

<tr>
<td align="center" valign="middle">
<form action="$(link-logout)" name="logout" onSubmit="return openLogout()">
<table border="" class="tabula">
$(if login-by == 'trial')
	<br><div style="text-align: center;">Welcome trial user!</div><br>
$(elif login-by != 'mac')
	<br><div style="text-align: center;">Welcome $(username)!</div><br>
$(endif)
	<tr><td align="right">IP address:</td><td>$(ip)</td></tr>
	<tr><td align="right">bytes up/down:</td><td>$(bytes-in-nice) / $(bytes-out-nice)</td></tr>
$(if session-time-left)
	<tr><td align="right">connected / left:</td><td>$(uptime) / $(session-time-left)</td></tr>
$(else)
	<tr><td align="right">connected:</td><td>$(uptime)</td></tr>
$(endif)
$(if blocked == 'yes')
	<tr><td align="right">status:</td><td><div style="color: #FF8080">
<a href="$(link-advert)" target="hotspot_advert">advertisement</a> required</div></td>
$(elif refresh-timeout)
	<tr><td align="right">status refresh:</td><td>$(refresh-timeout)</td>
$(endif)

</table>
$(if login-by-mac != 'yes')
<br>
<!-- user manager link. if user manager resides on other router, replace $(hostname) by its address
<button onclick="document.location='http://$(hostname)/user?subs='; return false;">status</button>
<!-- end of user manager link -->
<input type="submit" value="log off">
$(endif)
</form>

</td>
</table>  
   </div> 
    <div class="sidebarright">
    </div>
</div>
  <div class="vertical-menu">
  <a href="#">
    <img class="imgol" src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/13726837_1721866661400333_3723110438667772556_n.jpg?oh=f2f24c599d2f7d7d4bdfc4d5a1f0a797&oe=5A5CB2A8"/> Leli soenarko</a>
  <a href="#">
    <img class="imgol" src="https://lh3.googleusercontent.com/-aWhY8_DKqrc/WaYoHQFxoUI/AAAAAAAAF7Q/rK2CAutuVGcdoHlhvFL3-j6adXaeaaVJQCLcBGAs/s1600/ol1.jpg"/> Anggun N tiyas</a>
  <a href="#">
    <img class="imgol" src="https://lh3.googleusercontent.com/-csNL1PuVrik/WaYoHYrZhWI/AAAAAAAAF7M/RZ1EV3Yeji8w-Os5kI44HSXXA_KVBATeACLcBGAs/s1600/ol2.jpg"/> Ifah Mae Rhatna</a>
  <a href="#"> 
    <img class="imgol" src="https://lh3.googleusercontent.com/-3eLg7CFw_vU/WaYoHSAO1II/AAAAAAAAF7I/c-5_yMiDAzkFiIlMBAQ37rALsnVgQqeTgCLcBGAs/s1600/ol3.jpg"/> Adhelia Mita Utami</a>
  <a href="#"><img class="imgol" src="https://lh3.googleusercontent.com/-zI6kNpbApmE/WaYoISO4sAI/AAAAAAAAF7U/455gTjpJW2Qyod-Mq9RxhMxDq2lgRnTHwCLcBGAs/s1600/ol4.jpg"/> Khusnul The-Squab</a>
    <a href="#">
    <img class="imgol" src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/13726837_1721866661400333_3723110438667772556_n.jpg?oh=f2f24c599d2f7d7d4bdfc4d5a1f0a797&oe=5A5CB2A8"/> Leli soenarko</a>
  <a href="#">
    <img class="imgol" src="https://lh3.googleusercontent.com/-aWhY8_DKqrc/WaYoHQFxoUI/AAAAAAAAF7Q/rK2CAutuVGcdoHlhvFL3-j6adXaeaaVJQCLcBGAs/s1600/ol1.jpg"/> Anggun N tiyas</a>
  <a href="#">
    <img class="imgol" src="https://lh3.googleusercontent.com/-csNL1PuVrik/WaYoHYrZhWI/AAAAAAAAF7M/RZ1EV3Yeji8w-Os5kI44HSXXA_KVBATeACLcBGAs/s1600/ol2.jpg"/> Ifah Mae Rhatna</a>
  <a href="#"> 
    <img class="imgol" src="https://lh3.googleusercontent.com/-3eLg7CFw_vU/WaYoHSAO1II/AAAAAAAAF7I/c-5_yMiDAzkFiIlMBAQ37rALsnVgQqeTgCLcBGAs/s1600/ol3.jpg"/> Adhelia Mita Utami</a>
  <a href="#"><img class="imgol" src="https://lh3.googleusercontent.com/-zI6kNpbApmE/WaYoISO4sAI/AAAAAAAAF7U/455gTjpJW2Qyod-Mq9RxhMxDq2lgRnTHwCLcBGAs/s1600/ol4.jpg"/> Khusnul The-Squab</a>
</div> 
</body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mediabersama/profile-facebook-brQMEz */
body {margin:0;
    font-family: 'Roboto', sans-serif;
}
.navatas{
    background-color: #3B5998;
  width:100%;
  overflow:hidden;
  position:fixed;
}
.topnav {
  overflow: hidden;
  background-color: #3B5998;
  width:100%;
  max-width:1000px;
  margin:0px auto;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}


.mainwrapper{
  width:100%;
  max-width:940px;
  float:;
  margin:0px auto;
  overflow:hidden;
  padding:0px; 
}
.contentwrp{
  width:100%;
  max-width:750px;
  float:left;
}

.sidebarright{
  border-right:1px solid #ccc;
  float:left;
  height:200px;
  width:188px;
}

.bannerpr{
  width:100%;
  margin:0px;
  overflow:hidden;
  float:left;
  border:1px solid #ddd;
}

.bannerpr img{
  width:100%;
  margin:0px;
}
.profile{
  width:170px;
  height:170px;
  margin-top:-120px;
  margin-left:20px;
  overflow:hidden;
  text-align:center;
  float:left;
}
.profile img{
  width:90%;
  border:3px solid #ccc;
}
.name h1{
  float:left;
  margin-top:-50px;
  color:#fff;
  font-size:30px;
}

.imgol {
  width:30px;
  height:30px;
  border-radius:100%;
  margin-bottom:-10px;
  
}
.vertical-menu {
    width: 200px;
    position:fixed;
    height:400px;
    right:0px;
    top:48px;
  overflow: scroll;
    border:1px solid #ddd;
  float:right;
  background-color: #eee;
}

.vertical-menu a {
    background-color: #eee;
    color: #444;
    display: block;
    padding: 12px;
    text-decoration: none;
    font-size:14px;
}

.vertical-menu a:hover {
    background-color: #ddd;
}


table {
    border-collapse: collapse;
    width: 100%;
  border:1px solid #ddd;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .vertical-menu{
    display:none;
  }
  .profile{
  width:120px;
  height:120px;
  margin:0px auto;
  margin-top:-70px;
  margin-left:20px;
  overflow:hidden;
  text-align:center;
}
.profile img{
  width:90%;
  border:3px solid #ccc;
}
.name h1{
  float:;
  margin-top:-50px;
  color:#fff;
  font-size:20px;
}

  
  
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}

/*Downloaded from https://www.codeseek.co/mediabersama/profile-facebook-brQMEz */
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

Comments