Combines contact us with social buttons. Slides out from left.
A Pen by Andrew Donelson on CodePen.
Created
September 1, 2014 04:55
-
-
Save AndrewDonelson/c1d85988c7f204304694 to your computer and use it in GitHub Desktop.
A Pen by Andrew Donelson.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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'; | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /**[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