PageRenderTime 37ms CodeModel.GetById 13ms app.highlight 14ms RepoModel.GetById 2ms app.codeStats 0ms

/blogen/profile.html

https://bitbucket.org/Trulsh/personal-bootstrap-projects
HTML | 180 lines | 164 code | 7 blank | 9 comment | 0 complexity | d472c1295580cddf845da97bf17c55ed MD5 | raw file
  1<!DOCTYPE html>
  2<html lang="en">
  3  <head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7    <link rel="stylesheet" href="style.compressed.css" />
  8    <title>Blogen Admin Area</title>
  9  </head>
 10  <body>
 11    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
 12      <div class="container">
 13        <a href="index.html" class="navbar-brand">Blogen</a>
 14        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
 15          <span class="navbar-toggler-icon"></span>
 16        </button>
 17        <div class="collapse navbar-collapse" id="navbarNav">
 18          <ul class="navbar-nav">
 19            <li class="nav-item px-2">
 20              <a href="index.html" class="nav-link">Dashboard</a>
 21            </li>
 22            <li class="nav-item px-2">
 23              <a href="posts.html" class="nav-link">Posts</a>
 24            </li>
 25            <li class="nav-item px-2">
 26              <a href="categories.html" class="nav-link">Categories</a>
 27            </li>
 28            <li class="nav-item px-2">
 29              <a href="users.html" class="nav-link">Users</a>
 30            </li>
 31          </ul>
 32          <ul class="navbar-nav ml-auto">
 33            <li class="nav-item dropdown mr-3">
 34              <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
 35                <i class="fa fa-user"></i> Welcome Andrea
 36              </a>
 37              <div class="dropdown-menu">
 38                <a href="profile.html" class="dropdown-item">
 39                  <i class="fa fa-user-circle"></i> Profile
 40                </a>
 41                <a href="settings.html" class="dropdown-item">
 42                  <i class="fa fa-gear"></i> Settings
 43                </a>
 44              </div>
 45            </li>
 46            <li class="nav-item">
 47              <a href="login.html" class="nav-link">
 48                <i class="fa fa-user-times"></i> Logout
 49              </a>
 50            </li>
 51          </ul>
 52        </div>
 53      </div>
 54    </nav>
 55
 56    <!-- HEADER -->
 57    <header id="main-header" class="py-2 bg-primary text-white">
 58      <div class="container">
 59        <div class="row">
 60          <div class="col-md-6">
 61            <h1><i class="fa fa-user"></i> Edit Profile</h1>
 62          </div>
 63        </div>
 64      </div>
 65    </header>
 66
 67    <!-- ACTIONS -->
 68    <section id="actions" class="py-4 mb-4 bg-light">
 69      <div class="container">
 70        <div class="row">
 71          <div class="col-md-3 mr-auto">
 72            <a href="index.html" class="btn btn-light btn-block">
 73              <i class="fa fa-arrow-left"></i> Back to Dashboard
 74            </a>
 75          </div>
 76          <div class="col-md-3">
 77            <a href="#" class="btn btn-success btn-block" data-toggle="modal" data-target="#passwordModal">
 78              <i class="fa fa-lock"></i> Change Password
 79            </a>
 80          </div>
 81          <div class="col-md-3">
 82            <a href="#" class="btn btn-warning btn-block">
 83              <i class="fa fa-remove "></i> Delete Account
 84            </a>
 85          </div>
 86        </div>
 87      </div>
 88    </section>
 89
 90    <!-- PROFILE EDIT -->
 91    <section id="profile">
 92      <div class="container">
 93        <div class="row">
 94          <div class="col-md-9">
 95            <div class="card">
 96              <div class="card-header">
 97                <h4>Edit Profile</h4>
 98              </div>
 99                <div class="card-body">
100                  <form>
101                    <div class="form-group">
102                      <label for="name">Name</label>
103                      <input type="text" class="form-control" value="Andrea">
104                    </div>
105                    <div class="form-group">
106                      <label for="email">Email</label>
107                      <input type="text" class="form-control" value="test@test.com">
108                    </div>
109                    <div class="form-group">
110                      <label for="body">Body</label>
111                      <textarea name="editor1" class="form-control">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat reiciendis eius impedit, sed, magnam dolores ut repudiandae a eveniet sunt, sequi cupiditate optio modi neque? Animi est ratione dignissimos deleniti?</textarea>
112                    </div>
113                  </form>
114                </div>
115            </div>
116          </div>
117          <div class="col-md-3">
118            <h3>Your Avatar</h3>
119            <img src="img/avatar.png" alt="avatar" class="d-block img-fluid mb-3">
120            <button class="btn btn-primary btn-block">Edit Image</button>
121            <button class="btn btn-danger btn-block">Delete Image</button>
122          </div>
123        </div>
124      </div>
125    </section>
126
127    <!-- FOOTER -->
128    <footer id="main-footer" class="bg-dark text-white mt-5 p-5">
129      <div class="container">
130        <div class="row">
131          <div class="col">
132            <p class="lead text-center">Copyright &copy; 2018 Blogen</p>
133          </div>
134        </div>
135      </div>
136    </footer>
137
138
139    <!-- PASSWORD MODAL -->
140    <div class="modal fade" id="passwordModal">
141      <div class="modal-dialog modal-lg">
142        <div class="modal-content">
143          <div class="modal-header bg-primary text-white">
144            <h5 class="modal-title">Change Password</h5>
145            <button class="close" data-dismiss="modal"><span>&times;</span></button>
146          </div>
147          <div class="modal-body">
148            <form>
149              <div class="form-group">
150                <label for="password">Password</label>
151                <input type="password" class="form-control">
152              </div>
153              <div class="form-group">
154                <label for="password">Confirm Password</label>
155                <input type="password" class="form-control">
156              </div>
157            </form>
158          </div>
159          <div class="modal-footer">
160            <button class="btn btn-secondary" data-dismiss="modal">Close</button>
161            <button class="btn btn-primary" data-dismiss="modal">Update Password</button>
162          </div>
163        </div>
164      </div>
165    </div>
166
167   <!-- Bootstrap core JavaScript
168   ================================================== -->
169   <!-- Placed at the end of the document so the pages load faster -->
170   <script src="js/jquery-3.3.1.min.js"></script>
171   <script src="js/popper.min.js"></script>
172   <script src="js/bootstrap.min.js"></script>
173   <script src="https://use.fontawesome.com/226dbaa6de.js"></script>
174   <script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
175   <script>
176			CKEDITOR.replace( 'editor1' );
177	 </script>
178   <!--<script src="../../../../assets/js/vendor/holder.min.js"></script>-->
179 </body>
180</html>