diff --git a/css/style.css b/css/style.css
index 5899b61fe31271ffd7d8c93aec9aa25ae1f58bf8..b28a67ef4c2daa02d2e921fc6a893300272975ae 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,9 @@
-html{
+.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;
+}
+
+<!------------------------------------------------------------------ -->
+
diff --git a/home.html b/home.html
index c29dfeb365e9707ce47e8ac2ac5ab727059b3b73..5d4066ed447ea76b5459281f2f79714779f66d22 100644
--- a/home.html
+++ b/home.html
@@ -1,14 +1,19 @@
<!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 <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;"> 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>