JSFiddle - React, Tailwind, and code Playground

parallax

by Jennifer Perrin

HTML

<main class="boxed">
    <section class="includes-dimming" style="background-image:url(&#39;http://i62.tinypic.com/2ccpiqs.jpg&#39;);">
        <div class="centered-container">
            <div class="section__title includes-animated-border">Updating Updaters</div>
            <div class="section__subtitle">Rethinking Ubuntu's Software Updater</div>
        </div>
    </section>
    <section>
        <div class="section__title">The "Problem"</div>
        <p>In all honesty, Ubuntu's Software Updater is not an abomination per se, especially not when wrapped in the sleekness of Elementary OS' containing design style. But beautiful wrapping aside, the content of this humble updater deserves a little design love to drag it out of it's outdated look and into something more current.</p>
        <p>Apart from an aesthetic update, the Software Updater suffers from prompting unnecessary steps such as displaying an entire list of updates before just getting to the good stuff: upgrading the damn thing! Another "step" is also the entire shifting between different prompts, which might suffice in an entire functional perspective, but personally I think we can take things a step further and make the process feel more fluid.</p>
        <p>Below you can see how the current UI looks. Not too shabby, but much more can be done. I, for one, could live without the "Technical Description" and "Details of updates" labels... Let's move on to sketching ideas!</p>
    </section>
    <div class="img" style="background-image:url(&#39;http://i62.tinypic.com/2ccpiqs.jpg&#39;); height: 700px;"></div>
    <section>
        <div class="section__title">Sketching Ideas</div>
        <p>The road to rethinking the Software Updater's design can take many different routes, but eventually I settled on the idea of a mix between a living organism, Google's Material Design, flat design in general and Semantic UI.</p>
        <p>In other words, what resonated with me was the idea that instead of...

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);

html {
    box-sizing: border-box;
    font-size: 10px;
}

*, *:before, *:after {
    box-sizing: inherit;
    position: relative;
}

html, body {
    height: 100%;
    font-family: "Dosis", sans-serif;
}

body {
    background: #ffffff;
    background-image: -webkit-linear-gradient(top, #fcd0b5, #ffffff);
    background-image: -moz-linear-gradient(top, #fcd0b5, #ffffff);
    background-image: -ms-linear-gradient(top, #fcd0b5, #ffffff);
    background-image: linear-gradient(top, #fcd0b5, #ffffff);
    background-repeat: no-repeat;
    font-size: 1.618rem;
    margin-top: 2rem;
}

.boxed {
    margin: 0 auto;
    margin-bottom: 2rem;
    max-width: 90rem;
    min-height: 50rem;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.15), 0 -0.5rem 1rem 0 rgba(0, 0, 0, 0.033);
}

.padded {
    padding: 2.5rem;
}

.centered-container {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    max-width: 75%;
    margin: 0 auto;
    text-align: center;
}

.group:after {
    content: "";
    display: table;
    clear: both;
}

main {
    overflow: hidden;
    background-color: white;
    border-radius: .4rem .4rem .2rem .2rem;
}
main section {
    padding: 3rem;
    min-height: 15rem;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}
main section p {
    max-width: 75%;
    margin: 0 auto;
    margin-bottom: 4rem;
    font-size: 1.75rem;
    line-height: 1.8;
}
main section .img, main section + .img {
    min-height: 45rem;
    background-color: gainsboro;
    background-size: cover;
    background-attachment: static;
    background-repeat: no-repeat;
    background-position: center center;
}
main section.includes-dimming {
    min-height: 55rem;
}
main section.includes-dimming:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 ...

JavaScript

// http://codepen.io/andersschmidt/pen/PwZWwP