Hey, learner today In this Written tutorial, we are going to Create a Split Landing Page Using HTML, CSS and JS. In the past post, we have created many projects one of them Rotating Navigation using HTML, CSS, and JS. Now it is time to create Split Landing Page.
first of all, we have to create a div with a class of containers and inside a container, we have to create a split div as you want I have created two split divs right and left split container. inside the split div create content according to your requirement. we have created a heading and button inside the split
Preview of Split Landing Page on Codepen
You might like this
- Progress Steps Bar using HTML, CSS, and JS
- Hidden Search Bar using HTML, CSS, and JS
- Fixed expanding card transitions Using HTML, CSS, and JS
- Analogue Clock using HTML, CSS, and JS
- Creating a Helicopter using CSS | HTML & CSS
Split Landing Page Using HTML, CSS, and JS [Source code]
To create a Split Landing Page Using HTML, CSS, and JS you have to create three files (HTML, CSS, and JS) files with the named index.html, style.css, and Script.js in the same folder and you have to link the CSS and JS file to HTML. after that paste, the HTML code in index.html, and paste the CSS code in style.css at last paste the Javascript code in Script.js that’s all after pasting the code.
At first, you have to create an HTML file with the named index.html and paste the below HTML code on it and save it. Remember to give a .html extension to the HTML file.
<!DOCTYPE html>
<!--Codingthai.com-->
<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>
After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.
@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;
}
}
At last, you have to create a Javascript file with the named script.js and paste the Js code on it and save it again don’t forget to give the .js extension to the 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'))
right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))
That’s all after pasting the code now your code will be successfully run. If you get any kind of error/problem in the code just comment down or contact me
3 thoughts on “Split Landing Page Using HTML, CSS, and JS”