Fork of CSS Display 2 (lists)

100%

Fork of CSS Display 2 (lists)

✓ Published1🌍 Public

Last edited Jan 30, 2023

Created on Jan 30, 2023

This example demonstrates a simple horizontal navigation menu with links to Intro, Portfolio, and Projects sections. It shows how CSS list properties and inline-block positioning create a right-aligned, black-background nav bar where links appear in white and gain an underline on hover or focus. The code uses HTML unordered lists alongside CSS styling with Google Fonts’ Roboto typeface loaded via @import, relying on properties like list-style-type, display, margin-inline, and text-decoration to achieve the visual layout.

AI-generated description

https://youtu.be/OXGznpKZ_sA?t=9902

MIT Licensed

Similar vizzes

Loading thumbnail…

A Pen by Michael Fasani.

This example demonstrates a full-width horizontal navigation menu whose six items are evenly distributed across the available space using CSS Flexbox, with equal width and spacing for each link. The menu relies on the `display: -ms-flexbox` and `-ms-flex: 1` properties to achieve the equal layout, while also including fallback properties for older box-based implementations. The code uses the 'Abel' webfont from Google Fonts for styling, and each tab features a subtle gradient background and a hover effect that darkens the tone. The markup is a simple unordered list inside a `<nav>` element, with no JavaScript or data source involved—the visual effect is purely CSS-based.

FFasani

69% match

Loading thumbnail…

Fork of CSS Flexbox 2

This example demonstrates CSS Flexbox layout behavior using two numbered boxes inside a bordered container. The `style.css` file applies `display: flex` with `justify-content: center`, `align-items: center`, and `flex-flow: row nowrap` to center items both horizontally and vertically, while the second box uses an `order: -1` property to reverse its visual position. Custom flex properties (`flex: 1 1 40%` and `flex: 2 2 40%`) control relative sizing and growth, with `gap: 1rem` adding spacing between items. The HTML structure includes commented-out boxes 3–6, leaving only two visible elements rendered in black with white text.

WWRCIECH

67% match

Loading thumbnail…

CSS Display

This example contrasts default block-level paragraph styling with an inline-block span by using the CSS `display` property. The page shows how inline-block elements respect vertical margins and padding, while the surrounding paragraphs remain gray blocks. Rendering relies on HTML structure and the linked Roboto font from Google Fonts, with all visual behavior defined in the included stylesheet. No JavaScript or external visualization libraries are used; the example is purely static.

WWRCIECH

66% match

Loading thumbnail…

CSS Floats

This example demonstrates how CSS floats affect the layout of text and block elements within an HTML document. It uses standard HTML elements and the CSS properties `float`, `margin`, and `display: flow-root` to create left- and right-floating black squares that wrap surrounding paragraph text. The page pulls the Roboto font from Google Fonts via `@import` and applies it to the body, while the `section` element showcases `flow-root` to contain nested floats. No JavaScript or external visualization libraries are used; the effect relies entirely on core CSS.

WWRCIECH

66% match

Loading thumbnail…

Untitled

This example demonstrates a responsive website layout built with HTML5 and CSS, featuring a navigation bar, introductory image, and content sections for boxes, events, and projects. The page uses semantic structural elements like `header`, `nav`, `main`, and `section` tags to organize material, with styling applied through a CSS framework. The design incorporates interactive buttons and links, and the visual hierarchy relies on header tags and horizontal rules. The layout is defined directly in the HTML structure, with no JavaScript libraries or data-viz libraries present.

DDannwiz

66% match

Loading thumbnail…

Fork of HTML Starter

This visualization displays the numbers 1, 2, and 3 in two distinct formats: first as a large centered text block with line breaks, and second as an HTML unordered list. The page uses basic HTML structure with a CSS style block that sets a 13em font size and center alignment for the `.message` class. The JavaScript-free approach relies entirely on native HTML elements and CSS styling, with no external libraries or data sources. The example serves as a minimal demonstration of styled text and list rendering.

SSanju2498

65% match

Loading thumbnail…

CSS Flexbox

A CSS Flexbox layout demonstrates responsive box arrangement using the Flexbox model. Six numbered black boxes with white text are centered within a bordered container, wrapping onto multiple lines with a one-rem gap between them. The code uses `display: flex`, `justify-content`, `align-items`, `flex-flow`, and `align-content` properties to control alignment and wrapping. It imports the Roboto font from Google Fonts and applies a plain HTML structure with no JavaScript or external data sources.

WWRCIECH

64% match

Loading thumbnail…

Fork of HTML Starter

This fork of the HTML Starter presents a minimal web page that demonstrates the integration of CSS and JavaScript within a single HTML file. It shows a basic interactive environment where JavaScript manipulates the Document Object Model (DOM) to respond to user actions, with styling applied through CSS rules. The code uses plain JavaScript APIs like `document.querySelector` and event listeners to handle clicks, while CSS handles layout and visual presentation. The example serves as a foundation for more complex visualizations, offering a clean template for experimenting with code in the browser.

Mmanish0x0f

64% match