DEV Community: Zülal Nebin

CodePen: Hydra VR Landing Page

Zülal Nebin — Sat, 05 Sep 2026 09:48:10 +0000

A responsive landing page for a fictional VR studio, built as a front-end exercise. No build step: plain HTML, one stylesheet, one script.

Stack

Tailwind CSS v4 via the browser CDN, with a small custom theme (@theme) for the colour palette and typography Motion (motion.dev) for entrance and scroll-triggered animations Swiper for the carousels Things I enjoyed building

Sliders that stop being sliders. Each carousel runs only below its own breakpoint; above it the Swiper instance is destroyed and the same markup falls back to a plain CSS grid. One matchMedia helper drives all four. Scroll reveals. Elements are marked with data attributes and grouped by container - one group plays on load, the rest wait for inView, each staggering its children in document order. SVG line drawing. The decorative arcs draw themselves using Motion's pathLength; the hero curves grow outwards from their own midpoints by animating pathLength and pathOffset together. Animated gradient text — a highlight layer sweeps across the headline while the base gradient stays put. Floating form labels driven purely by :placeholder-shown, no JavaScript. Every animation is disabled under prefers-reduced-motion, and the decorative SVGs are hidden from assistive tech.

Design inspired by https://www.figma.com/community/file/1196146735025729739 - the layout is theirs, the implementation is mine.

CodePen: CryptoCap Landing Page

Zülal Nebin — Sat, 05 Sep 2026 06:24:12 +0000

Crypto landing page with a sleek dark/light mode toggle, stylish Chart.js market graph, and smooth scroll animations using sal.js. Built with Tailwind CSS for a pixel-perfect, fully responsive design.

Design inspired by: https://www.figma.com/community/file/1047142300578798855/cryptocurrency-landing-page-dark-mode

CodePen: Responsive Dark Analytics Dashboard

Zülal Nebin — Sat, 05 Sep 2026 05:30:23 +0000

A dark-theme analytics dashboard built without any framework - just semantic HTML, SCSS and plain JavaScript.

What's in it

Sidebar - the shadcn/ui sidebar mechanics (gap + fixed-container trick, offcanvas collapse, inset variant, mobile drawer) reimplemented in pure CSS with a small DOM/event state layer instead of React context. Collapses to a drawer below 768px.

Charts - Chart.js 4: a multi-ring radial chart, a stacked bar chart and a half-circle gauge. The center values are DOM elements sized in cqw, so they scale with their container instead of being baked into the canvas.

Animated stats - countUp.js drives every figure. Each value's final width is reserved before the animation starts, so counting up from zero never pushes neighbouring badges or legends around, and prefers-reduced-motion is respected.

Orders table - a real

with custom-styled checkboxes, a working select-all (including the indeterminate state), status badges, zebra rows and horizontal scrolling on narrow screens.

Under the hood - BEM naming, SCSS design tokens (color scale, shadows, typography mixins in rem with unitless line-heights) and container queries for the responsive grids.

Design inspiration: https://www.figma.com/community/file/1325597018063319916

height="600"
src="https://codepen.io/zulalnb/embed/KwaRmPb?height=600&default-tab=result&embed-version=2"
scrolling="no"
frameborder="no"
allowtransparency="true"
loading="lazy"
style="width: 100%;">