<!-- in a wrapping section include different containers for each step of the flow: data sources, build, deploy -->
<section class="container">

  <!-- in the sources container show three cards, side by side, or one atop the other on smaller viewports -->
  <div class="container__sources">

    <div class="sources--cms">
      <p>Contentful, Drupal, WordPress, etc.</p>

    <div class="sources--markdown">
      <p>Documentation, Posts, etc.</p>

    <div class="sources--data">
      <p>APIs, Databases, YAML, JSON, CSV, etc.</p>


  <!-- include a simple line to divide the container, and animate it to show a connection between the different containers  -->
  <svg viewbox="0 0 10 100">
    <line x1="5" x2="5" y1="0" y2="100"/>

  <!-- in the build container show two cards, atop of one another and the first of one showing an SVG icon -->
  <div class="container__build">

    <div class="build--powered">
      <svg viewbox="0 0 100 100">
        <circle cx="50" cy="50" r="50"/>
      <p>powered by</p>

    <div class="build--stack">
        HTML · CSS · React


  <!-- repeat the svg line to connect the second and third containers as well -->
  <svg viewbox="0 0 10 100">
    <line x1="5" x2="5" y1="0" y2="100"/>

  <!-- in the deploy container show simply text, without a wrapping card -->
  <div class="container__deploy">
    <h3>Static Web Host</h3>
    <p>Amazon S3, Netlify, GitHub Pages, Surge.sh, Aerobatic, Now.sh, & many more.</p>

@import url('https://fonts.googleapis.com/css?family=Mukta:300,400,700')

font-text = 'Mukta', sans-serif
color-text = #5f39dd
color-card = #fff
color-step = #ffb238
color-bg = color-text

// create a class shared by all pseudo elements depicting a step of the flow (each altering only the content property)
    // position the tooltip in the top right of the container
    position absolute
    right 0
    bottom 100%
    // style the tooltip with the chosen color values
    color color-card
    background color-step
    text-transform uppercase
    font-size 0.9rem
    padding 0.25rem 0.75rem
    border-radius 2.5px

// create a class shared by all cards
    line-height 2
    background color-card
    padding 1.2rem 1rem
    border-radius 4px
    box-shadow 0 2px 10px darken(color-card, 10%)
    box-sizing border-box
    margin 0
    padding 0

    min-height 100vh
    width 100%
    font-family font-text
    color color-text
    background color-bg

// separate the main container from the surrounding page
    margin 5vh 2.5vw
    padding 15vh 0
    background color-card
    border-radius 5px
    // display the content in a single column layout
    display flex
    flex-direction column
    // center the content
    align-items center
    text-align center

    // for the SVG separating the containers, set a reasonable height
        height 5rem
            stroke color-bg
            stroke-width 3px
            stroke-linecap round
            // include a stroke-dasharray depicting small dots separated by considerable space
            stroke-dasharray 2px 20px
            // animate the stroke-dashoffset property to move the dotted line downward
            animation animateline 5s linear both infinite

// style all headings and paragraphs with the same values
    font-size 1.1rem
    color darken(color-text, 25%)
    font-size 0.95rem
    font-weight 300

    // display the contents of the first container in a single row
    display flex
    border-radius 8px
    padding 1.5rem
    background darken(color-card, 2.5%)
    // position relative for the pseudo element
    position relative

        @extends .tooltip
        content 'data sources'

        // beside the properties shared by all cards, move the text to the left and separate the containers horizontally
        @extends .card
        text-align left
        margin 0 1rem

    // separate the second container decidedly from the surrounding items
    // notably covering a portion of the page
    padding 10vh 10vw
    border-radius 8px
    background darken(color-card, 2.5%)
    // position relative for the pseudo element
    position relative

        @extends .tooltip
        content 'build'

        @extends .card
        margin 2rem 0

        // style the SVG used as icon to be 4rem wide/tall
            width 4rem
            height auto
            fill color-bg

    // simply style the last container to share the same background of the other containers
    background darken(color-card, 2.5%)
    padding 1.5rem
    border-radius 8px
    // position relative for the pseudo element
    position relative

        @extends .tooltip
        content 'deploy'

// on smaller viewports lay the three cards on top of one another
@media (max-width: 700px)
        flex-direction column

            margin 1rem 0

// animate the SVG line to show the dotted line moving downward
// 5rem being the height of the SVG
@keyframes animateline
        stroke-dashoffset 0
        stroke-dashoffset -5rem
View Compiled
// no js this time 'round

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.