May 2015
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.

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

Page Edit Screen
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 ************************************************************************************