Instantly share code, notes, and snippets.
Created
January 6, 2026 05:12
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
-
Save steig/e8522710d043e91ac7f1e670f44459ac to your computer and use it in GitHub Desktop.
Footer Redesign Mockups - 5 Options (Mackweldon-inspired) for Issue #430
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Footer Redesign Mockups - Lamps.com</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <style> | |
| :root { | |
| /* Lamps.com Color Scheme */ | |
| --footer-bg: #333333; | |
| --footer-text: #f2f2f2; | |
| --footer-subtext: #f2f2f2; | |
| --footer-border: #4a4a4a; | |
| --contact-bg: #f2f2f2; | |
| --contact-text: #000000; | |
| --contact-subtext: #666666; | |
| --btn-primary: #d14545; | |
| --btn-primary-text: #ffffff; | |
| --btn-secondary: #286278; | |
| --accent-teal: #286278; | |
| --link-hover: #ffffff; | |
| --chat-online: #0d8756; | |
| --chat-offline: #999999; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: #e5e5e5; | |
| color: #333; | |
| line-height: 1.6; | |
| } | |
| /* Page Header - NOT sticky */ | |
| .page-header { | |
| background: var(--footer-bg); | |
| color: var(--footer-text); | |
| padding: 50px 40px; | |
| text-align: center; | |
| } | |
| .page-header h1 { | |
| font-size: 2.2rem; | |
| margin-bottom: 8px; | |
| font-weight: 700; | |
| } | |
| .page-header p { | |
| opacity: 0.8; | |
| font-size: 1rem; | |
| } | |
| .nav-pills { | |
| display: flex; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-top: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .nav-pills a { | |
| background: rgba(255,255,255,0.1); | |
| color: var(--footer-text); | |
| padding: 10px 18px; | |
| border-radius: 25px; | |
| text-decoration: none; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| transition: all 0.2s; | |
| } | |
| .nav-pills a:hover { | |
| background: var(--btn-primary); | |
| } | |
| /* Mockup Section */ | |
| .mockup-section { | |
| padding: 60px 20px; | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| } | |
| .mockup-header { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| } | |
| .mockup-header h2 { | |
| font-size: 1.6rem; | |
| color: #333; | |
| margin-bottom: 6px; | |
| font-weight: 700; | |
| } | |
| .mockup-header .subtitle { | |
| color: #666; | |
| font-size: 0.95rem; | |
| } | |
| .mockup-header .tag { | |
| display: inline-block; | |
| background: var(--btn-primary); | |
| color: white; | |
| padding: 4px 14px; | |
| border-radius: 15px; | |
| font-size: 0.75rem; | |
| margin-top: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| font-weight: 600; | |
| } | |
| .pros-cons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 40px; | |
| margin-bottom: 30px; | |
| flex-wrap: wrap; | |
| } | |
| .pros, .cons { | |
| font-size: 0.85rem; | |
| } | |
| .pros strong, .cons strong { | |
| display: block; | |
| margin-bottom: 5px; | |
| } | |
| .pros { color: #0d8756; } | |
| .cons { color: #b33a3a; } | |
| /* Device Container */ | |
| .device-container { | |
| display: flex; | |
| gap: 40px; | |
| justify-content: center; | |
| align-items: flex-start; | |
| flex-wrap: wrap; | |
| } | |
| .device-frame { | |
| position: relative; | |
| } | |
| .device-label { | |
| text-align: center; | |
| margin-bottom: 12px; | |
| font-size: 0.8rem; | |
| color: #666; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .device-frame.desktop { | |
| flex: 1; | |
| max-width: 900px; | |
| min-width: 600px; | |
| } | |
| .device-frame.mobile { | |
| width: 375px; | |
| flex-shrink: 0; | |
| } | |
| .mobile-shell { | |
| background: #1a1a1a; | |
| border-radius: 40px; | |
| padding: 12px; | |
| box-shadow: 0 25px 60px rgba(0,0,0,0.25); | |
| } | |
| .mobile-shell::before { | |
| content: ''; | |
| display: block; | |
| width: 100px; | |
| height: 5px; | |
| background: #333; | |
| border-radius: 3px; | |
| margin: 6px auto 12px; | |
| } | |
| .mobile-shell .footer-mockup { | |
| border-radius: 0 0 28px 28px; | |
| max-height: 680px; | |
| overflow-y: auto; | |
| } | |
| /* Footer Base Styles */ | |
| .footer-mockup { | |
| background: var(--footer-bg); | |
| color: var(--footer-text); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: 0 8px 30px rgba(0,0,0,0.12); | |
| } | |
| .footer-mockup a { | |
| color: var(--footer-text); | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .footer-mockup a:hover { | |
| color: var(--link-hover); | |
| } | |
| .footer-mockup h3 { | |
| font-size: 0.85rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| margin-bottom: 18px; | |
| color: #fff; | |
| font-weight: 600; | |
| } | |
| .footer-mockup ul { | |
| list-style: none; | |
| } | |
| .footer-mockup ul li { | |
| margin-bottom: 10px; | |
| font-size: 0.9rem; | |
| } | |
| .container { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 0 30px; | |
| } | |
| /* Newsletter Styles */ | |
| .newsletter-form { | |
| display: flex; | |
| gap: 0; | |
| max-width: 380px; | |
| } | |
| .newsletter-form input { | |
| flex: 1; | |
| padding: 14px 16px; | |
| border: 2px solid var(--footer-border); | |
| background: transparent; | |
| color: white; | |
| font-size: 0.9rem; | |
| border-radius: 30px 0 0 30px; | |
| font-family: inherit; | |
| } | |
| .newsletter-form input::placeholder { | |
| color: #999; | |
| } | |
| .newsletter-form button { | |
| padding: 14px 24px; | |
| background: var(--btn-primary); | |
| border: none; | |
| color: white; | |
| font-weight: 600; | |
| cursor: pointer; | |
| border-radius: 0 30px 30px 0; | |
| transition: background 0.2s; | |
| font-family: inherit; | |
| } | |
| .newsletter-form button:hover { | |
| background: #b83a3a; | |
| } | |
| /* Social Icons */ | |
| .social-icons { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .social-icons a { | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 50%; | |
| background: rgba(255,255,255,0.1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1rem; | |
| transition: background 0.2s; | |
| } | |
| .social-icons a:hover { | |
| background: var(--btn-primary); | |
| } | |
| /* Payment Icons */ | |
| .payment-icons { | |
| display: flex; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| } | |
| .payment-icons span { | |
| background: #fff; | |
| color: #333; | |
| padding: 4px 10px; | |
| border-radius: 4px; | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| } | |
| /* Footer Bottom */ | |
| .footer-bottom { | |
| border-top: 1px solid var(--footer-border); | |
| padding: 20px 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| font-size: 0.8rem; | |
| } | |
| .footer-bottom-links { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .footer-bottom-links a { | |
| opacity: 0.7; | |
| } | |
| .footer-bottom-links a:hover { | |
| opacity: 1; | |
| } | |
| /* Contact Info Styles */ | |
| .contact-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| font-size: 0.9rem; | |
| } | |
| .contact-item .icon { | |
| font-size: 1rem; | |
| width: 20px; | |
| text-align: center; | |
| margin-top: 2px; | |
| } | |
| .contact-item .label { | |
| font-weight: 600; | |
| color: #fff; | |
| display: block; | |
| margin-bottom: 2px; | |
| } | |
| .contact-item .detail { | |
| opacity: 0.8; | |
| font-size: 0.85rem; | |
| } | |
| /* Live Chat Status */ | |
| .chat-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .chat-status .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--chat-online); | |
| animation: pulse 2s infinite; | |
| } | |
| .chat-status.offline .status-dot { | |
| background: var(--chat-offline); | |
| animation: none; | |
| } | |
| .chat-status .status-text { | |
| font-size: 0.8rem; | |
| opacity: 0.8; | |
| } | |
| .chat-status.offline .status-text { | |
| opacity: 0.6; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .chat-btn { | |
| display: inline-block; | |
| background: var(--btn-primary); | |
| color: white !important; | |
| padding: 12px 24px; | |
| border-radius: 30px; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| margin-top: 10px; | |
| transition: background 0.2s; | |
| } | |
| .chat-btn:hover { | |
| background: #b83a3a; | |
| } | |
| .chat-btn i { | |
| margin-right: 6px; | |
| } | |
| /* Mobile Accordion */ | |
| .mobile-accordion { | |
| border-bottom: 1px solid var(--footer-border); | |
| } | |
| .mobile-accordion-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 16px 0; | |
| cursor: pointer; | |
| } | |
| .mobile-accordion-header h3 { | |
| margin: 0; | |
| } | |
| .mobile-accordion-header .chevron { | |
| font-size: 0.7rem; | |
| transition: transform 0.2s; | |
| } | |
| .mobile-accordion.open .chevron { | |
| transform: rotate(180deg); | |
| } | |
| .mobile-accordion-content { | |
| display: none; | |
| padding-bottom: 16px; | |
| } | |
| .mobile-accordion.open .mobile-accordion-content { | |
| display: block; | |
| } | |
| /* Section Divider */ | |
| .section-divider { | |
| height: 80px; | |
| background: #e5e5e5; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .section-divider span { | |
| background: #ccc; | |
| padding: 8px 20px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| color: #666; | |
| } | |
| /* ================================================ | |
| OPTION A: Classic 4-Column | |
| ================================================ */ | |
| .option-a .newsletter-hero { | |
| text-align: center; | |
| padding: 45px 30px; | |
| border-bottom: 1px solid var(--footer-border); | |
| } | |
| .option-a .newsletter-hero h2 { | |
| font-size: 1.6rem; | |
| margin-bottom: 8px; | |
| color: #fff; | |
| font-weight: 700; | |
| } | |
| .option-a .newsletter-hero p { | |
| margin-bottom: 20px; | |
| opacity: 0.8; | |
| } | |
| .option-a .newsletter-hero .newsletter-form { | |
| margin: 0 auto; | |
| } | |
| .option-a .footer-columns { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 35px; | |
| padding: 45px 0; | |
| } | |
| /* Mobile A */ | |
| .option-a.mobile-footer .newsletter-hero { | |
| padding: 35px 20px; | |
| } | |
| .option-a.mobile-footer .newsletter-hero h2 { | |
| font-size: 1.4rem; | |
| } | |
| .option-a.mobile-footer .newsletter-form { | |
| flex-direction: column; | |
| } | |
| .option-a.mobile-footer .newsletter-form input, | |
| .option-a.mobile-footer .newsletter-form button { | |
| border-radius: 30px; | |
| width: 100%; | |
| } | |
| .option-a.mobile-footer .newsletter-form input { | |
| margin-bottom: 10px; | |
| } | |
| .option-a.mobile-footer .footer-columns { | |
| display: block; | |
| padding: 0; | |
| } | |
| .option-a.mobile-footer .container { | |
| padding: 0 20px; | |
| } | |
| /* ================================================ | |
| OPTION B: Newsletter Left + 3 Columns Right | |
| ================================================ */ | |
| .option-b .footer-main { | |
| display: grid; | |
| grid-template-columns: 1.3fr 1fr 1fr 1fr; | |
| gap: 35px; | |
| padding: 45px 0; | |
| } | |
| .option-b .newsletter-col h2 { | |
| font-size: 1.4rem; | |
| margin-bottom: 12px; | |
| color: #fff; | |
| font-weight: 700; | |
| } | |
| .option-b .newsletter-col p { | |
| margin-bottom: 18px; | |
| opacity: 0.8; | |
| font-size: 0.9rem; | |
| } | |
| .option-b .newsletter-col .terms { | |
| margin-top: 12px; | |
| font-size: 0.75rem; | |
| opacity: 0.6; | |
| } | |
| /* Mobile B */ | |
| .option-b.mobile-footer .footer-main { | |
| display: block; | |
| padding: 0; | |
| } | |
| .option-b.mobile-footer .newsletter-col { | |
| padding: 30px 20px; | |
| text-align: center; | |
| border-bottom: 1px solid var(--footer-border); | |
| } | |
| .option-b.mobile-footer .newsletter-form { | |
| flex-direction: column; | |
| max-width: 100%; | |
| } | |
| .option-b.mobile-footer .newsletter-form input, | |
| .option-b.mobile-footer .newsletter-form button { | |
| border-radius: 30px; | |
| width: 100%; | |
| } | |
| .option-b.mobile-footer .newsletter-form input { | |
| margin-bottom: 10px; | |
| } | |
| .option-b.mobile-footer .container { | |
| padding: 0 20px; | |
| } | |
| /* ================================================ | |
| OPTION C: Stacked Header + 4 Equal Columns | |
| ================================================ */ | |
| .option-c .newsletter-hero { | |
| text-align: center; | |
| padding: 45px 30px; | |
| background: linear-gradient(180deg, #333333 0%, #3d3d3d 100%); | |
| } | |
| .option-c .newsletter-hero h2 { | |
| font-size: 1.6rem; | |
| margin-bottom: 6px; | |
| color: #fff; | |
| font-weight: 700; | |
| } | |
| .option-c .newsletter-hero .incentive { | |
| color: #7dd3c0; | |
| font-size: 1.05rem; | |
| margin-bottom: 20px; | |
| font-weight: 500; | |
| } | |
| .option-c .newsletter-hero .newsletter-form { | |
| margin: 0 auto; | |
| max-width: 420px; | |
| } | |
| .option-c .newsletter-hero .terms { | |
| margin-top: 12px; | |
| font-size: 0.75rem; | |
| opacity: 0.6; | |
| } | |
| .option-c .footer-columns { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 35px; | |
| padding: 45px 0; | |
| border-top: 1px solid var(--footer-border); | |
| } | |
| .option-c .footer-middle { | |
| border-top: 1px solid var(--footer-border); | |
| padding: 22px 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| /* Mobile C */ | |
| .option-c.mobile-footer .newsletter-hero { | |
| padding: 35px 20px; | |
| } | |
| .option-c.mobile-footer .newsletter-hero h2 { | |
| font-size: 1.4rem; | |
| } | |
| .option-c.mobile-footer .newsletter-form { | |
| flex-direction: column; | |
| } | |
| .option-c.mobile-footer .newsletter-form input, | |
| .option-c.mobile-footer .newsletter-form button { | |
| border-radius: 30px; | |
| width: 100%; | |
| } | |
| .option-c.mobile-footer .newsletter-form input { | |
| margin-bottom: 10px; | |
| } | |
| .option-c.mobile-footer .footer-columns { | |
| display: block; | |
| padding: 0; | |
| border-top: none; | |
| } | |
| .option-c.mobile-footer .footer-middle { | |
| flex-direction: column; | |
| gap: 20px; | |
| text-align: center; | |
| } | |
| .option-c.mobile-footer .container { | |
| padding: 0 20px; | |
| } | |
| /* ================================================ | |
| OPTION D: Compact 2-Row Grid | |
| ================================================ */ | |
| .option-d .footer-top-row { | |
| display: grid; | |
| grid-template-columns: 1.4fr 1fr; | |
| gap: 50px; | |
| padding: 40px 0; | |
| border-bottom: 1px solid var(--footer-border); | |
| } | |
| .option-d .newsletter-col h2 { | |
| font-size: 1.3rem; | |
| margin-bottom: 12px; | |
| color: #fff; | |
| font-weight: 700; | |
| } | |
| .option-d .newsletter-col p { | |
| margin-bottom: 18px; | |
| opacity: 0.8; | |
| font-size: 0.9rem; | |
| } | |
| .option-d .newsletter-col .terms { | |
| margin-top: 12px; | |
| font-size: 0.75rem; | |
| opacity: 0.6; | |
| } | |
| .option-d .footer-nav-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 35px; | |
| padding: 30px 0; | |
| } | |
| .option-d .nav-links { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px 18px; | |
| } | |
| .option-d .nav-links a { | |
| font-size: 0.9rem; | |
| } | |
| /* Mobile D */ | |
| .option-d.mobile-footer .footer-top-row { | |
| display: block; | |
| padding: 0; | |
| border-bottom: none; | |
| } | |
| .option-d.mobile-footer .newsletter-col { | |
| padding: 30px 20px; | |
| text-align: center; | |
| border-bottom: 1px solid var(--footer-border); | |
| } | |
| .option-d.mobile-footer .newsletter-form { | |
| flex-direction: column; | |
| max-width: 100%; | |
| } | |
| .option-d.mobile-footer .newsletter-form input, | |
| .option-d.mobile-footer .newsletter-form button { | |
| border-radius: 30px; | |
| width: 100%; | |
| } | |
| .option-d.mobile-footer .newsletter-form input { | |
| margin-bottom: 10px; | |
| } | |
| .option-d.mobile-footer .contact-col { | |
| padding: 25px 20px; | |
| border-bottom: 1px solid var(--footer-border); | |
| } | |
| .option-d.mobile-footer .footer-nav-row { | |
| display: block; | |
| padding: 0; | |
| } | |
| .option-d.mobile-footer .container { | |
| padding: 0 20px; | |
| } | |
| /* ================================================ | |
| OPTION E: Newsletter Banner + 4-Column Nav | |
| ================================================ */ | |
| .option-e .newsletter-banner { | |
| background: #3d3d3d; | |
| padding: 16px 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 30px; | |
| flex-wrap: wrap; | |
| } | |
| .option-e .newsletter-banner .banner-text { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .option-e .newsletter-banner .icon { | |
| font-size: 1.4rem; | |
| } | |
| .option-e .newsletter-banner h3 { | |
| margin: 0; | |
| font-size: 0.95rem; | |
| } | |
| .option-e .newsletter-banner p { | |
| margin: 0; | |
| opacity: 0.8; | |
| font-size: 0.85rem; | |
| } | |
| .option-e .newsletter-banner .newsletter-form { | |
| max-width: 320px; | |
| } | |
| .option-e .newsletter-banner .newsletter-form input { | |
| padding: 12px 14px; | |
| } | |
| .option-e .newsletter-banner .newsletter-form button { | |
| padding: 12px 20px; | |
| } | |
| .option-e .footer-columns { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 35px; | |
| padding: 40px 0; | |
| } | |
| .option-e .footer-middle { | |
| border-top: 1px solid var(--footer-border); | |
| padding: 22px 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| } | |
| /* Mobile E */ | |
| .option-e.mobile-footer .newsletter-banner { | |
| flex-direction: column; | |
| text-align: center; | |
| padding: 25px 20px; | |
| gap: 15px; | |
| } | |
| .option-e.mobile-footer .newsletter-banner .banner-text { | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .option-e.mobile-footer .newsletter-form { | |
| flex-direction: column; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| .option-e.mobile-footer .newsletter-form input, | |
| .option-e.mobile-footer .newsletter-form button { | |
| border-radius: 30px; | |
| width: 100%; | |
| } | |
| .option-e.mobile-footer .newsletter-form input { | |
| margin-bottom: 10px; | |
| } | |
| .option-e.mobile-footer .footer-columns { | |
| display: block; | |
| padding: 0; | |
| } | |
| .option-e.mobile-footer .footer-middle { | |
| flex-direction: column; | |
| text-align: center; | |
| gap: 20px; | |
| } | |
| .option-e.mobile-footer .container { | |
| padding: 0 20px; | |
| } | |
| /* Mobile Footer Bottom */ | |
| .mobile-footer .footer-bottom { | |
| flex-direction: column; | |
| text-align: center; | |
| gap: 15px; | |
| padding: 20px; | |
| } | |
| .mobile-footer .footer-bottom-links { | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 12px; | |
| } | |
| .mobile-footer .social-icons { | |
| justify-content: center; | |
| } | |
| .mobile-footer .payment-icons { | |
| justify-content: center; | |
| } | |
| /* Contact Section Mobile */ | |
| .mobile-footer .contact-section { | |
| padding: 25px 0; | |
| } | |
| .mobile-footer .contact-section h3 { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .mobile-footer .contact-item { | |
| justify-content: flex-start; | |
| } | |
| .mobile-footer .chat-btn { | |
| display: block; | |
| text-align: center; | |
| margin: 15px 0 0; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1100px) { | |
| .device-container { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .device-frame.desktop { | |
| min-width: auto; | |
| width: 100%; | |
| max-width: 800px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="page-header"> | |
| <h1>Footer Redesign Mockups</h1> | |
| <p>5 options inspired by Mackweldon — Contact Us integrated as 4th column</p> | |
| <p style="opacity:0.7;font-size:0.85rem;margin-top:8px;">Note: "Info" and "Company" links are pulled from Shopify menus. Shown links are examples.</p> | |
| <nav class="nav-pills"> | |
| <a href="#option-a">A: Hero + 3 Columns</a> | |
| <a href="#option-b">B: Newsletter Left + 3 Cols</a> | |
| <a href="#option-c">C: Stacked Hero + 3 Cols</a> | |
| <a href="#option-d">D: Compact Grid</a> | |
| <a href="#option-e">E: Banner + 3 Cols</a> | |
| </nav> | |
| </header> | |
| <!-- ================================================ | |
| OPTION A: Classic 4-Column (Mackweldon-style) | |
| ================================================ --> | |
| <section class="mockup-section" id="option-a"> | |
| <div class="mockup-header"> | |
| <h2>Option A: Hero Newsletter + 3 Columns</h2> | |
| <p class="subtitle">Mackweldon-inspired layout with newsletter as hero section + Info, Company, Contact</p> | |
| </div> | |
| <div class="pros-cons"> | |
| <div class="pros"><strong>Pros:</strong> Clean, professional, Contact has prominent CTA</div> | |
| <div class="cons"><strong>Cons:</strong> Newsletter is separate from main columns</div> | |
| </div> | |
| <div class="device-container"> | |
| <!-- Desktop --> | |
| <div class="device-frame desktop"> | |
| <div class="device-label">Desktop</div> | |
| <footer class="footer-mockup option-a"> | |
| <div class="newsletter-hero"> | |
| <div class="container"> | |
| <h2>Become an Insider</h2> | |
| <p>Perks and personality delivered to your inbox.</p> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="E-Mail Address"> | |
| <button type="submit">Subscribe <i class="fa-solid fa-arrow-right"></i></button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="footer-columns" style="grid-template-columns: repeat(3, 1fr);"> | |
| <div class="footer-col"> | |
| <h3>Info</h3> | |
| <ul> | |
| <li><a href="#">FAQs</a></li> | |
| <li><a href="#">Shipping & Delivery</a></li> | |
| <li><a href="#">Returns & Exchanges</a></li> | |
| <li><a href="#">Order Status</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Company</h3> | |
| <ul> | |
| <li><a href="#">About Lamps.com</a></li> | |
| <li><a href="#">Trade Program</a></li> | |
| <li><a href="#">Lighting Guide</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Need Help?</h3> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-envelope"></i></span> | |
| <div> | |
| <span class="label">Email Us</span> | |
| <a href="#" class="detail">smile@lamps.com</a> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-comments"></i></span> | |
| <div> | |
| <span class="label">Live Chat</span> | |
| <div class="chat-status"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Agents available</span> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="chat-btn"><i class="fa-regular fa-comments"></i> Start Chat</a> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fa-brands fa-instagram"></i></a> | |
| <a href="#"><i class="fa-brands fa-facebook-f"></i></a> | |
| <a href="#"><i class="fa-brands fa-pinterest-p"></i></a> | |
| </div> | |
| <div class="payment-icons"> | |
| <span>VISA</span> | |
| <span>MC</span> | |
| <span>AMEX</span> | |
| <span>PayPal</span> | |
| </div> | |
| <div class="footer-bottom-links"> | |
| <a href="#">Terms</a> | |
| <a href="#">Privacy</a> | |
| <a href="#">Accessibility</a> | |
| </div> | |
| <div class="copyright">© 2026 Lamps.com</div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Mobile --> | |
| <div class="device-frame mobile"> | |
| <div class="device-label">Mobile</div> | |
| <div class="mobile-shell"> | |
| <footer class="footer-mockup option-a mobile-footer"> | |
| <div class="newsletter-hero"> | |
| <h2>Become an Insider</h2> | |
| <p>Perks and personality delivered to your inbox.</p> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="E-Mail Address"> | |
| <button type="submit">Subscribe <i class="fa-solid fa-arrow-right"></i></button> | |
| </form> | |
| </div> | |
| <div class="container"> | |
| <div class="footer-columns"> | |
| <div class="mobile-accordion open"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Info</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <ul> | |
| <li><a href="#">FAQs</a></li> | |
| <li><a href="#">Shipping & Delivery</a></li> | |
| <li><a href="#">Returns & Exchanges</a></li> | |
| <li><a href="#">Order Status</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mobile-accordion"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Company</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <ul> | |
| <li><a href="#">About Lamps.com</a></li> | |
| <li><a href="#">Trade Program</a></li> | |
| <li><a href="#">Lighting Guide</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mobile-accordion open"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Need Help?</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-envelope"></i></span> | |
| <div><a href="#">smile@lamps.com</a></div> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-comments"></i></span> | |
| <div class="chat-status"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Agents available</span> | |
| </div> | |
| </div> | |
| <a href="#" class="chat-btn"><i class="fa-regular fa-comments"></i> Live Chat</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fa-brands fa-instagram"></i></a> | |
| <a href="#"><i class="fa-brands fa-facebook-f"></i></a> | |
| <a href="#"><i class="fa-brands fa-pinterest-p"></i></a> | |
| </div> | |
| <div class="payment-icons"> | |
| <span>VISA</span> | |
| <span>MC</span> | |
| <span>AMEX</span> | |
| <span>PayPal</span> | |
| </div> | |
| <div class="footer-bottom-links"> | |
| <a href="#">Terms</a> | |
| <a href="#">Privacy</a> | |
| <a href="#">Accessibility</a> | |
| </div> | |
| <div class="copyright">© 2026 Lamps.com</div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"><span>Option B</span></div> | |
| <!-- ================================================ | |
| OPTION B: Newsletter Left, 3+Contact Right | |
| ================================================ --> | |
| <section class="mockup-section" id="option-b"> | |
| <div class="mockup-header"> | |
| <h2>Option B: Newsletter Left + 3 Columns</h2> | |
| <p class="subtitle">Newsletter as wide left column + Info, Company, Contact columns (4 total)</p> | |
| </div> | |
| <div class="pros-cons"> | |
| <div class="pros"><strong>Pros:</strong> Newsletter retains prominence, Contact has CTA</div> | |
| <div class="cons"><strong>Cons:</strong> Slightly asymmetric column widths</div> | |
| </div> | |
| <div class="device-container"> | |
| <!-- Desktop --> | |
| <div class="device-frame desktop"> | |
| <div class="device-label">Desktop</div> | |
| <footer class="footer-mockup option-b"> | |
| <div class="container"> | |
| <div class="footer-main"> | |
| <div class="newsletter-col"> | |
| <h2>Become an Insider</h2> | |
| <p>Perks and personality delivered to your inbox.</p> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="E-Mail Address"> | |
| <button type="submit"><i class="fa-solid fa-arrow-right"></i></button> | |
| </form> | |
| <p class="terms">By subscribing you agree to the Terms & Privacy Policy.</p> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Info</h3> | |
| <ul> | |
| <li><a href="#">FAQs</a></li> | |
| <li><a href="#">Shipping & Delivery</a></li> | |
| <li><a href="#">Returns & Exchanges</a></li> | |
| <li><a href="#">Order Status</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Company</h3> | |
| <ul> | |
| <li><a href="#">About Lamps.com</a></li> | |
| <li><a href="#">Trade Program</a></li> | |
| <li><a href="#">Lighting Guide</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Need Help?</h3> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-envelope"></i></span> | |
| <div><a href="#">smile@lamps.com</a></div> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-comments"></i></span> | |
| <div class="chat-status"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Agents available</span> | |
| </div> | |
| </div> | |
| <a href="#" class="chat-btn"><i class="fa-regular fa-comments"></i> Start Live Chat</a> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fa-brands fa-instagram"></i></a> | |
| <a href="#"><i class="fa-brands fa-facebook-f"></i></a> | |
| <a href="#"><i class="fa-brands fa-pinterest-p"></i></a> | |
| </div> | |
| <div class="payment-icons"> | |
| <span>VISA</span> | |
| <span>MC</span> | |
| <span>AMEX</span> | |
| <span>PayPal</span> | |
| </div> | |
| <div class="footer-bottom-links"> | |
| <a href="#">Terms</a> | |
| <a href="#">Privacy</a> | |
| <a href="#">Accessibility</a> | |
| </div> | |
| <div class="copyright">© 2026 Lamps.com</div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Mobile --> | |
| <div class="device-frame mobile"> | |
| <div class="device-label">Mobile</div> | |
| <div class="mobile-shell"> | |
| <footer class="footer-mockup option-b mobile-footer"> | |
| <div class="newsletter-col"> | |
| <h2>Become an Insider</h2> | |
| <p>Perks and personality delivered to your inbox.</p> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="E-Mail Address"> | |
| <button type="submit">Subscribe <i class="fa-solid fa-arrow-right"></i></button> | |
| </form> | |
| <p class="terms">By subscribing you agree to the Terms & Privacy Policy.</p> | |
| </div> | |
| <div class="container"> | |
| <div class="footer-main"> | |
| <div class="mobile-accordion open"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Info</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <ul> | |
| <li><a href="#">FAQs</a></li> | |
| <li><a href="#">Shipping & Delivery</a></li> | |
| <li><a href="#">Returns & Exchanges</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mobile-accordion"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Company</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <ul> | |
| <li><a href="#">About Lamps.com</a></li> | |
| <li><a href="#">Trade Program</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mobile-accordion open"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Need Help?</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-envelope"></i></span> | |
| <div><a href="#">smile@lamps.com</a></div> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-comments"></i></span> | |
| <div class="chat-status"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Agents available</span> | |
| </div> | |
| </div> | |
| <a href="#" class="chat-btn"><i class="fa-regular fa-comments"></i> Start Live Chat</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fa-brands fa-instagram"></i></a> | |
| <a href="#"><i class="fa-brands fa-facebook-f"></i></a> | |
| <a href="#"><i class="fa-brands fa-pinterest-p"></i></a> | |
| </div> | |
| <div class="payment-icons"> | |
| <span>VISA</span> | |
| <span>MC</span> | |
| <span>AMEX</span> | |
| <span>PayPal</span> | |
| </div> | |
| <div class="footer-bottom-links"> | |
| <a href="#">Terms</a> | |
| <a href="#">Privacy</a> | |
| </div> | |
| <div class="copyright">© 2026 Lamps.com</div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"><span>Option C</span></div> | |
| <!-- ================================================ | |
| OPTION C: Stacked Header + 4 Equal Columns | |
| ================================================ --> | |
| <section class="mockup-section" id="option-c"> | |
| <div class="mockup-header"> | |
| <h2>Option C: Stacked Hero</h2> | |
| <p class="subtitle">Big newsletter hero with discount incentive + Info, Company, Contact columns</p> | |
| </div> | |
| <div class="pros-cons"> | |
| <div class="pros"><strong>Pros:</strong> Clear hierarchy, strong incentive, balanced columns</div> | |
| <div class="cons"><strong>Cons:</strong> Taller footer overall</div> | |
| </div> | |
| <div class="device-container"> | |
| <!-- Desktop --> | |
| <div class="device-frame desktop"> | |
| <div class="device-label">Desktop</div> | |
| <footer class="footer-mockup option-c"> | |
| <div class="newsletter-hero"> | |
| <h2>Become an Insider</h2> | |
| <p class="incentive">Get 15% off your first order</p> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="E-Mail Address"> | |
| <button type="submit">Subscribe</button> | |
| </form> | |
| <p class="terms">Terms & Privacy Policy apply.</p> | |
| </div> | |
| <div class="container"> | |
| <div class="footer-columns" style="grid-template-columns: repeat(3, 1fr);"> | |
| <div class="footer-col"> | |
| <h3>Info</h3> | |
| <ul> | |
| <li><a href="#">FAQs</a></li> | |
| <li><a href="#">Shipping & Delivery</a></li> | |
| <li><a href="#">Returns & Exchanges</a></li> | |
| <li><a href="#">Order Status</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Company</h3> | |
| <ul> | |
| <li><a href="#">About Lamps.com</a></li> | |
| <li><a href="#">Trade Program</a></li> | |
| <li><a href="#">Lighting Guide</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Contact Us</h3> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-envelope"></i></span> | |
| <div> | |
| <span class="label">Email Us</span> | |
| <a href="#" class="detail">smile@lamps.com</a> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-comments"></i></span> | |
| <div> | |
| <span class="label">Live Chat</span> | |
| <div class="chat-status"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Agents available</span> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="chat-btn"><i class="fa-regular fa-comments"></i> Live Chat</a> | |
| </div> | |
| </div> | |
| <div class="footer-middle"> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fa-brands fa-instagram"></i></a> | |
| <a href="#"><i class="fa-brands fa-facebook-f"></i></a> | |
| <a href="#"><i class="fa-brands fa-pinterest-p"></i></a> | |
| </div> | |
| <div class="payment-icons"> | |
| <span>VISA</span> | |
| <span>MC</span> | |
| <span>AMEX</span> | |
| <span>PayPal</span> | |
| <span>Apple Pay</span> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <div class="copyright">© 2026 Lamps.com. All Rights Reserved.</div> | |
| <div class="footer-bottom-links"> | |
| <a href="#">Terms of Service</a> | |
| <a href="#">Privacy Policy</a> | |
| <a href="#">Accessibility</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Mobile --> | |
| <div class="device-frame mobile"> | |
| <div class="device-label">Mobile</div> | |
| <div class="mobile-shell"> | |
| <footer class="footer-mockup option-c mobile-footer"> | |
| <div class="newsletter-hero"> | |
| <h2>Become an Insider</h2> | |
| <p class="incentive">Get 15% off your first order</p> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="E-Mail Address"> | |
| <button type="submit">Subscribe</button> | |
| </form> | |
| <p class="terms">Terms & Privacy apply.</p> | |
| </div> | |
| <div class="container"> | |
| <div class="footer-columns"> | |
| <div class="mobile-accordion open"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Info</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <ul> | |
| <li><a href="#">FAQs</a></li> | |
| <li><a href="#">Shipping & Delivery</a></li> | |
| <li><a href="#">Returns & Exchanges</a></li> | |
| <li><a href="#">Order Status</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mobile-accordion"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Company</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <ul> | |
| <li><a href="#">About Lamps.com</a></li> | |
| <li><a href="#">Trade Program</a></li> | |
| <li><a href="#">Lighting Guide</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mobile-accordion open"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Contact Us</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-envelope"></i></span> | |
| <div><a href="#">smile@lamps.com</a></div> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-comments"></i></span> | |
| <div class="chat-status"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Agents available</span> | |
| </div> | |
| </div> | |
| <a href="#" class="chat-btn"><i class="fa-regular fa-comments"></i> Live Chat</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-middle"> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fa-brands fa-instagram"></i></a> | |
| <a href="#"><i class="fa-brands fa-facebook-f"></i></a> | |
| <a href="#"><i class="fa-brands fa-pinterest-p"></i></a> | |
| </div> | |
| <div class="payment-icons"> | |
| <span>VISA</span> | |
| <span>MC</span> | |
| <span>AMEX</span> | |
| <span>PayPal</span> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <div class="copyright">© 2026 Lamps.com</div> | |
| <div class="footer-bottom-links"> | |
| <a href="#">Terms</a> | |
| <a href="#">Privacy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"><span>Option D</span></div> | |
| <!-- ================================================ | |
| OPTION D: Compact 2-Row Grid | |
| ================================================ --> | |
| <section class="mockup-section" id="option-d"> | |
| <div class="mockup-header"> | |
| <h2>Option D: Compact Grid</h2> | |
| <p class="subtitle">Modern 2-row grid layout — Newsletter & Contact top, Nav bottom</p> | |
| </div> | |
| <div class="pros-cons"> | |
| <div class="pros"><strong>Pros:</strong> Compact, modern, Contact elevated</div> | |
| <div class="cons"><strong>Cons:</strong> Horizontal links less scannable</div> | |
| </div> | |
| <div class="device-container"> | |
| <!-- Desktop --> | |
| <div class="device-frame desktop"> | |
| <div class="device-label">Desktop</div> | |
| <footer class="footer-mockup option-d"> | |
| <div class="container"> | |
| <div class="footer-top-row"> | |
| <div class="newsletter-col"> | |
| <h2>Become an Insider</h2> | |
| <p>Perks and personality delivered to your inbox.</p> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="E-Mail Address"> | |
| <button type="submit">Subscribe <i class="fa-solid fa-arrow-right"></i></button> | |
| </form> | |
| <p class="terms">By subscribing you agree to the Terms & Privacy Policy.</p> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Contact Us</h3> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-envelope"></i></span> | |
| <div><a href="#">smile@lamps.com</a></div> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-comments"></i></span> | |
| <div> | |
| <a href="#">Start Live Chat</a> | |
| <div class="chat-status"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Agents available</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-nav-row"> | |
| <div class="footer-col"> | |
| <h3>Info</h3> | |
| <div class="nav-links"> | |
| <a href="#">FAQs</a> | |
| <a href="#">Shipping</a> | |
| <a href="#">Returns</a> | |
| <a href="#">Order Status</a> | |
| </div> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Company</h3> | |
| <div class="nav-links"> | |
| <a href="#">About Us</a> | |
| <a href="#">Trade Program</a> | |
| <a href="#">Lighting Guide</a> | |
| <a href="#">Blog</a> | |
| </div> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Connect</h3> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fa-brands fa-instagram"></i></a> | |
| <a href="#"><i class="fa-brands fa-facebook-f"></i></a> | |
| <a href="#"><i class="fa-brands fa-pinterest-p"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <div class="payment-icons"> | |
| <span>VISA</span> | |
| <span>MC</span> | |
| <span>AMEX</span> | |
| <span>PayPal</span> | |
| </div> | |
| <div class="footer-bottom-links"> | |
| <a href="#">Terms</a> | |
| <a href="#">Privacy</a> | |
| <a href="#">Accessibility</a> | |
| </div> | |
| <div class="copyright">© 2026 Lamps.com</div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Mobile --> | |
| <div class="device-frame mobile"> | |
| <div class="device-label">Mobile</div> | |
| <div class="mobile-shell"> | |
| <footer class="footer-mockup option-d mobile-footer"> | |
| <div class="newsletter-col"> | |
| <h2>Become an Insider</h2> | |
| <p>Perks delivered to your inbox.</p> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="E-Mail Address"> | |
| <button type="submit">Subscribe <i class="fa-solid fa-arrow-right"></i></button> | |
| </form> | |
| <p class="terms">Terms & Privacy apply.</p> | |
| </div> | |
| <div class="contact-col"> | |
| <h3 style="text-align:center;margin-bottom:15px;">Contact Us</h3> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-envelope"></i></span> | |
| <div><a href="#">smile@lamps.com</a></div> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-comments"></i></span> | |
| <div> | |
| <a href="#">Start Live Chat</a> | |
| <div class="chat-status"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Agents available</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="footer-nav-row"> | |
| <div class="mobile-accordion open"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Info</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <ul> | |
| <li><a href="#">FAQs</a></li> | |
| <li><a href="#">Shipping & Delivery</a></li> | |
| <li><a href="#">Returns & Exchanges</a></li> | |
| <li><a href="#">Order Status</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mobile-accordion"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Company</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <ul> | |
| <li><a href="#">About Lamps.com</a></li> | |
| <li><a href="#">Trade Program</a></li> | |
| <li><a href="#">Lighting Guide</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fa-brands fa-instagram"></i></a> | |
| <a href="#"><i class="fa-brands fa-facebook-f"></i></a> | |
| <a href="#"><i class="fa-brands fa-pinterest-p"></i></a> | |
| </div> | |
| <div class="payment-icons"> | |
| <span>VISA</span> | |
| <span>MC</span> | |
| <span>AMEX</span> | |
| <span>PayPal</span> | |
| </div> | |
| <div class="footer-bottom-links"> | |
| <a href="#">Terms</a> | |
| <a href="#">Privacy</a> | |
| </div> | |
| <div class="copyright">© 2026 Lamps.com</div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"><span>Option E</span></div> | |
| <!-- ================================================ | |
| OPTION E: Newsletter Banner + 4-Column Nav | |
| ================================================ --> | |
| <section class="mockup-section" id="option-e"> | |
| <div class="mockup-header"> | |
| <h2>Option E: Banner + 3 Columns</h2> | |
| <p class="subtitle">Slim newsletter banner + Info, Company, Contact columns</p> | |
| <span class="tag">Recommended</span> | |
| </div> | |
| <div class="pros-cons"> | |
| <div class="pros"><strong>Pros:</strong> Saves space, clean columns, scannable Contact</div> | |
| <div class="cons"><strong>Cons:</strong> Newsletter slightly less prominent</div> | |
| </div> | |
| <div class="device-container"> | |
| <!-- Desktop --> | |
| <div class="device-frame desktop"> | |
| <div class="device-label">Desktop</div> | |
| <footer class="footer-mockup option-e"> | |
| <div class="newsletter-banner"> | |
| <div class="banner-text"> | |
| <span class="icon"><i class="fa-regular fa-envelope"></i></span> | |
| <div> | |
| <h3>Become an Insider</h3> | |
| <p>Perks and personality delivered to your inbox.</p> | |
| </div> | |
| </div> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="E-Mail Address"> | |
| <button type="submit">Subscribe</button> | |
| </form> | |
| </div> | |
| <div class="container"> | |
| <div class="footer-columns" style="grid-template-columns: repeat(3, 1fr);"> | |
| <div class="footer-col"> | |
| <h3>Info</h3> | |
| <ul> | |
| <li><a href="#">FAQs</a></li> | |
| <li><a href="#">Shipping & Delivery</a></li> | |
| <li><a href="#">Returns & Exchanges</a></li> | |
| <li><a href="#">Order Status</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Company</h3> | |
| <ul> | |
| <li><a href="#">About Lamps.com</a></li> | |
| <li><a href="#">Trade Program</a></li> | |
| <li><a href="#">Lighting Guide</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Contact Us</h3> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-envelope"></i></span> | |
| <div> | |
| <span class="label">Email Us</span> | |
| <a href="#" class="detail">smile@lamps.com</a> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-comments"></i></span> | |
| <div> | |
| <span class="label">Live Chat</span> | |
| <div class="chat-status"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Agents available</span> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="chat-btn"><i class="fa-regular fa-comments"></i> Start Chat</a> | |
| </div> | |
| </div> | |
| <div class="footer-middle"> | |
| <div class="social-icons"> | |
| <a href="#" title="Instagram"><i class="fa-brands fa-instagram"></i></a> | |
| <a href="#" title="Facebook"><i class="fa-brands fa-facebook-f"></i></a> | |
| <a href="#" title="Pinterest"><i class="fa-brands fa-pinterest-p"></i></a> | |
| </div> | |
| <div class="payment-icons"> | |
| <span>VISA</span> | |
| <span>MC</span> | |
| <span>AMEX</span> | |
| <span>Discover</span> | |
| <span>PayPal</span> | |
| <span>Apple Pay</span> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <div class="copyright">© 2026 Lamps.com. All Rights Reserved.</div> | |
| <div class="footer-bottom-links"> | |
| <a href="#">Terms of Service</a> | |
| <a href="#">Privacy Policy</a> | |
| <a href="#">Accessibility</a> | |
| <a href="#">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Mobile --> | |
| <div class="device-frame mobile"> | |
| <div class="device-label">Mobile</div> | |
| <div class="mobile-shell"> | |
| <footer class="footer-mockup option-e mobile-footer"> | |
| <div class="newsletter-banner"> | |
| <div class="banner-text"> | |
| <span class="icon"><i class="fa-regular fa-envelope"></i></span> | |
| <div> | |
| <h3>Become an Insider</h3> | |
| <p>Perks delivered to your inbox.</p> | |
| </div> | |
| </div> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="E-Mail Address"> | |
| <button type="submit">Subscribe</button> | |
| </form> | |
| </div> | |
| <div class="container"> | |
| <div class="footer-columns"> | |
| <div class="mobile-accordion open"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Info</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <ul> | |
| <li><a href="#">FAQs</a></li> | |
| <li><a href="#">Shipping & Delivery</a></li> | |
| <li><a href="#">Returns & Exchanges</a></li> | |
| <li><a href="#">Order Status</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mobile-accordion"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Company</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <ul> | |
| <li><a href="#">About Lamps.com</a></li> | |
| <li><a href="#">Trade Program</a></li> | |
| <li><a href="#">Lighting Guide</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mobile-accordion open"> | |
| <div class="mobile-accordion-header"> | |
| <h3>Contact Us</h3> | |
| <span class="chevron"><i class="fa-solid fa-chevron-down"></i></span> | |
| </div> | |
| <div class="mobile-accordion-content"> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-envelope"></i></span> | |
| <div><a href="#">smile@lamps.com</a></div> | |
| </div> | |
| <div class="contact-item"> | |
| <span class="icon"><i class="fa-regular fa-comments"></i></span> | |
| <div class="chat-status"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Agents available</span> | |
| </div> | |
| </div> | |
| <a href="#" class="chat-btn"><i class="fa-regular fa-comments"></i> Live Chat</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-middle"> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fa-brands fa-instagram"></i></a> | |
| <a href="#"><i class="fa-brands fa-facebook-f"></i></a> | |
| <a href="#"><i class="fa-brands fa-pinterest-p"></i></a> | |
| </div> | |
| <div class="payment-icons"> | |
| <span>VISA</span> | |
| <span>MC</span> | |
| <span>AMEX</span> | |
| <span>PayPal</span> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <div class="copyright">© 2026 Lamps.com</div> | |
| <div class="footer-bottom-links"> | |
| <a href="#">Terms</a> | |
| <a href="#">Privacy</a> | |
| <a href="#">Accessibility</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div style="height: 80px; background: #e5e5e5;"></div> | |
| <script> | |
| // Toggle accordions on click | |
| document.querySelectorAll('.mobile-accordion-header').forEach(header => { | |
| header.addEventListener('click', () => { | |
| header.parentElement.classList.toggle('open'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment