D3 Examples - profile

xxxxxxxxxx
 
<!--the link in the heading--->
<head>
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans+Condensed:300" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<!--navbar Button of page-->
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary  ">
  <button class="navbar-toggler navbar-toggler-right mt-2" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- navbar menue List-->
  <a class="navbar-brand" href="#">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/99/82/85/998285c92b011bbb7c57c1d40ec1ea3c--grey-man-allen-walker.jpg" alt="the pic not avaliable" class="small-img">
    Ismail Salah
  </a>  
  <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo01">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link " href="#">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav navbar-nav  ">
        <a class="nav-link" href="#">About me</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profilo</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="#">Contact Me</a>
      </li>
    </ul>
  </div>
</nav>
<!-- first page-->
<!--the heading of profile-->
<div class="pageCover">
 <div class="infoPro"> <h1>Ismail Salah</h1>
   <h3>I am always ready to code</h3></div>
   <!-- Button list of user-->
   <div class="btnList text-center">
        <a class="btn btn-primary " id="font" href="#">
     Twitter</a>
      <a class="btn btn-primary" id="font" href="#">
     YouTube</a>
      <a class="btn btn-primary" href="#" id="font">
     FaceBook</a>
      <a class="btn btn-primary" id="font" href="#">
     GitHub</a>
      <a class="btn btn-primary" id="font" href="#">
     LinkedIn</a>
    </div>
       </div>
  <!--The secound page-->
  <div class="user-detail">
    <div class="row">
      <div class="col-md-6">
        
      </div>
      <div class="col-md-6">
        
      </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    