Split Screen Page

Project 9 - Responsive Split Screen page with a "hover" on & off smooth interesting transitional effect.

Technology used: HTML CSS and JavaScript (Vanilla) .

Table of Contents

• Introduction
• Project Structure
• Setup
• Features
• Developer

Introduction

Responsive split Screen Page can be used for multiple purposes of previewing such as product cards or Images. when hovering over any half of the screen it previews its content with a larger width comes in with an smooth interesting transitional effect.The result is a very smooth and high-end UI.

Project Structure

style.css        // Contains Page's styless

index.html        // Contains HTML code

app.js        // Contains all required functionality

README.md        // You are currently reading it and it contains the project's documentation.

Setup

To get the project up and running follow the steps below:

1. you can download/clone the repository.
2. open index.html using any browser.

Features

1. The page's initial preview upon loading is split into two screens, each having 50% of the viewport width,previewing two different types of products in each half of screen .
2. Hovering on any half of the screen causes this specific half to expand into 75% of the screen's width leaving the other half only 25% of the screen's width.
3. when hovering off, the screen returns to its initial size with only 50% of the screen's width.
4. there are two buttons on each screen with transparent background to reveal what's beneath but have additional styling characaterstics upon hovering.
5. The page is responsive to small-size screens.

Developer

Muhammad Al-Sayed