Profile Card

index.html

.card
 .header
   img(src="http://gravatar.com/avatar/7959246973e7d9660553f38c7ce04874?s=80")
   h3 Benjamin Lannon
 p College Student with a passion for technology and literature
 ul
   li
     a(href="https://github.com/lannonbr")
       i(class="fa fa-github fa-4x")
   li
     a(href="https://twitter.com/lannonbr")
       i(class="fa fa-twitter fa-4x")
   li
     a(href="http://codepen.io/lannonbr")
       i(class="fa fa-codepen fa-4x")

Profile Card.markdown

Profile Card

After browsing codepen, I saw someone make a simple profile card, and I thought it would be a fun thing to create.

A Pen by Benjamin Lannon on CodePen.

License.

style.css

@import "bourbon";

$color: #8c489f;

body {
  background-image: url("https://images.unsplash.com/photo-1447877015176-3099cb49cd6a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c370c77fd779afe99eb0ff05fe9f0907");
  background-repeat: no-repeat;
  height: 100vh;
  background-size: 100%;
  color: $color;
  font-family: "Roboto Light";
  font-size: 16px;
}

ul {
  margin-top: 2rem;
  @include clearfix;
  li {
    float: left;
    padding: 25px 50px;
    a { color: $color; }
  }
}

.card {
  background: #f1f0ff;
  @include size(480px 300px);
  border-radius: 30px;
  border: 5px solid #c3c3e5;
  padding: 10px;
  box-shadow: 0px 0px 100px 10px #c3c3e5;
  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -240px;
  margin-top: -150px;
  
  .header {
    @include clearfix;
    margin-bottom: 30px;
    img {
      float: left;
      border: 3px solid $color; 
      border-radius: 50px;
      transform: translate(00px, 0px);
    }
    h3 {
      font-size: 2.75em;
      float: left;
      margin-left: 1.5rem;
      line-height: 2em;
    }
  }
  p {
    font-size: 1em;
    padding: 0px 25px;
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />