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