Home page of linkedin

work in progress

by vaheed akhtar

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="main-id">
		<div class="product-body">
			<aside class="left-side">
      
     <div class="card">
      <img src="https://ak8.picdn.net/shutterstock/videos/1290388/thumb/1.jpg"                    alt="John" style="width:100%">
        <div class="avatar">
         <img alt="" src="https://www.w3schools.com/w3images/avatar2.png">
        </div>

      <h1>Milly </h1>
      <p class="title">@milley</p>
      <p>Harvard University</p>
      <hr />
      <p>followers</p>
      <div>
       
      </div>
</div>
  <div>
  <ul class="nav nav-tabs">
    <li class="active">
     <a data-toggle="tab" href="#scrollbody1">
     <i class="glyphicon glyphicon-heart"></i> 
     Status</a>
    </li>
    
    <li>
     <a data-toggle="tab" href="#scrollbody2">
     <i class="glyphicon glyphicon-comment"></i>
     Post Blog</a>
    </li>
  </ul>
  </div>
    </aside>
   
<div class="scroll-body">
<div id="scrollbody1" class="tab-pane fade">
      <!--     search box for whole website -->  
   <form>
    <div class="input-group">
      <input type="text" class="form-control" 
      placeholder="Search for news, articles, peoples and more"/>
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit">
         <i class="glyphicon glyphicon-search"></i>
        </button>
      </div>
    </div>
  </form>
<!--   search box end -->

<!-- --blogpost start here-- -->
<div class="blogstatus">
  <ul class="nav nav-tabs blog">
    <li class="active">
     <a data-toggle="tab" href="#status">
     <i class="glyphicon glyphicon-heart"></i> 
     Status</a>
    </li>
    
    <li>
   ...

CSS

.main-id{
	display: flex;
	width: 100%;
	overflow-y: auto;
  background-color:#e6e6e6;
}
.product-body{
	display: flex;}
.left-side{ 
width: 200px; background-color: white;margin:5px;
position:fixed; top: 0;left:0; height: auto;}

.right-side{ width: 200px;background-color: white;margin:5px;
;position: fixed;top:0; right:0; height:auto;}
.rec_logo{
height:30px;width:30px;  
}
.rec_cmpny_name{
  color:black; text-decoration:none; cursor:pointer
}



.scroll-body{width: calc(100% - 400px); margin-left: 200px; padding:10px;}

/* profile card */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.title {
  color: grey;
  font-size: 18px;
}

.card .avatar {
    position: relative;
    top: -50px;
    margin-bottom: -50px;
}

.card .avatar img {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,0.5);
}
.blogstatus{
  margin-top:20px;
  border-top: 2px solid lightgreen;
  background-color:#ffffff;
}
/* status form css */
.button{
  background-color: #f57f22;
    border: none;
    border-radius:5px;
    color: white;
    padding: 10px 30px;
    text-align: center;
    font-size: 16px;
    margin: 10px 2px;
    cursor: pointer;
    font-weight:600;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}



/* status form css end here */

.blog > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color:#f57f22;
    background-color:#ffffff;
    }
#post-prof-type{
 margin-top:40px;
 background:white;
}
.nav{
  background:#e6e6e6;
}
.posts > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color:#f57f22;
    background-color:#e6e6e6;
    }