<!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"> <title>HODOR | Home</title> </head> <body> <div class="container-fluid"> <img src="img/hodor-logo4.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="dashboard.html" 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> <a href="#" id="ctf">Capture the Flag<i class="fa fa-flag fa-lg"></i></a> <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>