NNQMBd

index.jade

div(class='wrapper')
    div(class='left')
        img(src='https://s3.amazonaws.com/shop-com-app/images/isotonix.svg')
        div(class='header') Stay healthy this Summer!
        div(class='subheader') Free shipping over $50
        button Add to cart
    div(class='right')
        div(class='product__image-1x1')

NNQMBd.markdown

NNQMBd

A Pen by Trevor Brindle on CodePen.

License.

style.stylus

body
  margin 0
  font-family Arial, Helvetica, sans-serif

.wrapper
    width 100%
    height 100vh
    background linear-gradient(to top, #7db9e8 0%, #1e5799  100%)

.right
    float left
    height 100%
    
.left
    float left
    min-width 40%
    text-align center
    height 100%
    
    .header
        color #fff
        font-size 2em
    .subheader
        color #fff
        font-size 1.25em
        font-weight lighter
    img
        height 200px
    
button
    margin 1em
    border-radius 2px
    color #fff
    font-weight 600
    font-size .9rem;
    min-height 2rem
    width 12rem
    padding 1rem
    text-align center
    border 1px solid #ff6b35
    background-color #ff6b35