diff options
Diffstat (limited to 'docs/html/design/index.jd')
| -rw-r--r-- | docs/html/design/index.jd | 97 |
1 files changed, 61 insertions, 36 deletions
diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd index 47e8d26..638f35b 100644 --- a/docs/html/design/index.jd +++ b/docs/html/design/index.jd @@ -1,3 +1,4 @@ +fullpage=true page.title=Design page.viewport_width=970 section.landing=true @@ -6,43 +7,67 @@ header.hide=1 footer.hide=1 @jd:body -<style> -#landing-graphic-container { - position: relative; -} - -#text-overlay { - position: absolute; - left: 0; - top: 42px; - width: 266px; - -} -#hero-image { - padding-left:68px; -} -</style> - -<div id="landing-graphic-container"> - <div id="text-overlay"> - <span itemprop="description">Welcome to <strong>Android Design</strong>, your place for - learning how to design exceptional Android apps.</span> - <br><br> - Want to know what <strong>Android 5.0</strong> has for designers? See <a href="{@docRoot}design/patterns/new.html">New in Android</a>.<br><br> - <a href="/design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a> +<section class="dac-expand dac-hero dac-light"> + <div class="wrap"> + <div class="cols dac-hero-content"> + <div class="col-1of2 col-push-1of2 dac-hero-figure"> + <img class="dac-hero-image" src="/design/media/hero-material-design.png"> + </div> + <div class="col-1of2 col-pull-1of2"> + <h1 class="dac-hero-title">Up and running with material design</h1> + <p class="dac-hero-description"> + Android uses a new design metaphor inspired by paper and ink that provides a reassuring + sense of tactility. Visit the <a href="http://www.google.com/design/spec/material-design/introduction">material design</a> site for more resources. + </p> + <a class="dac-hero-cta" href="https://www.google.com/design/spec/material-design/introduction.html"> + <span class="dac-sprite dac-auto-chevron"></span> + Introducing material design + </a><br> + <a class="dac-hero-cta" href="https://www.google.com/design/spec/resources/color-palettes.html"> + <span class="dac-sprite dac-auto-chevron"></span> + Downloads for designers + </a><br> + <a class="dac-hero-cta" href="https://google.com/design/articles/"> + <span class="dac-sprite dac-auto-chevron"></span> + Articles + </a> + </div> + </div> + <div class="dac-section dac-small"> + <div class="resource-widget resource-flow-layout col-16" + data-query="collection:design/landing/materialdesign" + data-cardSizes="6x2" + data-maxResults="6"></div> + </div> </div> - <a id="hero-image" href="/design/get-started/creative-vision.html"> - <img src="{@docRoot}design/media/index_landing_page.png" width="760" height="600" alt="" - srcset="{@docRoot}design/media/index_landing_page_2x.png 2x"/> - </a> +</section> -<div style="background: hsl(8, 70%, 54%); margin: 0; padding: 20px 20px 10px 20px;color: #fff; position: absolute;top: 255px;width: 179px;"> -<h2 style="color: #fff;margin:0 0 10px; font-size:18px" class="norule">Material Design</h2> -<p>Android 5.0 introduces a design -metaphor inspired by paper and ink that provides a reassuring sense of tactility. -</p> -<p><a class="white" href="{@docRoot}design/material/index.html">Learn more</a></p> -</div> +<section class="dac-section dac-gray dac-small dac-invert"><div class="wrap"> + <h2 class="norule">Latest</h2> + <div class="resource-widget resource-flow-layout col-16" + data-query="collection:design/landing/latest" + data-cardSizes="6x6" + data-maxResults="3"></div> +</div></section> -</div> +<section class="dac-section dac-light"><div class="wrap"> + <h1 class="dac-section-title">Pure Android</h1> + <div class="dac-section-subtitle"> + Design around Android's capabilities and conventions to give users the best experience. + </div> + <div class="resource-widget resource-flow-layout col-16" + data-query="collection:design/landing/pureandroid" + data-cardSizes="6x6" + data-maxResults="6"></div> +</div></section> +<section class="dac-section dac-gray"><div class="wrap"> + <h1 class="dac-section-title">Resources</h1> + <div class="dac-section-subtitle"> + Essential downloads, stencils, and tools to help you create your design. + </div> + <div class="resource-widget resource-flow-layout col-16" + data-query="collection:design/landing/resources" + data-cardSizes="6x2" + data-maxResults="6"></div> +</div></section> |