<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Edit</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #FFE5B4; /* Warm background color */
}
.profile-edit {
background-color: #fff3e0; /* Slightly lighter warm background for the form */
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.section-title {
background-color: #ffcc80; /* Section title background color */
padding: 10px;
border-radius: 5px;
margin-bottom: 15px;
color: #4e342e; /* Dark brown text color */
}
.form-control {
margin-bottom: 15px;
}
.btn-primary {
background-color: #ff8a65; /* Warm button color */
border: none;
}
.btn-primary:hover {
background-color: #ff7043;
}
</style>
</head>
<body>
<div class="container my-5">
<div class="profile-edit">
<h2 class="text-center section-title">Edit Profile</h2>
<form>
<!-- Personal Data Section -->
<h4 class="section-title">Personal Data</h4>
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your full name">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email address">
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" class="form-control" id="phone" placeholder="Enter your phone number">
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="Enter your address">
</div>
<!-- Skills Section -->
<h4 class="section-title">Skills</h4>
<div class="form-group">
<label for="skills">Your Skills</label>
<textarea class="form-control" id="skills" rows="5" placeholder="List your skills here"></textarea>
</div>
<div class="form-group">
<label for="new-skill">Add a New Skill</label>
<input type="text" class="form-control" id="new-skill" placeholder="Enter a new skill">
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-primary btn-block">Save Changes</button>
</form>
</div>
</div>
</body>
</html>