Your landing page is a crucial element in your website layout. It is the first real opportunity you have to introduce your business, or the product you sell, so its design is key. Landing pages are designed with a single focused objective known as a call to action (CTA). The use of colours and images to complement the calls to action and the user experience is a must.
- See the working CodePen for this tutorial
01. Get set up
If you're using CodePen, make sure the CSS is set to 'SCSS' in the Pen settings. You can make this change by clicking on the settings tab, choose 'CSS' and change the CSS Preprocessor to SCSS in the drop-down options.
Then we can begin adding in our HTML. We're going to wrap a section called 'left' and a section called 'right' within a container class, with both sections given a class of 'screen'.
02. Finish the HTML
To finalise our HTML, we will add in a title for each section using an h1 tag. Underneath that we will need to add in a button, which would link to another page if this was a real-world project. We will give this a class of button to keep things nice and simple.
03. Explore Sass variables
The one thing we all love about Sass is the use of variables. Even though native CSS variables are getting more support, we will keep things safe by using Sass. We will put these at the top of our .scss, and you can choose whatever colours you want, but using rgba values will give us more flexibility.
04. Adjust body styling
Firstly, we will clear all default padding and margin to the body and then set the font family to Open Sans. This will only affect the button, so it doesn't matter too much what font we use. Then we will set the width and height to 100% and make sure that anything that overflows on the X axis gets hidden.
05. Style the section titles
It’s time to pick a Google font for the section titles – we’ve chosen Playfair Display. Then using translateX we can make sure the section titles are always centred on the X axis.
06. Make the CTAs stand out
Our buttons will act as our calls to action, so these need to be big, bold and positioned where they are easy to click. Both buttons will have a white border and an interesting transition effect. The default styles for both buttons will be the same, however we will change their colours on hover.
The main buttons will have a nice simple hover effect and we will use the Sass variables we specified for the colour, which will be a similar colour to the background of the page.
07. Set the container background and screens
The container class will act as our page wrapper and we will set the position of this to relative, simply because we want to position the screens to absolute positioning. We will give the container a default background colour, but of course this won't be seen because we will be setting different colours to both screen backgrounds.
08. Add background images
Both the left and right sections will display an image, and you can find royalty-free stock images from websites such as Unsplash, Pixabay or Pexels (which I've used in this tutorial). To make things easier, I've used a free image hosting and sharing service called imgbb that we can link to in our CSS.
The right-hand side of the page will also display a background image using imgbb, and we will set the background colour to pink. Again, we set the background size to cover. This will allow us to cover the entire containing element, which in our case is the .screen class.
09. Add transitions and hover effects
The animation speed for our hover effect on both screens will be controlled by a transition that holds the value of our variable $animateSpeed, which is 1000ms (one second). Then we'll finish off by giving the animation some easing, which is an ease in and out that will help to give us a smoother animation.
Because we will be using document more than once, we will set a constant variable called doc and store the document within that so we can keep the word 'document' nice and short.
Now we need to set three more constants that will store the .right, .left and .container selectors. The reason we are using constants is because we know we don't want to change the value of these, so using a constants makes sense. With these now set, we can go ahead and add some mouse events to them.
Using the left constant variable we declared in the last step, we can now add an event listener to it. This event will be the mouseenter event and instead of using a callback function, we will use another ES6 feature called Arrow Functions' ( () => ).
11. Add and remove a class
In the last step, our event listener added a mouseenter event that targets the main container class and adds a new class called hover-left to the left section element. With this called added, we now need to remove it when we hover off it. We'll do this by using the mouseleave event and the .remove() method.
12. Make it responsive
No project – no matter how big or small – should avoid being made responsive. So, in this step we will add some media queries to our CSS, and make this small project as adaptive to mobile devices as best we can. It's worth checking out the original CodePen to see how this works.
We've made sure that when the width of our page gets down to 800px, the font and buttons will reduce in size. So, to finish things off we want to target the height too and make sure our buttons move down the page when the page height gets below 700px.
Web design event Generate London returns on 19-21 September 2018, offering a packed schedule of industry-leading speakers, a full day of workshops and valuable networking opportunities – don’t miss it. Get your Generate ticket now.
This article was originally published in net magazine issue 305. Subscribe now.
- 5 sensational new websites to be inspired by
- Create an animated 3D text effect
- 19 great parallax scrolling websites