Neo-Brutalist hero – CSS Snippet

Go back

<div class="hero-container">

    <!-- Left Content -->
    <div class="hero-content">

      <div class="hero-label">
        <span class="hero-dot"></span>
        UI/UX DESIGNER
      </div>

      <h1 class="hero-title">
        I DESIGN
        <span class="hero-pink">DIGITAL</span>
        EXPERIENCES
        <span class="hero-outline">THAT STAND OUT.</span>
      </h1>

      <p class="hero-description">
        I create bold, user-focused digital experiences that turn
        complex ideas into simple, engaging and memorable products.
      </p>

      <div class="hero-actions">

        <a href="#work" class="hero-button hero-button-primary">
          VIEW MY WORK <span>↗</span>
        </a>

        <a href="#contact" class="hero-button hero-button-secondary">
          LET'S TALK
        </a>

      </div>

    </div>


    <!-- Right Visual -->
    <div class="hero-visual">

      <div class="hero-card">

        <div class="card-top">
          <span>01</span>
          <span>UI / UX</span>
        </div>

        <div class="card-symbol">
          ✦
        </div>

        <div class="card-bottom">
          <strong>THINK.</strong>
          <strong>DESIGN.</strong>
          <strong>IMPACT.</strong>
        </div>

      </div>

      <div class="floating-tag tag-one">
        USER FIRST
      </div>

      <div class="floating-tag tag-two">
        ✦ CREATIVE
      </div>

    </div>

  </div>


  <!-- Bottom Marquee -->
  <div class="hero-marquee">

    <div class="marquee-track">
      UI/UX DESIGN ✦ PRODUCT DESIGN ✦ WEB DESIGN ✦
      USER EXPERIENCE ✦ UI/UX DESIGN ✦ PRODUCT DESIGN ✦
    </div>

  </div>

</section>