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">
<p class="cta-link">
<a class="button hero-cta no-print" href="quick-start">Try Angular</a>
</p>
</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>