Html and CSS, Landing Page

Split landing page | Landing page template Source code

Hello everyone, Today we will learn how to create a split landing page using Html, CSS and javascript. In the previous session, we discussed how to create a Double click heart . But now we are discussing how to create a splitting landing page.

Split Landing page:

We have created a beautiful landing page and on this page, we have used the function of the split image. The hero section is divided into two sections with the help of div. In both sections, images are added. These images are splitting the landing page. Both sides have the same function and they are equal in image size, button and text as well. It means that this page has content in two different sections. Both have equal space on the page.

It has two images and both images have text which is their name. Then they have buttons with the text ”Buy Now ”. Both images are adjusted properly as a background. So, check the below posts also.

How to create a split landing page?

It is so simple to create a split landing page with the help of Html, CSS and Javascript.

Source code of Html:

Starting with an Html file. It will help us to create the content of the landing page like the image, button, and name of the product.

<!--Fantacy Design-->
<!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>

<head>

<title>Split Landing Page

</title>

</head>

<body>

<h1>Playstation 5</h1>

</div>

<h1>XBox Series X</h1>

</div>

</body>

</html>

Code of CSS

Then create a file of CSS.

@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;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

@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;

}

Source code of javaScript:

Again create a file of javascript. Name it as page.js and also save it in the same folder. Javascript will help us to animate our landing page images and sections. It is used for adding functionality to projects.

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'))

So, we need to connect these three files with each other. So that we can create a responsive and functional landing page. Without connecting these three files one can’t create a responsive landing page.

By using the above method you can create a responsive landing page for yourself. You need to open that folder and run the main file of Html and you will see your output in the browser.

If you are unable to create it or unable to connect these files with each other then don’t worry. I have created a zip file that has all these files. These files are connected with others using images properly. You just need to download this file and then extract all these files. Then open the folder and run the main file of Html. Then you will see your output in the browser (chrome).

If you like this post then `must share it and comment below. If you have any questions/queries then comment here.

Thanks for reading this article.

Download Source File