update org landing page, fix gigantic number

This commit is contained in:
lislis 2016-04-14 17:00:55 +02:00
parent b9688352f4
commit 812bf1a4f5
2 changed files with 46 additions and 42 deletions

View File

@ -11,14 +11,14 @@
background-color: #ffffff background-color: #ffffff
background-image: inline-image('landing-page/signingithub.svg') background-image: inline-image('landing-page/signingithub.svg')
background-size: 16px 16px background-size: 16px 16px
border: 2px solid #e4e7e7 border: 2px solid rgba($cement-grey, .4)
color: #a0a8a8 color: $cement-grey
.button--signingin .button--signingin
border: 2px solid #3FA75F border: 2px solid $turf-green
.button--signin:hover .button--signin:hover
background-color: #73c78d background-color: $turf-green
background-image: inline-image('landing-page/signingithub-hover.svg') background-image: inline-image('landing-page/signingithub-hover.svg')
border: 2px solid #73c78d border: 2px solid $turf-green
color: #fff color: #fff
.landing-centered-wrapper .landing-centered-wrapper
@ -37,7 +37,7 @@
font-size: 5em font-size: 5em
line-height: 1em line-height: 1em
font-weight: 300 font-weight: 300
color: #8f9294 color: $cement-grey
margin-bottom: 0 margin-bottom: 0
.hero, .oss-testing, .customers, .recent-builds, .free-for-oss, .private-repos, .features-list, .build-flows, .user-testimonials .hero, .oss-testing, .customers, .recent-builds, .free-for-oss, .private-repos, .features-list, .build-flows, .user-testimonials
@ -52,7 +52,7 @@
font-size: 3.3em font-size: 3.3em
line-height: 1.15em line-height: 1.15em
font-weight: 300 font-weight: 300
color: #39a85b color: $turf-green
p p
line-height: 1.5em line-height: 1.5em
@ -129,6 +129,10 @@
br.mobile-break br.mobile-break
display: none display: none
.os-numbers
width: 80%
@media #{$medium-up}
width: 60%
.customers .customers
text-align: center text-align: center

View File

@ -1,7 +1,7 @@
{{#travis-layout layoutName="layouts/landing-page"}} {{#travis-layout layoutName="layouts/landing-page"}}
<div id="landing" class="landing"> <div id="landing" class="landing">
<div class="row hero z-1"> <div class="row hero z-1">
<div class="landing-centered-wrapper"> <section class="landing-centered-wrapper">
<div class="large-12 columns" id="hero-copy"> <div class="large-12 columns" id="hero-copy">
<h1>Test and Deploy with Confidence</h1> <h1>Test and Deploy with Confidence</h1>
<p>Easily sync your GitHub projects with Travis CI<br class="mobile-break"> and youll be testing your code in minutes!</p> <p>Easily sync your GitHub projects with Travis CI<br class="mobile-break"> and youll be testing your code in minutes!</p>
@ -16,25 +16,26 @@
</div> </div>
<div class="large-12 columns laptop-wrapper"> <div class="large-12 columns laptop-wrapper">
<div id="laptop"> <div id="laptop">
<img src="../images/landing-page/laptop.png"> <img src="../images/landing-page/laptop.png" alt="Travis CI screenshot">
</div> </div>
</div> </div>
</div> </section>
</div> </div>
<div class="row oss-testing"> <div class="row oss-testing">
<div class="landing-centered-wrapper"> <section class="landing-centered-wrapper">
<div class="large-12 columns"> <div class="large-12 columns">
<h2>The home of<br class="mobile-break"> open source testing</h2> <h2>The home of<br class="mobile-break"> open source testing</h2>
<p>Over 320k open source projects<br class="mobile-break"> and 235k users are testing on Travis CI.</p> <p>Over 300k open source projects<br class="mobile-break"> and 235k users are testing on Travis CI.</p>
<img src="../images/landing-page/customer-numbers.svg"> <img src="../images/landing-page/customer-numbers.svg" alt="Open source project numbers" class="os-numbers">
</div>
</div> </div>
</section>
</div>
<div class="row customers"> <div class="row customers">
<div class="landing-centered-wrapper"> <div class="landing-centered-wrapper">
<div class="medium-6 columns"> <div class="medium-6 columns">
<img src="../images/landing-page/customers-temp-together.svg"> <img src="../images/landing-page/customers-temp-together.svg" alt="customer logos">
</div> </div>
<div class="medium-6 columns"> <div class="medium-6 columns">
<p class="left">Some pretty awesome companies<br> and projects are using us.</p> <p class="left">Some pretty awesome companies<br> and projects are using us.</p>
@ -43,16 +44,16 @@
</div> </div>
<div class="row free-for-oss"> <div class="row free-for-oss">
<div class="landing-centered-wrapper"> <section class="landing-centered-wrapper">
<div class="large-12 columns"> <div class="large-12 columns">
<h1>Testing your open source<br class="mobile-no-break"> project is 10000% free</h1> <h1>Testing your open source<br class="mobile-no-break"> project is 10000% free</h1>
<p><span class="bold-italic">Seriously. Always.</span> We like to think of it as our way of giving<br>back to a community that gives us so much as well.</p> <p><span class="bold-italic">Seriously. Always.</span> We like to think of it as our way of giving<br>back to a community that gives us so much as well.</p>
</div> </div>
</div> </section>
</div> </div>
<div class="row private-repos"> <div class="row private-repos">
<div class="landing-centered-wrapper"> <section class="landing-centered-wrapper">
<div class="medium-6 columns mobile-envelope"> <div class="medium-6 columns mobile-envelope">
<img src="../images/landing-page/envelope.svg"> <img src="../images/landing-page/envelope.svg">
</div> </div>
@ -64,13 +65,13 @@
</div> </div>
</div> </div>
<div class="medium-6 columns desktop-envelope"> <div class="medium-6 columns desktop-envelope">
<img src="../images/landing-page/envelope.svg"> <img src="../images/landing-page/envelope.svg" alt="envelope">
</div> </div>
</div> </section>
</div> </div>
<div class="row features-list"> <div class="row features-list">
<div class="landing-centered-wrapper"> <section class="landing-centered-wrapper">
<div class="large-6 columns features-callouts"> <div class="large-6 columns features-callouts">
<div class="landing-vert-center-s"> <div class="landing-vert-center-s">
<div class="medium-6 columns"> <div class="medium-6 columns">
@ -104,16 +105,16 @@
<li>Did we say free for Open Source already?</li> <li>Did we say free for Open Source already?</li>
</ul> </ul>
</div> </div>
</div> </section>
</div> </div>
<div class="row build-flows"> <div class="row build-flows">
<div class="landing-centered-wrapper"> <section class="landing-centered-wrapper">
<div class="large-12 columns"> <div class="large-12 columns">
<h2>Branch build flow</h2> <h2>Branch build flow</h2>
<div class="branch-bf"> <div class="branch-bf">
<div class="bf"> <div class="bf">
<img src="../images/landing-page/push-icon-1.svg"> <img src="../images/landing-page/push-icon-1.svg" alt="GitHub logo">
<p>You push your<br>code to GitHub</p> <p>You push your<br>code to GitHub</p>
</div> </div>
<div class="divider-line-horizontal"> <div class="divider-line-horizontal">
@ -121,7 +122,7 @@
<div class="divider-line-vertical"> <div class="divider-line-vertical">
</div> </div>
<div class="bf"> <div class="bf">
<img src="../images/landing-page/push-icon-2.svg"> <img src="../images/landing-page/push-icon-2.svg" alt="Trigger build">
<p>GitHub triggers<br>Travis CI to build</p> <p>GitHub triggers<br>Travis CI to build</p>
</div> </div>
<div class="divider-line-horizontal"> <div class="divider-line-horizontal">
@ -129,7 +130,7 @@
<div class="divider-line-vertical"> <div class="divider-line-vertical">
</div> </div>
<div class="bf"> <div class="bf">
<img src="../images/landing-page/push-icon-3.svg"> <img src="../images/landing-page/push-icon-3.svg" alt="Travis logo">
<p>Hooray!<br>Your build passes!</p> <p>Hooray!<br>Your build passes!</p>
</div> </div>
<div class="divider-line-horizontal"> <div class="divider-line-horizontal">
@ -137,7 +138,7 @@
<div class="divider-line-vertical"> <div class="divider-line-vertical">
</div> </div>
<div class="bf"> <div class="bf">
<img src="../images/landing-page/push-icon-4.svg"> <img src="../images/landing-page/push-icon-4.svg" alt="Heroku logo">
<p>Travis CI deploys<br>to Heroku</p> <p>Travis CI deploys<br>to Heroku</p>
</div> </div>
<div class="divider-line-horizontal"> <div class="divider-line-horizontal">
@ -145,14 +146,14 @@
<div class="divider-line-vertical"> <div class="divider-line-vertical">
</div> </div>
<div class="bf"> <div class="bf">
<img src="../images/landing-page/push-icon-5.svg"> <img src="../images/landing-page/push-icon-5.svg" alt="Slack logo">
<p>Travis CI tells the<br>team all is well</p> <p>Travis CI tells the<br>team all is well</p>
</div> </div>
</div> </div>
<h2 id="pr-bf-margin">Pull request build flow</h2> <h2 id="pr-bf-margin">Pull request build flow</h2>
<div class="branch-bf"> <div class="branch-bf">
<div class="bf"> <div class="bf">
<img src="../images/landing-page/pull-icon-1.svg"> <img src="../images/landing-page/pull-icon-1.svg" alt="PR icon">
<p>A pull request<br>is created</p> <p>A pull request<br>is created</p>
</div> </div>
<div class="divider-line-horizontal"> <div class="divider-line-horizontal">
@ -160,7 +161,7 @@
<div class="divider-line-vertical"> <div class="divider-line-vertical">
</div> </div>
<div class="bf"> <div class="bf">
<img src="../images/landing-page/pull-icon-2.svg"> <img src="../images/landing-page/pull-icon-2.svg" alt="Check test">
<p>GitHub tells Travis CI the build is mergeable</p> <p>GitHub tells Travis CI the build is mergeable</p>
</div> </div>
<div class="divider-line-horizontal"> <div class="divider-line-horizontal">
@ -168,7 +169,7 @@
<div class="divider-line-vertical"> <div class="divider-line-vertical">
</div> </div>
<div class="bf"> <div class="bf">
<img src="../images/landing-page/push-icon-3.svg"> <img src="../images/landing-page/push-icon-3.svg" alt="Tavis logo">
<p>Hooray!<br>Your build passes!</p> <p>Hooray!<br>Your build passes!</p>
</div> </div>
<div class="divider-line-horizontal"> <div class="divider-line-horizontal">
@ -176,7 +177,7 @@
<div class="divider-line-vertical"> <div class="divider-line-vertical">
</div> </div>
<div class="bf"> <div class="bf">
<img src="../images/landing-page/pull-icon-4.svg"> <img src="../images/landing-page/pull-icon-4.svg" alt="Build status">
<p>Travis CI updates the PR that it passed</p> <p>Travis CI updates the PR that it passed</p>
</div> </div>
<div class="divider-line-horizontal"> <div class="divider-line-horizontal">
@ -184,22 +185,22 @@
<div class="divider-line-vertical"> <div class="divider-line-vertical">
</div> </div>
<div class="bf"> <div class="bf">
<img src="../images/landing-page/pull-icon-5.svg"> <img src="../images/landing-page/pull-icon-5.svg" alt="Merge icon">
<p>You merge in<br>the PR goodness</p> <p>You merge in<br>the PR goodness</p>
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</div> </div>
<div class="row user-testimonials"> <div class="row user-testimonials">
<div class="landing-centered-wrapper"> <section class="landing-centered-wrapper">
<div class="medium-6 columns"> <div class="medium-6 columns">
<h2>Some people have said some pretty nice things about us</h2> <h2>Some people have said some pretty nice things about us</h2>
</div> </div>
<div class="medium-6 columns"> <div class="medium-6 columns">
<div class="small-3 columns"> <div class="small-3 columns">
<img src="../images/landing-page/dhh.png" class="home-avatar"> <img src="../images/landing-page/dhh.png" class="home-avatar" alt="image DHH">
</div> </div>
<div class="small-9 columns"> <div class="small-9 columns">
<p>Travis CI makes it so much easier for us to coordinate the thousands of commits and contributors that flow through the Rails code base. The test suite for such a large project is vast, and we wouldnt be catching issues as quickly or smoothly without the help of Travis.</p> <p>Travis CI makes it so much easier for us to coordinate the thousands of commits and contributors that flow through the Rails code base. The test suite for such a large project is vast, and we wouldnt be catching issues as quickly or smoothly without the help of Travis.</p>
@ -208,7 +209,7 @@
</div> </div>
<div class="small-3 columns"> <div class="small-3 columns">
<img src="../images/landing-page/chris.png" class="home-avatar"> <img src="../images/landing-page/chris.png" class="home-avatar" alt="image Chris Aniszczyk">
</div> </div>
<div class="small-9 columns"> <div class="small-9 columns">
<p>We love Travis CI at @TwitterOSS and use it for the majority of our open source projects on GitHub. Travis CI is simple to use, we love their API to build tooling and adore the new container infrastructure for speedier builds.</p> <p>We love Travis CI at @TwitterOSS and use it for the majority of our open source projects on GitHub. Travis CI is simple to use, we love their API to build tooling and adore the new container infrastructure for speedier builds.</p>
@ -217,7 +218,7 @@
</div> </div>
<div class="small-3 columns"> <div class="small-3 columns">
<img src="../images/landing-page/alex.png" class="home-avatar"> <img src="../images/landing-page/alex.png" class="home-avatar" alt="Alex Gaynor">
</div> </div>
<div class="small-9 columns"> <div class="small-9 columns">
<p>Not only is Travis CI the best way to test your software, it is the right way. rm -rf jenkins &amp;&amp; touch .travis.yml</p> <p>Not only is Travis CI the best way to test your software, it is the right way. rm -rf jenkins &amp;&amp; touch .travis.yml</p>
@ -225,8 +226,7 @@
<p class="title">PyPy and Python Core Team Member</p> <p class="title">PyPy and Python Core Team Member</p>
</div> </div>
</div> </div>
</div> </section>
</div> </div>
</div> </div>
</div>
{{/travis-layout}} {{/travis-layout}}