Evoluted - envisage

by Laura Kishimoto

HTML

<script src="https://fonts.googleapis.com/css?family=Pathway+Gothic+One|Roboto+Slab"></script>
<div class="heading slide--left">
    <div class="slide--right">
        Editable title
    </div>
</div>
<div class="content">
    <div style="background-image: url(http://mockups.evoluted.net/envisage/mediatemplates/editable/images/bg11.jpg)" class="reveal background--right"></div>
    <div class="fade--up">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <ul>
            <li>Integer vulputate tincidunt luctus.</li>
            <li>Donec non libero euismod</li>
            <li>pellentesque mi vitae</li>
            <li>efficitur eros.</li>
        </ul>
    </div>
</div>
<div class="footer marquee slide--up">
    <div class="marquee__text">
        Scrolling text…
    </div>
</div>

CSS

@import url(//fonts.googleapis.com/css?family=Pathway+Gothic+One|Roboto+Slab);
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: white;
    color: #324551;
    font-size: 3rem;
    font-family: 'Roboto Slab', serif;
    overflow: hidden;
}

.heading,
.content,
.marquee {
    padding: 1rem 4rem;
    overflow: hidden;
}

.heading {
    padding-top: 2rem;
    background-color: #0099ff;
    color: white;
    font-size: 200%;
    font-family: 'Pathway Gothic One', sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
}

.content {
    position: relative;
    flex: 1 1 auto;
    padding-top: 3rem;
    line-height: 1.3;
}

.footer {
    color: white;
    background-color: #324551;
}

.background--right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right;
    z-index: -1;
}


/* animation classes */

.slide--left {
    transform: translateX(100%);
    animation: slide-in 0.5s forwards;
}

.slide--right {
    transform: translateX(-150%);
    animation: slide-in 1.2s forwards;
}

.slide--up {
    transform: translateY(100%);
    animation: slide-in 1s forwards;
    animation-delay: 2s;
}

@keyframes slide-in {
    100% {
        transform: translate(0%);
    }
}

.fade--up {
    position: absolute;
    padding-top: 4rem;
    opacity: 0;
    animation: fade-up 1s forwards;
    animation-delay: 1s;
}

@keyframes fade-up {
    100% {
        padding-top: 0;
        opacity: 1;
    }
}

.reveal {
    opacity: 0;
    animation: reveal 3s forwards;
    animation-delay: 3s;
}

@keyframes reveal {
    100% {
        opacity: 1;
    }
}

.marquee {
    white-space: nowrap;
}

.marquee__text {
    animation: marquee 10s linear infinite;
}

@keyframes...