{"id":19079,"date":"2018-11-22T20:47:24","date_gmt":"2018-11-22T20:47:24","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=19079"},"modified":"2018-11-22T20:47:24","modified_gmt":"2018-11-22T20:47:24","slug":"create-80s-style-landing-page","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/","title":{"rendered":"Create an 80s Style Landing Page for Black Friday"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

80\u2019s design \u2013 we just love it! With all those geometric shapes, space backgrounds, and neon light effects, our Black Friday landing page couldn't look more rad! Let's show you how to do it.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Take off your headbands, turn on your neon lights, and put Tron in your VCR\u2026 the 80\u2019s are back!<\/p>\n

As a designer, I always had that fetish that nobody talks about \u2013 80\u2019s design. With all those geometric shapes, tons of patterns, space backgrounds with those cheap neon light effects.. (come on, you know you like it too).<\/p>\n

Actually, you can see it everywhere. From Netflix\u2019s \u201cStrangers Things\u201d, MineCraft, or Muse that just released an album with an 80\u2019s flavor \u2013 or even the remake of Tron. Everything screams 80\u2019s, and we love it!<\/p>\n

So why not take this hot trend and show you how to implement it in a landing page built with Elementor<\/a>?<\/p>\n

This is not just a theoretical tutorial. We took elements from Elementor’s own upcoming Black Friday 80’s-style campaign and incorporated them in the design. Totally tubular!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Opening Section<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tOur opening section is a hero section. The first thing to notice here is the headline. I recommend putting a lot of effort into this area since it\u2019s the first thing your visitor will see. Consider what exact message you intend to deliver.<\/span>\n\nHaving your title wide and clear will capture people\u2019s attention. <\/span>\n\nThis first section also needs to entice users to scroll down and browse through the rest of the page.<\/span>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Neon Effect<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"1st_section\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In the center of the composition, I placed the logo, message, and button.<\/p>

You can see that the most important message is written in a bright \u201cneon light\u201d. To get to this neon look, you need to add some CSS<\/a> to your design. The CSS will add a lot of pink shadow to the text. That’s the whole trick.<\/p>

So what you need to do is add a heading widget, change the weight of your chosen font to light<\/i> and set the color to white.<\/p>

Then, open the advanced tab and paste in the custom CSS tab, add this code:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tselector {\n    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;\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-66517ad elementor-widget elementor-widget-text-editor\" data-id=\"66517ad\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you want to use a different shade beside pink, simply change the number of the color after the pound sign. That\u2019s all.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d4536a elementor-widget elementor-widget-heading\" data-id=\"1d4536a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Vertical Headline\u200b<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9cfc51c elementor-widget elementor-widget-text-editor\" data-id=\"9cfc51c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Another cool aspect of this design appears next to the \u201cFRI\u201d letters, with the year attached to it appearing vertically (90 degrees).<\/p><p>To get this look, you need to add an Inner Section Widget. This is done to implement the vertical effect only on one column.<\/p><p>After adding the inner section, add a heading widget to each column.<\/p><p>Style your text and then open the advanced tab of the second column (the one that you wish to rotate) and in the custom CSS tab write this code:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77c9a39 elementor-widget elementor-widget-code-highlight\" data-id=\"77c9a39\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>selector {\r\n    float: left;\r\n    transform: rotate(90deg);\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-67b12c5 elementor-widget elementor-widget-heading\" data-id=\"67b12c5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Retro 80\u2019s Background<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d6ea742 elementor-widget elementor-widget-text-editor\" data-id=\"d6ea742\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tWhen you finish working on the main message, start working on the background to give the text another boost and make that retro 80\u2019s sci-fi look complete. <\/span>\n\nHere I added a picture that was designed in Photoshop and used it as a hero background. In this design, the background has a Tron-like geometric grid with a touch of palm trees that are leaning to the left and a main gradient of blue-purple-pink to get that retro feeling. There are also some small touches like the \u201cDeLorean DMC-12\u201d (you probably recognize it from Back to the Future)<\/span>\n\nThe car, as well as the shooting stars, are all aiming at our section\u2019s main text, underlining our main message. <\/span>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-515494f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"515494f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-20824ee\" data-id=\"20824ee\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4245f5d elementor-widget elementor-widget-heading\" data-id=\"4245f5d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Features Section\u200b<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9b41aa elementor-widget elementor-widget-image\" data-id=\"b9b41aa\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"491\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/11\/2nd_section.gif\" class=\"attachment-full size-full wp-image-19090\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae4d63c elementor-widget elementor-widget-text-editor\" data-id=\"ae4d63c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When you <a href=\"https:\/\/elementor.com\/blog\/how-to-design-effective-landing-page\/\">design a landing page<\/a>, you need to think about how each section relates to the other.\u00a0<span style=\"font-weight: 400\">This is a more complicated task when dealing with a trendy design like retro 80s.<\/span><\/p><p>So after you design an amazing first section and raise the bar, you need to keep the level high and keep the same design theme, but still think of each section as a composition in itself.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fe0319 elementor-widget elementor-widget-heading\" data-id=\"0fe0319\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">The Design\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f1028b elementor-widget elementor-widget-text-editor\" data-id=\"1f1028b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tIn this section, I designed a more \u201cstranger things\u201d darker look as we \u201cdrilled down\u201d the page.\u00a0Here you can see a headline, 3 flipping bullets, and a button. <\/span>\n\nTo create this floating-3D effect, I used a bit of Photoshop combined with Elementor\u2019s Flip-box settings. <\/span>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f2fd59 elementor-widget elementor-widget-heading\" data-id=\"8f2fd59\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Setting the Stage on Photoshop<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07b0314 elementor-widget elementor-widget-text-editor\" data-id=\"07b0314\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tSo, the first thing I did is create the entire stage in Photoshop to see what everything would look like before I start to build it. In the headline, You can see the neon look from before, and underneath that, I added 3 triangles with icons and a title \u2013 the bullets.<\/span>\n\nI added a blue-purple-pink gradient to each triangle. Above it, there is a line pattern to give it an 80&#8217;s tv look and a blur behind it, to create a glowy sci-fi look.<\/span>\n\nThe icons also get a neon look as well, and for the title at the bottom of the triangle \u2013 give it a floating effect in <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"bold\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"6813\">bold<\/a> letters. <\/span>\n\nThe background has a smoky-cloudy-dark effect with the same line pattern that was used on the triangle.<\/span>\n\nFor the 3D animation, the triangles will have a see-through background. It means that the text in the back will show when it&#8217;s not covered. So I added a bit of black smoke on the sides of the triangle so the cover will blend in and still cover the back. <\/span>\n\nSo basically there are three layers to built in the editor: the background, the icon,\u00a0and the title. <\/span>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d60fb5 elementor-widget elementor-widget-heading\" data-id=\"3d60fb5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Building It Live\u200b<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cac437a elementor-widget elementor-widget-text-editor\" data-id=\"cac437a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tIn the editor, I added the flip-box widget. In the front content tab, I chose an image as my graphic element and added the title. <\/span>\n\nIn the background tab, in color, I changed the color to transparent and added the triangle that I designed in the image section and changed the position so that it will fit perfectly. Then, in the back tab, I did the same thing, but instead of adding a title, I added the text. <\/span>\n\nMoving on to the settings tab. Here I played with the height of the box. I used the VH unit because it&#8217;s a relative unit so it will change the image relative to the screen the visitor will use. It makes it more <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"responsive\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"7191\">responsive<\/a>. In the effects part, I kept the flip effect, changed the direction to the left and switched on the 3D depth to get this amazing 3D effect. <\/span>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c14ae3 elementor-widget elementor-widget-heading\" data-id=\"7c14ae3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">CTA<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c0c7a8 elementor-widget elementor-widget-text-editor\" data-id=\"8c0c7a8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tThe whole composition here aims down at the button \u2013 the thing that you want the user to do is \u2013 PRESS THE BUTTON. Here you can see that the button is not bold and \u201cin your face\u201d, but blends in with the smoky background with a small glow around it. But when you hover on it, the pink color pops out to play. <\/span>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0d3423a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0d3423a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-055815c\" data-id=\"055815c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0759a3e elementor-widget elementor-widget-heading\" data-id=\"0759a3e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Reviews Section<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d3c28af elementor-widget elementor-widget-image\" data-id=\"d3c28af\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/3rd_section-r4q71ba82mt5umn6jgyjtxe5j1nsanjaek1108s5bc.jpg\" title=\"3rd_section\" alt=\"3rd_section\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca2ac3a elementor-widget elementor-widget-text-editor\" data-id=\"ca2ac3a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tIf the user scrolls to the third section &#8211; it means you are doing something right. So after we talked about the product and how amazing it is, now it&#8217;s time for a different part to speak up. <\/span>\n\nWe decided <\/span>to quote<\/span> Marty Mc Flynn and the kind things he said about Elementor.<\/span>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc75448 elementor-widget elementor-widget-heading\" data-id=\"cc75448\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">The Design<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bfbe122 elementor-widget elementor-widget-text-editor\" data-id=\"bfbe122\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tIn this section, we have a reviews widget on a radical geometric background with a neon headline. The background was designed in Photoshop and then placed in the background of the section as a fixed background so it will have a scrolling hover effect. I wanted to give this section a \u201cbehind the scenes\u201d look, so as you scroll down, you are exposed to it.<\/span>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1d82db4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1d82db4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a830e15\" data-id=\"a830e15\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-266f6df elementor-widget elementor-widget-heading\" data-id=\"266f6df\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Pricing Table Section<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b0abfc0 elementor-widget elementor-widget-image\" data-id=\"b0abfc0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/4th_section-r4q76n1asu3nn2wnfrufyl06pnenwwoj4x42wovv2e.jpg\" title=\"4th_section\" alt=\"4th_section\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f945e1 elementor-widget elementor-widget-text-editor\" data-id=\"8f945e1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tThis section is the <\/span><b>Pricing Table <\/b>section. Here you can see all the elements that can support the sale. The headline, the countdown and of course \u2013 the price table. This is the finishing line of the landing page, so if your user doesn\u2019t click something didn\u2019t quite work.<\/span>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-769b2e8 elementor-widget elementor-widget-heading\" data-id=\"769b2e8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">The Design<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e6383f elementor-widget elementor-widget-text-editor\" data-id=\"6e6383f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tThe design in this section has more of an 80\u2019s-galaxy touch. The background here was edited in Photoshop, giving it a bright radish-purple look and stands out from the black-dark background that was there before, giving it a punch at the end. <\/span>\n\nUnder the header and tagline, there is a counter that shows the time remaining until the end of the sale. Here I used a spacy font called \u201cspace mono\u201d that I added via the custom font option. In the price table underneath it, each table has a light black background giving it a \u201cfloating in space\u201d kind of look, and when you hover on it, the background turns darker, and there is a glow around it like a focus spot that directs you to read the text inside. <\/span>\n\nWhen you hover over the button, there is another change of color for the button, so after you finish reading about the awesome plans we have, you will not miss the call to action, that is so important. <\/span>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a78042 elementor-widget elementor-widget-heading\" data-id=\"2a78042\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Get This Totally Awesome Template<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-831817b elementor-widget elementor-widget-text-editor\" data-id=\"831817b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It&#8217;s like, totally bitchin&#8217;!\u00a0The template shown in this tutorial\u00a0<a href=\"https:\/\/library.elementor.com\/black-friday-80s-style\/\" target=\"_blank\" rel=\"noopener\">is now available<\/a><span style=\"font-weight: 400\">\u00a0in Elementor library, so you can use it with a click.<\/span><\/p><p>\u201cModern retro\u201d will always look amazing. ironically, these days, we use all the best hi-tech tools to fashion a low-tech design. It will make some of your visitors remember their youth and for some of them to think how cool this era was.<\/p><p>But you know what? It\u2019s soo cool so who cares?!? Psych!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our team at Elementor created a truly BODACIOUS 80&#8217;s campaign for our Black Friday sale. I was so inspired that I decided to share the awesomeness and show you how to create a similar retro style landing page for Black Friday.\u200b<\/p>\n","protected":false},"author":93043,"featured_media":19263,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79,173],"marketing_persona":[],"marketing_intent":[],"class_list":["post-19079","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create an 80s Style Landing Page for Black Friday<\/title>\n<meta name=\"description\" content=\"Our team at Elementor created a truly BODACIOUS 80&#039;s campaign for our Black Friday sale. I was so inspired that I decided to share the awesomeness and show you how to create a similar retro style landing page for Black Friday.\u200b\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create an 80s Style Landing Page for Black Friday\" \/>\n<meta property=\"og:description\" content=\"Our team at Elementor created a truly BODACIOUS 80&#039;s campaign for our Black Friday sale. I was so inspired that I decided to share the awesomeness and show you how to create a similar retro style landing page for Black Friday.\u200b\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-22T20:47:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2018\/11\/Landing-Page-cover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hadas Golzaker\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hadas Golzaker\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/\"},\"author\":{\"name\":\"Hadas Golzaker\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/342f1e7cec8bec9340d04b892f548717\"},\"headline\":\"Create an 80s Style Landing Page for Black Friday\",\"datePublished\":\"2018-11-22T20:47:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/\"},\"wordCount\":1563,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/11\/Landing-Page-cover.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/\",\"url\":\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/\",\"name\":\"Create an 80s Style Landing Page for Black Friday\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/11\/Landing-Page-cover.png\",\"datePublished\":\"2018-11-22T20:47:24+00:00\",\"description\":\"Our team at Elementor created a truly BODACIOUS 80's campaign for our Black Friday sale. I was so inspired that I decided to share the awesomeness and show you how to create a similar retro style landing page for Black Friday.\u200b\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/11\/Landing-Page-cover.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/11\/Landing-Page-cover.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Create an 80s Style Landing Page for Black Friday\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/342f1e7cec8bec9340d04b892f548717\",\"name\":\"Hadas Golzaker\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e60159f135621dfa6fea648bac71fbd42f1684b635512c1cea303e2398204b95?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e60159f135621dfa6fea648bac71fbd42f1684b635512c1cea303e2398204b95?s=96&d=mm&r=g\",\"caption\":\"Hadas Golzaker\"},\"description\":\"Hadas is the brand manager of Elementor and a web designer. She works across UX\/UI, illustration and graphic design. She loves good music, Stefan Sagmeister and fancy restaurants.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/hadasg\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create an 80s Style Landing Page for Black Friday","description":"Our team at Elementor created a truly BODACIOUS 80's campaign for our Black Friday sale. I was so inspired that I decided to share the awesomeness and show you how to create a similar retro style landing page for Black Friday.\u200b","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/","og_locale":"en_US","og_type":"article","og_title":"Create an 80s Style Landing Page for Black Friday","og_description":"Our team at Elementor created a truly BODACIOUS 80's campaign for our Black Friday sale. I was so inspired that I decided to share the awesomeness and show you how to create a similar retro style landing page for Black Friday.\u200b","og_url":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2018-11-22T20:47:24+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2018\/11\/Landing-Page-cover.png","type":"image\/png"}],"author":"Hadas Golzaker","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Hadas Golzaker"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/"},"author":{"name":"Hadas Golzaker","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/342f1e7cec8bec9340d04b892f548717"},"headline":"Create an 80s Style Landing Page for Black Friday","datePublished":"2018-11-22T20:47:24+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/"},"wordCount":1563,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/11\/Landing-Page-cover.png","keywords":["Build","Video"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/","url":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/","name":"Create an 80s Style Landing Page for Black Friday","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/11\/Landing-Page-cover.png","datePublished":"2018-11-22T20:47:24+00:00","description":"Our team at Elementor created a truly BODACIOUS 80's campaign for our Black Friday sale. I was so inspired that I decided to share the awesomeness and show you how to create a similar retro style landing page for Black Friday.\u200b","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/11\/Landing-Page-cover.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/11\/Landing-Page-cover.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/create-80s-style-landing-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"Create an 80s Style Landing Page for Black Friday"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/342f1e7cec8bec9340d04b892f548717","name":"Hadas Golzaker","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e60159f135621dfa6fea648bac71fbd42f1684b635512c1cea303e2398204b95?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e60159f135621dfa6fea648bac71fbd42f1684b635512c1cea303e2398204b95?s=96&d=mm&r=g","caption":"Hadas Golzaker"},"description":"Hadas is the brand manager of Elementor and a web designer. She works across UX\/UI, illustration and graphic design. She loves good music, Stefan Sagmeister and fancy restaurants.","url":"https:\/\/elementor.com\/blog\/author\/hadasg\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/19079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/93043"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=19079"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/19079\/revisions"}],"predecessor-version":[{"id":93840,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/19079\/revisions\/93840"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/19263"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=19079"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=19079"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=19079"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=19079"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=19079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}