In this blog we are going to create a split landing page using Html, Css, JavaScript. We are going to create a split screen with a background image overlay. And if you click on one side it’s gonna stretch out. We have used hover effect. Hence it might be Css heavy.
What do we need to know:
- HTML
- CSS
- JAVASCRIPT
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Split landing page</title>
</head>
<body>
<div class="container">
<div class="split left">
<h1>PUB-G</h1>
<a href="#" class="btn">Buy Now</a>
</div>
<div class="split right">
<h1>FAU-G</h1>
<a href="#" class="btn">Buy Now</a>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Create a div with a class on container or any name is fine. Inside of which there are two more divs with a class .split left and class .split right. Do not forget to include the style.css and the main.js file.
CSS
@import url("https://fonts.googleapis.com/css2?family=Chango&display=swap");
* {
box-sizing: border-box;
}
:root {
--left-bg: rgba(111, 109, 238, 0.7);
--right-bg: rgba(66, 65, 65, 0.8);
--left-btn-hover: rgb(125, 123, 247);
--right-btn-hover: rgb(10, 61, 82);
--hover-width: 75%;
--min-width: 25%;
--speed: 100ms ease-in-out;
}
body {
height: 100vh;
font-family: "chango" sans-serif;
margin: 0;
overflow: hidden;
}
h1 {
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
white-space: nowrap;
stransform: translateX(-50%);
}
.btn {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
top: 40%;
transform: translateX(-50%);
text-decoration: none;
color: gray;
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);
border-color: var(--left-btn-hover);
}
.split.right .btn:hover {
background-color: var(--right-btn-hover);
border-color: var(--right-btn-hover);
}
.container {
position: relative;
width: 100%;
height: 100%;
background: #333;
}
.split {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
}
.split.left {
left: 0;
background: url("images/PUB-G.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.split.left::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: var(--left-bg);
}
.split.right {
right: 0;
background: url("images/FAU-G.jpeg");
background-repeat: no-repeat;
background-size: cover;
}
.split.right::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: var(--right-bg);
}
.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(--min-width);
}
.hover-right .right {
width: var(--hover-width);
}
.hover-right .left {
width: var(--min-width);
}
@media (max-width: 800px) {
h1 {
font-size: 2rem;
top: 30%;
}
.btn {
padding: 1.2rem;
width: 12rem;
}
}
Use your own colors and font styles.
JavaScript
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")
);
It’s simple and plain javascript. Go ahead and try for yourself.