Create a Split Screen Landing Page with HTML, CSS and JS

The split-screen layout divides the page into two sections, each dedicated to showcasing men and women fashion respectively. Eye-catching background images are used to set the tone for each section, and overlaying colored layers add depth and visual interest. The use of CSS variables allows for easy customization of colors and dimensions throughout the project.

Hovering over the sections triggers smooth transitions, dynamically changing the width of the screens and creating an engaging visual effect. The buttons within each section also respond to hover events, with background and border color transitions, enhancing the user experience.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Split Screen Landing Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <section class="screen left">
            <h1>Men Fashion</h1>
            <div>
                <a href="#" class="button">Learn More</a>
            </div>
        </section>

        <section class="screen right">
            <h1>Women Fashion</h1>
            <div>
                <a href="#" class="button">Learn More</a>
            </div>
        </section>
    </div>

    <script>
        <!--Search and select the elements-->

        const right = document.querySelector(".right");
        const left = document.querySelector(".left");
        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");
        })

    </script>

</body>
</html>

:root{
    --container-BgColor: #444;
    --left-BgColor: rgba(136, 226, 247, 0.7);
    --left-button-hover: rgba(94, 226, 247, 0.7);
    --right-bgColor: rgba(255, 140, 219, 0.8);
    --right-button-hover: rgba(255, 140, 219, 0.7);
    --hover-width: 75%;
    --small-width: 25%;
    --animateSpeed: 1000ms;
}

html,
body{
    margin: 0;
    padding: 0;
    font-family: monospace;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

h1{
    font-size: 5rem;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Playfair Display', serif;
}

.button{
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    height: 2.6rem;
    padding: 1.2rem 1.2rem 0rem 1rem;
    text-align: center;
    color: white;
    border: 3px solid #fff;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transform: translateX(-50%);
    transition: all .2s;
}

.container{
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--container-BgColor);
}

.screen{
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.left{
    left: 0;
    background: url("pexels-suliman-sallehi-1484771.jpg") center center no-repeat;
    background-size: cover;
}

.left::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--left-BgColor);
}

.left .button:hover{
    background-color: var(--right-button-hover);
    border-color: var(--right-button-hover);
    transition: var(--animateSpeed) all ease-in-out;
}

.right{
    right: 0;
    background: url("pexels-rfstudio-3819538.jpg") center center no-repeat;
    background-size: cover;
}

.right::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--right-bgColor);
}

.right .button:hover{
    background-color: var(--left-button-hover);
    border-color: var(--left-button-hover);
    transition: var(--animateSpeed) all ease-in-out;
}

.hover-left .left{
    width: var(--hover-width);
}

.hover-left .right{
    width: var(--small-width);
}

.hover-left .right::before{
    z-index: 2;
}

.hover-right .right{
    width: var(--hover-width);
}

.hover-right .left{
    width: var(--small-width);
}

.hover-right .left::before{
    z-index: 2;
}

@media (max-width: 800px){
    h1{
        font-size: 2rem;
    }
    .button{
        width: 12rem;
    }
}

@media (max-height: 700px){
    .button{
        top: 70%;
    }
}

Certainly! Let's go through the concepts explored in the project

CSS Variables:

Explanation: CSS variables, also known as CSS custom properties, allow you to define reusable values that can be used throughout your CSS code. They are defined using the :root selector and the -- prefix. Once defined, they can be referenced using the var() function.

Example: In the provided code, CSS variables are used to define colors, widths, and animation speeds. For instance, --container-BgColor is a variable that defines the background color of the container, and it is used in the .container class like this: background: var(--container-BgColor).

Box Model:

Explanation: The box model is a fundamental concept in CSS that describes the layout and spacing of elements. It consists of properties such as margin, padding, border, and width, which determine the dimensions and spacing of an element.

Example: In the provided code, the box model is used to control the dimensions and spacing of elements. For example, the .button class sets the padding of the button using the padding property like this: padding: 1.2rem 1.2rem 0rem 1rem, which specifies different padding values for the top, right, bottom, and left sides of the button.

Positioning:

Explanation: Positioning in CSS determines how elements are positioned within their parent container or relative to other elements. It provides different options, such as static, relative, absolute, and fixed, which control the placement of elements on the page.

Example: In the provided code, positioning techniques like position: absolute and position: relative are used. For instance, the .h1 class sets the position of the heading element using position: absolute to position it in the center of the screen both horizontally and vertically.

Backgrounds and Images:

Explanation: CSS provides properties to control the background of elements, including setting background images, colors, and positioning.

Example: In the provided code, background images are applied to the .left and .right sections using the background property. For example, background: url("pexels-suliman-sallehi-1484771.jpg") center center no-repeat sets the background image for the .left section, and background-size: cover is used to ensure the image covers the entire background area regardless of its size or aspect ratio.

Pseudo-elements:

Explanation: Pseudo-elements allow you to create additional elements in the DOM and style them using CSS. They are denoted with ::before and ::after and can be used to add decorative elements or content to existing elements.

Example: In the provided code, ::before pseudo-elements are used in the .left and .right sections to add colored layers on top of the background images. These pseudo-elements are absolutely positioned and cover the entire section, creating an overlay effect.

Transitions:

Explanation: Transitions enable smooth animations when CSS properties change over time. They allow you to define the duration and easing function for the transition.

Example: In the provided code, the .button class uses the transition property to create a smooth transition effect when hovering over the buttons. For instance, transition: all .2s specifies a 0.2-second duration for the transition, and the :hover state changes the background color and border color, resulting in a smooth color transition.

Media Queries:

Explanation: Media queries enable you to apply different styles based on specific conditions, such as the viewport size or device characteristics. They are used to create responsive designs that adapt to different screen sizes and orientations.

Example: In the provided code, media queries are used to adjust the font size of the heading and the width of the buttons for smaller screens. For instance, @media (max-width: 800px) targets screens with a maximum width of 800 pixels, and within that query, specific styles are applied to modify the font size and button width.

Event Listener Registration:

Explanation: The code begins by selecting the necessary elements using querySelector and assigning them to variables.

Example: right, left, and container variables store references to the elements with classes .right, .left, and .container, respectively.

Mouseenter Event:

Explanation: The mouseenter event occurs when the mouse pointer enters an element.

Example: left.addEventListener("mouseenter", () => { ... }) adds an event listener to the .left element. When the mouse enters the .left section, the callback function is executed.

Mouseleave Event:

Explanation: The mouseleave event occurs when the mouse pointer leaves an element.

Example: left.addEventListener("mouseleave", () => { ... }) adds an event listener to the .left element. When the mouse leaves the .left section, the callback function is executed.

Modifying CSS Classes:

Explanation: Within the event listener callback functions, CSS classes are added or removed from the container element to trigger the desired styling changes.

Example: container.classList.add("hover-left") adds the hover-left class to the container element, which expands the .left section and shrinks the .right section when the mouse enters the .left section. Similarly, container.classList.remove("hover-left") removes the hover-left class when the mouse leaves the .left section, reverting the layout to its original state.
By utilizing the mouseenter and mouseleave events and manipulating the CSS classes of the container element, the JavaScript code creates an interactive hover effect on the split-screen layout.

JavaScript events offer a wide range of possibilities for adding interactivity to your webpages. You can respond to various events like button clicks, form submissions, keyboard input, and more, allowing you to create engaging user experiences and make your web applications more dynamic and responsive.

Blog

Create a Split Screen Landing Page with HTML, CSS and JS

Blackie

Join Our Newsletter. No Spam, Only the good stuff.

Related