Skip to content
Snippets Groups Projects
Commit d19e18c9 authored by adyanf's avatar adyanf
Browse files

menambah halaman edit profile

parent 1157d451
Branches
No related merge requests found
Hide whitespace changes
Inline Side-by-side
css/profile.css 0 → 100644
+ 181
− 0
View file @ d19e18c9
body {
font-family: 'Roboto', sans-serif;
margin-top: 40px;
}
.apps {
width: 500px;
height: 480px;
margin: 0 auto;
background: white;
border: 10px solid #02702C;
border-radius: 60px;
}
.heading {
padding: 20px 20px 0 20px;
}
.edit-img {
padding: 0 20px 20px 20px;
display: flex;
}
.profile-img {
width: 40%;
width: 150px;
display: inline-block;
}
.update-img {
display: inline-block;
padding: 30px;
}
.thumbnail {
border: 1px solid black;
max-width: 100%;
height: auto;
}
.edit-data {
padding: 0 20px;
font-size: 1.3em;
}
.edit-data .form-group {
margin-bottom: 3px;
}
.edit-data .form-group label {
width: 40%;
display: inline-block;
}
.edit-data .form-group .switch {
width: 12%;
float: right;
margin-right: 20px;
}
.edit-data .form-group input {
width: 53%;
}
.edit-data .form-group input[type=text], .edit-data .form-group input[type=password] {
height: 30px;
border: 1px solid gray;
padding-left: 10px;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 28px;
}
/* Hide default HTML checkbox */
.switch input {
display:none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #117D11;
}
input:focus + .slider {
box-shadow: 0 0 1px #117D11;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.submit {
margin-top: 30px;
}
.submit input {
border: 1px solid black;
border-radius: 5px;
padding: 5px 15px;
}
.submit .cancel {
background: red;
float: left;
}
.submit .save {
background: green;
float: right;
margin-right: 15px;
}
.uploadFile {
float: left;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 0 10px;
float: right;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.fileUpload span {
font-size: 0.5em;
background: #D7D7D7;
padding: 5px;
border: 1px solid gray;
border-bottom: 1px solid gray;
}
\ No newline at end of file
editprofile.html 0 → 100644
+ 50
− 0
View file @ d19e18c9
<!DOCTYPE html>
<html>
<head>
<title>Edit Profile</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/profile.css">
</head>
<body>
<div class="apps">
<div class="heading">
<h3>EDIT PROFILE INFORMATION</h3>
</div>
<div class="edit-img">
<div class="profile-img">
<img src="img/profile-placeholder.png" alt="profile image" class="thumbnail">
</div>
<div class="update-img">
<h4>Update profile picture</h4>
<input id="uploadFile" type="text" disabled="disabled">
<div class="fileUpload">
<span>Browse...</span>
<input id="uploadBtn" type="file" class="upload">
</div>
</div>
</div>
<div class="edit-data">
<div class="form-group">
<label for="name">Your Name</label>
<input id="name" type="text" name="name" placeholder="your name" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input id="phone" type="text" name="phone" placeholder="your phone" required>
</div>
<div class="form-group">
<label for="driver">Status Driver</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="submit">
<input type="submit" class="cancel" value="BACK">
<input type="submit" class="save" value="SAVE">
</div>
</div>
</div>
<script src="js/profile.js"></script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment