A Pen by Kaushalya Mandaliya.

Dribbble.markdown

Dribbble

A Pen by Kaushalya Mandaliya on CodePen.

License.

index.jade

.invite I want to be drafted on....<a href="http://dribbble.com/kaushalyamandaliya">Dribbble</a>

.dribbble

script.js

/*
 * Happy New Year :Dribbble:
 *
 *
 * 2014 by Kaushalya Mandaliya
 * http://seebeetee.com OR @kmandalwala
 *
 *
 */

style.scss

@import "compass";
/* import(s) */

@import url(http://fonts.googleapis.com/css?family=Nunito);


$c-0: #fff;
$c-1: #f36798;

$s-0: 0.5em;
$s-1: 8em;

body {
  background: $c-1;
  overflow: hidden;

  .dribbble {
    border: $s-0 solid $c-0;
    bottom: 0;
    height: $s-1;
    left: 0;
    margin: auto;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: $s-1;
    
    
    // include section
    @include border-radius(100%);
    @include box-shadow(
      inset -5em 2.5em 0 -2.4em $c-1,
      inset -5em 2.5em 0 -1.9em $c-0
    );
    @include transform(scale(2));
    
    &:before {
      // :before starts buddy
      
      border: $s-0 solid $c-0;
      content: '';
      margin: -4.8em;
      position: absolute;
      height: $s-1;
      width: $s-1;
      
      // include section
      @include border-radius(50%);
      @include transform(translate(20%) rotate(50deg));
    }
    
    
    &:after {
      // :after starts buddy
      
      border: $s-0 solid $c-0;
      content: '';
      margin: 3.9em;
      position: absolute;
      height: $s-1;
      width: $s-1;
      
      // include section
      @include border-radius(50%);
      @include transform(translate(-20%) rotate(50deg));
    }
  }
  .invite {
    color: $c-0;
    font: 2em bold 'Nunito', sans-serif;
    margin: 1em;
    text-align: center;

    &:before {
      content: open-quote;
    }

    &:after {
      content: close-quote;
    }

    a {
      color: inherit;
    }

    @media all and (max-width: 50em) {
      font-size: 1.5em;
    }

    @media all and (max-width: 26em) {
      font-size: 1em;
    }
  }
}