mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
7d8998cc4f
in the aio home page the sections' decorative images provide an alt texts, which shouldn't actually be present (see: https://www.w3.org/WAI/tutorials/images/decorative/), empty such alt text for a better user experience PR Close #45740
112 lines
4.4 KiB
HTML
Executable file
112 lines
4.4 KiB
HTML
Executable file
<!-- 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 - The modern web developer's platform">The modern web<br>developer's platform</h1>
|
|
<a class="button hero-cta no-print" href="start">Get Started</a>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</header>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<article>
|
|
|
|
<div class="home-rows">
|
|
|
|
<aio-announcement-bar></aio-announcement-bar>
|
|
|
|
<!-- Group 1 -->
|
|
<div layout="row" layout-xs="column" class="home-row homepage-container">
|
|
<div class="promo-img-container promo-1">
|
|
<div>
|
|
<img height="222" width="340" src="generated/images/marketing/home/responsive-framework.svg" alt="" loading="lazy">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-container">
|
|
<section aria-labelledby="promo-1-title" class="text-block promo-1-desc l-pad-top-2">
|
|
<h2 id="promo-1-title" class="text-headline no-anchor">Develop Across All Platforms</h2>
|
|
<p class="text-body">Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
|
|
<!-- Group 2 -->
|
|
<div layout="row" layout-xs="column" class="home-row">
|
|
<div class="text-container">
|
|
<section aria-labelledby="promo-2-title" class="text-block">
|
|
<h2 id="promo-2-title" class="text-headline no-anchor">Speed & Performance</h2>
|
|
<p class="text-body">Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.</p>
|
|
<p class="text-body">Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="promo-img-container promo-2">
|
|
<div>
|
|
<img height="222" width="323" src="generated/images/marketing/home/speed-performance.svg" alt="" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
|
|
<!-- Group 3 -->
|
|
<div layout="row" layout-xs="column" class="home-row">
|
|
<div class="promo-img-container promo-3">
|
|
<div><img src="generated/images/marketing/home/joyful-development.svg" alt="" loading="lazy"></div>
|
|
</div>
|
|
|
|
<div class="text-container">
|
|
<section aria-labelledby="promo-3-title" class="text-block promo-3-desc">
|
|
<h2 id="promo-3-title" class="text-headline no-anchor">Incredible Tooling</h2>
|
|
<p class="text-body">Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
|
|
</div>
|
|
<hr>
|
|
|
|
<!-- Group 4 -->
|
|
<div layout="row" layout-xs="column" class="home-row">
|
|
<div class="text-container">
|
|
<section aria-labelledby="promo-4-title" class="text-block l-pad-top-2">
|
|
<h2 id="promo-4-title" class="text-headline no-anchor">Loved by Millions</h2>
|
|
<p class="text-body">From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.</p>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="promo-img-container promo-4">
|
|
<div>
|
|
<img src="generated/images/marketing/home/loved-by-millions.svg" alt="" width="455" height="228" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA CARDS -->
|
|
<div layout="row" layout-xs="column" class="home-row">
|
|
<a href="start" class="card">
|
|
<img src="generated/images/marketing/home/code-icon.svg" alt="" width="70" height="70" loading="lazy">
|
|
<div class="card-text-container">
|
|
<div class="text-headline">Try it now</div>
|
|
<p>Explore Angular's capabilities with a ready-made sample app. No setup required.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</div><!-- end of home rows -->
|
|
|
|
</article>
|