Split Landing Page

Split Landing Page

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.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: