felicedenigris.com_v2

index.html

<script src="https://use.fontawesome.com/0193bddf58.js"></script>
<div class="header">
	<h1> Hi my name is Felice DeNigris</h1>
	<h1>I'm a multi disciplinary designer & web developer</h1>
</div>

<!-- <div class="follow">Follow Me</div> -->
<div class="outlets">
	<a class="fa fa-dribbble" href=""></a>
	<a class="fa fa-flickr" href=""></a>
	<a class="fa fa-linkedin" href="http://www.linkedin.com/in/felicedenigris"></a>
	<a class="fa fa-codepen" href="codepen.io/fleech/"></a>
	<a class="fa fa-github" href="https://github.com/felicedeNigris"></a>
	<a class="fa fa-tumblr" href="http://fleechcoldpressed.tumblr.com/"></a>
	<a class="fa fa-instagram" href="https://www.instagram.com/felicedenigris/"></a>
	<a class="fa fa-envelope" href="felideni@gmail.com"></a>
</div>

rlqzjq.markdown

rLqzJQ

A Pen by Felice DeNigris on CodePen.

License.

style.scss

@import 'https://fonts.googleapis.com/css?family=Arvo';
@import 'https://fonts.googleapis.com/css?family=Poiret+One';
//function + mixin
@function shadow-string($color1, $color2, $length){
  $total-length: $length;
  $string: $color1 0px 0px;
  @while $length > 0 {
    $mix-amount: 100 - (($length / $total-length) * 100);
    $mixed-color: mix($color1,$color2, $mix-amount);
    $string-addition: $length+px $length+px;
    $string: $mixed-color $string-addition, $string;
    $length: $length - 1;  
  }
  @return $string
}

@mixin longshadow($color1, $color2, $length) {  
  text-shadow: shadow-string($color1, $color2, $length);    
}


$colorHeader: #9B65FF;
$colorButton: #BEFF6D;
$colorText: #FFE9E1;
$bodyColor: #48CCB9;
$linkColor: #FF5C65;
body{
	line-height: 1.5;
	text-align: center;
	background-color: #48CCB9;
	
}
.follow{
	font-family: Poiret One, sans-serif;
	font-size: 28px;
	text-align: center;
	color: $colorButton;
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	max-width: 200px;
	background-color: none;
	padding: 10px;
	z-index: 2;
	border: 2px solid $colorButton;
}
.header{
	max-width: 800px;
	color: $colorText;
	font-size: 20px;
	height: 200px;
	position: relative;
	display: inline-block;
	margin-top: 25%;
	// border: 1px solid black;
	font-family: 'Arvo', serif;
	@include longshadow($colorHeader, $bodyColor, 80);
}

.outlets{
	position: relative;
	margin-top: 100px;
	margin-left: auto;
	margin-rigth: auto;
	font-size: 20px;
	a{
		position: relative;
		text-decoration: none;
		color:$linkColor;
		transition: all .6s cubic-bezier(0.26, 1, 0.82, 1.24);
		bottom: -5px;
		&:hover{
			color: $colorButton;
			bottom : 5px;
			transition: all .6s cubic-bezier(0.26, 1, 0.82, 1.24);
		}
	}
}