bffccf4622
Using `<a>` inside a `<button>` is not syntactically valid HTML and breaks on some browsers (e.g. Firefox). Furthermore, clicking the button doesn't do anything unless you click on the link (e.g. clicking on the padding around the link does nothing), which is inconvenient and confusing. Fixes #17448
125 lines
4.4 KiB
HTML
Executable File
125 lines
4.4 KiB
HTML
Executable File
<!--FULL HEADER BLOCK-->
|
|
<header class="l-relative">
|
|
|
|
<!--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"/>
|
|
</div>
|
|
|
|
<!-- CONTAINER -->
|
|
<div class="homepage-container">
|
|
<!-- container content starts -->
|
|
|
|
<div class="hero-headline no-toc">One framework.<br>Mobile & desktop.</div>
|
|
<a class="button hero-cta" href="guide/quickstart">Get Started</a>
|
|
</div><!-- CONTAINER END -->
|
|
</section>
|
|
|
|
|
|
</header>
|
|
|
|
<article class="l-content">
|
|
<div class="home-rows">
|
|
|
|
<!--Announcement Bar-->
|
|
<div class="homepage-container">
|
|
<div class="announcement-bar">
|
|
<img src="generated/images/marketing/angular-mix.png" height="40" width="151">
|
|
<p>Join us at our newest event, October 2017</p>
|
|
<a class="button" href="https://angularmix.com/">Learn More</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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="assets/images/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="assets/images/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="assets/images/home/joyful-development.png" 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="assets/images/home/loved-by-millions.png" 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="guide/quickstart">
|
|
<div class="card">
|
|
<img src="../assets/images/icons/code-icon.svg" height="70px">
|
|
<div class="card-text-container">
|
|
<div class="text-headline">Get Started</div>
|
|
<p>Start building your Angular application.</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</div> <!-- end of home rows -->
|
|
|
|
</article>
|