Login Page Design
Description-of-the-Login-Page-Design-This-login-page-consists-of-a-visually-appealing-design-divided-into-two-main-sections,-with-the-header-containing-a-background-image-behind-the-"Login"-text.-The-design-is-modern-and-clean,-with-responsive-capabilities-for-devices-of-all-screen-sizes.-Page-Layout-Header-Section:-Background-Image:-A-full-width-background-image-is-used-for-the-header-section.-"Login"-Text:-Positioned-at-the-center-of-the-header.-Typography:-Large-font-size,-bold,-navy-blue-color-(#1a1a2e).-Clean-white-overlay-behind-the-text-for-emphasis.-Main-Content-Section:-Divided-into-two-columns:-Left-Column:-A-box-with-gradient-color-for-new-users-to-create-an-account.-Right-Column:-Login-form-for-returning-users.-Detailed-Components-Header-Section:-Background:-An-image-with-a-topographic-pattern.-Light,-subtle,-and-centered.-Text-"Login"-overlays-the-image.-Styling:-Font:-Bold-sans-serif-(Montserrat-or-similar).-Text-color:-Navy-blue-(#1a1a2e).-Padding-around-the-text-ensures-it-is-centered-vertically-within-the-header.-Left-Column-("New-to-our-Shop?"):-Box-Design:-Gradient-background-(light-to-dark-purple:-e.g.,-#9a4d9a-to-#5c1e68).-Centered-white-text-and-button.-Rounded-corners-for-a-modern-look.-Shadows-for-a-slight-3D-effect.-Content:-Heading:-"New-to-our-Shop?"-Font:-Medium-bold,-all-caps-or-title-case.-Color:-White.-Paragraph:-A-smaller-font-size,-centered,-offering-guidance-to-create-an-account.-Button:-White-text,-no-fill,-bordered-with-white.-Hover-effect:-Light-purple-background-and-bold-border.-Right-Column-(Login-Form):-Box-Design:-White-background-with-minimal-padding-and-shadow-effect-for-depth.-Form-elements-are-clean-and-spaced-out-evenly.-Content:-Heading:-"Welcome-Back!"-and-"Please-Sign-in-now".-Font:-Bold-navy-blue.-Slightly-smaller-subheading-beneath-the-title.-Input-Fields:-Fields-for-"Username"-and-"Password".-Rounded-borders-with-subtle-gray-outlines.-Placeholder-text-in-light-gray.-Checkbox:-"Remember-Me"-option-below-the-password-field.-Left-aligned-for-neatness.-Login-Button:-Filled-with-blue-(#1a73e8),-white-text.-Hover-effect:-Slightly-darker-blue-with-a-shadow.-Forgot-Password-Link:-Positioned-at-the-bottom-right-of-the-login-form.-Gray-text,-with-underline-on-hover.-Responsive-Design:-Desktop:-Two-columns-displayed-side-by-side-(left:-"New-to-our-Shop?",-right:-Login-Form).-Equal-spacing-between-the-columns.-Mobile/Tablet:-Stacked-layout:-The-"New-to-our-Shop?"-box-appears-on-top-of-the-login-form.-Padding-and-margin-adjustments-for-better-spacing-on-smaller-screens.-Styling-Details-Colors:-Navy-Blue:-#1a1a2e-(header-text-and-login-headings).-Gradient-Purple:-#9a4d9a-to-#5c1e68-(left-column-box-background).-White:-Backgrounds-for-the-right-column-and-button-text.-Light-Gray:-Placeholder-text-and-input-outlines.-Typography:-Font-Family:-"Montserrat",-sans-serif.-Font-Sizes:-Header-Text-("Login"):-3rem.-Subheadings:-1.5rem.-Paragraphs:-1rem.-Boldness:-Text-is-semi-bold-to-bold-depending-on-the-section.-Spacing:-Header-height:-30%-of-the-viewport-height.-Padding:-Inside-boxes:-2rem-for-consistent-spacing.-Between-sections:-3rem.-Box-Effects:-Rounded-corners:-8px-for-modern-design.-Shadows:-Subtle-shadow-around-boxes-for-depth.-Hover-effects-on-buttons-to-enhance-interactivity.-Developer-Notes-Framework:-Use-Bootstrap-5-for-grid-layout-and-basic-styling.-Custom-CSS-for-gradients,-shadows,-and-typography.-Assets:-Include-the-background-image-for-the-header-(../img/hero/about_hero.png).-Responsive-Implementation:-Ensure-columns-stack-vertically-on-small-screens.-Maintain-equal-spacing-and-padding-for-readability.
