.Header
  .Header-background
  .Header-content
    .Header-hero
      h1 The best app you've #[br] ever seen
      p You'll be blown away with all it does
      button.Button Sign up
    .Header-visuals
      .Iphone
View Compiled
@import url('https://fonts.googleapis.com/css?family=Varela+Round');

break-large = 58rem

:root
  --color-1: #21D4FD
  --color-2: #B721FF
  --color-3: #08AEEA
  --color-4: #2AF598
  
body
  font-family: 'Varela Round', sans-serif
  
.Header
  position: relative
  height: 80vh
  display: block
  
  &-background
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: linear-gradient(19deg, var(--color-1), var(--color-2))
    transform-origin: 0px 0px
    transform: skewY(-10deg)
    overflow: hidden
    z-index: -1

    &::before,
    &::after
      display: block
      position: absolute
      content: ''
      width: 80%
      height: (100%/3)
      opacity: .3
      filter: blur(15px)

    &::before
      background: var(--color-1)
      right: 0

    &::after
      background: var(--color-2)
      bottom: 0
      
  &-content
    text-align: center
    padding: 4rem 4rem
    margin: 0 auto
    
    @media(min-width: break-large)
      text-align: left
      padding: 10rem 4rem
      max-width: 54rem
      display: flex
      justify-content: space-between
      
  &-hero    
    h1, p
      color: white
      text-shadow: 0 .5rem 1rem rgba(50, 0, 100, .1)
    h1
      margin: 0
      font-size: 3rem 
    p
      font-size: 1.5rem
      margin-bottom: 2rem
      
  &-visuals
    position: relative
    margin-top: 5rem
    transform: rotate(-10deg)
    
    @media(min-width: break-large)
      margin: 0
      transform: translateY(-5rem) rotate(-10deg)
  
.Button
  padding: 1.5rem 2rem
  border: 0
  color: var(--color-3)
  font-size: 1.2rem
  font-weight: bold
  background: white
  border-radius: 3px
  transition: all .2s
  cursor: pointer
  box-shadow: 0 1.75rem 2rem -.4rem rgba(50, 0, 100, .15)
  
  &:hover
    color: var(--color-4)
    box-shadow: 0 1.75rem 3rem 0rem rgba(50, 0, 100, .1)
    transform: scale(1.05)
    
  &:active
    box-shadow: 0 1.75rem 2.5rem -.2rem rgba(50, 0, 100, .125)
    transform: scale(1.025)
    
.Iphone
  display: inline-block
  background: white
  padding: 4rem .6rem 0
  border-radius: 2rem
  box-shadow: -1rem 1.75rem 2rem -.4rem rgba(50, 0, 100, .1), -.2rem .2rem .5rem rgba(50, 0, 100, .05), inset .5rem -.5rem .5rem -.4rem rgba(50, 0, 100, .1)
  text-align: center
  
  &::before
  &::after
    content: ''
    display: block
    
  &::before
    background-color: var(--color-3)
    background-image: linear-gradient(0deg, var(--color-3) 0%, var(--color-4) 100%)
    width: 16rem
    padding-top: 177.5%
    
  &::after
    display: inline-block
    margin: .6rem
    padding: 1.4rem
    border: 1px solid #f1f1f1
    border-radius: 2rem
    box-shadow:  inset -.05rem .05rem .5rem 0rem rgba(50, 0, 100, .05)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.