Sticky Nav

SI Logo swaps out for smaller version and appears

User accent color :hover

Mobile nav position upper right corner for tablet and below.

Pane Relationship: Main Menu Area
SI Play Header

Not Editable by Customers
Fully responsive demo: http://si-play-motion-full-build-football.webflow.io

Separate user accent color and custom interaction color (navbar, tabs from title bars on modules

ex. Dark team color for background of navbar. Light team color for :hover

Webfont: Open Sans

Icons: Fontawesome

Note letterspacing on H2's and Nav
Hero - Position Locked

Design Notes: Full background video. Adjustable tint layer over video. Occupies 100% of the viewport on load.

Only show screencap on mobile, don't load video.

Opacity value and Tint color can change.

Pane Relationship: Logo / League Site Name / Banner Top
 
 Animated UI arrow indicates page scrolls
News Section - Position Locked

Design Notes: Entire area clickable. Responsive cover image.

Pane Relationship: Content Pane
 
Upcoming Events

Combination of Location Data and a new Opponent data point?

Design Notes: User accent color border bottom

Pane Relationship: Sidebar Left
Youth League News

Truncated news snippet. Timestamp. Click card to read more. More than 4 stories activates the slider.

If in a sidebar cards should stack (see mobile view)

Pane Relationship: Content Pane
Facebook / Twitter

Twitter Kit : https://dev.twitter.com/web/overview

Facebook Page Plugin:
https://developers.facebook.com/docs/plugins/page-plugin

Pane Relationship: Any
Photo Slider
Design Notes: Minimal UI Dots indiate number of slides. Fully responsive and mobile freindly (touch capable)

Pane Relationship: Any
 
Scores - Position Locked

Design Notes: :hover uses CSS3 Transform Scale. Different combo classes to accommodate wide and tall team logos. Fontawesome fa-caret-right indicates winner

Pane Relationship: Sidebar Right
 

News

Youth football players to represent Glen Ridge on national stage

 

UPCOMING EVENTS

Spartans

 July 2oth 6am - 7am
Skidmore College Fields

Landsharks

 July 2oth 6am - 7am
Skidmore College Fields

Outlaws

 July 2oth 6am - 7am
Skidmore College Fields
View All 

Scores

8
11
10
4
8
12
5
7
8
11

YOUTH LEAGUE NEWS

View All
Dev Mode