Skip to main content
SimilarExport ZIP
100%

Day2 - 30day30sites

✓ Published0🌍 Public
KKacieW
Last edited Oct 7, 2017
Created on Oct 7, 2017

This example presents a full-screen, scroll-driven exploration of the four seasons, using large background images and fixed-position text overlays to label each section. The page relies on background-attachment: fixed to create parallax-style imagery as the user scrolls, with anchor links in a navigation bar jumping to corresponding seasonal sections. Content is structured with plain HTML and CSS only, using background-image URLs for the season photos and absolute positioning with transforms to place the headings. No JavaScript libraries are used; the implementation is purely static markup and styling.

AI-generated description

Similar vizzes

Loading thumbnail…

Day3-30day30sites

This example presents a visual tour of the coastal city of Dalian, beginning with a slideshow of three photographs that cycle every two seconds, each captioned with a landmark name. Below the slideshow, two static image-and-text cards describe local seafood and Tiger Beach Ocean Park. The page also embeds a Google Map centered on Dalian (latitude 38.915883, longitude 121.619674) with a single marker, using the Google Maps JavaScript API’s `google.maps.Map` and `google.maps.Marker` objects. All images are pulled from external URLs.

KKacieW
70% match
Loading thumbnail…

100 days of Learning D3.js

This example showcases a 100-day learning journey of D3.js through a minimalist HTML page. It presents a blank body, serving as a canvas for the author’s evolving D3 visualizations over three months. The embedded YouTube video, accessible via an iframe, demonstrates the learning process and likely highlights the cumulative output, although the page itself does not render any charts. The code relies solely on standard HTML and iframe integration, with no explicit D3 APIs or data sources present in the provided files. It functions as a documentation and presentation hub rather than an interactive visualization.

Sshapak26
62% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A purely CSS-driven digital scene constructs a static landscape with a sky, sun, grass, tree, flower, cat, and bird arranged through absolute positioning and styled divs. The page uses no JavaScript or data binding; instead, the HTML structure and stylesheet define each element’s shape, color, and placement, with radial gradients for the sun and rotated squares for the bird. The rendering approach is entirely declarative, relying on CSS layout properties rather than SVG, canvas, or D3.js despite the title. The example demonstrates how layered, styled HTML elements can simulate a simple animated-free environment.

Rreddysushma994@gmail.com
62% match
Loading thumbnail…

Auto Image Slider

This example displays an automatic image slider for navigating three nature photographs. It cycles through images every two seconds, with preview and next arrow buttons and clickable dots for direct slide selection. The code uses vanilla JavaScript with `getElementsByClassName`, `addEventListener`, and `setTimeout` for automation, while CSS manages positioning, transitions, and active states for navigation elements.

KKacieW
62% match
Loading thumbnail…

Sample_Leaflet_scrollytelling

This example demonstrates a scrollytelling layout where scrolling through text sections triggers changes in a fixed visual panel. The page uses a two-column design: a scrollable column containing narrative content and a fixed column that updates its displayed information based on the visible section. The code leverages HTML, CSS, and JavaScript to implement the scroll-driven interaction, with `addEventListener('scroll', ...)` detecting visibility changes. It includes the Leaflet and D3 libraries as dependencies, though the core functionality focuses on DOM manipulation for content swapping rather than map rendering. The visible logic handles two content sections, with conditional checks to toggle between corresponding fixed content panels.

FFrancesco Di Filippo
61% match
Loading thumbnail…

02•02•20•20 - CSS Animation for a very special day

A palindrome date is displayed as a glowing digital clock using the LED Digital 7 web font, with the text “02•02•20•20” styled with layered CSS text-shadow effects in pink and blue. The entire container element rotates continuously through a 360-degree spin via CSS `@keyframes` animation, creating a looping motion effect over ten seconds. The page uses HTML and modular CSS files for layout, font import, neon styling, and animation, all controlled without JavaScript. The design centers the date on a dark background, emphasizing the typographic and animated presentation.

RRussell Watson
61% match
Loading thumbnail…

DBC Phase 2 Practice Assessment Part 3

A static, non-interactive product landing page for a fictional brand called HipSTIRR. The page uses HTML and CSS to display a header with navigation, a hero section, and a three-column feature layout via the CSS `column-count` property. It includes placeholder marketing copy and icon fonts from Font Awesome, with styling built on the Normalize.css reset and Google Fonts. The code does not include any data visualization or JavaScript libraries.

EElaineYu
60% match
Loading thumbnail…

DBC Phase 2 Practice Assessment Part 3

This example shows a responsive promotional landing page with a black header, navigation, and a centered three-column feature layout. The page uses custom CSS, along with the Normalize.css and Google Fonts libraries, to render hipster-themed marketing text and icons. It demonstrates fixed positioning, hover effects, and a grid-based layout built with floated block elements. The design uses the Font Awesome icon set for visual accents.

EElaineYu
60% match