.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.