Skip to content
Snippets Groups Projects
Commit 5554d171 authored by Sabhariesh's avatar Sabhariesh
Browse files

added user profile view

parent f310bb4f
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
css/style.css
+ 34
− 11
View file @ 5554d171
.container-fluid{
background-color: #eeeeee;
}
html {
background-color: #eeeeee;
;
}
#hodor-logo {
......@@ -13,12 +16,12 @@ html{
width: auto;
}
#sidenav a {
#sidenavbar a {
position: absolute;
left: -232px;
left: -225px;
transition: 0.3s;
padding: 15px;
width: 250px;
width: 275px;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0 ;
......@@ -28,31 +31,31 @@ html{
font-family: 'Titillium Web', sans-serif;
}
#sidenav a img {
#sidenavbar a img {
border-radius: 50%;
width: 50px;
}
#sidenav>a>i {
#sidenavbar>a>i {
position: absolute;
right: 10px;
color: #eceff1;
}
#sidenav>#profile>i {
#sidenavbar>#profile>i {
top: 50%;
}
#sidenav>#docs>a {
#sidenavbar>#docs>a {
}
#sidenav>#docs>i {
#sidenavbar>#docs>i {
right: 18px;
}
#sidenav a:hover {
#sidenavbar a:hover {
left: 0;
background-color: #03a9f4;
}
......@@ -85,3 +88,23 @@ html{
#logout {
bottom: 5%;
}
#modal-header img {
border-radius: 50%;
width: 75px;
}
.modalhead {
font-size: 60px !important;
}
.tab-content h3{
font-size: 20px;
}
.tab-content p{
font-size: 15px;
}
<!------------------------------------------------------------------ -->
home.html
+ 61
− 4
View file @ 5554d171
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<img src="img/hodor-logo.png" id="hodor-logo">
</head>
<body>
<div id="sidenav" class="sidenav">
<a href="#" id="profile"><img src="img/img_avatar.png" alt="Avatar" ><br>Name<i class="fa fa-user fa-lg"></i></a><br><br>
<div class="container-fluid">
<img src="img/hodor-logo2.png" id="hodor-logo">
<div id="sidenavbar" class="sidenavbar">
<a href="#" id="profile" data-toggle="modal" data-target="#profile-modal"><img src="img/img_avatar.png" alt="Avatar"><br>Sabhariesh<i class="fa fa-user fa-lg"></i></a><br><br>
<a href="#" id="dashboard">Dashboard<i class="fa fa-home fa-lg"></i></a>
<a href="#" id="learn">Learn<i class="fa fa-laptop fa-lg"></i></a>
<a href="#" id="leaderboard">Leaderboard<i class="fa fa-bar-chart fa-lg"></i></a>
......@@ -16,7 +21,59 @@
<a href="#" id="docs">Documentation & help &nbsp;&nbsp;&nbsp;<i class="fa fa-info fa-lg"></i></a><br>
<a href="#" id="logout">Logout<i style="color:#d9534f !important;" class="fa fa-power-off fa-lg"></i></a>
</div>
<div id="profile-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modalhead" style="text-align: center">
<img src="img/img_avatar.png" alt="Avatar" style="border-radius: 50%;width: 75px;">&nbsp;&nbsp;&nbsp;Name</div>
</div>
<div class="modal-body">
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="pill" href="#home">View Profile</a></li>
<li><a data-toggle="pill" href="#menu2">Edit Profile</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>Name</h3>
<p>Sabhariesh</p>
<h3>Username</h3>
<p>frozenfire</p>
<h3>Email-ID</h3>
<p>sabbhy1996@gmail.com</p>
<h3>Github</h3>
<p>@shariharasudan</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
<div id="menu2" class="tab-pane fade">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="uname">Username</label>
<input type="text" class="form-control" id="uname">
</div> <div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<label for="rpwd"> Re-enter Password:</label>
<input type="password" class="form-control" id="rpwd">
</div>
<button type="submit" class="btn btn-success" style="align-self: center">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment