Skip to content

fix(aio): swap feature headers for divs to remove anchors #17156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vicb merged 1 commit into from
Jun 1, 2017
Merged

fix(aio): swap feature headers for divs to remove anchors #17156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions aio/content/marketing/features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@
<div class="feature-row">

<div class="feature">
<h5>Progressive Web Apps</h5>
<div class="feature-title">Progressive Web Apps</div>
<p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
High performance, offline, and zero-step installation.</p>
</div>

<div class="feature">
<h5>Native</h5>
<div class="feature-title">Native</div>
<p class="text-body">Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.</p>
</div>

<div class="feature">
<h5>Desktop</h5>
<div class="feature-title">Desktop</div>
<p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.</p>
</div>
</div>
Expand All @@ -34,17 +34,17 @@ <h5>Desktop</h5>
<div class="feature-row">

<div class="feature">
<h5>Code Generation</h5>
<div class="feature-title">Code Generation</div>
<p class="text-body">Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.</p>
</div>

<div class="feature">
<h5>Universal</h5>
<div class="feature-title">Universal</div>
<p class="text-body">Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.</p>
</div>

<div class="feature">
<h5>Code Splitting</h5>
<div class="feature-title">Code Splitting</div>
<p class="text-body">Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.</p>
</div>
</div>
Expand All @@ -58,17 +58,17 @@ <h5>Code Splitting</h5>
<div class="feature-row">

<div class="feature">
<h5>Templates</h5>
<div class="feature-title">Templates</div>
<p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
</div>

<div class="feature">
<h5>Angular CLI</h5>
<div class="feature-title">Angular CLI</div>
<p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
</div>

<div class="feature">
<h5>IDEs</h5>
<div class="feature-title">IDEs</div>
<p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
</div>
</div>
Expand All @@ -82,17 +82,17 @@ <h5>IDEs</h5>
<div class="feature-row">

<div class="feature">
<h5>Testing</h5>
<div class="feature-title">Testing</div>
<p class="text-body">With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.</p>
</div>

<div class="feature">
<h5>Animation</h5>
<div class="feature-title">Animation</div>
<p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
</div>

<div class="feature">
<h5>Accessibility</h5>
<div class="feature-title">Accessibility</div>
<p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
</div>
</div>
Expand Down
11 changes: 11 additions & 0 deletions aio/src/styles/1-layouts/_marketing-layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,10 @@ aio-shell {
}
}

.feature-section img {
max-width: 70px;

@gkalpak gkalpak Jun 1, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there needs to be some clean up wrt img styling. There seem to be rules scattered all over this file 😃
But not directly related to this PR.

}

@media (max-width: 600px) {
md-sidenav-container.sidenav-container {
padding-top: 0;
Expand Down Expand Up @@ -327,6 +331,13 @@ aio-shell {
text-align: center;
}
}

.feature-title {
font-size: 16px;
font-weight: 500;
margin: 8px 0px;
clear: both;
}
}

aio-shell:not(.view-SideNav) {
Expand Down