DEV Community

loading...

Today I learred About Split Landing Page

Ahtsham Ajus
Beginner. Starting my journey of Web Development.
・3 min read

This tutorial will mainly focus on how to use transitions in CSS and make a split landing page for light as well as land mode using little JavaScript. Let's dive into the world of transitions!

Today I learned the split landing page and it changes the image. It has html css and javascript.This Is So Amzaing page.
In this Project I am making the width of the container increas and dicreas with the help of a css.

Here's My HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="http:#" class="btn">Buy Now</a>
        </div>
        <div class="split right">
            <h1>Xbox Series X</h1>
            <a href="http:#" class="btn">Buy Now</a>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here's My CSS Code


@import url('https://fonts.googleapis.com/css?family=Ubuntu');

: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:'Ubuntu', 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.png);
    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;

    }
} 
Enter fullscreen mode Exit fullscreen mode

Here's My JAVASCRIPT code

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'))
Enter fullscreen mode Exit fullscreen mode

Here's Output On Codepen

Discussion (0)