Skip to content
This repository has been archived by the owner on Mar 22, 2019. It is now read-only.

Improves the call to action in the frontpage #2562

Merged
merged 1 commit into from May 9, 2016
Merged

Improves the call to action in the frontpage #2562

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 11 additions & 15 deletions source/about.html.erb
View file
Open in desktop
Expand Up @@ -30,23 +30,19 @@ title: "A framework for creating ambitious web applications."
A framework for creating ambitious web applications.
</h1>

<div id="download">
<div id="download-ember">
<% highlight("shell", "install-ember-cli") do %>
npm install -g ember-cli
ember new my-app
<% end %>
</div>
<div class="call-to-action">
<div class="top">
<h1>Get Started</h1>
<div class="cta-copy">
<p>Build your first Ember application with our 5 minute tutorial.</p>
</div>

<div class="info">
<a href="/builds">More downloads</a>
<a href="https://guides.emberjs.com/v2.5.0/getting-started/quick-start/">View Quick Start guide</a>
Copy link
Member

Choose a reason for hiding this comment

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

This should use the same logic as the guides layout to figure out the version from the JSON file (IMO).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

🤔 versions.json is in another domain, where do we configure guides.emberjs.com's CORS?

Copy link
Member

Choose a reason for hiding this comment

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

It is done in Ruby land at build time, CORS isn't a factor.

</div>
<div class="bottom">
<p>$ npm install -g ember-cli</p>
<p>$ ember new ember-quickstart</p>
</div>

<ul class="social">
<li class="twitter">
<a href="https://twitter.com/emberjs" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @emberjs</a>
</li>
</ul>
</div>

<div class="features section">
Expand Down
56 changes: 56 additions & 0 deletions source/stylesheets/about.css.scss
View file
Open in desktop
Expand Up @@ -90,4 +90,60 @@ body.index, body.about {
#download .info {
text-align: center;
}

.call-to-action {
border-radius: 10px;
background-color: white;
margin: 3em auto;
width: 300px;
text-align: center;

a {
color: #FF2E00;
border: 1px #DDD solid;
font-size: 0.7rem;
border-radius: 7px;
background-color: white;
text-transform: uppercase;
padding: 0.5rem;

&:hover {
color: white;
background-color: #E77462;
}
}

.top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: inset 0 0 4px 2px #DDDDDD;
padding: 1em;
padding-bottom: 2em;

h1 {
margin-top: 1rem;
padding-bottom: 0.5rem;
color: #666;
text-transform: capitalize;
}

.cta-copy {
width: 80%;
margin: 0 auto;
}
}

.bottom {
margin: 0;
background-color: #E46651;
color: white;
font-family: monospace;
text-align: left;
line-height: 0.5;
overflow: hidden;
padding-left: 2em;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
}