suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes to the features callouts alignment issue and resposive state

Browse Source
This commit is contained in:
Justine Arreche 2015-04-02 18:10:48 +02:00
parent 35d611f989
commit 78f7fc99b0
2 changed files with 36 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/styles/app/landing.sass
View File

@ -78,9 +78,6 @@
border: 2px solid #d8dadc
border-radius: 2px
.laptop-wrapper-mobile
display: none
.hero
background-color: #faf9f6
h1
@ -207,6 +204,8 @@
font-weight: 300
color: #413c3c
text-align: center
margin-bottom: 35px
padding-top: 40px
p
font-size: 1.15em
@ -220,11 +219,28 @@
.features-callouts
text-align: center
#f-co-1, #f-co-2, #f-co-3, #f-co-4
background-repeat: no-repeat;
background-position: 50% 0
height: 32px
#f-co-1, #f-co-2, #f-co-3, #f-co-4
background-image: url('../images/landing-page/features-callouts-1.svg')
#f-co-2
background-image: url('../images/landing-page/features-callouts-2.svg')
#f-co-3
background-image: url('../images/landing-page/features-callouts-3.svg')
#f-co-4
background-image: url('../images/landing-page/features-callouts-4.svg')
.features-checked
padding-left: 30px
ul
list-style-image: url('../images/landing-page/features-check.svg')
list-style-image: url('../images/landing-page/features-check.svg')
padding-left: 1.5em
li
@ -280,25 +296,12 @@
width: 100%
@media (max-width: 886px)
.laptop-wrapper-mobile
display: block
width: 100%
.hero .laptop-wrapper-mobile #laptop img
width: 80%
margin-left: 9%
.laptop-wrapper
display: none
#hero-copy
display: block
width: 100%
text-align: center
.hero h1
margin-top: 40px
text-align: center
max-width: 100%
.hero p

46
app/templates/home.hbs
View File

@ -1,12 +1,6 @@
<div id="landing">
<div class="row hero z-1">
<div class="landing-centered-wrapper">
<div class="large-12 columns laptop-wrapper-mobile">
<div id="laptop">
<img src="../images/landing-page/laptop.png">
</div>
</div>
<div class="large-12 columns" id="hero-copy">
<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>
@ -90,30 +84,22 @@
<div class="row features-list">
<div class="landing-centered-wrapper">
<div class="large-6 columns features-callouts">
<row>
<div class="medium-6 columns">
<img src="../images/landing-page/features-callouts-1.svg" class="features-img">
<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>
</div>
<div class="medium-6 columns">
<img src="../images/landing-page/features-callouts-2.svg" class="features-img">
<h3>Multi-language support</h3>
<p>Make sure your code runs against all versions of your favorite language without breaking a sweat.</p>
</div>
</row>
<row>
<div class="medium-6 columns">
<img src="../images/landing-page/features-callouts-3.svg" class="features-img">
<h3>Test your pull requests</h3>
<p>Make sure every Pull Request to your project is tested before merging.</p>
</div>
<div class="medium-6 columns">
<img src="../images/landing-page/features-callouts-4.svg" class="features-img">
<h3>Deploy to s3 and Heroku</h3>
<p>Updating staging or production as soon as your tests pass has never been easier!</p>
</div>
</row>
<div class="medium-6 columns">
<h3 id="f-co-1">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>
</div>
<div class="medium-6 columns">
<h3 id="f-co-2">Multi-language support</h3>
<p>Make sure your code runs against all versions of your favorite language without breaking a sweat.</p>
</div>
<div class="medium-6 columns">
<h3 id="f-co-3">Test your pull requests</h3>
<p>Make sure every Pull Request to your project is tested before merging.</p>
</div>
<div class="medium-6 columns">
<h3 id="f-co-4">Deploy to s3 and Heroku</h3>
<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">
<h2>Features created to<br class="mobile-break"> help your projects and teams</h2>