Skip to content

Instantly share code, notes, and snippets.

@AndrewDonelson

AndrewDonelson/Contact-Slide-Panel.markdown

Created September 1, 2014 04:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AndrewDonelson/c1d85988c7f204304694 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AndrewDonelson/c1d85988c7f204304694 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Andrew Donelson.
Raw
Contact-Slide-Panel.markdown
Raw
index.html
<html lang=en>
<head>
<meta charset="utf-8">
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="social-panel metal linear">
<i class="fa fa-comment"></i>
<div class="sidebar-hint vert left no-select">
<i class="fa fa-phone"></i>
<span>CONTACT ME/US</span>
<i class="fa fa-users"></i>
</div>
<div style="margin-top: 25%">
<a href="https://twitter.com/AndrewDonelson" alt="Twitter" class="twitter"><i class="fa fa-twitter icon"></i></a>
<a href="http://www.linkedin.com/pub/andrew-donelson/5b/27/861" alt="LinkedIN" class="linkedin"><i class="fa fa-linkedin icon"></i></a>
<a href="https://plus.google.com/114532266100403759577/about/p/pub" alt="Google+" class="googleplus"><i class="fa fa-google-plus icon"></i></a>
<a href="https://www.facebook.com/andrew.donelson" alt="Facebook" class="facebook"><i class="fa fa-facebook icon"></i></a>
</div>
<br /><br />
<div class="contact-form">
<form>
<fieldset>
<input type="text" id="name" name="name" class="form-control input-block-level" placeholder="Name">
<input type="text" id="email" name="email" class="form-control input-block-level" placeholder="Email">
<textarea rows="6" id="description" name="description" class="form-control input-block-level" placeholder="Description"></textarea>
<button type="submit" class="btn btn-primary form-control"><i class="fa fa-envelope">&nbsp;Send</i></button>
</fieldset>
</form>
</div>
</div>
<div id="tail">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</div>
</body>
</html>
Raw
script.js
$(document).ready(function () {
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
/*
// usage:
$(window).smartresize(function(){
// code that takes it easy...
});
*/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
$(window).smartresize(function(){
var elem = $('.socail-panel');
elem.style.top=elem.parentElement.top +'px';
elem.style.bottom=elem.parentElement.bottom +'px';
});
});
Raw
style.css
/**[Common/Global]**/
.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
/**[Brushed metal Panel]**/
.metal {
position: relative;
outline: none;
text-align: center;
color: hsla(0,0%,20%,1);
text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
background-color: hsl(0,0%,90%);
box-shadow: inset hsla(0,0%,15%, 1) 0 0px 0px 4px, /* border */ inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */ inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */ inset hsla(0,0%,100%,.7) 0 2px 1px 7px, /* top HL */ hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */ hsla(0,0%,100%,.5) 0 5px 6px 4px;
transition: color .2s;
}
.metal.linear {
border-radius: 0 1em 1em 0;
background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%), linear-gradient(180deg, hsl(0,0%,78%) 0%, hsl(0,0%,90%) 47%, hsl(0,0%,78%) 53%, hsl(0,0%,70%)100%);
}
/**[Social Panel]**/
.social-panel {
position: fixed;
bottom: 0px;
top: 0px;
left:-175px;
width: 200px;
padding: 2em 3em 2em .25em;
z-index: 10;
-webkit-transition: all 750ms ease;
-moz-transition: all 750ms ease;
-ms-transition: all 750ms ease;
-o-transition: all 750ms ease;
transition: all 750ms ease;
}
.social-panel:focus, .social-panel:hover {
left: 0px;
border-right: solid 2px #ccc;
}
/**[Contact Me/Us side text]**/
.sidebar-hint {
position: absolute;
top:45%;
width:320px;
left:24px;
font-size:16px;
letter-spacing:8px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.contact-form{margin-left:10px}
.social-panel .fa.fa-comment { font-weight: 100; font-size: 50px; position:absolute;left:0px;top:10px; padding: 0em 0em 0em 0.3em;}
.social-panel h3 {font-weight: 800;float: right;float: right;padding-top: .2em;padding-right: .5em;font-size: 2.5em;}
.social-panel li {list-style-type: none;}
.social-panel .icon {
font-weight: 100;
font-size: 2.0em;
padding: 20px 9px;
border-radius: 2em 0em 2em 0em;
box-shadow: inset 0px 0px 8px -1px #666;
width: 40px;
height: 70px;
margin-left: 0.5em;
}
.social-panel i.fa.fa-twitter.icon{ color: cyan; }
.social-panel i.fa.fa-twitter.icon:hover {color: gray; box-shadow: inset 0px 0px 8px -1px cyan;}
.social-panel i.fa.fa-linkedin.icon { color: navy; }
.social-panel i.fa.fa-linkedin.icon:hover { color: gray; box-shadow: inset 0px 0px 8px -1px navy;}
.social-panel i.fa.fa-google-plus.icon { color: red; }
.social-panel i.fa.fa-google-plus.icon:hover { color: gray; box-shadow: inset 0px 0px 8px -1px red;}
.social-panel i.fa.fa-facebook.icon { color: blue; }
.social-panel i.fa.fa-facebook.icon:hover { color: gray; box-shadow: inset 0px 0px 8px -1px blue;}
#name,#email,#description {background-color: rgba(215, 226, 233, 0)}
.form-control{margin:1em 0 1em}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment