DBC Phase 2 Practice Assessment Part 3

100%

DBC Phase 2 Practice Assessment Part 3

✓ Published0🌍 Public

Last edited Nov 7, 2013

Created on Oct 20, 2013

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.

AI-generated description

Similar vizzes

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

85% 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

63% match

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

62% match

Loading thumbnail…

Fork of CSS Display 2 (lists)

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.

WWRCIECH

62% match

Loading thumbnail…

Grayson Technology

This example presents a static promotional landing page for Grayson Technology, a fictional company focused on sustainable mobility solutions. It displays a welcome header, a navigation bar, and a section describing eco-friendly e-bikes and sustainable automobiles. The design is built with plain HTML and CSS, including a styled header, flexbox-based navigation, and a footer with social media links. The page uses standard CSS properties for layout and styling, with no JavaScript or external libraries. It does not include any interactive data visualizations or dynamic content.

NNita

62% match

Loading thumbnail…

Layout Example

A layout example approximating a multi-step sign-up UI from Dribbble shots, using a flexbox layout for a split-screen interface. The left sidebar contains page numbers and a bottom section with step details plus a progress bar made of four rounded divs, while the right side is an empty flex-grow area. The code uses plain HTML and CSS, including `display: flex`, `flex-direction: column`, `justify-content: space-between`, and `flex-grow` to arrange the elements. No external libraries are used, and the markup is static with no interaction or data binding.

CCurran Kelleher

62% match

Loading thumbnail…

My Website

This example demonstrates a multi-section static website with navigation, content areas, and a contact form. It uses plain HTML for structure and CSS for styling, including a fixed header, responsive sections, and button hover effects. The code also imports D3.js to set the text content of a message div, alongside a local ES6 module for a string export. The page includes a footer and client-side form elements, with no interactive data visualization.

SSriharshakurra

61% match

Loading thumbnail…

test2

This example demonstrates a minimal HTML page that displays the text “Hello HTML!” centered in a large font. It uses plain CSS for styling, setting the message font size to 13em and aligning it to the center. The page is built with standard HTML elements and a CSS class, with no JavaScript or external libraries. It serves as a basic starter template for integrating CSS and JavaScript in a web project, referencing the React Starter for comparison.

AAmanda-Tai

61% match