Tip: Add a Simple CSS Only Fixed Footer

[⚡JFarrow⌁]

What we will be creating is something like this:

Download Text File with All Code

Add the Following HTML to your Below Footer HTML module(customize however you like with HTML):

<main>
<div class="arrow animated bounce">
</main>
<footer>
<h1>Hi, im a fixed-Footer!</h1>
</footer>

Add the Following Code to your Design Studio CSS:

@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,700);html {  height: 100%;  box-sizing: border-box;}body {  height: 100%;  font-family: "Raleway", sans-serif;  color: #F5F3EC;  background: #333;  margin: 0px;  padding: 0px;}main {  z-index: 1;  position: relative;  height: 100%;  background: url("http://goo.gl/87Onyp") no-repeat scroll center center/cover transparent;  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.8);}footer {  position: relative;  z-index: -2;  height: 300px;  background: none repeat scroll 0% 0% #31353A;  font-size: 12px;  color: #CCC;  text-align: center;}footer h1 {  position: fixed;  z-index: 1;  left: 50%;  bottom: 110px;  margin-left: -400px;  width: 800px;  list-style: outside none none;  text-align: center;  font-weight: bold;  color: #FFF;  font-size: 2.125rem;  }@-moz-keyframes bounce {  0%, 20%, 50%, 80%, 100% {    -moz-transform: translateY(0);    transform: translateY(0);  }  40% {    -moz-transform: translateY(-30px);    transform: translateY(-30px);  }  60% {    -moz-transform: translateY(-15px);    transform: translateY(-15px);  }}@-webkit-keyframes bounce {  0%, 20%, 50%, 80%, 100% {    -webkit-transform: translateY(0);    transform: translateY(0);  }  40% {    -webkit-transform: translateY(-30px);    transform: translateY(-30px);  }  60% {    -webkit-transform: translateY(-15px);    transform: translateY(-15px);  }}@keyframes bounce {  0%, 20%, 50%, 80%, 100% {    -moz-transform: translateY(0);    -ms-transform: translateY(0);    -webkit-transform: translateY(0);    transform: translateY(0);  }  40% {    -moz-transform: translateY(-30px);    -ms-transform: translateY(-30px);    -webkit-transform: translateY(-30px);    transform: translateY(-30px);  }  60% {    -moz-transform: translateY(-15px);    -ms-transform: translateY(-15px);    -webkit-transform: translateY(-15px);    transform: translateY(-15px);  }}.arrow {  position: absolute;  bottom: 50px;  left: 50%;  margin-left: -20px;  width: 20px;  height: 20px;  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);  background-size: contain;}.bounce {  -moz-animation: bounce 2s infinite;  -webkit-animation: bounce 2s infinite;  animation: bounce 2s infinite;}

[George H. Compton IV]

Awesome tip JF, thank you for sharing your cods. :-)

[Kos]

Going to give this a try.  Thanks!

[⚡JFarrow⌁]

cool guys... just a quick little thing.. totally customizable... glad you like it!

you could even combine it with this POWr tip   to get something like this:

Clickiing that image will take you to the code view View it full screen here

[Fire-Tech]

Pretty slick man. Think I might play around with this to hide and display titles for pics or group list images...

Thanks ;)