link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"
.table
.table-cell
.container
| <svg class="background-svg" width="400px" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix><feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset><feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur><feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite><feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode><feMergeNode in="shadowMatrixInner1"></feMergeNode></feMerge></filter></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Artboard-1" fill="#8B65E4"><path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path><path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path><path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path></g></g></svg>
.container-info
h1
' Hey!
br
' I'm
span Anna Batura
',
span.info front-end web developer
.box
a.box-item href="https://www.linkedin.com/in/annabatura" target="_blank"
i.fa.fa-linkedin
a.box-item href="https://codepen.io/Anna_Batura/" target="_blank"
i.fa.fa-codepen
a.box-item href="https://twitter.com/BrawadaCom" target="_blank"
i.fa.fa-twitter
View Compiled
@import "compass/css3"
@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto)
=keyframes($animation-name)
@-webkit-keyframes #{$animation-name}
@content
@-moz-keyframes #{$animation-name}
@content
@keyframes #{$animation-name}
@content
body
background-color: #D4D9ED
height: 100vh
overflow: hidden
text-align: center
font-family: 'Roboto', sans-serif
#canvas, .background-svg, .container-info
position: absolute
top: 0
left: 0
width: 100%
height: 100%
z-index: 1
@include transition(all 0.3s)
.container-info
z-index: 2
h1
font-weight: 300
font-size: 24px
letter-spacing: 2px
color: #fff
text-align: left
margin: 75px 37px 47px
.info
display: block
color: #9294AE
font-size: 16px
letter-spacing: 0px
.box
text-align: right
padding: 0px 40px
.box-item
display: inline-block
color: #fff
font-size: 30px
padding-right: 20px
@include transition(all 0.3s)
.table
display: table
width: 100%
height: 100%
.table-cell
display: table-cell
vertical-align: middle
.container
position: relative
width: 400px
height: 300px
max-width: 100%
margin: 0 auto
&:before, &:after
content: ""
position: absolute
top: 0
left: 0
display: block
width: 600px
height: 100px
&:before
&:after
#Triangle-1
-webkit-animation: box 42.5s infinite
animation: box 42.5s infinite
#Triangle-2
-webkit-animation: box2 12.5s infinite
animation: box2 12.5s infinite
@keyframes box2
10%
@include rotate(1deg)
80%
@include rotate(-2deg)
@keyframes box
10%
@include rotate(-2deg)
80%
@include rotate(2deg)
.box-item
&:hover
opacity: 0.6
View Compiled
This Pen doesn't use any external CSS resources.