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

<!--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"/>
    </div>

      <!-- CONTAINER     -->
    <div class="homepage-container">
      <!-- container content starts -->

      <div class="hero-headline no-toc">一套框架，多种平台。<br>移动端 &amp; 桌面端</div>
      <a class="button hero-cta" href="guide/quickstart">快速起步</a>
  </div><!-- CONTAINER END -->
  </section>


</header>

<article>
  <div class="home-rows">

    <!--Announcement Bar-->
    <div class="homepage-container">
      <div class="announcement-bar">
        <img src="generated/images/marketing/home/angular-mix.png" height="40" width="151">
        <p>2017年十月 加入我们的最新活动</p>
        <a class="button" href="https://angularmix.com/">了解更多</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="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">横跨所有平台</div>
          <p class="text-body">学会用Angular构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。</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">速度与性能</div>
          <p class="text-body">通过Web Worker和服务端渲染，达到在如今(以及未来）的Web平台上所能达到的最高速度。</p>
          <p class="text-body">Angular让你有效掌控可伸缩性。基于RxJS、Immutable.js和其它推送模型，能适应海量数据需求。</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">美妙的工具</div>
          <p class="text-body">使用简单的声明式模板，快速实现各种特性。使用自定义组件和大量现有组件，扩展模板语言。在几乎所有的IDE中获得针对Angular的即时帮助和反馈。所有这一切，都是为了帮助你编写漂亮的应用，而不是绞尽脑汁的让代码“能用”。</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">百万粉丝热捧</div>
          <p class="text-body">从原型到全球部署，Angular都能带给你支撑Google大型应用的那些高延展性基础设施与技术。</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="guide/quickstart">
      <div class="card">
          <img src="generated/images/marketing/home/code-icon.svg" height="70px">
          <div class="card-text-container">
            <div class="text-headline">立即开始</div>
            <p>开始构建你的 Angular 应用</p>
          </div>
      </div>
    </a>
  </div>

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

</article>