<div class="wrapper">
  <canvas id="demo-canvas"></canvas>
  <div class="poloroid">
    <div class="img"></div>
    <div class="name">
      <div>James</div>
        <div class="details">
          <p>"James" its my nick name</p>
          <p>My name is Himateja</p>
          <p>I'm a Student and @Codepen is My College.</p>
          <div class="geo">
            <span>India</span>
          </div>
          <div class="bottom">
            <p>This is my #Firstpen...!</p>
          </div>
     </div>
  </div>
</div>
<footer>
<ul>
<li><a href="#0" class="fa fa-dribbble" title="Dribbble"></a></li>
<li><a href="https://www.facebook.com/himatejamerlapaka" target="_blank" class="fa fa-facebook" title="Facebook"></a></li>
<li><a href="https://twitter.com/iamhimateja" target="_blank" class="fa fa-twitter" title="Twitter"></a></li>
<li><a href="https://codepen.io/Himateja/" target="_blank" class="fa fa-codepen" title="Codepen"></a></li>
</ul>
</footer>

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
@import url('//fonts.googleapis.com/css?family=Lato:400');
*, *:before, *:after {
  box-sizing: border-box;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body, html {
  height: 100%;
  background: url("https://lh4.googleusercontent.com/-b65_YEujdhY/T52ry34XssI/AAAAAAAAh5c/SIQoLj2hAzQ/s1920-w1920-h1080-c/final%2Bcopy%2BSecond%2BBeach.jpg") center center fixed;
  background-size: cover;
  font-family: "Lato", sans-serif;
  padding: 0;
  margin: 0;
  color: #6D6D6D;
}
div.poloroid
{
	position: absolute;
	background: #fff;
	width: 190px;
	height: 230px;
	border-radius: 3px;
	box-shadow: 0px 0px 6px rgba(100, 89, 89, 0.34);
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    -ms-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
div.poloroid:hover
{
	transform: translate(-50%,-50%) scale(1.09);
	box-shadow: 0px 0px 25px rgba(255, 255, 255, 0.87);
}
.poloroid .img
{
	background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iNjQwcHgiCiAgIGhlaWdodD0iNDgwcHgiCiAgIGlkPSJzdmcyOTk0IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlua3NjYXBlOnZlcnNpb249IjAuNDguNCByIgogICBzb2RpcG9kaTpkb2NuYW1lPSJkcmF3aW5nLnN2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczI5OTYiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJiYXNlIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnpvb209IjAuNzc0NzI1MjciCiAgICAgaW5rc2NhcGU6Y3g9IjMyMCIKICAgICBpbmtzY2FwZTpjeT0iMjQwIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImxheWVyMSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTM2NiIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI3MDUiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9Ii04IgogICAgIGlua3NjYXBlOndpbmRvdy15PSItOCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOnNuYXAtZ3JpZHM9InRydWUiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMjk5OSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGUgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICBpZD0ibGF5ZXIxIgogICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiPgogICAgPHJlY3QKICAgICAgIHN0eWxlPSJmaWxsOiNlOWIxODgiCiAgICAgICB4PSIyNTUuNjM0NTIiCiAgICAgICB5PSIzMTMuNTA5NTIiCiAgICAgICB3aWR0aD0iMTM4LjU2MzU4IgogICAgICAgaGVpZ2h0PSI5NC42MjY2MTciCiAgICAgICBpZD0icmVjdDExNSIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmRkNGFhIgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgIGQ9Ik0gNDQ1LjIxMjY5LDExMy4wNjg4NSBDIDQzMC41MzA0Niw4OC45ODIxNTcgMzk3LjQ5NTQ4LDYxLjQ1NDM3OSAzMzAuNTA3NzUsNjEuNDU0Mzc5IGMgLTAuOTE3NTksMCAtMi43NTI5NCwwIC0zLjY3MDUyLDAgLTM4LjU0MDg5LDAuODYwMjExIC04OS4wMTEwMywxMC4zMjI5MjMgLTExNy40NTc4OSw1Mi40NzQ3OTEgLTE2LjUxNzQ5LDI1LjgwNzIzIC0xNy40MzUxNyw1MC43NTQyMyAtMTcuNDM1MTcsNTEuNjE0NDcgMCwxLjcyMDQ2IDAsNDIuMTUxODcgMTYuNTE3NDgsODIuNTgzMjYgMjIuMDIzMzksNTUuMDU1NDkgNjMuMzE3Miw4NC4zMDM3MSAxMTguMzc1NTgsODQuMzAzNzEgNTUuMDU4MzUsMCA5Ni4zNTIxNywtMjkuMjQ4MjIgMTE4LjM3NTQ2LC04NC4zMDM3MSAxNi41MTc1NywtNDEuMjkxNjIgMTYuNTE3NTcsLTgwLjg2MjggMTYuNTE3NTcsLTgyLjU4MzI2IDAuOTE3NTksLTEuNzIwNDUgMCwtMjYuNjY3NDUgLTE2LjUxNzU3LC01Mi40NzQ3OSB6IgogICAgICAgaWQ9InBhdGgxMTciIC8+CiAgICA8ZwogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoOS4xNzYzOTYxLDAsMCw4LjYwMjQxOTgsLTYzMy45MzE1MiwtOTU4Ljc5MjU4KSIKICAgICAgIGlkPSJnMTE5Ij4KICAgICAgPGNpcmNsZQogICAgICAgICBkPSJtIDk5Ljk5OTk5NywxMzYuMiBjIDAsMC45OTQxMSAtMC44MDU4ODgsMS44IC0xLjgsMS44IC0wLjk5NDExMywwIC0xLjgsLTAuODA1ODkgLTEuOCwtMS44IDAsLTAuOTk0MTIgMC44MDU4ODcsLTEuOCAxLjgsLTEuOCAwLjk5NDExMiwwIDEuOCwwLjgwNTg4IDEuOCwxLjggeiIKICAgICAgICAgc3R5bGU9ImZpbGw6IzYzNTA0MSIKICAgICAgICAgc29kaXBvZGk6cnk9IjEuOCIKICAgICAgICAgc29kaXBvZGk6cng9IjEuOCIKICAgICAgICAgc29kaXBvZGk6Y3k9IjEzNi4yIgogICAgICAgICBzb2RpcG9kaTpjeD0iOTguMTk5OTk3IgogICAgICAgICBjeD0iOTguMTk5OTk3IgogICAgICAgICBjeT0iMTM2LjIiCiAgICAgICAgIHI9IjEuOCIKICAgICAgICAgaWQ9ImNpcmNsZTEyMSIgLz4KICAgIDwvZz4KICAgIDxnCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCg5LjE3NjM5NjEsMCwwLDguNjAyNDE5OCwtNjMzLjkzMTUyLC05NTguNzkyNTgpIgogICAgICAgaWQ9ImcxMjMiPgogICAgICA8Y2lyY2xlCiAgICAgICAgIGQ9Im0gMTEzLjEsMTM2LjIgYyAwLDAuOTk0MTEgLTAuODA1ODgsMS44IC0xLjgsMS44IC0wLjk5NDExLDAgLTEuOCwtMC44MDU4OSAtMS44LC0xLjggMCwtMC45OTQxMiAwLjgwNTg5LC0xLjggMS44LC0xLjggMC45OTQxMiwwIDEuOCwwLjgwNTg4IDEuOCwxLjggeiIKICAgICAgICAgc3R5bGU9ImZpbGw6IzYzNTA0MSIKICAgICAgICAgc29kaXBvZGk6cnk9IjEuOCIKICAgICAgICAgc29kaXBvZGk6cng9IjEuOCIKICAgICAgICAgc29kaXBvZGk6Y3k9IjEzNi4yIgogICAgICAgICBzb2RpcG9kaTpjeD0iMTExLjMiCiAgICAgICAgIGN4PSIxMTEuMyIKICAgICAgICAgY3k9IjEzNi4yIgogICAgICAgICByPSIxLjgiCiAgICAgICAgIGlkPSJjaXJjbGUxMjUiIC8+CiAgICA8L2c+CiAgICA8ZwogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoOS4xNzYzOTYxLDAsMCw4LjYwMjQxOTgsLTYzMy45MzE1MiwtOTU4Ljc5MjU4KSIKICAgICAgIGlkPSJnMTI3Ij4KICAgICAgPHBhdGgKICAgICAgICAgc3R5bGU9ImZpbGw6IzZmNWE0NCIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgZD0ibSA5MS4yLDEzOCBjIDAsMCAtMi4yLC0yLjggLTMuNywtNi43IC0yLjcsLTYuNyAzLjIsLTEzLjUgMy4yLC0xMy41IDYuOCwtNy4yIDE3LjQsLTYuNyAyMC45LC0zLjQgMy41LDMuMyAzLjEsNC42IDMuMSw0LjYgMCwwIDUuOSwwLjggNS45LDcuNiAwLDYuNyAtMi42LDExLjQgLTIuNiwxMS40IDAsMCAwLDAgMCwtMy4yIDAsLTYuOSAtNi45LC05LjkgLTYuOSwtOS45IDAsMCAtMy43LDMuMyAtOS45LDYuNCAtNi45LDMuNCAtMTAuMywwIC0xMC4zLDAgbCAwLjMsNi43IHoiCiAgICAgICAgIGlkPSJwYXRoMTI5IiAvPgogICAgPC9nPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiM0MjhhYzA7ZmlsbC1vcGFjaXR5OjEiCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgZD0iTSAzOTQuNzI0MTIsMzM0LjE4MjkgQyAzODkuODkyOTQsMzMzLjk2MDc1IDI3Mi44ODI5Niw0NTIuMjA0NzQgMzMzLjc5OTIzLDQ1Mi43MzU5NCAzOTQuMzYwOSw0NTMuMjY0NDMgMjU1Ljk5NDc3LDMzNC4xODI5IDI1NS4wNzcxNywzMzQuMTgyOSA4LjIyNjA5OTIsNDgwLjcyNjcxIDE1Ny41MTM0Miw0NjkuNjI5IDMzMy42NTE1LDQ3My4xMjMyMyBjIDE3Mi40MzAyOCwtNC40ODI3IDMwOS44MzA4OSw4LjYwNDAxIDYxLjA3MjYyLC0xMzguOTQwMzMgeiIKICAgICAgIGlkPSJwYXRoMTMzIgogICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjc2NjYyIgLz4KICAgIDxwYXRoCiAgICAgICBzb2RpcG9kaTp0eXBlPSJhcmMiCiAgICAgICBzdHlsZT0iZmlsbDojZTliMTg5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgaWQ9InBhdGg0MTA1IgogICAgICAgc29kaXBvZGk6Y3g9IjMxLjY5MTI0IgogICAgICAgc29kaXBvZGk6Y3k9IjQzLjg3OTU5NyIKICAgICAgIHNvZGlwb2RpOnJ4PSIyLjUwNzAxNSIKICAgICAgIHNvZGlwb2RpOnJ5PSIyLjcyMDAyODIiCiAgICAgICBkPSJtIDI5LjE4NTI3NSw0My44MDA4ODcgYSAyLjUwNzAxNSwyLjcyMDAyODIgMCAwIDEgNS4wMTI0OTgsMC4wMjUzNSBsIC0yLjUwNjUzMywwLjA1MzM2IHoiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxNS41MDc0MDIsMCwwLC04LjIzMTg2ODksLTE2Ni45MTAzMSw2MzkuOTgzNzgpIgogICAgICAgc29kaXBvZGk6c3RhcnQ9IjMuMTcwNTMzOSIKICAgICAgIHNvZGlwb2RpOmVuZD0iNi4yNjM1NjciIC8+CiAgPC9nPgo8L3N2Zz4K");
  background-size: 280px;
  background-position: -56px 0px;
  height: 214px;
  width: 175px;
  cursor: pointer;
  margin: 8px 0 8px 8px;
}
.poloroid div.name
{
	cursor: pointer;
	position: absolute;
	width: 190px;
	height: 100%;
	background: rgba(255, 255, 255, 0.9);
	text-align: center;
	font-size: 20px;
	transform: translateY(-13%);
	transition:all 0.4s ease-out;
}
.poloroid div.name.up
{
	transform: translateY(-97%);
}
.poloroid div.name .details .bottom
{
  position: relative;
  color: #000;
  margin-top:53px;
  width: 100%;
  padding: 0px 10px 10px 10px;
  font-size: 10px;
  line-height: 20px;
}
.poloroid div.name .details .geo
{
  position:relative;
  width:100%;
  line-height: 20px; 
  margin-top:20px;
  color:#228CD9;
  font-size:20px;
}
.poloroid div.name .details .geo:before
{
  content:"\f041";
  font-family:FontAwesome;
  color: #228CD9;
  font-size:20px;
}
.poloroid div.name div
{
	cursor: pointer;
	line-height: 25px;
	font-style: normal;
}
.poloroid div.name div.details
{
	line-height: 20px;
  padding: 0 10px 0 10px;
	font-size: 15px;
}
footer {
  clear: both;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  height: 40px;
  font-size: 13px;
  line-height: 40px;
  color: #999;
  background: rgba(0,0,0,0.2);
  z-index: 300;
}
.fa
{
  line-height: 40px;
  font-size: 20px;
}
li
{
  list-style: none;
  display: inline;
  position: relative;
  overflow: hidden;
}
li > a
{
  background: transparent;
  width: 50px;
  text-decoration: none;
  color: white;
  font-size: 20px;
  height: 50px;
  text-align: center;
  transition:0.3s ease-out;
}
li:nth-child(1) > a
{
  color: rgba(234, 76, 137, 0.8);
}
li:nth-child(1) > a:hover
{
  color: #fff;
  background: linear-gradient(to bottom, #E5709D 0%, #CA3871 100%);
}
li:nth-child(2) > a
{
  color: rgba(48, 92, 153, 0.8);
}
li:nth-child(2) > a:hover
{
  color: #fff;
  background: linear-gradient(to bottom, #4477cc 0%, #2f5fae 100%);
}
li:nth-child(3) > a
{
  color: #00cdff;
}
li:nth-child(3) > a:hover
{
  color: #fff;
  background: linear-gradient(to bottom, #00ccff 0%, #00a3cc 100%);
}
li:nth-child(4) > a
{
  color: #252527;
}
li:nth-child(4) > a:hover
{
  color: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#505050), to(#383838));
  background: -webkit-linear-gradient(#505050, #383838);
  background: linear-gradient(#505050, #383838);
}

$('.poloroid div.name').click(function(){
  $('.poloroid div.name').toggleClass('up');
});
$('.poloroid div.img').click(function(){
  $('.poloroid div.name').toggleClass('up');
});
// Credits - AnimatedHeaderBackgrounds Demo 2 by Rachel Smith - Thanks to Codrops

(function() {
    console.log("Howdy..!! Mr.XXX \n This is Inspired by Codrops\n and Chromebook Login\n and Google I/O 2014 Sandbox (google.com/events/io/sandbox)\t and Curiosity");
    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;

    // Main
    initHeader();
    addListeners();

    function initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = {x: 0, y: height};
        canvas = document.getElementById('demo-canvas');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext('2d');

        // create particles
        circles = [];
        for(var x = 0; x < width*0.5; x++) {
            var c = new Circle();
            circles.push(c);
        }
        animate();
    }

    // Event handling
    function addListeners() {
        window.addEventListener('scroll', scrollCheck);
        window.addEventListener('resize', resize);
    }

    function scrollCheck() {
        if(document.body.scrollTop > height) animateHeader = false;
        else animateHeader = true;
    }

    function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        // largeHeader.style.height = height+'px';
        canvas.width = width;
        canvas.height = height;
    }

    function animate() {
        if(animateHeader) {
            ctx.clearRect(0,0,width,height);
            for(var i in circles) {
                circles[i].draw();
            }
        }
        requestAnimationFrame(animate);
    }

    // Canvas manipulation
    function Circle() {
        var _this = this;

        // constructor
        (function() {
            _this.pos = {};
            init();
        })();

        function init() {
            _this.pos.x = Math.random()*width;
            _this.pos.y = height+Math.random()*100;
            _this.alpha = 0.1+Math.random()*0.3;
            _this.scale = 0.1+Math.random()*0.3;
            _this.velocity = Math.random();
        }

        this.draw = function() {
            if(_this.alpha <= 0) {
                init();
            }
            _this.pos.y -= _this.velocity;
            _this.alpha -= 0.0005;
            ctx.beginPath();
            ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
            ctx.fill();
        };
    }

})();