File size: 2,273 Bytes
cf6c0e0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Settings</title></head>
<body style="margin:0; background:#f9fafb; display:flex">
  <aside style="width:220px; border-right:1px solid #e5e7eb">
    <div style="padding:0 20px 24px">
      <div style="display:flex; gap:10px">
        <div style="width:36px; border-radius:50%; color:#fff; align-items:center; font-weight:700">A</div>
        <div><p style="margin:0; font-weight:600">Amal Joe</p><p style="margin:0; color:#888">Pro Plan</p></div>
      </div>
    </div>
    <nav style="padding:12px 0">
      <a style="display:block; font-size:14px; background:#ede9fe; text-decoration:none">Profile</a>
      <a style="display:block; font-size:14px; text-decoration:none">Security</a>
      <a style="display:block; font-size:14px; text-decoration:none">Notifications</a>
      <a style="display:block; font-size:14px; text-decoration:none">Billing</a>
      <a style="display:block; font-size:14px; text-decoration:none">Integrations</a>
    </nav>
  </aside>
  <main style="flex:1">
    <h1 style="font-size:22px">Profile Settings</h1>
    <p style="color:#888; margin:0 0 32px">Manage your personal information.</p>
    <div style="background:#fff; border-radius:10px; max-width:560px">
      <div style="display:flex; margin-bottom:24px">
        <div style="flex:1"><label style="font-size:12px; color:#444; margin-bottom:6px">First Name</label><input value="Amal" style="width:100%; padding:9px 12px; border-radius:6px"></div>
        <div style="flex:1"><label style="font-size:12px; color:#444; margin-bottom:6px">Last Name</label><input value="Joe" style="width:100%; padding:9px 12px; border-radius:6px"></div>
      </div>
      <label style="font-size:12px; color:#444; margin-bottom:6px">Email</label>
      <input value="amaljoe88@gmail.com" style="width:100%; padding:9px 12px; border-radius:6px; margin-bottom:24px">
      <label style="font-size:12px; color:#444; margin-bottom:6px">Bio</label>
      <textarea rows="3" style="width:100%; padding:9px 12px; border-radius:6px; margin-bottom:24px">Building AI tools for developers.</textarea>
      <button style="padding:10px 24px; color:#fff; border-radius:6px; cursor:pointer">Save Changes</button>
    </div>
  </main>
</body>
</html>