Web Presence

index.pug

.web-presence

  a.web-presence__anchor.web-presence__anchor--me(href='http://harunpehlivantebimtebitagem.ml/')
    .web-presence__anchor--me__text HARUN PEHLİVAN
    img.web-presence__anchor--me__img(src='http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1504092899')
    .web-presence__anchor--me__text FOUNDER CEO BLOGGER

  a.web-presence__anchor.web-presence__anchor--codepen(href='https://codepen.io/harunpehlivan/')
    i.web-presence__anchor__icon.fa.fa-codepen

  a.web-presence__anchor.web-presence__anchor--linkedin(href='https://www.linkedin.com/in/harun-pehlivan-0aa34252/')
    i.web-presence__anchor__icon.fa.fa-linkedin

  a.web-presence__anchor.web-presence__anchor--github(href='https://github.com/harunpehlivan')
    i.web-presence__anchor__icon.fa.fa-github

  a.web-presence__anchor.web-presence__anchor--stack-overflow(href='https://harunpehlivantebimtebitagem.carrd.co')
    i.web-presence__anchor__icon.fa.fa-stack-overflow

scripts

<script src="https://codepen.io/MaciejCaputa/pen/EmMooZ.js"></script>

style.sass

.web-presence
  width: 100%
  min-height: 100vh
  background: $grey-100
  position: relative
  font-weight: 300
  color: rgba(0,0,0,0.87)
  &__anchor
    display: flex
    align-items: center
    justify-content: center
    text-decoration: none
    border-radius: 50%
    background: rgba(0,0,0,0.33)
    width: 5em
    height: 5em
    position: absolute
    transform: translate(-50%,-50%)
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
    transition: all 300ms ease-in-out
      
    &--me
      top: 50%
      left: 50%
      width: 8em
      height: 8em
      display: flex
      flex-direction: column
      background: transparent
      color: rgba(0,0,0,0.87)
      box-shadow: none !important
      line-height: 1.5em
      &__img
        width: 7em
        height: auto
        border-radius: 2px
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
        transition: all 300ms ease-in-out
        margin: 4px auto
      &__text
        display: block
      
        
    &--codepen
      background: $grey-900
    &--linkedin
      background: $indigo-900
    &--github
      background: $blue-900
    &--stack-overflow
      background: $orange-900
        
    &--codepen, &--linkedin
      top: 33.33%
    &--github, &--stack-overflow
      top: 66.66%
    &--codepen, &--github
      left: 33.33%
    &--stack-overflow, &--linkedin
      left: 66.66%
    &__icon
      font-size: 3em
      color: rgba(255,255,255,0.87)

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://codepen.io/MaciejCaputa/pen/rrLwPq.sass" rel="stylesheet" />

web-presence.markdown

Web Presence

A Pen by HARUN PEHLİVAN on CodePen.

License.