more styling for .com landing page
This commit is contained in:
Lisa P
parent
e47ec2f581
commit
fda6e7f6f9
|
|
@ -1,6 +1,11 @@
|
|||
.landing
|
||||
width: 100%
|
||||
.landing-pro
|
||||
.wrapper
|
||||
width: 100%
|
||||
padding-bottom: 0
|
||||
margin-bottom: 0
|
||||
|
||||
.landing-footer
|
||||
margin-top: 0
|
||||
|
||||
.inner
|
||||
margin: auto
|
||||
|
|
@ -28,6 +33,7 @@
|
|||
color: #408692
|
||||
|
||||
.h3
|
||||
margin: .5em 0
|
||||
font-size: 22px
|
||||
font-weight: 300
|
||||
|
||||
|
|
@ -37,26 +43,35 @@
|
|||
line-height: 1.55
|
||||
|
||||
.text-small
|
||||
margin: 0
|
||||
font-size: 18px
|
||||
|
||||
.hero-button
|
||||
|
||||
.landing-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
|
||||
padding: 0.9em 1em
|
||||
margin: 0 auto
|
||||
color: white
|
||||
border-radius: 2px
|
||||
font-size: 27px
|
||||
text-decoration: none
|
||||
background-color: #39A85B
|
||||
&:hover
|
||||
color: white
|
||||
background-color: #73c78d
|
||||
|
||||
.hero-button
|
||||
@extend .landing-button
|
||||
padding: 0.9em 1em 0.9em 3em
|
||||
background:
|
||||
image: inline-image('landing-page/sign-in-mascot.svg')
|
||||
size: 1.7em
|
||||
position: 0.8em center
|
||||
repeat: no-repeat
|
||||
|
||||
.hero-computer
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
.section--grey
|
||||
background-color: #F6F6F6
|
||||
|
|
@ -119,7 +134,7 @@
|
|||
margin-right: .3em
|
||||
vertical-align: middle
|
||||
background:
|
||||
image: url(../images/line-icons/icon-passed.svg)
|
||||
image: inline-image('line-icons/icon-passed.svg')
|
||||
|
||||
|
||||
.list--features
|
||||
|
|
@ -145,15 +160,36 @@
|
|||
position: center center
|
||||
|
||||
.customer-zendesk
|
||||
background-image: url(../images/pro-landing/customer-logos-zendesk.svg)
|
||||
background-image: inline-image('pro-landing/customer-logos-zendesk.svg')
|
||||
.customer-heroku
|
||||
background-image: url(../images/pro-landing/customer-logos-heroku.svg)
|
||||
background-image: inline-image('pro-landing/customer-logos-heroku.svg')
|
||||
.customer-engineyard
|
||||
background-image: url(../images/pro-landing/customer-logos-engineyard.svg)
|
||||
background-image: inline-image('pro-landing/customer-logos-engineyard.svg')
|
||||
.customer-bittorrent
|
||||
background-image: url(../images/pro-landing/customer-logos-bittorrent.svg)
|
||||
background-image: inline-image('pro-landing/customer-logos-bittorrent.svg')
|
||||
.customer-moz
|
||||
background-image: url(../images/pro-landing/customer-logos-moz.svg)
|
||||
background-image: inline-image('pro-landing/customer-logos-moz.svg')
|
||||
|
||||
|
||||
[class^="feature-"]
|
||||
display: block
|
||||
height: 2.5em
|
||||
width: 2.5em
|
||||
overflow: hidden
|
||||
margin: auto
|
||||
background:
|
||||
repeat: no-repeat
|
||||
size: 100%
|
||||
position: center center
|
||||
|
||||
.feature-github
|
||||
background-image: inline-image('pro-landing/feature-icon-github.svg')
|
||||
.feature-db
|
||||
background-image: inline-image('pro-landing/feature-icon-platform.svg')
|
||||
.feature-pr
|
||||
background-image: inline-image('pro-landing/feature-icon-pullrequests.svg')
|
||||
.feature-heroku
|
||||
background-image: inline-image('pro-landing/feature-icon-heroku.svg')
|
||||
|
||||
|
||||
[class^="language-"]
|
||||
|
|
@ -167,27 +203,27 @@
|
|||
position: center center
|
||||
|
||||
.language-clojure
|
||||
background-image: url(../images/pro-landing/lang-clojure.svg)
|
||||
background-image: inline-image('pro-landing/lang-clojure.svg')
|
||||
.language-node
|
||||
background-image: url(../images/pro-landing/lang-nodejs.svg)
|
||||
background-image: inline-image('pro-landing/lang-nodejs.svg')
|
||||
.language-php
|
||||
background-image: url(../images/pro-landing/lang-php.svg)
|
||||
background-image: inline-image('pro-landing/lang-php.svg')
|
||||
.language-xcode
|
||||
background-image: url(../images/pro-landing/lang-xcode.svg)
|
||||
background-image: inline-image('pro-landing/lang-xcode.svg')
|
||||
.language-ruby
|
||||
background-image: url(../images/pro-landing/lang-ruby.svg)
|
||||
background-image: inline-image('pro-landing/lang-ruby.svg')
|
||||
.language-python
|
||||
background-image: url(../images/pro-landing/lang-python.svg)
|
||||
background-image: inline-image('pro-landing/lang-python.svg')
|
||||
.language-java
|
||||
background-image: url(../images/pro-landing/lang-java.svg)
|
||||
background-image: inline-image('pro-landing/lang-java.svg')
|
||||
.language-erlang
|
||||
background-image: url(../images/pro-landing/lang-erlang.svg)
|
||||
background-image: inline-image('pro-landing/lang-erlang.svg')
|
||||
.language-go
|
||||
background-image: url(../images/pro-landing/lang-go.svg)
|
||||
background-image: inline-image('pro-landing/lang-go.svg')
|
||||
.language-scala
|
||||
background-image: url(../images/pro-landing/lang-scala.svg)
|
||||
background-image: inline-image('pro-landing/lang-scala.svg')
|
||||
.language-perl
|
||||
background-image: url(../images/pro-landing/lang-perl.svg)
|
||||
background-image: inline-image('pro-landing/lang-perl.svg')
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="landing" class="landing landing-pro wrapper">
|
||||
<div id="landing" class="landing wrapper">
|
||||
<section class="section--hero section--grey">
|
||||
<div class="inner">
|
||||
<div class="section-text">
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<a href="#" class="hero-button" title="Start your free trial">Start your free trial</a>
|
||||
</div>
|
||||
<div class="section-image">
|
||||
computer
|
||||
<img src="../images/pro-landing/hero-screen.svg" class="hero-computer" aria-hidden="true">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -28,22 +28,22 @@
|
|||
<div class="section-list section--center">
|
||||
<ul class="list--features">
|
||||
<li>
|
||||
<span>GH</span>
|
||||
<span class="feature-github" aria-hidden="true"></span>
|
||||
<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>
|
||||
<span class="feature-db" aria-hidden="true"></span>
|
||||
<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>
|
||||
<span class="feature-pr" aria-hidden="true"></span>
|
||||
<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>
|
||||
<span class="feature-heroku" aria-hidden="true"></span>
|
||||
<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>
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
<section class="section--grey section--center">
|
||||
<div class="inner">
|
||||
<h2 class="h2--teal">Interested in running your <br class="br-small"> private projects with Travis CI?</h2>
|
||||
<a href="#" class="hero-button">Start your free trial</a>
|
||||
<a href="#" class="landing-button">Start your free trial</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -6,6 +6,6 @@
|
|||
|
||||
{{yield}}
|
||||
|
||||
<footer>
|
||||
<footer class="landing-footer">
|
||||
{{render "footer"}}
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
`import BasicView from 'travis/views/basic'`
|
||||
|
||||
View = BasicView.extend
|
||||
|
||||
classNames: ['landing-pro']
|
||||
layoutName: 'layouts/landing-page'
|
||||
|
||||
`export default View`
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<svg version="1.1" id="github-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 28 27.7" style="enable-background:new 0 0 28 27.7;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#C7C8C9;}
|
||||
.st0{fill:#97A1AA;}
|
||||
</style>
|
||||
<g id="circledgithub">
|
||||
<path class="st0" d="M11.1,27.7c-0.1,0-0.1,0-0.2,0C4.6,26.3,0,20.5,0,14C0,6.3,6.3,0,14,0s14,6.3,14,14c0,6.2-4,11.6-9.9,13.4
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
|
@ -3,7 +3,7 @@
|
|||
<svg version="1.1" id="heroku-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 28 27.7" style="enable-background:new 0 0 28 27.7;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#C7C8C9;}
|
||||
.st0{fill:#9B8CBA;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
|
@ -3,7 +3,7 @@
|
|||
<svg version="1.1" id="platform-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 28 27.7" style="enable-background:new 0 0 28 27.7;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#C7C8C9;}
|
||||
.st0{fill:#ED8843;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M14.6,1L14.6,1c0.4,0,0.8,0.1,1.1,0.2l10.7,4.2l-11.3,5.1c-0.3,0.1-0.7,0.2-1.2,0.2c-0.4,0-0.8-0.1-1-0.2
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
|
@ -4,7 +4,7 @@
|
|||
y="0px" viewBox="0 0 28 27.7" style="enable-background:new 0 0 28 27.7;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:none;}
|
||||
.st1{fill:#C7C8C9;}
|
||||
.st1{fill:#E5C025;}
|
||||
</style>
|
||||
<polygon class="st0" points="12.6,5.8 12.6,5.8 12.6,5.8 "/>
|
||||
<circle class="st0" cx="21.2" cy="22.8" r="1.3"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,5 +1,3 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 300 254.6" style="enable-background:new 0 0 300 254.6;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Loading…
Reference in New Issue
Block a user