<!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://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<style>
body {
background-color: #E5E7EB; /* Light moon background */
}
.profile-img {
width: 110px;
height: 110px;
object-fit: cover;
border-radius: 50%;
border: 3px solid #ffcc80;
background-color: #ff65cc;
}
.section-title {
color: #4e342e; /* Dark brown text color */
}
</style>
</head>
<body>
<div class="container mx-auto my-10">
<div class="main-body">
<div class="flex flex-wrap -mx-4">
<!-- Profile Sidebar -->
<div class="w-full lg:w-1/3 px-4">
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="text-center">
<img src="https://codezillaye.com/img/Content/avatar/avatar6.png" alt="Profile" class="profile-img mb-4 mx-auto">
<h4 class="text-xl font-semibold">Codezillaye</h4>
<p class="text-gray-500 mb-1">Frontend Developer</p>
<p class="text-gray-400 text-sm">Mazen, Moon</p>
<div class="mt-4">
<button class="bg-orange-400 text-white py-2 px-4 rounded-full mr-2">Follow</button>
<button class="border border-orange-400 text-orange-400 py-2 px-4 rounded-full">Message</button>
</div>
<hr class="my-4">
<ul class="list-none">
<li class="flex justify-between py-2">
<h6 class="text-gray-600">Website</h6>
<span class="text-gray-500">https://codezillaye.com</span>
</li>
<li class="flex justify-between py-2">
<h6 class="text-gray-600">Github</h6>
<span class="text-gray-500">example</span>
</li>
<li class="flex justify-between py-2">
<h6 class="text-gray-600">Twitter</h6>
<span class="text-gray-500">@example</span>
</li>
<li class="flex justify-between py-2">
<h6 class="text-gray-600">Instagram</h6>
<span class="text-gray-500">example</span>
</li>
<li class="flex justify-between py-2">
<h6 class="text-gray-600">Facebook</h6>
<span class="text-gray-500">example</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Profile Edit Form -->
<div class="w-full lg:w-2/3 px-4">
<div class="bg-white p-6 rounded-lg shadow-md">
<h4 class="section-title text-xl font-semibold mb-4">Edit Profile</h4>
<form>
<div class="flex flex-wrap mb-4">
<label class="w-full sm:w-1/4 text-gray-600">Full Name</label>
<div class="w-full sm:w-3/4">
<input type="text" class="form-control w-full border-gray-300 rounded-md" value="Codezillaye">
</div>
</div>
<div class="flex flex-wrap mb-4">
<label class="w-full sm:w-1/4 text-gray-600">Email</label>
<div class="w-full sm:w-3/4">
<input type="email" class="form-control w-full border-gray-300 rounded-md" value="[email protected]">
</div>
</div>
<div class="flex flex-wrap mb-4">
<label class="w-full sm:w-1/4 text-gray-600">Phone</label>
<div class="w-full sm:w-3/4">
<input type="tel" class="form-control w-full border-gray-300 rounded-md" value="(123) 456-7890">
</div>
</div>
<div class="flex flex-wrap mb-4">
<label class="w-full sm:w-1/4 text-gray-600">Mobile</label>
<div class="w-full sm:w-3/4">
<input type="tel" class="form-control w-full border-gray-300 rounded-md" value="(098) 765-4321">
</div>
</div>
<div class="flex flex-wrap mb-4">
<label class="w-full sm:w-1/4 text-gray-600">Address</label>
<div class="w-full sm:w-3/4">
<input type="text" class="form-control w-full border-gray-300 rounded-md" value="Somewhere, Earth">
</div>
</div>
<div class="flex justify-end">
<input type="button" class="bg-orange-400 text-white py-2 px-4 rounded-full" value="Save Changes">
</div>
</form>
</div>
<!-- Project Status -->
<div class="mt-6">
<div class="bg-white p-6 rounded-lg shadow-md">
<h4 class="section-title text-xl font-semibold mb-4">Project Status</h4>
<p>Web Design</p>
<div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
<div class="bg-blue-500 h-1.5 rounded-full" style="width: 80%"></div>
</div>
<p>Website Markup</p>
<div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
<div class="bg-red-500 h-1.5 rounded-full" style="width: 72%"></div>
</div>
<p>One Page</p>
<div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
<div class="bg-green-500 h-1.5 rounded-full" style="width: 89%"></div>
</div>
<p>Mobile Template</p>
<div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
<div class="bg-yellow-500 h-1.5 rounded-full" style="width: 55%"></div>
</div>
<p>Backend API</p>
<div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
<div class="bg-teal-500 h-1.5 rounded-full" style="width: 66%"></div>
</div>
</div>
</div> <!-- End of Project Status -->
</div>
</div>
</div>
</div>
</body>
</html>