<!-- FULL HEADER BLOCK --> <header> <!-- BACKGROUND IMAGE --> <div class="background-sky hero"></div> <!-- INTRO SECTION --> <section id="intro"> <!-- LOGO --> <div class="hero-logo"> <img src="assets/images/logos/angular/angular.svg" alt="Angular"/> </div> <!-- CONTAINER --> <div class="homepage-container"> <div class="hero-headline no-toc">One framework.<br>Mobile & desktop.</div> <a class="button hero-cta" href="start">Get Started</a> </div> </section> </header> <!-- MAIN CONTENT --> <article> <h1 class="no-anchor no-toc" style="display: none"></h1> <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="responsive framework"> </div> </div> <div class="text-container"> <div class="text-block promo-1-desc l-pad-top-2"> <div class="text-headline">Develop Across All Platforms</div> <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> </div> </div> </div> <hr> <!-- Group 2 --> <div layout="row" layout-xs="column" class="home-row"> <div class="text-container"> <div class="text-block"> <div class="text-headline">Speed & Performance</div> <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> </div> </div> <div class="promo-img-container promo-2"> <div> <img height="222" width="323" src="generated/images/marketing/home/speed-performance.svg" alt="speed and performance"> </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="IDE example"></div> </div> <div class="text-container"> <div class="text-block promo-3-desc"> <div class="text-headline">Incredible Tooling</div> <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> </div> </div> </div> <hr> <!-- Group 4 --> <div layout="row" layout-xs="column" class="home-row"> <div class="text-container"> <div class="text-block l-pad-top-2"> <div class="text-headline">Loved by Millions</div> <p class="text-body">From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.</p> </div> </div> <div class="promo-img-container promo-4"> <div> <img src="generated/images/marketing/home/loved-by-millions.svg" alt="angular on the map" width="455" height="228"> </div> </div> </div> <!-- CTA CARDS --> <div layout="row" layout-xs="column" class="home-row"> <a href="start"> <div class="card"> <img src="generated/images/marketing/home/code-icon.svg" height="70px" alt="Getting Started with Angular"> <div class="card-text-container"> <div class="text-headline">Get Started</div> <p>Start building an Angular application.</p> </div> </div> </a> </div> </div><!-- end of home rows --> </article>