Learn to craft split landing pages that captivate your audience using HTML, CSS, and JavaScript. Boost conversions and user engagement today!
Table of Contents
Welcome to our comprehensive guide on creating a split landing page using HTML, CSS, and JavaScript. Split landing pages are a powerful tool in the world of web development, designed to engage your audience and boost conversion rates. In this guide, we will provide you with step-by-step instructions to help you master the art of crafting effective split landing pages.
Whether you're a seasoned web developer looking to enhance your skills or a newcomer eager to learn, this guide has something for everyone. Let's dive into the world of a split landing page and discover how these dynamic web assets can transform your online presence and drive meaningful results.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our split landing page.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break it down step by step:
1. <!DOCTYPE html>: This declaration tells the browser that the document is written in HTML5, the latest version of HTML.
2. <html lang="en">: This is the opening tag of the HTML document. It specifies that the document is written in English (en is the language code for English).
3. <head>: The head section contains meta-information about the document and links to external resources. It doesn't display any content on the web page itself.
- <meta charset="UTF-8" />: This meta tag specifies that the character encoding for the document is UTF-8, which is a widely used character encoding for text on the web.
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />: This meta tag is used for responsive web design. It sets the initial scale of the web page to 1.0 and adjusts the viewport width to the device's width, ensuring that the web page looks good on various screen sizes.
- <link rel="stylesheet" href="styles.css" />: This line links an external CSS (Cascading Style Sheets) file named "styles.css" to the HTML document. This CSS file is used to define the visual style and layout of the web page.
- <title>Split Landing Page</title>: This sets the title of the web page, which is displayed in the browser's title bar or tab. In this case, the title is "Split Landing Page."
4. <body>: The body section contains the actual content of the web page that is visible to users.
- <div class="container">: This is a container div that groups together the content of the web page. It is often used for layout and styling purposes.
- <div class="split left"> and <div class="split right">: These are two separate div elements within the container. They likely represent two halves of a split landing page, with one side dedicated to promoting the "Playstation 5" and the other to "XBox Series X."
- <h1>: This is a heading element that represents the main title or headline of each side. One side has "Playstation 5" as the title, and the other has "XBox Series X."
- <a href="#" class="btn">Buy Now</a>: These are anchor elements (hyperlinks) styled as buttons. They both have the text "Buy Now" and are likely intended to link to some purchase or product information page. The href="#" attribute indicates that the links don't currently point to any specific URL but are placeholders.
5. <script src="script.js"></script>: This line includes an external JavaScript file named "script.js." JavaScript is a programming language used to add interactivity and functionality to web pages. This file likely contains code that will be executed on the web page.
This is the basic structure of our split landing page using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the split landing page is in place, the next step is to add styling to the page using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our page.
Let's break down the code step by step:
1. @import: This line imports an external font from Google Fonts (Roboto) to be used in the web page. It includes two font weights (400 and 700) and specifies to display the swapped version if available.
2. :root: This section defines CSS custom properties (variables) that will be used throughout the stylesheet. These variables store values such as colors, button hover colors, widths, and animation speed for easy reuse and maintenance.
3. * (universal selector): This rule sets the CSS box-sizing property to "border-box" for all elements on the page. It ensures that padding and borders are included in the element's total width and height.
4. body:
- Styles applied to the entire body of the page.
- Sets the font family to 'Roboto' with a fallback to the sans-serif font family.
- The height of the body is set to 100% of the viewport height (vh).
- Overflow is set to "hidden" to prevent scrolling.
- Removes any margin on the body element.
5. h1:
- Styles applied to the heading (likely the page title) within the page.
- Sets the font size to 4rem.
- Sets the text color to white (#fff).
- Positions the element absolutely at the top center of its containing element.
- Uses transform to horizontally center the element.
- Ensures that the text does not wrap to the next line with white-space: nowrap.
6. .btn:
- Styles applied to buttons on the page.
- Positioned absolutely at the center of their containing elements.
- Text is aligned to the center.
- Styling for text color, border, font size, and font weight.
- Sets a fixed width and padding for the buttons.
7. .split.left and .split.right:
- Styles applied to the left and right halves of the split page, respectively.
- Positioning is set to absolute with a 50% width, making them occupy half the viewport each.
- Background images are applied using URLs.
- background-repeat is set to "no-repeat" to prevent image repetition.
- background-size is set to "cover" to ensure the background image covers the entire element.
8. .split.left::before and .split.right::before:
- Pseudo-elements are used to create colored overlays for the left and right halves.
- They cover the entire element with a color defined by the --left-bg-color and --right-bg-color variables.
9. .split.left, .split.right, .split.left::before, .split.right::before: These elements have CSS transitions defined for smooth animations, with the speed controlled by the --speed variable.
10. .hover-left and .hover-right: These classes are used in combination with JavaScript or user interactions to control the width of the left and right halves, creating a split effect.
11. @media (max-width: 800px):
- Media query that applies styles when the viewport width is 800px or less.
- Reduces the font size and adjusts the positioning of the heading and button elements to be more suitable for smaller screens.
This will give our split landing page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
:root {
--left-bg-color: rgba(87, 84, 236, 0.7);
--right-bg-color: rgba(43, 43, 43, 0.8);
--left-btn-hover-color: rgba(87, 84, 236, 1);
--right-btn-hover-color: rgba(28, 122, 28, 1);
--hover-width: 75%;
--other-width: 25%;
--speed: 1000ms;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
height: 100vh;
overflow: hidden;
margin: 0;
}
h1 {
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
white-space: nowrap;
}
.btn {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
top: 40%;
transform: translateX(-50%);
text-decoration: none;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
width: 15rem;
padding: 1.5rem;
}
.split.left .btn:hover {
background-color: var(--left-btn-hover-color);
border-color: var(--left-btn-hover-color);
}
.split.right .btn:hover {
background-color: var(--right-btn-hover-color);
border-color: var(--right-btn-hover-color);
}
.container {
position: relative;
width: 100%;
height: 100%;
background: #333;
}
.split {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
}
.split.left {
left: 0;
background: url('https://raw.githubusercontent.com/bradtraversy/50projects50days/master/split-landing-page/ps.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.split.left::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: var(--left-bg-color);
}
.split.right {
right: 0;
background: url('https://raw.githubusercontent.com/bradtraversy/50projects50days/master/split-landing-page/xbox.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.split.right::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: var(--right-bg-color);
}
.split.right,
.split.left,
.split.right::before,
.split.left::before {
transition: all var(--speed) ease-in-out;
}
.hover-left .left {
width: var(--hover-width);
}
.hover-left .right {
width: var(--other-width);
}
.hover-right .right {
width: var(--hover-width);
}
.hover-right .left {
width: var(--other-width);
}
@media (max-width: 800px) {
h1 {
font-size: 2rem;
top: 30%;
}
.btn {
padding: 1.2rem;
width: 12rem;
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. This JavaScript code is used to add interactivity to a web page by responding to mouse events (mouseenter and mouseleave) on two elements with the classes "left" and "right." These elements are being selected from the DOM (Document Object Model) using the document.querySelector() method. Additionally, it applies changes to an element with the class "container."
Here's a step-by-step explanation of what the code does:
1. const left = document.querySelector('.left'): This line selects an HTML element with the class "left" and assigns it to the variable left. This element is likely a part of the web page's content.
2. const right = document.querySelector('.right'): Similarly, this line selects an HTML element with the class "right" and assigns it to the variable right. Like the "left" element, this is also a part of the web page's content.
3. const container = document.querySelector('.container'): Here, an HTML element with the class "container" is selected and assigned to the variable container. This element likely contains or wraps around the "left" and "right" elements.
4. left.addEventListener('mouseenter', () => container.classList.add('hover-left')): This line adds an event listener to the "left" element. When the mouse enters (hovers over) the "left" element, the provided function is executed. In this function, it adds the class "hover-left" to the "container" element. Adding a class can trigger CSS styles to change, resulting in a visual effect when the mouse hovers over the "left" element.
5. left.addEventListener('mouseleave', () => container.classList.remove('hover-left')): This line adds another event listener to the "left" element. When the mouse leaves the "left" element, the provided function is executed. In this function, it removes the class "hover-left" from the "container" element. This typically reverses the visual effect applied when the mouse entered the "left" element.
6. The code for the "right" element follows a similar pattern. It has event listeners for mouseenter and mouseleave, which add and remove the class "hover-right" from the "container" element, respectively.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const left = document.querySelector('.left')
const right = document.querySelector('.right')
const container = document.querySelector('.container')
left.addEventListener('mouseenter', () => container.classList.add('hover-left'))
left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))
right.addEventListener('mouseenter', () => container.classList.add('hover-right'))
right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))Final Output:
Conclusion:
Congratulations! You've now reached the end of our comprehensive guide on creating a split landing page using HTML, CSS, and JavaScript. We've covered everything from understanding the concept of a split landing page to planning, designing, and optimizing your own. By following the steps outlined in this guide, you're well on your way to creating engaging landing pages that convert visitors into loyal customers.
Remember, the world of web development is dynamic, and staying up-to-date with the latest trends and technologies is crucial. Continue to explore, experiment, and refine your landing pages as you gain more insights and data from your audience.
As you embark on your split landing page journey, always keep in mind that success lies in continuous improvement. Monitor your metrics, conduct A/B tests, and adapt your strategies to meet the ever-evolving needs of your audience.
Thank you for choosing our guide as your resource. We hope it has been a valuable companion in your web development endeavors. Now, it's time to put your newfound knowledge into action and watch your online presence thrive. Happy split landing page creation!
Credit: Brad Traversy
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
