diff --git a/public/index.jade b/public/index.jade index 4a8132079a..bc2764b8be 100644 --- a/public/index.jade +++ b/public/index.jade @@ -7,12 +7,21 @@ .grid-fluid.l-space-bottom-8 - .c7 + .c6 h3.text-headline Start Quick, Build Fast p.text-body Express your ideas with clean, understandable code. Angular is simple to build on, easy to change, and friendly to the way UX designers work. Create a UI that is beautiful by default, with material design and support for web components. Angular takes just minutes to learn. - .c5 - p(data-height="224" data-theme-id="12714" data-slug-hash="pvKKQa" data-default-tab="html" data-user="alexwolfe" class='codepen') - script(async src="https://assets.codepen.io/assets/embed/ei.js") + .c6 + pre.prettyprint.linenums.is-showcase + code. + @Component({selector: 'my-app'}) + @Template({inline: '<h1>Hi {{ name }}</h1>'}) + + // Component controller + class MyAppComponent { + constructor() { + this.name = 'Alice'; + } + } .grid-fluid.l-space-bottom-8 .c7 diff --git a/public/resources/css/module/_code.scss b/public/resources/css/module/_code.scss index 0ed7cd4a59..83fc8caa61 100644 --- a/public/resources/css/module/_code.scss +++ b/public/resources/css/module/_code.scss @@ -41,6 +41,10 @@ padding: 0px; } + &.is-showcase { + border: 4px solid $regal; + } + ol { background: $steel; padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7);