W3.CSS

100%

✓ Published0🌍 Public

Last edited Apr 26, 2017

Created on Apr 11, 2017

This example builds a simple slideshow-style homepage for “PHAMERATOR” using the W3.CSS framework. It displays a series of images in a carousel with left and right navigation buttons, controlled by custom JavaScript functions that show and hide slides. The page also embeds two iframes, one for a YouTube video and one for a Gitter chat, alongside the slideshow. The content is styled with dark blue background and a white, centered title, relying on W3.CSS classes for layout and button styling.

AI-generated description

forked from <a href='http://bl.ocks.org/degnonkm/'>degnonkm</a>'s block: <a href='http://bl.ocks.org/degnonkm/ebd23b6bfa840fc971b334f65f2d460e'>phamhomepage</a>

mit Licensed

Similar vizzes

Loading thumbnail…

W3.CSS Template

This example presents a business consultancy landing page built with the W3.CSS framework, featuring a slideshow of promotional images and sections describing services. It uses Bootstrap’s progress bar component and custom CSS for styling, while the slideshow relies on manual image swapping via `mySlides` classes. The page showcases company information, government grant assistance programs, and technology voucher details, with content embedded directly in the HTML and links to external stylesheets.

Kkalokli8

68% match

Loading thumbnail…

Image Carousel

This example demonstrates a simple image carousel, displaying a sequence of three thematically labeled images—Zip, Zap, and Zop—that users can cycle through. The code uses jQuery (via the `carousel.js` file) to handle click events on the previous and next frame links, shifting the horizontal position of a `.frames` list. The layout relies on a fluid CSS approach where the carousel container hides overflow, and each slide takes up a third of the overall track width. The styling, defined in `main.css`, includes navigation buttons and responsive image sizing. The data source is static image URLs embedded directly in the HTML, with no external data loading or animation libraries beyond core jQuery.

EElaineYu

65% 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…

Waffle

This example renders a static HTML page titled “Waffle” that displays the text “Hello HTML!” in a large, centered font. It uses plain CSS for styling (a 13em font size and text alignment) and includes no JavaScript functionality. The page is a bare-bones demonstration of basic HTML structure and CSS, with no data sources or visualization libraries involved. The content is purely textual and does not generate any charts, graphs, or interactive elements.

Rrhysg-ps

62% match

Loading thumbnail…

Swiper Slider

This example demonstrates a coverflow-style destination slider for a travel website, featuring image cards for locations like Thailand, Belgium, and Nepal. It uses the Swiper library with its coverflow effect, incorporating 3D transforms, slide shadows, and responsive breakpoints to adjust cards per view. Navigation relies on the included `swiper-bundle` scripts and the jQuery-based `wte-elementor-widgets` integration. The slider is driven by inline HTML data attributes for configuration and pulls images from the WordPress theme’s media directory.

KKirun1

61% match

Loading thumbnail…

CSS Animation of Hello HTML

This example showcases a minimal HTML page where the text “Hello HTML” slides down from the top of the viewport using a CSS animation. The page defines a `@keyframes` rule named `slidein`, which animates the body’s `margin-top` from 100% to 0% over three seconds. The animation is applied directly to the body element via the `animation-name` and `animation-duration` properties. This demonstrates a purely CSS-driven approach without JavaScript or external libraries, relying solely on the browser’s native animation engine.

RRussell Watson

61% match

Loading thumbnail…

CSS Neon Gallery (inc. first attempt MrW Logo)

This gallery displays a series of neon-style text effects, rendered using custom CSS `text-shadow` properties on a dark background. The presentation includes a set of greetings, demonstrating varied color and glow treatments. The fourth plaque is a stylized logo, constructed from three text characters, each individually styled with CSS transforms and colored shadows. The layout is built with a custom HTML `<neon>` tag and a CSS container that uses flexbox to center the content. The styling is defined in a separate stylesheet, `neon.css`, and the structure in `index.html`.

RRussell Watson

60% match

Loading thumbnail…

Untitled

This example demonstrates a responsive HTML page embedding a YouTube video player alongside custom-styled text content, with layout and typography controlled entirely through basic CSS. The visualization itself is simply an iframe-based media element using the YouTube embed API, scaled to fit within a fixed 560×315 pixel frame. The accompanying HTML structure and stylesheet define a clean, minimal gallery presentation, with no JavaScript-driven data binding or charting libraries involved. The rendering approach relies solely on native browser iframe handling, making it a static, non-interactive demonstration of web layout rather than data visualization.

钱钱姿青

60% match