.card.card-profile.text-center
  %img.card-img-top{:src => "https://unsplash.it/340/160?image=354", :alt => ""}/
  .card-block
    %img.card-img-profile{:src => "https://it.gravatar.com/userimage/3434071/205a00fc16ae537b26b56f40790910fe.jpg?size=140", :alt => ""}/
    %h4.card-title
      Nicola Pressi
      %small Front-end designer
    .card-links
      %a.fa.fa-dribbble{:href => "#"}
      %a.fa.fa-twitter{:href => "#"}
      %a.fa.fa-facebook{:href => "#"}

$bg-start: #9d9181;
$bg-end: #9e866c;
$card-bg: #e6e5e1;
$dribbble-color: #ea4b89;
$twitter-color: #68aade;
$facebook-color: #3b5999;

html {
  min-height: 100%;
	background: linear-gradient($bg-start, $bg-end);
}

body {
	background-color: transparent;
}

.card-profile {
  width: 340px;
  margin: 50px auto;
  background-color: $card-bg;
  border-radius: 0;
  border: 0;
  box-shadow: 1em 1em 2em rgba(0,0,0,.2);
  
  .card-img-top {
    border-radius: 0;
  }

  .card-img-profile {
    max-width: 100%;
    border-radius: 50%;
    margin-top: -95px;
    margin-bottom: 35px;
    border: 5px solid $card-bg;
  }

  .card-title {
    margin-bottom: 50px;

    small {
      display: block;
      font-size: .6em;
      margin-top: .2em;
    }
  }
  
  .card-links {
    margin-bottom: 25px;

    .fa {
      margin: 0 1em;
      font-size: 1.6em;
      
      &:focus,
      &:hover {
        text-decoration: none;
      }
      
      &.fa-dribbble {
        color: $dribbble-color;
        font-weight: bold;
        
        &:hover {
          color: darken($dribbble-color, 10%);
        }
      }

      &.fa-twitter {
        color: $twitter-color;

        &:hover {
          color: darken($twitter-color, 10%);
        }
      }
      
      &.fa-facebook {
        color: $facebook-color;

        &:hover {
          color: darken($facebook-color, 10%);
        }
      }
    }
  }
}

/*
https://dribbble.com/shots/2255513-Profile-Widget
*/