This task had very specific terms for SteemLinked's website hero banner:
I recreated a new banner from the reference and added my own illustrations showing multiple workers and basically followed the specs.
I started with a selection of 3 base shapes and created an inventory of objects from scratch that would be included in the banner.
I made some compositions and tried different shades of blue
I felt the style was too geometric, so I applied a rounded corners effect to all the original objects. The new style made a better connection with the logo, in my opinion. I also played around with the elements in the space to make them less static.
Finally, I did 3 versions for banners and 2 versions for main calls to action in hot pink and orange and secondary buttons in outline. The last image shows all the banners and buttons finalized.
The project manager stated that they needed the same size as the reference which is: 1440x240px, but I included 2 break points with banners at 800 and 400 px wide.
The Google Drive contains the transparent .pngs with the illustrations to be overlayed over a colored DIV and the "merged banners pngs with all the assets clumped together for reference"
Technical specs for banners
V1: The banner with the medium blue background
V2: The banner with the lightest blue background
V3: The banner with the darkest blue background
If other files are needed let me know 
The font for these designs is the same as the logo: Catamaran.
It is used in Regular and ExtraBold version.
For CSS embedding on the code the font is found at: https://fonts.google.com/specimen/Catamaran
All buttons use Catamaran ExtraBold in 16points. I used the type as small as possible for web viewing.
Buttons have been named as: pink, orange, white and blue (last two have an outline style) and each folder contains the 3 state files for each one: normal, focused and pressed
Normal state: The way the button appears with no interaction
Focused state: When the user hovers over the button
Pressed state: The look of the button once the button has been clicked
2. Size Version 2: wide 120x40px to allow 20% of free space to add icons. (recommended padding to the left of 12px)
The larger buttons comply with the 20% free space rule for icons.
They all have the same shape "bullet type". In terms of color and typography the specs are the same for both sizes as shown in the images below.
All the specs about colors in Hex and RGB are provided as follows. The images only show the short type of button with no added spacing:
The buttons can be easily programmed in CSS without the need to use the files, but I have saved them as pngs and SVG with type in curves inside the drive.
After speaking with the requester, the animation was regarded as optional, since my experience in CSS animation coding is not my specialty I can only recommend personalizing existing open-source loaders like the ones in: http://freefrontend.com/css-loaders/
Files are saved in several folders according to Sizes and Versions.
NOTE: For implementation use transparent png and apply background color to the DIV with CSS.
Additionally I've included the source file in Adobe Illustrator for versions CS5 and above, with type in curves
Original files are in Google Drive at: https://drive.google.com/drive/folders/1Jp_DXGQ19itzqNPHlOUCiJt2pOEWL7VH?usp=sharing
I apologize if this post was too technical. I will be moving on to more story-like posts in the future. If you got this far and want to know when I post you can follow me on:
Twitter: https://twitter.com/Creativista_
Instagram: http://instagram.com/creativista_
Steepshop: http://steepshop.com/@creativista
