Full Screen split Landing Page

Full Screen split Landing Page

Posted by admin at September 9, 2019

This is the simple full screen split landing page.

This page is designed with pure css and JavaScript.

Final screenshot of the screen.

Step 1: Create html file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>split landing page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      -type="text/css"-
      media="screen"
      href="css/style.css"
    />
  </head>

  <body>
    <div class="container">
      <div class="split left">
        <h1>The Designer</h1>
        <a href="#" class="button">Read More</a>
      </div>
      <div class="split right">
        <h1>The Programmer</h1>
        <a href="#" class="button">Read More</a>
      </div>
    </div>

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

Step 2: Create CSS file

:root {
  --container-bg-color: #333;
  --left-bg-color: rgba(223, 39, 39, 0.7);
  --left-button-hover-color: rgba(161, 11, 11, 0.3);
  --right-bg-color: rgba(43, 43, 43, 0.8);
  --right-button-hover-color: rgba(92, 92, 92, 0.3);
  --hover-width: 75%;
  --other-width: 25%;
  --speed: 1000ms;
}
html,
body {
  padding: 0;
  margin: 0;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
h1 {
  font-size: 4rem;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%);
  white-space: nowrap;
}
.button {
  display: block;
  position: absolute;
  left: 50%;
  top: 40%;
  height: 2.5rem;
  padding-top: 1.3rem;
  margin-top: 25px;
  width: 15rem;
  text-align: center;
  color: #fff;
  border: #fff solid 0.2rem;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  transform: translate(-50%);
}
.split.left .button:hover {
  background-color: var(--left-button-hover-color);
  border-color: var(--left-button-hover-color);
}
.split.right .button:hover {
  background-color: var(--right-button-hover-color);
  border-color: var(--right-button-hover-color);
}
.container {
  position: relative;

  width: 100%;
  height: 100%;
  background: var(--container-bg-color);
}
.split {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.split.left {
  left: 0;
  background: url("../image/rs.jpg") center center no-repeat;
  background-size: cover;
}
.split.left::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--left-bg-color);
}
.split.right {
  right: 0;
  background: url("../image/rs1.jpg") center center no-repeat;
  background-size: cover;
}
.split.right::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--right-bg-color);
}
.split.left,
.split.right,
.split.left::before,
.split.right::before {
  transition: var(--speed) all ease-in-out;
}
.hover-left .left {
  width: var(--hover-width);
}
.hover-left .right {
  width: var(--other-width);
}
.hover-left .right::before {
  z-index: 2;
}
.hover-right .right {
  width: var(--hover-width);
}
.hover-right .left {
  width: var(--other-width);
}
.hover-right .left::before {
  z-index: 2;
}
@media (max-width: 800px) {
  h1 {
    font-size: 2rem;
  }
  .button {
    width: 10rem;
  }
}

Step 3: Create JavaScript file

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');
});
left.addEventListener('mouseleave', () => {
    container.classList.remove('hover-right');
});

Comments

Write a Reply or Comment

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