80s design - we love it! With all of these geometric shapes, spatial backgrounds and neon light effects, our landing page for a special event (Christmas parties) couldn't be more radiant! Let's show us how to do it.
Remove your headbands, turn on your neon lights and insert Tron into your VCR ... the 80 years are back!
As a designer, I've always had a soft spot for 80s design that nobody talks about. With all these geometric shapes, tons of patterns, space backgrounds with those cheap neon effects (it should bring back fond memories).
In fact, you can see it everywhere. From "Strangers Things" from Netflix, MineCraft or Muse, which just released an album with an 80s flavor - or even the remake of Tron.
So why not take advantage of this trend and show you how to implement it in a landing page created with Elementor ?
It is not just a theoretical tutorial. We have taken some elements for the current discount period (Black Friday), to give you tools to prepare for your future events.
Opening section
Neon effect
In the center of the composition, I placed the logo, the message and the button.
You can see that the most important message is written in a "neon light". To get that neon look, you need to add CSS to your design. The CSS will add a lot of pink shadow to the text. That's the whole thing.
So you need to add a header widget, change the size of the chosen font to make it shine and set the color to white.
Then open the Advanced tab and paste it into the custom CSS tab, add this code:
selector { text-shadow: 0 0 20px #fff, 0 0 10px #fff, 0 0 50px #ff0fad, 0 0 50px #ff0fad, 0 0 40px #ff0fad, 0 0 100px #ff0fad, 0 0 75px #ff0fad; }
If you want to use a different shade next to the pink, just change the color number after the pound sign. That's all.
Vertical title
Another interesting aspect of this design appears next to the letters "FRI", with the year attached to it appearing vertically (90 degrees).
To achieve this look, you need to add an interior section widget. This is done to implement the vertical effect only on one column.
After adding the inner section, add a title widget to each column.
Style your text and then open the advanced tab of the second column (the one you want to rotate) and in the custom CSS tab write this code:
selector { float: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }
80 retro background
Features section
Design
Staged on Photoshop
Build live
CTA
Critics Section
Design
Price table section
Design
Get this totally awesome model
The template shown in this tutorial is now available in the library Elementor. So you can use it with one click.