Premium Website
Design & Development
/* Hero container class
* Put this on the hero container. The blob will follow the mouse while inside the hero container, and expands when hovering over the h1.
*/
.cursor-hero-effect
/* Cursor blob element is set to a z-index of 100.
Anything you don't want the blob to cover needs to have a z-index higher than that.
*/
/* Use this format to apply the bold class in headings */
Heading Level One <span class="bold">Bold Text</span>
Heading Level One Bold Text
Heading Level Two
Heading Level Three
Heading Level Four
Heading Level Five
/* Classes to set height of element in vh */
.vh-10
.vh-20
.vh-30
.vh-40
.vh-50
.vh-60
.vh-70
.vh-80
.vh-90
.vh-100
/* If using in combination with the animated gradient background, recommend using min-height in pixels to prevent overlap.
*/
Application: WordPress Designer
"*" indicates required fields
Logo Carousel
/* id for logo carousel */
#skyhook-vertical-logos
Legacy Traditional Schools
Desert Star Construction
Autoimmune Association
Jackson White Law
Lebaron & Carroll
MD Helicopters
/*
* To extend a loop carousel off the left side of the page, use these classes.
*/
.case-study-carousel
.extend-left
Legacy Traditional Schools
Desert Star Construction
Autoimmune Association
Jackson White Law
Lebaron & Carroll
MD Helicopters
/*
* To extend a loop carousel off the right side of the page, use these classes.
*/
.case-study-carousel
.extend-right
We're Skyhook.
Our team is comprised of a dozen web professionals with expertise in all aspects of the website development process.
Note: The slider shows empty spaces if you set the loop style to infinite.
There should be a slide quantity that eliminates this problem, but increasing the number of slides seems to just increase the number of pages while still keeping the empty spaces.Rewind doesn’t have that issue.
Button Styles
Round To Square
/* Can be used on:
* -Link inside of text editor
* - Heading widget
* - Button
*/
.round-to-square
Arrow Out
Arrow Back
/* Can be used on:
* -Link inside of text editor
* - Heading widget
* - Button
*/
.arrow-out
.arrow-back
Arrow Down
/* Can be used on:
* -Link inside of text editor
* - Heading widget
* - Button
*/
.arrow-down
Wipe Up Effect
/* Can be used on:
* -Link inside of text editor
* - Heading widget
* - Button
*/
.wipe-effect
Wipe Down Effect
/* Can be used on:
* -Link inside of text editor
* - Heading widget
* - Button
*/
.wipe-effect
.down
Round To Square
/* Can be used on:
* -Link inside of text editor
* - Heading widget
* - Button
*/
.round-to-square
.white
Animated Gradient Background
/* HTML for gradient background element */
<canvas class="gradient height-600 gradient-canvas"></canvas>
/* The container that the canvas element and any mask images needs to have this class: */
.gradient-animation-wrapper
/* Class to enable gradient background. Add both to the canvas element */
.gradient-canvas
.gradient
/* Classes to set canvas height */
.height-100
.height-200
.height-300
.height-400
.height-450
.height-500
.height-550
.height-600
.height-650
.height-700
.height-750
.height-800
.height-850
.height-900
.height-950
.height-1000
.height-1100
.height-1200
.height-1300
.height-1400
.height-1500
.height-1600
.height-1700
.height-1800
.height-1900
.height-2000
/* Classes for mask image animations */
.upper-left
.upper-right
.lower-left
.lower-right
/* Any images you want the animation effect on will need to be position: absolute & aligned to the corner named in the class */
We have worked diligently to assemble, retain and engage a team that lives and breathes Skyhook’s core values, which are:
Think
We have worked diligently to assemble, retain and engage a team that lives and breathes Skyhook’s core values, which are:
Move
We have worked diligently to assemble, retain and engage a team that lives and breathes Skyhook’s core values, which are:
Own
We have worked diligently to assemble, retain and engage a team that lives and breathes Skyhook’s core values, which are:
/* Class to extend section with white background to right edge of page */
.right-edge-extend