angular/aio/content/marketing/index.html

<!-- FULL HEADER BLOCK -->
<header>
  <!-- BACKGROUND IMAGE -->
  <div class="background-sky hero"></div>

  <!-- INTRO SECTION -->
  <section id="intro">
    <!-- LOGO -->
    <div class="hero-logo"></div>

    <!-- CONTAINER -->
    <div class="homepage-container">
      <h1 class="hero-headline no-title no-toc no-anchor" aria-label="Angular - Deliver web apps with confidence">
        Deliver web apps<br>with confidence
      </h1>

      <div class="cta-button-container">
        <div class="cta-link">
          <a class="button hero-cta no-print" href="quick-start">Try Angular</a>
        </div>
      </div>
    </div>
  </section>
</header>

<!-- MAIN CONTENT -->
<article>
  <div class="home-rows">
    <aio-announcement-bar></aio-announcement-bar>

    <div layout="column" layout-xs="column" class="home-row homepage-container">
      <!-- Group 1 -->
      <div>
        <section aria-labelledby="promo-0-title" class="text-block">
          <h2 id="promo-0-title" class="no-anchor">
            The web development framework for building the future
          </h2>
        </section>
      </div>
    </div>
    <div layout="row" layout-xs="column" class="home-row homepage-container">
      <!-- Group 1 -->
      <div class="text-container">
        <section aria-labelledby="promo-1-title" class="text-block">
          <h2 id="promo-1-title" class="text-headline no-anchor">Works at any scale</h2>
          <p class="text-body">
            <img alt="Hero image" src="/generated/images/marketing/home/any-size.svg" width="276" />
          </p>
          <p class="text-body">
            Angular lets you start small and supports you as your team and apps grow.
          </p>
          <p class="text-body"><a href="scaling">Read how Angular helps you grow</a></p>
        </section>
      </div>
      <!-- Group 2 -->
      <div class="text-container">
        <section aria-labelledby="promo-2-title" class="text-block promo-2-desc">
          <h2 id="promo-2-title" class="text-headline no-anchor">Loved by millions</h2>
          <p class="text-body">
            <img
              alt="Hero image"
              src="/generated/images/marketing/home/loved-by-millions.svg"
              width="276"
            />
          </p>
          <p class="text-body">
            Join the millions of developers building with Angular in a thriving and friendly
            community.
          </p>
          <p class="text-body">
            <a href="resources?category=community">Meet the Angular community</a>
          </p>
        </section>
      </div>
      <!-- Group 3 -->
      <div class="text-container">
        <section aria-labelledby="promo-3-title" class="text-block l-pad-top-2">
          <h2 id="promo-3-title" class="text-headline no-anchor">Build for everyone</h2>
          <p class="text-body">
            <img
              alt="Hero image"
              src="/generated/images/marketing/home/build-for-everyone.svg"
              width="276"
            />
          </p>
          <p class="text-body">
            Rely on Angular's internationalization tools, security, and accessibility to build for
            everyone around the world.
          </p>
          <p class="text-body"><a href="everyone">Learn more about Angular's tools</a></p>
        </section>
      </div>
    </div>

    <p style="text-align: center">
      <a class="button hero-cta no-print" href="features">Learn more</a>
    </p>
  </div>
  <!-- end of home rows -->
</article>