<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- href="http://statspring.com/?https://gist.githubusercontent.com/deadflowers/002313d5c98aa724ab65/raw/9cbb83dbd6e93b36e011a89f5261ee18d99abb7b/index.html" -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<link rel="stylesheet" href="http://rayanthony.io.s3-website-us-west-1.amazonaws.com/assets/foundicons.min.css">
<style>
@import url(http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500);
@import url(http://weloveiconfonts.com/api/?family=fontawesome|zocial);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?family=FontAwesome:300,400,500,800);
/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
*{
margin:0;
padding:0;
}
body{
font-family: 'Fira Sans', sans-serif;
background-color:#fff;
}
.container{
position:relative;
width:460px;
height:480px;
background-color:white;
margin: 50px auto;
border-radius:4px;
overflow:hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.container > section:first-child {
height: 300px;
background: url(http://d39dlwgeopmdw0.cloudfront.net/assets/img/bgboxnew.png);
background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container > section:nth-child(2) {
height:120px;
background:url(http://d39dlwgeopmdw0.cloudfront.net/assets/img/bgblurnew.png);
background-position: top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.about{
padding:30px;
color:white;
text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}
h1{
font-weight:400;
text-transform:uppercase;
}
h2{
font-weight:300;
text-transform:uppercase;
font-size:16px;
letter-spacing:1px;
}
.connect-icons{
list-style-type: none;
text-align: center;
margin: 0;
padding:0;
padding-top:40px;
}
.connect-icons li{
position: relative;
display: inline-block;
text-align: center;
width: 80px;
font-size: 1.6em;
margin: 0 6px;
}
.connect-icons li:nth-child(1){
margin-left: 0;
}
.connect-icons li:nth-child(4){
margin-right: 0;
}
.connect-icons li > a{
text-decoration:none;
width: 80px;
display: inline-block;
text-align: center;
color: rgba(0,0,0,0.3);
}
.connect-icons li > a, .connect-icons li > a:visited{
display: inline-block;
min-width: 40px;
}
.connect-icons li > a:hover{
color: #fff;
text-shadow:none;
-webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */
transition: all 0.2s;
-ms-transform: scale(1.1,1.1); /* IE 9 */
-webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
transform: scale(1.1,1.1);
}
.connect-icons li > a:active {
-ms-transform: scale(0.9,0.9); /* IE 9 */
-webkit-transform: scale(0.9,0.9); /* Chrome, Safari, Opera */
transform: scale(0.9,0.9);
}
.connect-icons li > [class*="text-"] {
display:inline-block;
color:white;
font-size:12px;
font-weight:300;
text-transform:uppercase;
letter-spacing:1px;
-webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */
transition: all 0.2s;
opacity: 0;
}
.connect-icons li > [class*="text-"].show{
opacity: 1;
-ms-transform: translateY(-12px); /* IE 9 */
-webkit-transform: translateY(-12px); /* Chrome, Safari, Opera */
transform: translateY(-12px);
}
.connect-box {
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
</style>
<style>
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
</style>
</head><body>
<div class="container">
<section class="about">
<h1>icons</h1>
<h2> in pink</h2>
<div class="connect-icons">
<i class="fa fa-github" style="font-size:3em;">Git Rocks</i>
</div>
</section>
<section class="connect">
<div class="box connect-box">
<ul class="connect-icons">
<li><a href="http://github.com/rayantony/#" class="github"><span class="fa fa-github-alt"></span></a><span class="text-linux">Github</span></li>
<li><a href="#" class="lastfm"><span class="zocial-lastfm"></span></a><span class="text-lastfm">LastFM</span></li>
<li><a href="#" class="lastfm"><span class="fa fa-github"></span></a><span class="text-github">github</span></li>
</ul>
</div>
</section>
</div>
<div class="container">
<section class="box connect-box">
<span class="social connect-icons">
<p><i class="fi-heart"></i></p>
<p><i class="fi-paw"></i></p>
<a><i class="fa fa-github"></i></a>
<p><i class="zsocial-lastfm"></i></p>
<a><i class="fa fa-twitter"></i></a>
<p><i class="fi-social-medium"></i></p>
<p><i class="fi-social-tumblr"></i></p>
<p><i class="fi-social-lastfm"></i></p>
<p><i class="fi-social-linkedin"></i></p>
<p><i class="fi-social-stumbleupon"></i></p>
<p><i class="fi-social-reddit"></i></p>
<p><i class="fi-home"></i></p>
<p><i class="fi-social-pinterest"></i></p>
<p><i class="fi-social-youtube"></i></p>
<p><i class="fi-social-facebook"></i></p>
<p><i class="fi-social-yahoo"></i></p>
<p><i class="fi-social-google-plus"></i></p>
<p><i class="fi-social-digg"></i></p>
<span>
</section>
</div>
<footer>
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="//platform.twitter.com/widgets/follow_button.html?screen_name=rayanthonyrcc"
style="width:236px; height:20px;" class="twitter-follow-button twitter-follow-button">
</iframe>
Made with ♡ by <abbr title="with love"><a href="http://rayanthony.io/" title="http://rayanthony.io">Ray</a></abbr>.
</footer>
<div class="container connect box connect-icons">
Made with <a><i class="fa fa-heart" alt="made with love icon font ♡ ">♡</i></a><abbr title="with love"><a href="http://rayanthony.io/" title="http://rayanthony.io">Ray</a></abbr>.
</div>
<script> $(window).ready(function() {
$(".connect-icons a").hover(function(){
$(".connect-box").toggleClass("color-"+ this.className );
$(".text-"+ this.className).toggleClass("show");
});
});</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://statspring.com/springboard.js"></script><script>Springboard.replaceAssets();</script></body></html>
/*
OF COURSE THIS IS THE HTML5 ✰ Boilerplate
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font:13px/1.231 sans-serif;*font-size:small}select,input,textarea,button{font:99% sans-serif}pre,code,kbd,samp{font-family:monospace,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:bold}a:hover,a:active{outline:none}a,a:active,a:visited{color:#607890}a:hover{color:#036}ul,ol{margin-left:2em}ol{list-style-type:decimal}nav ul,nav li{margin:0}small{font-size:85%}strong,th{font-weight:bold}td,td img{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-0.5em}sub{bottom:-0.25em}pre{padding:15px;white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}textarea{overflow:auto}.ie6 legend,.ie7 legend{margin-left:-7px}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}label,input[type="button"],input[type="submit"],input[type="image"],button{cursor:pointer}button,input,select,textarea{margin:0}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0 0 5px red;-webkit-box-shadow:0 0 5px red;box-shadow:0 0 5px red}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}::-moz-selection{background:#ff5e99;color:#fff;text-shadow:none}::selection{background:#ff5e99;color:#fff;text-shadow:none}a:link{-webkit-tap-highlight-color:#ff5e99}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr}.hidden{display:none;visibility:hidden}.visuallyHidden{border:0!important;clip:rect(0 0 0 0);height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}
body,select,input,textarea{color:hsl(188,73%,90%);text-shadow:1px 1px 1px hsl(300,0%,0%);font:14px/24px helvetica,arial,sans-serif}
a, a:visited {color:hsl(188,73%,85%); }
a:hover { color:hsl(188,73%,75%);}
/* Primary Styles
Author: Paul Irish and some hookups from Divya Manian
*/
/* Thanks Lea Verou: leaverou.me/demos/css3-patterns.html and Divya Manian for the implementation. */
html { min-height: 100%; }
html {
background: hsl(68, 1%, 28%);
background-image: -webkit-gradient(linear, 0 50%, 0 100%, from(transparent), to(hsla(300, 0%, 0%, 0.8))),
-webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, hsla(300, 0%, 100%, 0.08)), color-stop(.25, transparent),
color-stop(0.5, transparent), color-stop(0.5, hsla(300, 0%, 100%, 0.08)),
color-stop(.75, hsla(300, 0%, 100%, 0.08)), color-stop(.75, transparent),
to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, hsla(300, 0%, 100%, 0.08)), color-stop(.25, transparent),
color-stop(0.5, transparent), color-stop(0.5, hsla(300, 0%, 100%, 0.08)),
color-stop(.75, hsla(300, 0%, 100%, 0.08)), color-stop(.75, transparent),
to(transparent));
background-image: -moz-linear-gradient(transparent, hsla(300, 0%, 0%, 0.8)),
-moz-linear-gradient(45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%,
transparent 50%, hsla(300, 0%, 0%, 0.08) 50%, hsla(300, 0%, 0%, 0.08) 75%,
transparent 75%, transparent),
-moz-linear-gradient(-45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%,
transparent 50%, hsla(300, 0%, 0%, 0.08) 50%, hsla(300, 0%, 0%, 0.08) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(transparent, hsla(300, 0%, 0%, 0.8)),
-o-linear-gradient(45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%,
transparent 50%, hsla(300, 0%, 0%, 0.08) 50%, hsla(300, 0%, 0%, 0.08) 75%,
transparent 75%, transparent),
-o-linear-gradient(-45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%,
transparent 50%, hsla(300, 0%, 0%, 0.08) 50%, hsla(300, 0%, 0%, 0.08) 75%,
transparent 75%, transparent);
background-image: linear-gradient(transparent, hsla(300, 0%, 0%, 0.8)),
linear-gradient(45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%,
transparent 50%, hsla(300, 0%, 0%, 0.08) 50%, hsla(300, 0%, 0%, 0.08) 75%,
transparent 75%, transparent),
linear-gradient(-45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%,
transparent 50%, hsla(300, 0%, 0%, 0.08) 50%, hsla(300, 0%, 0%, 0.08) 75%,
transparent 75%, transparent);
}
body { margin:0; padding: 0px; font-family: 'PT Sans', 'Corben', sans-serif; font-weight: bold;}
#main { margin: 20px auto 0; padding:20px 20px 10px; width: 908px; position: relative;
-moz-border-radius: 6px; -webkit-border-radius:6px; border-radius: 6px;
}
h1 { font: 60px/68px Sniglet, 'ChunkFiveRegular', Arial, sans-serif; margin: 0 auto; text-align: center; }
h1 span { display: block; color: white; }
canvas {
height: 250px; width: 99%;
outline: 4px solid rgba(255,255,255,.6); margin-bottom: .4em; position:relative; cursor: crosshair;
-moz-outline-radius:3px; -webkit-outline-radius:3px; -o-outline-radius: 3px; outline-radius: 3px;
-moz-box-shadow: 0 1px 10px hsla(200, 5%, 10%, .5);
-webkit-box-shadow: 0 1px 10px hsla(200, 5%, 10%, .5);
box-shadow: 0 1px 10px hsla(200, 5%, 10%, .5);
}
/*
* media queries for responsive design
* these follow after primary styles so they will successfully override.
*/
@media all and (orientation:portrait) {
}
@media all and (orientation:landscape) {
}
@media screen and (max-device-width: 480px) {
}
/*
* print styles
* inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
*/
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
-ms-filter: none !important; } /* black prints faster: sanbeiji.com/archives/953 */
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
.social {
font-size: 60px;
color: #fb0078;
text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #fb0078,0 0 25px #fb0078,0 0 25px #fb0078,0 0 30px #fb0078,0 0 30px #fb0078;
margin-right: 5px;
font-style: italic;
line-height: inherit;
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::before element
foundation-icon-fonts-3media="screen"
.fi-heart:before {
content: "\f159";
}
font-family: "foundation-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
display: inline-block;
text-decoration: inherit;
}
foundation-icon-fonts-3media="screen"
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
foundation-icon-fonts-3media="screen"
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Inherited from li
foundation-icon-fonts-3media="screen"
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
margin: 0;
padding: 0;
direction: ltr;
}
user agent stylesheetli {
display: list-item;
text-align: -webkit-match-parent;
}
Inherited from ul.icon-styles.large-block-grid-5.small-block-grid-3
.icon-styles {
text-align: center;
}
foundation-icon-fonts-3media="screen"
ul, ol, dl {
font-size: 1em;
line-height: 1.6;
margin-bottom: 1.25em;
list-style-position: outside;
font-family: inherit;
}
foundation-icon-fonts-3media="screen"
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
margin: 0;
padding: 0;
direction: ltr;
}
html {
background: #fff;
color: #000;
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
