viewprofile.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Wizdwarfs</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Roboto+Mono:wght@500&display=swap"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/viewprofile.css">
</head>
<body>
<div class='main-dashboard-div'>
<nav class="navbar navbar-expand-md navbar-light custom-navbar" style=" background-color: #ededed;display: flex;">
<a class="navbar-brand" href="/">
<img src="/images/logo.png" alt="Logo" class="logo">
</a>
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown" style="position: absolute;left: 37pc;">
<ul class="navbar-nav">
<li class="nav-item active pl-3">
<a class="nav-link" href="/">
<i class="fa fa-home icon-light" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item dropdown pl-3">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-envelope" aria-hidden="true"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item active" href="/messages" title="Private. These message will dispear after few seconds."><i class="fa fa-envelope-o" aria-hidden="true"></i> Private </a>
<a class="dropdown-item" href="/messages" title="Gossips"> <i class="fa fa-comments-o" aria-hidden="true"></i> Public </a>
</div>
</li>
<li class="nav-item dropdown pl-3">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item active" href="/dashboard/profile" title="User will edit any information in the profile"><i class="fa fa-sliders" aria-hidden="true"></i>
Edit Your Profile
</a>
<a class="dropdown-item" href="/dashbaord/setting" title="User Preferences "><i class="fa fa-cogs" aria-hidden="true"></i>
Preferences
</a>
<a class="dropdown-item" href="/logout" title="Lock the account"><i class="fa fa-sign-out icon icon-light"
aria-hidden="true"></i>Logout</a>
</div>
</li>
</ul>
</div> -->
</nav>
</div>
<section class="card-section"style="position: relative;top: -40pc;left: 32pc;">
<div class="picture">
<img src="{{.Link}}" alt="profile-picture" style="position: absolute;top: 6pc;left: 6pc;">
</div>
<div class="card-body">
<div class="evolve" style="position: absolute;left: -1pc;top: 17pc;width: 50pc;height: 50pc;">
<h5 style="position: absolute;left: 13pc;top: 3pc;">{{.SocialEvolution}}</h5>
<div class="bio">
<span class="name" style="position: absolute;left: -1pc;top: 4pc;">{{.Name}}</span>
</div>
<div class="family">
<span class="last" style="position: absolute;left: 25pc;top: 4pc;">{{.Lastname}}</span>
</div>
<div class="address">
<span class="home" style="position: absolute;left: -1pc;top: 7pc;">{{.Address}} {{.City}} {{.State}}, {{.Zip}} </span>
</div>
<div class="email-address">
<span class="email" style="position: absolute;left: -1pc;top: 10pc;">{{.Email}}</span>
<i class="fa fa-envelope-o" aria-hidden="true" style="position: absolute;top: 10.2pc;left: 26pc;"></i>
</div>
<div class="phonenum">
<span class="phone" style="position: absolute;left: -1pc;top: 13pc;">{{.Phone}}</span>
<i class="fa fa-phone" aria-hidden="true" style="position: absolute;top: 13.2pc;left: 26pc;"></i>
</div>
<div class="university">
<span class="alumni" style="position: absolute;left: -1pc;top: 16pc;">{{.University}} </span>
</div>
<div class="programme">
<span class="degree-program" style="position: absolute;left: -1pc;top: 19pc;">{{.Circulum}}</span>
</div>
<div class="innovations">
<span class="published" style="position: absolute;left: 26pc;top: 19pc;">{{.Published}}</span>
</div>
<div class="citation-ref">
<span class="citation" style="position: absolute;left: -1pc;top: 22pc;">{{.Citation}}</span>
</div>
<div class="company-name">
<span class="company" style="position: absolute;left: -1pc;top: 25pc;">{{.Company}}</span>
</div>
<div class="company-join">
<span class="date" style="position: absolute;left: -1pc;top: 28pc;">{{.Date}}</span>
</div>
<div class="relation-status">
<span class="status" style="position: absolute;left: 26pc;top: 28pc;">{{.Status}}</span>
</div>
<div class="dreams">
<span class="achievements" style="position: absolute;left: -1pc;top: 31pc;width: 31pc;">{{.Achievements}}</span>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
</body>
</html>