Finished public work

Build me an example A Iemployee profile page using HTML

shipped in 18spublished July 20, 2026type Document0 files

watch.cubicrew.com/w/build-me-an-example-a-iemployee-profile-page-using-html-d7a95d2d3aOpen live ↗

Example AI Employee Profile Page

HTML file

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Employee Profile</title>
<style>:root {
--bg: #0f172a;
--panel: #111827;
--panel-2: #1f2937;
--text: #e5e7eb;
--muted: #9ca3af;
--accent: #60a5fa;
--accent-2: #34d399;
--border: rgba(255,255,255,0.08);
--shadow: 0 20px 50px rgba(0,0,0,0.35);
}

{

box-sizing: border-box;
}

body {
margin: 0;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background:
radial-gradient(circle at top left, rgba(96,165,250,0.18), transparent 30%),
radial-gradient(circle at top right, rgba(52,211,153,0.12), transparent 28%),
linear-gradient(180deg, #0b1120 0%, var(--bg) 100%);
color: var(--text);
min-height: 100vh;
padding: 32px;
}.page {
max-width: 1100px;
margin: 0 auto;
}.header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}.header h1 {
margin: 0;
font-size: clamp(28px, 4vw, 42px);
letter-spacing: -0.03em;
}.header p {
margin: 6px 0 0;
color: var(--muted);
}.status {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(52,211,153,0.12);
color: #a7f3d0;
border: 1px solid rgba(52,211,153,0.3);
padding: 10px 14px;
border-radius: 999px;
font-weight: 600;
white-space: nowrap;
}.status::before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent-2);
box-shadow: 0 0 12px rgba(52,211,153,0.7);
}.grid {
display: grid;
grid-template-columns: 320px 1fr;
gap: 24px;
}.card {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
border: 1px solid var(--border);
border-radius: 24px;
box-shadow: var(--shadow);
overflow: hidden;
}.profile {
padding: 28px;
}.avatar {
width: 96px;
height: 96px;
border-radius: 24px;
background: linear-gradient(135deg, #60a5fa, #34d399);
display: grid;
place-items: center;
font-size: 40px;
font-weight: 800;
color: #0f172a;
margin-bottom: 18px;
}.name {
margin: 0;
font-size: 28px;
line-height: 1.1;
}.role {
margin: 8px 0 0;
color: var(--muted);
font-size: 15px;
}.meta {
display: grid;
gap: 12px;
margin-top: 24px;
}.meta-item {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 16px;
padding: 14px;
}.meta-label {
display: block;
color: var(--muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 4px;
}.meta-value {
font-weight: 600;
}.tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}.tag {
padding: 8px 12px;
border-radius: 999px;
background: rgba(96,165,250,0.12);
border: 1px solid rgba(96,165,250,0.22);
color: #bfdbfe;
font-size: 13px;
}.main {
display: grid;
gap: 24px;
}.section {
padding: 24px;
}.section h2 {
margin: 0 0 14px;
font-size: 20px;
}.section p {
margin: 0;
color: var(--muted);
line-height: 1.7;
}.stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 20px;
}.stat {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 18px;
padding: 18px;
}.stat strong {
display: block;
font-size: 28px;
margin-bottom: 6px;
color: white;
}.stat span {
color: var(--muted);
font-size: 14px;
}.list {
display: grid;
gap: 12px;
margin-top: 18px;
}.item {
display: flex;
justify-content: space-between;
gap: 16px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 16px;
padding: 14px 16px;
align-items: center;
}.item-title {
font-weight: 600;
}.item-sub {
color: var(--muted);
font-size: 14px;
margin-top: 4px;
}.badge {
padding: 6px 10px;
border-radius: 999px;
background: rgba(52,211,153,0.12);
color: #a7f3d0;
border: 1px solid rgba(52,211,153,0.25);
font-size: 13px;
white-space: nowrap;
}.timeline {
position: relative;
margin-top: 18px;
padding-left: 18px;
display: grid;
gap: 16px;
}.timeline::before {
content: '';
position: absolute;
left: 6px;
top: 6px;
bottom: 6px;
width: 2px;
background: rgba(255,255,255,0.12);
}.step {
position: relative;
padding: 0 0 0 18px;
}.step::before {
content: '';
position: absolute;
left: -1px;
top: 6px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(96,165,250,0.14);
}.step h3 {
margin: 0;
font-size: 16px;
}.step p {
margin-top: 6px;
}

@media (max-width: 900px) {.grid {
grid-template-columns: 1fr;
}.stats {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="page">
<div class="header">
<div>
<h1>AI Employee Profile</h1>
<p>Example profile page for an AI team member or digital worker.</p>
</div>
<div class="status">Online and Available</div>
</div>

<div class="grid">
<aside class="card profile">
<div class="avatar">A</div>
<h2 class="name">Ava Nova</h2>
<p class="role">AI Operations Specialist</p>

<div class="meta">
<div class="meta-item">
<span class="meta-label">Department</span>
<div class="meta-value">Automation & Support</div>
</div>
<div class="meta-item">
<span class="meta-label">Primary Focus</span>
<div class="meta-value">Task routing, reporting, and workflow assistance</div>
</div>
<div class="meta-item">
<span class="meta-label">Working Hours</span>
<div class="meta-value">24/7</div>
</div>
<div class="meta-item">
<span class="meta-label">Location</span>
<div class="meta-value">Cloud Workspace</div>
</div>
</div>

<div class="tags">
<span class="tag">Scheduling</span>
<span class="tag">Analytics</span>
<span class="tag">Customer Support</span>
<span class="tag">Knowledge Search</span>
</div>
</aside>

<main class="main">
<section class="card section">
<h2>About</h2>
<p>
Ava Nova is a sample AI employee designed to help with repeatable business tasks,
summarize information, organize requests, and support teams with fast, reliable outputs.
This page shows a simple profile layout that can be adapted for internal tools or demos.
</p>

<div class="stats">
<div class="stat">
<strong>98%</strong>
<span>Task completion accuracy</span>
</div>
<div class="stat">
<strong>1.2s</strong>
<span>Average response time</span>
</div>
<div class="stat">
<strong>500+</strong>
<span>Requests handled per day</span>
</div>
</div>
</section>

<section class="card section">
<h2>Core Skills</h2>
<div class="list">
<div class="item">
<div>
<div class="item-title">Workflow Automation</div>
<div class="item-sub">Routes requests, creates summaries, and reduces manual work.</div>
</div>
<div class="badge">Expert</div>
</div>
<div class="item">
<div>
<div class="item-title">Data Organization</div>
<div class="item-sub">Turns messy input into clean tables, notes, and action items.</div>
</div>
<div class="badge">Advanced</div>
</div>
<div class="item">
<div>
<div class="item-title">Support Assistance</div>
<div class="item-sub">Helps answer common questions and draft helpful responses.</div>
</div>
<div class="badge">Advanced</div>
</div>
</div>
</section>

<section class="card section">
<h2>Recent Activity</h2>
<div class="timeline">
<div class="step">
<h3>Morning briefing prepared</h3>
<p>Compiled team priorities, deadlines, and key updates into one summary.</p>
</div>
<div class="step">
<h3>Support queue organized</h3>
<p>Grouped incoming requests by topic and flagged urgent items for review.</p>
</div>
<div class="step">
<h3>Weekly report drafted</h3>
<p>Created a clean draft with metrics, highlights, and next-step recommendations.</p>
</div>
</div>
</section>
</main>
</div>
</div>
</body>
</html>
```

📄 Documentwatch.cubicrew.com/w/build-me-an-example-a-iemployee-profile-page-using-html-d7a95d2d3a