aurelkurtula

/**
 * heart shape
 */


a{
    position: relative;
    width: 100px;
    height: 90px;
    margin:300px;

aurelkurtula

/**
 * The first commented line is your dabblet’s title
 */

#article{
   width: 300px;
   background: red;
   margin: auto;
   
   }

aurelkurtula

/**
 * hover with animation
 */

article{
  width: 150px; height: 150px;
  background: #ede;
  display: block
  margin: 150px;
  overflow:hidden;

aurelkurtula

/* Speach boble*/
.bubble {
background-color: #fff;
border-radius: 7px;
border: 2px solid #DD4814;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
            4px 4px 0 hsla(0,0%,0%,.1);
color: #333;
display: inline-block;
font-family: Ubuntu, sans-serif;

aurelkurtula

/**
 * zig-zag background (SO)
 * CSS Zigzag Border with a Textured Background
 */

background:	linear-gradient(#BCED91 49%, transparent 49%),
		linear-gradient(-45deg, white 33%, transparent 33%) 0 50%,
		white linear-gradient(45deg, white 33%, #BCED91 33%) 0 50%;
	background-repeat: repeat-x;
	background-size: 1px 100%, 40px 40px, 40px 40px;

aurelkurtula

@media screen { * , *:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;	} }* {margin: auto; padding: auto;}
html { font-size: 62.5%; } /*base sizee*/
body { font-size: 1.4rem; } /* =14px all type sizes are relative to the base size*/

aurelkurtula

@mixin breakpoint($point) {
  @if $point == alpha {
    @media (max-width: 1000px) { @content; }
  }
  @else if $point == beta {
    @media (max-width: 1250px) { @content; }
  }
  @else if $point == gamma {
    @media (max-width: 710px)  { @content; }
  }

aurelkurtula

$( document ).ready(function() {
    
});

aurelkurtula

<meta name="viewport" content="width=device-width">

aurelkurtula

@keyframes animate-tail {  
    0% {background-position: -6864px 0; }
    100% {background-position: 0 0;}
}

#foxtail {
  animation: animate-tail 3.75s steps(44) infinite;
}