.contact-form-container 
  .contact-us
    .contact-header
      h1 ⎯⎯⎯⎯  CONTACT US
    .social-bar
      ul 
        li
          i.fab.fa-facebook-f
        li
          i.fab.fa-twitter
        li
          i.fab.fa-instagram
        li
          i.fab.fa-dribbble
  .header
    h1 Let's Get Started
    h2 Contact us to start your next project! 
  .address
    i.fas.fa-map-marker-alt
    h3 8266 Gygax
    h3 Norfolk, VA
  .phone
    i.fas.fa-phone-alt 
    h3 757 287 1608
  .email
    i.fas.fa-envelope
    h3 hello@adept.com
  .contact-form
    form
      input type="text" placeholder="Name"
      input type="email" placeholder="Email"
      textarea rows="4" placeholder="Tell us about your project..."
      button type="button" SEND 
View Compiled
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap')

* 
  margin: 0
  padding: 0
  box-sizing: border-box

/* Pretty Stuff */

.contact-form-container
  background: #F4F3F3
  font-family: 'Lato', sans-serif

.contact-us
  position: relative
  width: 250px
  background: #C3E0EC
  overflow: hidden
  
  &:before
    position: absolute
    content: ""
    bottom: -50px
    left: -100px
    height: 250px
    width: 400px
    background: #F8B7D8
    transform: rotate(25deg)
  
  &:after
    position: absolute
    content: ""
    bottom: -80px
    right: -100px
    height: 270px
    width: 400px
    background: #9ED8EB
    transform: rotate(-25deg)
  
.contact-header
  color: white
  position: absolute
  transform: rotate(-90deg)
  top: 120px
  left: -40px
  
  & h1 
    font-size: 1.5rem
    
.social-bar   
  position: absolute
  bottom: 20px
  left: 75px
  z-index: 1
  width: 100px
  
  & ul 
    list-style-type: none
    
    & li
      display: inline-block
      color: white
      width: 25px
      height: 25px
      line-height: 25px
      text-align: center
      margin-right: -4px
      font-size: 1.2rem
  
.header
  text-align: center
  padding: 20px 0
  color: #444
  
  & h1 
    font-weight: normal
   
  & h2
    margin-top: 10px
    font-weight: 300
  
.address, .email, .phone
  text-align: center
  padding: 20px 0
  color: #444
  
  & h3
    font-size: 1rem
    font-weight: 300
  
  & i
    color: #F8B7D8
    font-size: 1.7rem
    margin-bottom: 20px
  
form
  position: relative
  width: 440px
  margin: 0 auto
  padding: 20px
  box-shadow: 0 0 5px rgba(0,0,0,.1)
  background: white
  
  & input, & textarea
    background: white
    display: block
    margin: 20px auto
    width: 100%
    border: 0
    
  & input
    height: 40px
    line-height: 40px
    outline: 0
    border-bottom: 1px solid rgba(68,68,68,.3)
    font-size: 1rem
    color: rgba(68,68,68,.8)
    
  & textarea
    border-bottom: 1px solid rgba(68,68,68,.3)
    resize: none
    outline: none
    font-size: 1rem
    font-family: lato
    color: rgba(68,68,68,.8)
    
  & button
    position: absolute
    display: block
    height: 40px
    width: 250px
    left: 95px
    border: 0
    border-radius: 20px
    bottom: -20px
    background: #9ED8EB
    color: white
    font-size: 1.1rem
    font-weight: 300
    outline: none
    
.contact-form
  padding-bottom: 40px
 













/* Layout Stuff */

body
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-2042508-jpeg.jpg")
  height: 100vh
  width: 100vw
  position: relative
  background-size: cover
  background-repeat: no-repeat
  display: grid
  justify-items: center
  align-items: center
  
.contact-form-container 
  width: 800px
  display: grid
  grid-template-columns: 1fr 1fr 1fr 1fr
  grid-template-rows: 0.5fr 0.5fr 2fr
  grid-template-areas: "contact-us header header header" "contact-us address phone email" "contact-us contact-form contact-form contact-form"

.contact-us
  grid-area: contact-us

.header
  grid-area: header

.address
  grid-area: address

.phone
  grid-area: phone

.email
  grid-area: email

.contact-form
  grid-area: contact-form
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.