added edit-profile css and html

3aaf0282 · Girvandi Ilyas · 231fee0f · 3aaf0282 · 3aaf0282
Commit 3aaf0282 authored 7 years ago by Girvandi Ilyas
--- a/css/edit-profile.css
+++ b/css/edit-profile.css
+.wrapper {
+  width : 100%;
+}
+
+.edit-image {
+  font-size: 0;
+}
+
+.div-profile-image {
+  width : 50%;
+  display: inline-block;
+  text-align: center;
+}
+
+.profile-image {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.browse-image {
+  display: inline-block;
+  width : 50%;
+  font-size : 22;
+}
+
+.edit-data{
+  font-size: 0;
+  margin: 10px 0;
+}
+
+.edit-data input[type="text"] {
+  width: 50%;
+  outline: 0;
+}
+
+.form-label {
+  width: 50%;
+  display: inline-block;
+  font-size: 20px;
+}
+
+
+.checkbox {
+  width: 50%;
+  display: inline-block;
+  text-align: right;
+}
+
+.checkbox input {
+  margin: 0;
+  transform: scale(1.5);
+  -ms-transform: scale(1.5);
+  -webkit-transform: scale(1.5);
+}
+
+.back {
+  float: left;
+  background-color: #d50027;
+  color: black;
+  border-color: black;
+  border-radius: 5px;
+  padding: 5px 12px;
+  text-decoration: none;
+  border-width: 1px;
+  border-style: outset;
+  font: 13.3333px Serif;
+}
+
+.save {
+  float: right;
+  background-color: #8BBd3c;
+  color: black;
+  border-color: black;
+  border-radius: 5px;
+  font: 13.3333px Serif;
+  padding: 5px 12px;
+  border-width: 1px;
+}
--- a/view/edit-profile.html
+++ b/view/edit-profile.html
+<html>
+<head>
+  <link href="../../css/primary.css" type="text/css" rel="stylesheet">
+  <link href="../../css/edit-profile.css" type="text/css" rel="stylesheet">
+</head>
+<body>
+<div class="wrapper">
+<h1>EDIT PROFILE INFORMATION</h1>
+<form action="#" method="post">
+  <div class="edit-image">
+    <div class="div-profile-image">
+      <img src="../../img/pikachu.jpg" class="profile-image">
+    </div>
+    <div class="browse-image">
+      <label>Update profile picture</label>
+      <br />
+      <br />
+      <input type="file" name="image-file" value="browse..">
+    </div>
+  </div>
+
+  <div>
+    <div class="edit-data">
+      <label class="form-label">Your Name</label>
+      <input type="text" placeholder="Enter your name.."> 
+    </div>
+    <div class="edit-data">
+      <label class="form-label">Phone</label>
+      <input type="text" placeholder="Enter your phone number.."> 
+    </div>
+    <div class="edit-data">
+      <label class="form-label">Status Driver</label>
+      <div class="checkbox">
+          <input type="checkbox">
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <div>
+      <a class="back" href="dashboard.php">BACK</a>
+      <input type="submit" value="SAVE" class="save">
+    </div>
+  </div>
+
+</form>
+</div>
+</body>
+</html>
\ No newline at end of file