Login Page Project

Table of Contents

• Video Clip of Design
• Visual of Design
• Features in Design
• How it Works
• Requirements
• How to Run

Video Clip of Design

Walkthrough.Video.-.Login.Page.Project.mp4

Visual of Design

Features in Design

• Displays modern theme across page with black, grey, and white colors.
• Models a basic login page of potential online website.
• Embedded different sign up options (e.g. Google, Apple, and Facebook) with smoke surrounding.
• Includes cloud smoke username field, password field, and login button.
• Enhances a fake logo of the company at top of page.

How it Works

• A set username (AsG1) and password (asg1) are included for the user credentials.
• User can enter in password and username with the corresponding input fields designed.
• To submit final username and password to machine, you must click the login button located below the password field.
• No official Apple, Google, or Facebook OAuth is present currently, instead this will just locate you to the following company website.
• Register page not enhanced within design, alternatively this will just bring you to the login page.

Requirements

• IDE (e.g., VS Code, Eclipse, or IntelliJ).
• HTML (HyperText Markup Language).
• CSS (Cascading Style Sheets).
• JS (JavaScript).
• Live Reloading or Hot Reloading (e.g., Live Server, and etc).

How to Run

1. Copy the HTML code into a HTML file named "index.html".
2. Copy the CSS code into a CSS file named "style.css".
3. Copy the JS code into a JS file named "function.js".
4. Make sure the files and images are in the same directory, or else program will fail to operate.
5. Run the program using your Live Reloading or Hot Reloading downloaded extension.