vertically align langing sections
This commit is contained in:
Lisa Passing
parent
4cbc492178
commit
4f9b286605
|
|
@ -71,6 +71,11 @@
|
||||||
max-width: 1024px
|
max-width: 1024px
|
||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
|
|
||||||
|
> .columns.medium-6:first-child
|
||||||
|
padding-right: 2em
|
||||||
|
> .columns.medium-6:last-child
|
||||||
|
padding-left: 2em
|
||||||
|
|
||||||
#laptop
|
#laptop
|
||||||
margin-bottom: -192px
|
margin-bottom: -192px
|
||||||
|
|
||||||
|
|
@ -134,6 +139,7 @@
|
||||||
.recent-builds
|
.recent-builds
|
||||||
background-color: #faf9f6
|
background-color: #faf9f6
|
||||||
text-align: center
|
text-align: center
|
||||||
|
min-height: 44rem
|
||||||
|
|
||||||
h2
|
h2
|
||||||
color: #db4141
|
color: #db4141
|
||||||
|
|
@ -253,8 +259,6 @@
|
||||||
&.inactive .name
|
&.inactive .name
|
||||||
color: $cancel-color
|
color: $cancel-color
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.free-for-oss
|
.free-for-oss
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
|
|
@ -495,3 +499,13 @@
|
||||||
@media (max-width: 608px)
|
@media (max-width: 608px)
|
||||||
br.mobile-break
|
br.mobile-break
|
||||||
display: inline-break
|
display: inline-break
|
||||||
|
|
||||||
|
.landing-vert-center-m
|
||||||
|
@media #{$medium-up}
|
||||||
|
position: relative
|
||||||
|
transform: translateY(65%)
|
||||||
|
.landing-vert-center-s
|
||||||
|
@media #{$medium-up}
|
||||||
|
position: relative
|
||||||
|
overflow: auto
|
||||||
|
transform: translateY(7%)
|
||||||
|
|
|
||||||
|
|
@ -1,117 +1,123 @@
|
||||||
<div id="landing">
|
<div id="landing">
|
||||||
<div class="row hero z-1">
|
<div class="row hero z-1">
|
||||||
<div class="landing-centered-wrapper">
|
<div 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 projects with Github<br class="mobile-break"> and you’ll be testing your in minutes!</p>
|
<p>Easily sync projects with Github<br class="mobile-break"> and you’ll be testing your in minutes!</p>
|
||||||
<a href="#" class="button"><img src="../images/landing-page/sign-in-mascot.svg" class="sign-in-mascot">Sign Up</a>
|
<a href="#" class="button"><img src="../images/landing-page/sign-in-mascot.svg" class="sign-in-mascot">Sign Up</a>
|
||||||
</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">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row oss-testing">
|
<div class="row oss-testing">
|
||||||
<div class="landing-centered-wrapper">
|
<div class="landing-centered-wrapper">
|
||||||
<div class="large-12 columns">
|
<div class="large-12 columns">
|
||||||
<h2>The home for<br class="mobile-break"> open source testing</h2>
|
<h2>The home for<br class="mobile-break"> open source testing</h2>
|
||||||
<p>Over 200k open source projects<br class="mobile-break"> and 126k users are testing on Travis CI.</p>
|
<p>Over 200k open source projects<br class="mobile-break"> and 126k users are testing on Travis CI.</p>
|
||||||
<img src="../images/landing-page/customer-numbers.svg">
|
<img src="../images/landing-page/customer-numbers.svg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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">
|
||||||
</div>
|
</div>
|
||||||
<div class="medium-6 columns">
|
<div class="medium-6 columns">
|
||||||
<p class="left">Some pretty awesome companies<br>and projects are a few of our users</p>
|
<p class="left">Some pretty awesome companies<br>and projects are a few of our users</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row recent-builds">
|
<div class="row recent-builds">
|
||||||
<div class="landing-centered-wrapper">
|
<div class="landing-centered-wrapper">
|
||||||
<div class="medium-6 columns">
|
<div class="medium-6 columns">
|
||||||
<h2>Every minute there’s<br>a new build triggered</h2>
|
<div class="landing-vert-center-m">
|
||||||
<p>Here are just a few projects<br>currently running on Travis CI</p>
|
<h2>Every minute there’s<br>a new build triggered</h2>
|
||||||
</div>
|
<p>Here are just a few projects<br>currently running on Travis CI</p>
|
||||||
<div class="medium-6 columns">
|
</div>
|
||||||
<ul class="repos">
|
</div>
|
||||||
{{#each repo in repos}}
|
<div class="medium-6 columns">
|
||||||
<li {{bind-attr class=":repo repo.lastBuild.state"}}>
|
<ul class="repos">
|
||||||
<span class="tile-status">
|
{{#each repo in repos}}
|
||||||
<span {{bind-attr class=":icon :icon-status repo.lastBuild.state"}}></span>
|
<li {{bind-attr class=":repo repo.lastBuild.state"}}>
|
||||||
</span>
|
<span class="tile-status">
|
||||||
<span class="owner">{{repo.owner}}</span>
|
<span {{bind-attr class=":icon :icon-status repo.lastBuild.state"}}></span>
|
||||||
<span class="name">{{repo.name}}</span>
|
</span>
|
||||||
{{#link-to "build" repo repo.lastBuild.id class="number"}}{{repo.lastBuild.number}} <span class="state">{{repo.lastBuild.state}}</span>{{/link-to}}
|
<span class="owner">{{repo.owner}}</span>
|
||||||
<span class="commit">{{format-sha repo.lastBuild.commit.sha}}</span>
|
<span class="name">{{repo.name}}</span>
|
||||||
<span class="branch">{{repo.lastBuild.branch}}</span>
|
{{#link-to "build" repo repo.lastBuild.id class="number"}}{{repo.lastBuild.number}} <span class="state">{{repo.lastBuild.state}}</span>{{/link-to}}
|
||||||
<span class="finished-at">
|
<span class="commit">{{format-sha repo.lastBuild.commit.sha}}</span>
|
||||||
{{landing-page-last-build-time repo.lastBuild.finishedAt}}
|
<span class="branch">{{repo.lastBuild.branch}}</span>
|
||||||
</span>
|
<span class="finished-at">
|
||||||
</li>
|
{{landing-page-last-build-time repo.lastBuild.finishedAt}}
|
||||||
{{else}}
|
</span>
|
||||||
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
|
</li>
|
||||||
{{/each}}
|
{{else}}
|
||||||
</ul>
|
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
|
||||||
</div>
|
{{/each}}
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row free-for-oss">
|
<div class="row free-for-oss">
|
||||||
<div class="landing-centered-wrapper">
|
<div 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 always 10,000% free</h1>
|
<h1>Testing your open source<br class="mobile-no-break"> project is always 10,000% 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row private-repos">
|
<div class="row private-repos">
|
||||||
<div class="landing-centered-wrapper">
|
<div 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>
|
||||||
|
|
||||||
<div class="medium-6 columns">
|
<div class="medium-6 columns">
|
||||||
<h2>Have a private project<br>you’d like to test?</h2>
|
<div class="landing-vert-center-s">
|
||||||
<p>Travis CI for private repositories has<br>plans for every size project.</p>
|
<h2>Have a private project<br>you’d like to test?</h2>
|
||||||
</div>
|
<p>Travis CI for private repositories has<br>plans for every size project.</p>
|
||||||
<div class="medium-6 columns desktop-envelope">
|
</div>
|
||||||
<img src="../images/landing-page/envelope.svg">
|
</div>
|
||||||
</div>
|
<div class="medium-6 columns desktop-envelope">
|
||||||
</div>
|
<img src="../images/landing-page/envelope.svg">
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row features-list">
|
<div class="row features-list">
|
||||||
<div class="landing-centered-wrapper">
|
<div class="landing-centered-wrapper">
|
||||||
<div class="large-6 columns features-callouts">
|
<div class="large-6 columns features-callouts">
|
||||||
<div class="medium-6 columns">
|
<div class="landing-vert-center-s">
|
||||||
<h3 id="f-co-1">Get set up in seconds</h3>
|
<div class="medium-6 columns">
|
||||||
<p>Login with GitHub, tell Travis CI to test a project, and then push to GitHub. Could it be any simpler!</p>
|
<h3 id="f-co-1">Get set up in seconds</h3>
|
||||||
</div>
|
<p>Login with GitHub, tell Travis CI to test a project, and then push to GitHub. Could it be any simpler!</p>
|
||||||
<div class="medium-6 columns">
|
</div>
|
||||||
<h3 id="f-co-2">Multi-language support</h3>
|
<div class="medium-6 columns">
|
||||||
<p>Make sure your code runs against all versions of your favorite language without breaking a sweat.</p>
|
<h3 id="f-co-2">Multi-language support</h3>
|
||||||
</div>
|
<p>Make sure your code runs against all versions of your favorite language without breaking a sweat.</p>
|
||||||
<div class="medium-6 columns">
|
</div>
|
||||||
<h3 id="f-co-3">Test your pull requests</h3>
|
<div class="medium-6 columns">
|
||||||
<p>Make sure every Pull Request to your project is tested before merging.</p>
|
<h3 id="f-co-3">Test your pull requests</h3>
|
||||||
</div>
|
<p>Make sure every Pull Request to your project is tested before merging.</p>
|
||||||
<div class="medium-6 columns">
|
</div>
|
||||||
<h3 id="f-co-4">Deploy to s3 and Heroku</h3>
|
<div class="medium-6 columns">
|
||||||
<p>Updating staging or production as soon as your tests pass has never been easier!</p>
|
<h3 id="f-co-4">Deploy to s3 and Heroku</h3>
|
||||||
</div>
|
<p>Updating staging or production as soon as your tests pass has never been easier!</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="large-6 columns features-checked">
|
</div>
|
||||||
<h2>Features created to<br class="mobile-break"> help your projects and teams</h2>
|
</div>
|
||||||
|
<div class="large-6 columns features-checked">
|
||||||
|
<h2>Features created to<br class="mobile-break"> help your projects and teams</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Watch your tests as they run</li>
|
<li>Watch your tests as they run</li>
|
||||||
<li>Keep your config with your code</li>
|
<li>Keep your config with your code</li>
|
||||||
|
|
@ -122,112 +128,112 @@
|
||||||
<li>Great API and command line tool</li>
|
<li>Great API and command line tool</li>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row build-flows">
|
<div class="row build-flows">
|
||||||
<div class="landing-centered-wrapper">
|
<div 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">
|
||||||
<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">
|
||||||
</div>
|
</div>
|
||||||
<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">
|
||||||
<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">
|
||||||
</div>
|
</div>
|
||||||
<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">
|
||||||
<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">
|
||||||
</div>
|
</div>
|
||||||
<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">
|
||||||
<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">
|
||||||
</div>
|
</div>
|
||||||
<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">
|
||||||
<p>Travis CI tells the<br>team all is good</p>
|
<p>Travis CI tells the<br>team all is good</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">
|
||||||
<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">
|
||||||
</div>
|
</div>
|
||||||
<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">
|
||||||
<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">
|
||||||
</div>
|
</div>
|
||||||
<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">
|
||||||
<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">
|
||||||
</div>
|
</div>
|
||||||
<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">
|
||||||
<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">
|
||||||
</div>
|
</div>
|
||||||
<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">
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row user-testimonials">
|
<div class="row user-testimonials">
|
||||||
<div class="landing-centered-wrapper">
|
<div 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">
|
||||||
<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 wouldn’t be catching issues as quickly or smoothly without the help of Travis.<br>
|
<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 wouldn’t be catching issues as quickly or smoothly without the help of Travis.<br>
|
||||||
David Heinemeier Hansson Founder & CTO at Basecamp<br>@dhh</p>
|
David Heinemeier Hansson Founder & CTO at Basecamp<br>@dhh</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.<br>
|
<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.<br>
|
||||||
Chris Aniszczyk Head of Open Source at Twitter<br>
|
Chris Aniszczyk Head of Open Source at Twitter<br>
|
||||||
@cra</p>
|
@cra</p>
|
||||||
|
|
||||||
<p>Not only is Travis CI the best way to test your software, it is the right way. rm -rf jenkins && touch .travis.yml<br>
|
<p>Not only is Travis CI the best way to test your software, it is the right way. rm -rf jenkins && touch .travis.yml<br>
|
||||||
Alex Gaynor PyPy and Python Core Team Member<br>
|
Alex Gaynor PyPy and Python Core Team Member<br>
|
||||||
alex</p>
|
alex</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user