Styled Presentation

Create a 3-slide presentation with custom styling using utility classes. Each slide should demonstrate different styling techniques.

Requirements

Slide 1: Title Slide

• Center the slide content vertically and horizontally
• Display the title in extra-large text
• Apply a gradient background (blue to purple gradient)
• Wrap the title and subtitle in a container with padding and rounded corners
• Make the subtitle text semi-transparent

Slide 2: Feature Cards

• Display 3 feature items in separate boxes
• Each box should have:
  • Box shadow for depth
  • Internal spacing (padding)
  • Space between boxes (margin)
  • A left border in a unique color (use red, green, and blue)
• Arrange the boxes vertically with consistent spacing

Slide 3: Code Display

• Show a code block with custom styling
• Style the code container with:
  • Dark background color
  • Rounded corners
  • Internal padding
• Add a label above the code that says "Example Code"
• Style the label with a background color and padding

Implementation

@generates

Test Cases

• The first slide has a gradient background and centered large text @test
• The second slide contains three cards with different colored borders @test
• The third slide has a code block with styling and a header @test

Dependencies { .dependencies }

@slidev/cli { .dependency }

Provides the presentation framework and development server.

unocss { .dependency }

Provides utility-first CSS framework for styling.