About this template
Airlines Hero Section is a working reference for a travel brand: the hero section laid out, measured and ready to rebuild. The palette is deep indigo #20153E underneath and indigo #56489B carrying the accents, set in Inter. The entry names the stack that produced the page (one self-contained HTML file) rather than hiding it. The brief spends its motion budget on a looping video bed. Use it as the reference when you are building a travel brand hero section and want a finished composition instead of a starting point.
Designed for
- Write your own headline, then rebuild this hero section in one self-contained HTML file with the measurements intact.
- Teams rebuilding a competitor's travel hero section who want one self-contained HTML file named before anyone commits to a framework.
- The page serves front-end developers rebuilding a travel brand hero section in one self-contained HTML file and looking for the numbers behind the look.
What's included
- The nav is deliberately thin. The top row holds the wordmark, four to five links and a single action tinted #56489B, sized to stay quiet against the rest of the page. A mobile overlay takes over below the tablet breakpoint. The links are set below the wordmark in size, and the #56489B action is the only element in the bar with any weight.
- The sizes are in the brief, not in a scale. Nothing here is eyeballed. The spec fixes 100vh sections and 14px spacing steps, and the rest of the layout derives from those values. The brief states values rather than proportions, so the composition keeps its relationships when the copy changes length. Change the subject, not the steps.
- Video at the bottom layer. The background is a single 2.2s loop at 1466x1080, cropped to cover and left un-tinted. Everything else floats above it on a higher layer. The loop is short enough (2.2s) that the eye reads it as texture rather than as a timeline.
- One face, used with discipline. Type is the styling system here: Inter at the display size, the same face across the interface, and no second accent colour doing the work. Substituting the face is possible, but the proportions have to survive the swap.
Motion & interaction
The controls are the interactive layer
The interactive layer is small and predictable: hover states on the buttons and links rather than on every card. Everything else stays still, which keeps the emphasis on the composition. Hover and focus are specified together, so the pointer and the keyboard get the same information. Check the states on a touch device.
The loop does the ambient work
Ambient movement is one 2.2s clip at 1466x1080, looping quietly behind the copy rather than reacting to the pointer. A poster frame stands in when autoplay is blocked, so the motion is additive rather than required.
What holds up for Travel
Most travel pages add another section when the first screen is weak. This one removes options instead: navigation, the headline, the stats row and the background clip, in that order, and nothing that repeats the offer. Airlines Hero Section states the offer once and lets the composition repeat it rather than adding a second claim.
The order behind the hero section
The page has a deliberate order. Navigation establishes the product and gives a returning visitor a familiar way around. The headline takes the display size, the supporting line explains the offer, and the indigo #56489B accent marks the primary action, so the next step is never in question. Nothing else competes: there is no card grid before the first decision, which is what keeps the hero section from feeling heavy in travel work. A travel reader gets the offer before the options.
The timing behind the hero section
Count the animated elements and the list is short: hover and press states, a 2.2s media loop and a looping marquee. Nothing animates for its own sake in this hero section.
Frequently asked questions
What does the brief behind Airlines Hero Section actually contain?
It is a build brief rather than a mood description: it names the composition at 1466x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Do I need one self-contained HTML file to rebuild Airlines Hero Section?
The reference happens to be built in one self-contained HTML file. Nothing in the layout depends on that choice: the spacing, type and motion values transfer to whatever you already use.
Where did the Airlines Hero Section design come from?
The brief is a description, not a licence to redistribute someone else's assets. Keep the structure and the numbers, replace the media and the brand marks, and credit the source if a client asks where the layout came from. The reference was captured at 1466x1080.
