---
title: Brittany Hack A Thon
---

May 2015

![](https://cdn2.hubspot.net/hub/508182/hubfs/hs_logo.png?width=292&name=hs_logo.png)Hack-A-Thon

## Module Description

I wanted to make a fun module. I added a gif of a flying superhero, which can be swapped out for any gif you want, and added a CTA that links you go a site fill of inspiring stories. This superhero bar has a parallax effect built in, so while you scroll you can make the superhero fly up and down on the page.

![](https://scontent-iad3-1.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/10686856_627238014040285_4355193511195608385_n.jpg?oh=3697e1b15ab3079b9729cdd61983fea5&oe=55F0013A)

Created by:

### Brittany Tagliente

#### Brand Builder Solutions

I am a recent grad from University of Delaware with a degree in Marketing and MIS. Drummer and percussionist by trade, I then turned my head towards developing and loved it!

# How It's Built

## Inputs:

### Design Manager

![Screen_Shot_2015-05-15_at_11.05.52_AM.png](https://www.brandbuildersolutions.com/hs-fs/hubfs/brittany_hack_a_thon.png?width=303&name=brittany_hack_a_thon.png "Screen_Shot_2015-05-15_at_11.05.52_AM.png")

### Page Edit Screen

![brittany_hacka_thon_2.png](https://www.brandbuildersolutions.com/hs-fs/hubfs/brittany_hacka_thon_2.png?width=266&name=brittany_hacka_thon_2.png "brittany_hacka_thon_2.png")

## Source Code:

### Module HTML

************************************************************************************ * Enter your module HTML code here between some HubL raw tags. * * Read more about Escaping HubL delimiters with raw tags at * http://designers.hubspot.com/docs/hubl/intro-to-hubl#escaping-hubl-delimiters ************************************************************************************

{{ widget.everyday_heroes }}

{{ widget.link_everyday_heroes }}

### Module CSS

************************************************************************************ * Enter your module CSS code here between some HubL raw tags. * * Read more about Escaping HubL delimiters with raw tags at * http://designers.hubspot.com/docs/hubl/intro-to-hubl#escaping-hubl-delimiters ************************************************************************************ .superhero-background{ background-repeat: no-repeat; background-size: cover; background-attachment: fixed; padding: 7% 15px; } .superhero-text-h1 h1 { color: #990000; text-shadow: 1px 2px 1px #f2f2f2; line-height: 1em; font-weight: bold; } .superhero-text-h2 h2{ color: #990000; text-shadow: 1px 2px 1px #f2f2f2; font-weight: bold; font-size: 26px; } .superhero-text-h2 { padding: 125px; }

### Module JavaScript

************************************************************************************ * Enter your module JavaScript code here between some HubL raw tags. * * Read more about Escaping HubL delimiters with raw tags at * http://designers.hubspot.com/docs/hubl/intro-to-hubl#escaping-hubl-delimiters ************************************************************************************