Skip to content

Commit

Permalink
Pro-bono projects section + partnerships section
Browse files Browse the repository at this point in the history
  • Loading branch information
@juhovh
stau authored and juhovh committed Nov 8, 2016
1 parent 4060bf4 commit 86d3a7f
Show file tree
Hide file tree
Showing 4 changed files with 222 additions and 9 deletions.
149 changes: 144 additions & 5 deletions assets/css/css.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@ $susy: (
width: 1200px;
max-width: 90%;
position: relative;
text-align: center;
}

/* General Breakpoints */
$mobile: 500px;
$tablet: 800px;
$desktop: 1024px;

/* General measures */
Expand Down Expand Up @@ -83,10 +85,15 @@ h4 {
}

h1, h2, h3, h4 {
line-height: 1.2;
line-height: 1.1;
color: $headlines;
}

p {
max-width: 30em;
margin: auto 0;
text-align: center;
}

a {
color: #333;
Expand Down Expand Up @@ -128,7 +135,7 @@ html, body {
p {
font-size: $size-medium;
font-weight: 300;
max-width: 600px;
max-width: 20em;
margin: auto;
opacity: 0.7;
font-family: "space mono";
Expand Down Expand Up @@ -189,7 +196,6 @@ section.freetime {
}

.section-header {
max-width: 600px;

h2 {
color: white;
Expand All @@ -215,12 +221,18 @@ section.freetime {
*/


}

/**** PARTNERSHIPS ****/
.partnerships .question {


}

.section-header {
text-align: center;
margin-bottom: 50px;
max-width: 500px;
max-width: 600px;
margin: auto;
padding-bottom: $h-padding;

Expand All @@ -230,12 +242,29 @@ section.freetime {
}
}

.section-body {
text-align: center;
margin-bottom: 50px;
max-width: 600px;
margin: auto;
padding-bottom: $h-padding;
.question {
width: 100%;
margin: 0 auto;
}

}

.shortphrase {
font-weight: normal;
font-size: $size-medium;
margin-top: 1em;
}

.probono p.shortphrase {
max-width: 30em;
}

.learn-more {
background: url('../img/bg-learn-more.jpeg');
background-size: cover;
Expand All @@ -258,8 +287,12 @@ section.freetime {
}
}

.centered {
section.probono {
background-color: #ececec;

}

.centered {
text-align: center;
}

Expand All @@ -274,6 +307,9 @@ section.freetime {
@include span(full);
}
}
.new-line {
@include break;
}

.track-block-txt {
position: relative;
Expand Down Expand Up @@ -323,6 +359,25 @@ section.freetime {
@include post(1);
}
}
.links {
@include span(12);
text-align: center;
max-width: 600px;
margin: auto;
padding-bottom: 30px;
max-width: 100%;

p {
max-width: 100%;
}
p:first-child {
margin-top: 60px;
}

a, a:hover, a:visited {
color: #FFF;
}
}

.aims {
margin-top: 60px;
Expand Down Expand Up @@ -366,3 +421,87 @@ section.freetime {
padding-bottom: 2*$section-padding;
}


/*** CARDS ***/
.card {
display: inline-block;
vertical-align: top;
width: 100%;
max-width: 310px;
padding: 8px 5px;
text-align: left;

@media screen and (min-width: $mobile) {
max-width: 270px;
}
@media screen and (min-width: $tablet) {
max-width: 300px;
}

@media screen and (min-width: $desktop) {
@include span(4);
&:first-of-type {
@include pre(3);
}
}




.card__inner {
background: #fff;
position: relative;
width: 100%;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
text-decoration: none;
a {
text-decoration: none;
border-bottom: none;
}

}

.card__cover {
display: block;
position: relative;
background: #e3ecec;
width: 100%;
height: 0;
padding-top: 56.25%;
overflow: hidden;


img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
}
.card__body {
font-size: $size-base;
padding: 20px;
height: 180px;
text-align: left;
overflow: hidden;
}
.card__title {
font-weight: 800;
letter-spacing: 0.03em;
margin: 0;
}
.card__summary {
text-align: left;
font-weight: 300;
margin: 0;
}


}





Binary file added assets/img/pelastakaa-lapset.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/super-ada.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 78 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ <h3>Collaboration with customers and other organisations and partners</h3>
<div class="container">
<!--<img class="sticker" src="{{ site.baseurl }}/assets/img/chilicorn_sticker.svg" alt="">-->
<div class="section-header">
<h2>Supporting free-time contributions</h2>
<h2>Supporting free time contributions</h2>
<p class="shortphrase">Our employees can work on open source and other social impact projects on their own time and get paid for it.
</p>
</div>
Expand All @@ -80,9 +80,83 @@ <h2>Supporting free-time contributions</h2>
<p><strong>This is not work</strong></p>
<p>Futurice makes no IPR claims whatsoever regarding these contributions. In fact, we insist on employees taking their due credit for their efforts. </p>
</div>
<div class="links">
<p><a href="">Why open source has social impact</a> </p>
<p><a href="">List of Spice-supported open source contributions</a> </p>
</div>
</div>
</section>

<section class="probono">
<div class="container">
<!--<img class="sticker" src="{{ site.baseurl }}/assets/img/chilicorn_sticker.svg" alt="">-->
<div class="section-header">
<h2>Pro bono projects <br/>on company clock</h2>
<p class="shortphrase">We select certain projects to do pro bono, using company time. This helps us make a bigger impact and gives more people a chance to contribute.
</p>

</div>
</div>

<div class="container cards">
<div class="section-header">
<p class="shortphrase centered">Here are some examples:
</p>
</div>
<article class="card">
<div class="card__inner">
<a href="https://play.google.com/store/apps/details?id=com.hemmo&amp;hl=en" class="card__cover">
<img src="{{ site.baseurl }}/assets/img/pelastakaa-lapset.jpg" alt="">
</a>
<div class="card__body">
<div class="card__title">
<a href="https://play.google.com/store/apps/details?id=com.hemmo&amp;hl=en">Save the Children Finland – Hemmo</a>
</div>
<p class="card__summary">
Feedback tool for children visiting children homes in Finland
</p>
</div>
</div>
</article>
<article class="card">
<div class="card__inner">
<a href="https://play.google.com/store/apps/details?id=com.hemmo&amp;hl=en" class="card__cover">
<img src="{{ site.baseurl }}/assets/img/super-ada.jpg" alt="">
</a>
<div class="card__body">
<div class="card__title">
<a href="https://play.google.com/store/apps/details?id=com.hemmo&amp;hl=en">Super Ada</a>
</div>
<p class="card__summary">
App for the SuperAda event done in collaboration with students from Haaga Helia.
</p>
</div>
</div>
</article>
</div>



</section>

<section class="partnerships">
<div class="container">
<!--<img class="sticker" src="{{ site.baseurl }}/assets/img/chilicorn_sticker.svg" alt="">-->
<div class="section-header">
<h2>Partnerships</h2>
<p class="shortphrase">There's only so much we can do on our own. We want our customers and competitors by our side to make great things happen together.
</div>
<div class="section-body">
</p>
<p class="question">
Want to do magic together?
</p>
<a href="#" class="btn">Get involved as a partner</a>
</div>
</div>
</section>


<section>
<div class="container">
<div class="section-header">
Expand All @@ -103,7 +177,7 @@ <h3>Open education</h3>
<p>Before I’d started I got access to Intercom and was trying things out. I was playing with the product and something annoyed me, a little detail. There was bad spacing on the login form, and I wanted to fix it. At Amazon and previous companies the way in which we’d make changes involved some deliberate peer review.</p>
</div>
</div>
<div class="track-block">
<div class="track-block new-line">
<img src="{{ site.baseurl }}/assets/img/track-social.jpg" alt="">
<div class="track-block-txt">
<h3>Social inclusion</h3>
Expand All @@ -117,9 +191,9 @@ <h3>Climate change</h3>
<p>Before I’d started I got access to Intercom and was trying things out. I was playing with the product and something annoyed me, a little detail. There was bad spacing on the login form, and I wanted to fix it. At Amazon and previous companies the way in which we’d make changes involved some deliberate peer review.</p>
</div>
</div>
<div class="track-cta">
<!-- <div class="track-cta">
<a href="#" class="btn">Explore projects</a>
</div>
</div>-->
</div>
</section>

Expand Down

0 comments on commit 86d3a7f

Please sign in to comment.