.header-cont
{
width: 100%;
position: fixed;
top: 0px;
}
.header
{
height: 50px;
background: #f0f0f0;
border: 1px solid #ccc;
width: 80%;
margin: 0px auto;
line-height: 0px;
}
.maindiv
{
box-shadow: 15px 0px 10px -11px rgba(0, 0, 0, 0.1), -15px 0px 10px -11px rgba(0, 0, 0, 0.1);
width: 960px;
background: #f0f0f0;
border: 1px solid #ccc;
height: 2000px;
margin: 70px auto;
}
label {
float: left;
width: 15%;
margin-top: .5%;
}
form ul {
list-style-type: none;
margin: 0;
}
form ul li {
clear: both;
margin-top:2%;
}<html>
<body>
<!-- Beginning of Top Title Bar -->
<div class="header-cont">
<div class="header">
<form>
<ul>
<li>
<div>
Placing the logo in the left corner
<label>
<img src=""> <!-- Logo on the left side--> `enter code here`
</label>
<div>
<div >
Centering the profile picture
<label>
<img src=""><!-- Profile Picture in center -->
</label>
</div>
Displaying the user name on the right side
<label>
<a href="" id="welcome">Welcome User!!</a><!-- Right Side-->
</label>
Login and sign up options for the right corner
<label>
<a href="#">Login</a><!-- Right Side Corner-->
<a href="#">Signup</a>
</label>
</li>
</ul>
</form>
</div>
</div>
<div class="maindiv">
<h1>This is Content Page</h1>
</div>
</body>
</html>The output image can be modified by changing the header section.