Skip to main content
SimilarExport ZIP
100%

Birthday Card

✓ Published0🌍 Public
SSam Hege
Last edited Jun 27, 2022
Created on Jun 27, 2022
Forked from HTML Starter

This example shows a digital birthday card for Naomi, featuring a cartoon dog above a floral background and a personal message from Sam. The card is built with plain HTML and CSS, using a flexbox-centered layout and custom styling for the card container, typography via the Share Tech webfont, and hover effects on the flower image. When hovered, the flower image blurs, shrinks, and shifts position over a 1.5-second transition with a delay, revealing more of the card beneath. The images are loaded from external URLs, and no JavaScript libraries are used.

AI-generated description

Birthday Card, with dog image

MIT Licensed

Similar vizzes

Loading thumbnail…

Birthday

The visualization presents a whimsical birthday greeting: a glowing moon, a candle-lit cake, and a corgi dog rendered with CSS. Animated fireflies drift across a gradient night sky, drawn using the Canvas API and a custom JavaScript animation loop. Text messages, "Happy Birthday!" and "I am a cute little corgi...", appear letter-by-letter via DOM manipulation. The scene is built from HTML/CSS SVG shapes, with styles referenced from external CodePen sources.

KKacieW
69% match
Loading thumbnail…

A3_HistPlot

This example displays a personalized birthday invitation card in Vietnamese, featuring a Ghibli-style portrait and event details for Hinn.hinn’s party. The page uses vanilla HTML and CSS with a flexbox layout to center the card, which includes an embedded image (Image.png) and handles responsive scaling via a media query for shorter screens. The design relies on a clean white card with rounded corners, soft shadows, and a pink accent color, making the invitation visually appealing and readable.

DDuc Pham
61% match
Loading thumbnail…

Heart Birthday

This example displays a single heart image centered on a blue background. The page uses CSS Grid with `place-items: center` and a full viewport height to position the image, which has a white background, border radius, and a subtle box shadow. It is a minimal HTML and CSS demonstration, relying on an external PNG asset from NicePNG with transparency, and does not use JavaScript or a framework despite the React metadata.

SSam Hege
61% match
Loading thumbnail…

Fork of Hello HTML

A simple canvas drawing depicts a dog, a cat, and a plant using basic shapes and colors. The page, titled “Digital Feature Creator,” displays a greeting and renders the scene through the Canvas API, with `getContext('2d')` used for drawing rectangles, paths, and arcs. The scene is static, with no interaction or animation.

Sshailajat1998@gmail.com
55% match
Loading thumbnail…

Dog's Image

A cartoon dog is drawn on a light green background with grass, created entirely through D3.js DOM manipulation. The example builds SVG elements—including circles for the head, body, and eyes, ellipses for ears, rectangles for legs, and paths for the tail and mouth—using plain JavaScript `document.createElementNS` and `setAttribute` calls, without any data binding or transitions. The dog is static, showing a smiling face with a small nose and curved mouth. This demonstrates how to construct a vector illustration from scratch by directly manipulating the DOM.

BBelede Rahul
55% match
Loading thumbnail…

Dog Image

This example renders a stylized dog face in a web page using React and D3.js, drawing the entire illustration with SVG elements. The visualization shows a silver elliptical head with brown ears, eyes, a black nose, whiskers, and a curved mouth, all composed of geometric primitives and arc paths. The code constructs the mouth, eyes, and ears using D3’s `arc()` generator, while React manages the component structure and rendering. The page loads React 17 and D3 v7 from CDNs, and the final image is produced entirely via SVG, with no external data—the design is hand-coded rather than data-driven.

BBelede Rahul
54% match
Loading thumbnail…

Gist 362622e653494c155e16a41bd222e099

This example shows a single user card for a character named Sam, displaying a portrait image from the file frodo.png. The HTML structure consists of a div containing a user title and an image, with the code referencing a force simulation for potential layout calculations. It uses basic HTML and CSS class assignments, though no JavaScript libraries are imported in the visible markup, and the rendering relies on static image embedding rather than dynamic data visualization.

115Dkatz
54% match
Loading thumbnail…

Untitled

A web page renders a large, centered greeting message against a dark navy background. The text is styled with the Ubuntu font family and appears in a light color at a very large font size. The example demonstrates basic HTML structure, CSS styling, and ES6 module functionality by importing a message string from a separate JavaScript module. The code uses a custom CSS rule set and an external Google Fonts stylesheet, with the message output displayed directly in the browser.

Ssanjaymirdha
54% match