Split landing page in HTML, CSS

By Piyush Gupta
Piyush608 top freelancer india 2 1

A split landing page divides the screen into two distinct sections, often with different content or visuals on each side. Below is an example of how to create a split landing page using HTML and CSS.

HTML

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Split Landing Page
</title>
</head>
<body>
<div class="container">
<div class="split left">
<h1>Playstation 5</h1>
<a href="#" class="btn">Buy Now</a>
</div>
<div class="split right">
<h1>XBox Series X</h1>
<a href="#" class="btn">Buy Now</a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Split Landing Page </title> </head> <body> <div class="container"> <div class="split left"> <h1>Playstation 5</h1> <a href="#" class="btn">Buy Now</a> </div> <div class="split right"> <h1>XBox Series X</h1> <a href="#" class="btn">Buy Now</a> </div> </div> <script src="script.js"></script> </body> </html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Split Landing Page
    </title>
  </head>
  <body>
    <div class="container">
      <div class="split left">
        <h1>Playstation 5</h1>
        <a href="#" class="btn">Buy Now</a>
      </div>
      <div class="split right">
        <h1>XBox Series X</h1>
        <a href="#" class="btn">Buy Now</a>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

 

CSS

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@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('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('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;
}
}
@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('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('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; } }
@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('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('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;
  }
}

 

JS

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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'))
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'))
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'))

 

Explanation

  1. HTML:
    • <div class="split-container">: A container to hold both split sections.
    • <div class="left">: The left section with text and a call-to-action button.
    • <div class="right">: The right section with an image. Replace "path/to/your/image.jpg" with the actual path to your image file.
  2. CSS:
    • Reset Styles: Basic reset to ensure consistent styling.
    • Body: Center the container in the viewport.
    • .split-container: Flexbox is used to create a two-column layout.
    • .left and .right: Both sections are styled with different backgrounds and centered content.
    • .cta-button: Styled to be eye-catching and interactive.
    • .right img: Ensures the image fits well within its container and is responsive.

Customization

  • Colors: Adjust the background colors and button color to match your branding.
  • Fonts: Modify the font sizes and styles to better fit your design preferences.
  • Image: Ensure your image path is correct and adjust the sizing or border radius as needed.

This basic split landing page design can be customized further based on your specific needs and design goals.

CEO Piyush Gupta


Reviews

There are no reviews yet. Be the first one to write one.

0.0
Rated 0 out of 5
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

Select a Rating
  • Select a Rating
  • 5 Stars
  • 4 Stars
  • 3 Stars
  • 2 Stars
  • 1 Star

Recent Posts

  CALL

+91 7905834592

Enquiry Now

piyushmnm@gmail.com

piyush.gupta384