Contact Page Component - Copy this Html, Bootstrap Component to your project
Contact-Us-Page-Description-The-"Contact-Us"-page-has-two-main-sections:-1.-Header-Section-Background:-A-topographic-pattern-image-as-the-background.-The-image-is-clear-and-centered,-without-any-overlay-or-blur-effects.-Title:-Displays-the-text-"Contacts"-in-large,-bold-letters.-Font:-Clean-and-modern-(e.g.,-Montserrat).-Text-color:-Dark-navy-(#1a1a2e).-The-title-is-vertically-and-horizontally-centered-within-the-header.-Dimensions:-Height:-Fixed-at-200px.-2.-Main-Content-Section-This-section-is-divided-into-two-columns:-Left-Column:-Google-Map-Google-Maps-Integration:-Displays-a-live,-interactive-map-to-show-the-business-location.-If-the-map-fails-to-load,-an-error-message-with-a-gray-fallback-background-(#e9ecef)-should-be-displayed.-Map-Dimensions:-Full-width-of-the-column-(7/12-of-the-row-in-Bootstrap-grid).-Fixed-height:-300px.-Styling:-Rounded-corners-(slightly-curved-edges).-Right-Column:-Contact-Form-and-Information-Contact-Form:-Includes-the-following-fields:-A-large-textarea-for-the-message-labeled-as-"Enter-Message."-Two-smaller-input-fields-side-by-side-for-"Name"-and-"Email."-A-single-input-field-for-"Subject."-Submit-Button:-Red-background-(#dc3545)-with-white-text.-Hover-effect:-Slightly-darker-red-(#b92c38).-Rounded-corners-for-a-modern-look.-Contact-Information:-Includes:-Address:-Text:-"Buttonwood,-California.-Rosemead,-CA-91770."-Icon:-Map-marker-(fas-fa-map-marker-alt).-Phone-Number:-Text:-"+1-253-565-2365-(Mon-to-Fri-9am-to-6pm)."-Icon:-Phone-(fas-fa-phone).-Email:-Text:-"support@colorlib.com."-Icon:-Envelope-(fas-fa-envelope).-Styling:-Text-color:-Light-gray-(#555).-Icons-have-a-contrasting-purple-tone-(#6c5ce7).-Clean,-simple-typography.-Overall-Styling-Fonts:-Font-family:-Modern-sans-serif-(e.g.,-Montserrat).-Clean-and-readable-text-for-both-headings-and-body.-Buttons:-Rounded-corners-for-a-modern-appearance.-Hover-effects-for-interactivity.-Colors:-Primary-colors:-Dark-navy-for-headings-(#1a1a2e).-Red-for-action-buttons-(#dc3545).-Light-gray-for-background-elements-and-text-(#f8f9fa,-#555).-Accent-colors-for-icons:-Purple-(#6c5ce7).-Responsive-Design:-Ensures-the-layout-adapts-well-to-different-screen-sizes-(e.g.,-mobile-and-tablet-views).-The-Google-Map-and-form-stack-vertically-on-smaller-screens.-JavaScript-Functionality-Google-Maps:-The-map-dynamically-displays-a-specific-location-(e.g.,-"Buttonwood,-California").-A-marker-is-placed-at-the-specified-location-for-easy-identification.-Fallback:-If-the-Google-Maps-API-fails-to-load,-a-user-friendly-error-message-is-displayed-in-the-map-container.-Summary-The-"Contact-Us"-page-is-clean,-professional,-and-functional:-A-visually-appealing-header-with-a-clear-background-and-a-bold-title.-A-main-section-that-balances-form-usability-with-the-inclusion-of-an-interactive-map-and-essential-contact-details.-Responsive-design-ensures-accessibility-across-devices.
