mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
marktechson
103 lines
3.5 KiB
HTML
Executable File
103 lines
3.5 KiB
HTML
Executable File
<!-- FULL HEADER BLOCK -->
|
|
<header>
|
|
<!-- BACKGROUND IMAGE -->
|
|
<div class="background-sky hero"></div>
|
|
|
|
<!-- INTRO SECTION -->
|
|
<section id="intro">
|
|
<!-- LOGO -->
|
|
<div style="width: 100%; margin-top: 20px">
|
|
<iframe
|
|
style="
|
|
border: 0;
|
|
width: 100%;
|
|
border-radius: 0.25rem;
|
|
overflow: hidden;
|
|
aspect-ratio: 16 / 9;
|
|
"
|
|
src="https://www.youtube.com/embed/Wq6GpTZ7AX0?si=H5Y5AEjOkY6O-XYA&controls=0"
|
|
title="YouTube video player"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen
|
|
></iframe>
|
|
</div>
|
|
</section>
|
|
</header>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<article>
|
|
<div class="home-rows">
|
|
<aio-announcement-bar></aio-announcement-bar>
|
|
|
|
<div layout="column" layout-xs="column" class="home-row homepage-container">
|
|
<!-- Group 1 -->
|
|
<div>
|
|
<section aria-labelledby="promo-0-title" class="text-block">
|
|
<h2 id="promo-0-title" class="no-anchor">
|
|
The web development framework for building the future
|
|
</h2>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<div layout="row" layout-xs="column" class="home-row homepage-container">
|
|
<!-- Group 1 -->
|
|
<div class="text-container">
|
|
<section aria-labelledby="promo-1-title" class="text-block">
|
|
<h2 id="promo-1-title" class="text-headline no-anchor">Works at any scale</h2>
|
|
<p class="text-body">
|
|
<img alt="Hero image" src="/generated/images/marketing/home/any-size.svg" width="276" />
|
|
</p>
|
|
<p class="text-body">
|
|
Angular lets you start small and supports you as your team and apps grow.
|
|
</p>
|
|
<p class="text-body"><a href="scaling">Read how Angular helps you grow</a></p>
|
|
</section>
|
|
</div>
|
|
<!-- Group 2 -->
|
|
<div class="text-container">
|
|
<section aria-labelledby="promo-2-title" class="text-block promo-2-desc">
|
|
<h2 id="promo-2-title" class="text-headline no-anchor">Loved by millions</h2>
|
|
<p class="text-body">
|
|
<img
|
|
alt="Hero image"
|
|
src="/generated/images/marketing/home/loved-by-millions.svg"
|
|
width="276"
|
|
/>
|
|
</p>
|
|
<p class="text-body">
|
|
Join the millions of developers building with Angular in a thriving and friendly
|
|
community.
|
|
</p>
|
|
<p class="text-body">
|
|
<a href="resources?category=community">Meet the Angular community</a>
|
|
</p>
|
|
</section>
|
|
</div>
|
|
<!-- Group 3 -->
|
|
<div class="text-container">
|
|
<section aria-labelledby="promo-3-title" class="text-block l-pad-top-2">
|
|
<h2 id="promo-3-title" class="text-headline no-anchor">Build for everyone</h2>
|
|
<p class="text-body">
|
|
<img
|
|
alt="Hero image"
|
|
src="/generated/images/marketing/home/build-for-everyone.svg"
|
|
width="276"
|
|
/>
|
|
</p>
|
|
<p class="text-body">
|
|
Rely on Angular's internationalization tools, security, and accessibility to build for
|
|
everyone around the world.
|
|
</p>
|
|
<p class="text-body"><a href="everyone">Learn more about Angular's tools</a></p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="text-align: center">
|
|
<a class="button hero-cta no-print" href="features">Learn more</a>
|
|
</p>
|
|
</div>
|
|
<!-- end of home rows -->
|
|
</article>
|