angular-cn/aio/content/marketing/index.html

<!--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 &amp; desktop.</div>
      <button class="button button-large button-plain hero-cta">
        <a href="guide/quickstart">Get Started</a>
      </button>
  </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="assets/images/logos/angular/angular-banner-logo-grey.png" width="64"/>
        <p>Angular v4.0 is out! Smaller, faster, no biggie...</p>
        <button class="button">
          <a href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank">Learn More</a>
        </button>
      </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" 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" 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="tutorial">
      <div class="card">
          <img src="../assets/images/icons/code-icon.svg" height="70px">
          <div class="card-text-container">
            <div class="text-headline">Start Tutorial</div>
            <p>Start building your Angular application in TypeScript.</p>
          </div>
      </div>
    </a>
  </div>

  </div> <!-- end of home rows -->

</article>