start styling pro landing page
This commit is contained in:
Lisa P
parent
b350414ae6
commit
811ab63f1e
|
|
@ -65,4 +65,5 @@
|
|||
@import "app/layouts/first-sync";
|
||||
@import "app/layouts/missing-notice";
|
||||
@import "app/layouts/settings";
|
||||
@import "app/layouts/home-pro";
|
||||
|
||||
|
|
|
|||
66
app/styles/app/layouts/home-pro.sass
Normal file
66
app/styles/app/layouts/home-pro.sass
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
.inner
|
||||
margin: auto
|
||||
max-width: 1024px
|
||||
padding: 0 $column-gutter/2
|
||||
|
||||
|
||||
.h1
|
||||
font-size: 50px
|
||||
color: #408692 !important
|
||||
font-weight: 300
|
||||
margin: 0
|
||||
|
||||
%h2
|
||||
font-size: 40px
|
||||
font-weight: 300
|
||||
line-height: 1.2
|
||||
|
||||
.h2--green
|
||||
@extend %h2
|
||||
color: #39A85B
|
||||
|
||||
.h2--teal
|
||||
@extend %h2
|
||||
color: #408692
|
||||
|
||||
.h3
|
||||
font-size: 22px
|
||||
font-weight: 300
|
||||
|
||||
.text-big
|
||||
font-size: 26px
|
||||
font-weight: 300
|
||||
line-height: 1.45
|
||||
|
||||
.text-small
|
||||
font-size: 18px
|
||||
|
||||
.hero-button
|
||||
display: inline-block
|
||||
background:
|
||||
color: #39A85B
|
||||
image: inline-image('landing-page/sign-in-mascot.svg')
|
||||
size: 1.7em
|
||||
position: 0.8em center
|
||||
repeat: no-repeat
|
||||
padding: 0.9em 1em 0.9em 3em
|
||||
margin: 0 auto
|
||||
color: white
|
||||
border-radius: 4px
|
||||
font-size: 27px
|
||||
text-decoration: none
|
||||
&:hover
|
||||
color: white
|
||||
background-color: darken(#39A85B, 10)
|
||||
|
||||
|
||||
.section--grey
|
||||
background-color: #F6F6F6
|
||||
|
||||
.section--white
|
||||
background-color: white
|
||||
|
||||
|
||||
.list--check
|
||||
li
|
||||
@extend .text-big
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<div id="landing" class="landing">
|
||||
<div id="landing" class="landing wrapper">
|
||||
<section class="section--grey">
|
||||
<div class="inner">
|
||||
<div class="section-text">
|
||||
<h1>Builds apps <br class="br-small"> with confidence</h1>
|
||||
<p>Focus on writing code. Let Travis CI take care<br class="br-small"> of running your tests and deploying your apps.</p>
|
||||
<h1 class="h1">Builds apps <br class="br-small"> with confidence</h1>
|
||||
<p class="text-big">Focus on writing code. Let Travis CI take care<br class="br-small"> of running your tests and deploying your apps.</p>
|
||||
<a href="#" class="hero-button" title="Start your free trial">Start your free trial</a>
|
||||
</div>
|
||||
<div class="section-image">
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
</section>
|
||||
<section class="section--white">
|
||||
<div class="inner">
|
||||
<h3>Some pretty awesome companies and projects are a few of our users</h3>
|
||||
<ul>
|
||||
<h3 class="h3">Some pretty awesome companies and projects are a few of our users</h3>
|
||||
<ul class="list--logos">
|
||||
<li><a href="#">zendesk</a></li>
|
||||
<li><a href="#">heroku</a></li>
|
||||
<li><a href="#">Engine Yard</a></li>
|
||||
|
|
@ -29,29 +29,29 @@
|
|||
<ul>
|
||||
<li>
|
||||
<span>GH</span>
|
||||
<h3>Get set up in seconds</h3>
|
||||
<p>Login with GitHub, tell Travis CI to test a project, and then push to GitHub. Could it be any simpler!</p>
|
||||
<h3 class="h3">Get set up in seconds</h3>
|
||||
<p class="text-small">Login with GitHub, tell Travis CI to test a project, and then push to GitHub. Could it be any simpler!</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>DB</span>
|
||||
<h3>Supports your platform</h3>
|
||||
<p>Many databases and services are pre-installed and can be enabled in your build configuration.</p>
|
||||
<h3 class="h3">Supports your platform</h3>
|
||||
<p class="text-small">Many databases and services are pre-installed and can be enabled in your build configuration.</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>PR</span>
|
||||
<h3>Test your pull requests</h3>
|
||||
<p>Make sure every Pull Request to your project is tested before it's merged.</p>
|
||||
<h3 class="h3">Test your pull requests</h3>
|
||||
<p class="text-small">Make sure every Pull Request to your project is tested before it's merged.</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>HEROKU</span>
|
||||
<h3>Deploy anywhere</h3>
|
||||
<p>Updating staging or production as soon as your tests pass has never been easier!</p>
|
||||
<h3 class="h3">Deploy anywhere</h3>
|
||||
<p class="text-small">Updating staging or production as soon as your tests pass has never been easier!</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section-text">
|
||||
<h2>Features created to help your projects and teams</h2>
|
||||
<ul>
|
||||
<h2 class="h2--green">Features created to help your projects and teams</h2>
|
||||
<ul class="list--check">
|
||||
<li>Watch your tests as they run</li>
|
||||
<li>Keep your config with your code</li>
|
||||
<li>Slack, HipChat, Emails and more</li>
|
||||
|
|
@ -65,8 +65,8 @@
|
|||
</section>
|
||||
<section class="section--white">
|
||||
<div class="inner">
|
||||
<h3>Supported languages</h3>
|
||||
<p>These are just a few of our most popular languages, check out the full list <a href="#">in our docs</a>.</p>
|
||||
<h3 class="h3">Supported languages</h3>
|
||||
<p class="text-small">These are just a few of our most popular languages, check out the full list <a href="#">in our docs</a>.</p>
|
||||
<ul>
|
||||
<li><span></span>Clojure</li>
|
||||
<li><span></span>Node</li>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
</section>
|
||||
<section class="section--grey">
|
||||
<div class="inner">
|
||||
<h2>Interested in running your <br class="br-small"> private projects with Travis CI?</h2>
|
||||
<h2 class="h2--teal">Interested in running your <br class="br-small"> private projects with Travis CI?</h2>
|
||||
<a href="#">Start your free trial</a>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user