<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thumb</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #e2e8f0;
font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.vk-header {
background: #fff;
border-bottom: 1px solid #c8cdd5;
height: 48px;
display: flex;
align-items: center;
padding: 0 16px;
gap: 12px;
min-width: 900px;
}
.vk-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.vk-logo-text { font-size: 18px; font-weight: 700; color: #000; letter-spacing: -0.3px; }
.vk-search { flex: 0 0 240px; position: relative; margin-left: 120px; }
.vk-search input {
width: 100%; height: 34px; border: none; border-radius: 8px;
padding: 0 12px 0 32px; font-size: 13px; color: #2c2d2e;
background: #f2f3f5; outline: none; font-family: inherit;
}
.vk-search input::placeholder { color: #818c99; }
.vk-search input:focus { background: #fff; }
.vk-search-icon {
position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; color: #818c99; pointer-events: none;
}
.spacer { flex: 1; }
.vk-icons { display: flex; align-items: center; gap: 4px; }
.vk-icon-btn {
position: relative; width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: #818c99; transition: background 0.15s, color 0.15s;
}
.vk-icon-btn:hover { background: #f2f3f5; color: #2c2d2e; }
.vk-icon-btn svg { width: 24px; height: 24px; }
.vk-badge {
position: absolute; top: 4px; right: 4px; background: #ff3347; color: #fff;
font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
border-radius: 8px; display: flex; align-items: center; justify-content: center;
padding: 0 3px; line-height: 1; border: 1.5px solid #fff;
}
.vk-profile {
display: flex; align-items: center; gap: 8px; cursor: pointer;
padding: 4px 8px; border-radius: 8px; transition: background 0.15s;
text-decoration: none; color: inherit;
}
.vk-profile:hover { background: #f2f3f5; }
.vk-profile-name { font-size: 13px; font-weight: 500; color: #2c2d2e; white-space: nowrap; }
.vk-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #c4c8cc; }
.vk-chevron { color: #818c99; flex-shrink: 0; }
/* Body */
.vk-body { display: flex; min-height: calc(100vh - 48px); }
/* Sidebar */
.vk-sidebar {
width: 240px; background: #e2e8f0; padding: 20px 12px 20px 16px;
display: flex; flex-direction: column; flex-shrink: 0;
}
.sidebar-title { font-size: 20px; font-weight: 700; color: #2c2d2e; margin-bottom: 18px; padding-left: 4px; }
.sidebar-profile {
display: flex; align-items: center; gap: 10px; padding: 8px;
border-radius: 10px; text-decoration: none; transition: background 0.15s; margin-bottom: 4px;
}
.sidebar-profile:hover { background: #d4d9e1; }
.sidebar-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid #2787f5; }
.sidebar-avatar svg { display: block; width: 100%; height: 100%; }
.sidebar-profile-info { display: flex; flex-direction: column; gap: 2px; }
.sidebar-profile-name { font-size: 13px; font-weight: 600; color: #2c2d2e; line-height: 1.2; }
.sidebar-profile-sub { font-size: 11px; color: #818c99; line-height: 1.2; }
.sidebar-divider { height: 1px; background: #c8cdd5; margin: 12px 0; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-item {
display: flex; align-items: center; gap: 12px; padding: 10px 12px;
border-radius: 10px; text-decoration: none; color: #2c2d2e; font-size: 14px;
font-weight: 500; transition: background 0.15s;
}
.sidebar-nav-item:hover { background: #d4d9e1; }
.sidebar-see-more {
display: flex; align-items: center; justify-content: center; gap: 6px;
width: 100%; padding: 10px; border-radius: 10px; border: none;
background: #d4d9e1; color: #2c2d2e; font-size: 13px; font-weight: 600;
cursor: pointer; font-family: inherit; transition: background 0.15s; margin-top: 4px;
}
.sidebar-see-more:hover { background: #c8cdd5; }
/* Main */
.vk-main { flex: 1; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
/* Stories */
.stories-bar {
background: #fff;
border-radius: 14px;
padding: 16px 20px;
display: flex;
gap: 20px;
align-items: flex-start;
width: 100%;
transform: translateX(-179.5px);
max-width: 415px;
justify-content: center;
}
.story-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
/* Plain story (no ring) */
.story-plain-wrap {
width: 80px; height: 80px; border-radius: 50%;
position: relative; flex-shrink: 0; overflow: visible;
}
.story-plain-wrap > svg { display: block; width: 80px; height: 80px; border-radius: 50%; }
/* Plus badge — bottom right, OUTSIDE the circle */
.story-plus {
position: absolute;
bottom: -2px;
right: -2px;
width: 20px;
height: 20px;
background: #e4e6eb;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
z-index: 2;
}
/* Ring story */
.story-ring-wrap {
width: 80px; height: 80px; border-radius: 50%;
padding: 2px;
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
position: relative; flex-shrink: 0;
}
.story-inner {
width: 100%; height: 100%; border-radius: 50%;
background: #111; border: 2px solid #fff;
overflow: hidden;
}
.story-inner svg { display: block; width: 100%; height: 100%; }
.story-name { font-size: 12px; color: #2c2d2e; font-weight: 400; text-align: center; }
</style>
</head>
<body>
<header class="vk-header">
<a class="vk-logo" href="#"><span class="vk-logo-text">Thumb</span></a>
<div class="vk-search">
<svg class="vk-search-icon" viewBox="0 0 16 16" fill="none">
<circle cx="6.5" cy="6.5" r="5" stroke="#818c99" stroke-width="1.5"/>
<path d="M10.5 10.5L14 14" stroke="#818c99" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<input type="text" placeholder="Search" />
</div>
<div class="spacer"></div>
<div class="vk-icons">
<div class="vk-icon-btn">
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V11c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" fill="currentColor"/>
</svg>
<span class="vk-badge">17</span>
</div>
</div>
<a class="vk-profile" href="#">
<span class="vk-profile-name">Ksenia</span>
<div class="vk-avatar">
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="av" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e97c3c"/>
<stop offset="100%" style="stop-color:#c4522a"/>
</linearGradient>
</defs>
<circle cx="16" cy="16" r="16" fill="url(#av)"/>
<path d="M0 22 L8 12 L14 18 L20 8 L32 22 Z" fill="rgba(0,0,0,0.25)"/>
<rect x="0" y="22" width="32" height="10" fill="rgba(0,0,0,0.2)"/>
</svg>
</div>
<svg class="vk-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M4 6l4 4 4-4" stroke="#818c99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</header>
<div class="vk-body">
<aside class="vk-sidebar">
<h2 class="sidebar-title">Home</h2>
<a class="sidebar-profile" href="#">
<div class="sidebar-avatar">
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="av2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e97c3c"/>
<stop offset="100%" style="stop-color:#c4522a"/>
</linearGradient>
</defs>
<circle cx="20" cy="20" r="20" fill="url(#av2)"/>
<path d="M0 28 L10 15 L17 22 L25 10 L40 28 Z" fill="rgba(0,0,0,0.25)"/>
<rect x="0" y="28" width="40" height="12" fill="rgba(0,0,0,0.2)"/>
</svg>
</div>
<div class="sidebar-profile-info">
<span class="sidebar-profile-name">ajayy111.designs</span>
<span class="sidebar-profile-sub">UI/Brand Product Designer</span>
</div>
</a>
<div class="sidebar-divider"></div>
<nav class="sidebar-nav">
<a class="sidebar-nav-item" href="#">
<svg viewBox="0 0 24 24" fill="none" width="22" height="22">
<path d="M17 3H7a2 2 0 0 0-2 2v16l7-3 7 3V5a2 2 0 0 0-2-2z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
</svg>
<span>Saved</span>
</a>
<a class="sidebar-nav-item" href="#">
<svg viewBox="0 0 24 24" fill="none" width="22" height="22">
<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/>
<path d="M12 7v5l3 3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
<span>Archived</span>
</a>
</nav>
<div class="sidebar-divider"></div>
<button class="sidebar-see-more">
See more
<svg viewBox="0 0 16 16" fill="none" width="14" height="14">
<path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</aside>
<main class="vk-main">
<div class="stories-bar">
<!-- Story (no ring, with + badge outside bottom-right) -->
<div class="story-item">
<div class="story-plain-wrap">
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="sg0" cx="40%" cy="30%" r="70%">
<stop offset="0%" style="stop-color:#3d3560"/>
<stop offset="100%" style="stop-color:#1a1530"/>
</radialGradient>
</defs>
<circle cx="40" cy="40" r="40" fill="url(#sg0)"/>
</svg>
<div class="story-plus">
<svg viewBox="0 0 10 10" fill="none" width="9" height="9">
<path d="M5 1v8M1 5h8" stroke="#555" stroke-width="1.2" stroke-linecap="round"/>
</svg>
</div>
</div>
<span class="story-name">Story</span>
</div>
<!-- Maria -->
<div class="story-item">
<div class="story-ring-wrap">
<div class="story-inner">
<svg viewBox="0 0 74 74" xmlns="http://www.w3.org/2000/svg">
<circle cx="37" cy="37" r="37" fill="#0d0d12"/>
</svg>
</div>
</div>
<span class="story-name">Maria</span>
</div>
<!-- Roman -->
<div class="story-item">
<div class="story-ring-wrap">
<div class="story-inner">
<svg viewBox="0 0 74 74" xmlns="http://www.w3.org/2000/svg">
<circle cx="37" cy="37" r="37" fill="#0a0a10"/>
</svg>
</div>
</div>
<span class="story-name">Roman</span>
</div>
<!-- Elena -->
<div class="story-item">
<div class="story-ring-wrap">
<div class="story-inner">
<svg viewBox="0 0 74 74" xmlns="http://www.w3.org/2000/svg">
<circle cx="37" cy="37" r="37" fill="#080810"/>
</svg>
</div>
</div>
<span class="story-name">Elena</span>
</div>
</div>
</main>
</div>
</body>
</html>
Comments
Post a Comment