Elan Hair Studio Documentation
Setup · Customization · SEO · Deployment
BUYER DOCUMENTATION

Elan Hair Studio
Hair Salon Landing Page Template

Your guide to setting up, customizing, and publishing the Elan Hair Studio website. Start with the quick setup, then use the numbered sections for detailed changes.

Source: elan-hair-studio_v092426_1.zip · Documentation prepared September 25, 2026

5-Minute Setup

  1. Extract elan-hair-studio_v092426_1.zip and keep a backup. Open index.html in a text editor.
  2. Replace the sample salon name, address, phone number, email, map destination, social links, service prices, and opening hours.
  3. Review the seven supplied WebP files. Six are referenced by the page; salon-interior-prev.webp is an unused previous image.
  4. Connect a real booking provider or implement the request endpoint described in section 12. The supplied form does not send requests with its current empty endpoint.
  5. Replace sample testimonials and confirm offer, access, parking, and policy information.
  6. Review image alt text and dimensions. The current interior file is square, but its HTML still declares the previous portrait dimensions.
  7. Update the title and description. Plan any additional SEO files you want; canonical URLs, social metadata, JSON-LD, sitemap, and robots.txt are not supplied.
  8. After changing shared CSS or JavaScript, increase their version suffixes in index.html.
  9. Upload index.html and the entire assets/ folder together. Test phone, tablet, desktop, forms, and links before launch.

Package Contents

The website root is elan-hair-studio/. Keep these relative paths intact. This table lists the website and documentation files.

Path relative to the website rootPurpose
index.htmlSingle landing page, all sections, form, FAQ, and three modals.
README.htmlThis self-contained buyer guide; the only new file.
README.mdExisting Markdown guide, preserved unchanged. Some image information predates the replacement images.
IMAGE-CREDITS.mdExisting source-credit record. Verify the replacement salon-image entries before publishing.
assets/css/style.cssCustom colors, typography, layout, responsive rules, and cropping.
assets/js/main.jsDate/time choices, demo/endpoint form submission, gallery modal, mobile menu, and footer year.
assets/vendor/bootstrap.min.cssLocal Bootstrap 5.3.8 styles.
assets/vendor/bootstrap.bundle.min.jsLocal Bootstrap 5.3.8 JavaScript bundle.
assets/vendor/BOOTSTRAP-LICENSE.txtBundled Bootstrap license.
assets/images/favicon.svgLocal letter “e” favicon.
assets/images/gallery-auburn.webpLocal website image; see the image guide.
assets/images/gallery-balayage.webpLocal website image; see the image guide.
assets/images/gallery-blonde.webpLocal website image; see the image guide.
assets/images/gallery-color.webpLocal website image; see the image guide.
assets/images/salon-hero.webpLocal website image; see the image guide.
assets/images/salon-interior-prev.webpUnused previous interior image.
assets/images/salon-interior.webpLocal website image; see the image guide.

Place this README beside index.html. It has its own embedded styling and works independently of the website.

Template Features

  • Responsive, single-page HTML salon layout with seven service listings.
  • Local Bootstrap navigation, FAQ accordion, privacy and booking-policy modals.
  • Four-image inspiration gallery with an enlarged-image modal.
  • Seven-day opening-hours table and an appointment request form.
  • Mobile appointment button and automatic footer year.
  • Local WebP imagery, an SVG favicon, and system fonts.
  • Visible form labels, skip link, focus styling, reduced-motion handling, and demo validation.

Technology Used

ComponentIncluded implementation
HTML / CSSSemantic HTML5 and custom CSS with Grid, Flexbox, and media queries.
Bootstrap5.3.8, served from assets/vendor/.
JavaScriptVanilla JavaScript; uses fetch, FormData, and AbortSignal.timeout(15000) for an optional endpoint.
TypographyGeorgia / Times New Roman headings; Arial / Helvetica body text.
ImagesSeven WebP files, six active; one SVG favicon.
Build / serverNo npm, Node.js, framework build, PHP, or database is needed to display the static site. A custom form handler is separate work.

Recommended Editor

Use a plain-text code editor such as Visual Studio Code. Open the entire extracted folder so you can search all files. Avoid word processors, which can alter markup. Much of the HTML and CSS is compacted onto long lines: search by the exact IDs and class names below. Save files as UTF-8 and work on a backup.

1. Update Business Information

Open / search: index.html; search for Elan, elan, Portland, 128 Willow, (503) 555-0148, +15035550148, and hello@elanhairstudio.example.

  1. Replace the visible business name and location in the hero, About section, contact area, and footer.
  2. Update both the displayed phone number and every tel: link. Replace the email text and its mailto: value together.
  3. Update #visit, the map link, and PORTLAND · PACIFIC TIME in the hours card. Use your real time zone.
  4. Replace the demonstration address and then remove its demonstration label. Review privacy text and page metadata for remaining sample information.

Check: Search again for each sample value. Test phone and email links on a phone.

<a href="tel:+15035550148">(503) 555-0148</a>
<a href="mailto:hello@elanhairstudio.example">hello@elanhairstudio.example</a>

The example above is the current sample markup. The 555 phone number and .example email are demonstration values, not operational contact details.

2. Logo, Brand Name, and Favicon

Open / search: index.html: search class="brand", brand footer-brand, and rel="icon".

  1. Edit the two text wordmarks, HAIR STUDIO subtitle, and the header link’s aria-label.
  2. If using an image logo, keep the home link, use a local image with meaningful alt text and explicit dimensions, and review the existing .brand CSS.
  3. Edit or replace assets/images/favicon.svg. It contains an “e” with a dark background; update the path if its filename changes.
  4. Update the document title, meta description, footer name, and any policy references too.

Check: Open the site and confirm the header, footer, tab icon, and accessible home-link name all match.

3. Colors

Open / search: assets/css/style.css; search :root.

  1. Edit the existing custom properties for the main palette.
  2. Review separately colored areas: the hours section, form backgrounds, focus outlines, and button hover colors also contain direct color values.
  3. Keep text, links, focus indicators, and buttons readable against their backgrounds.
  4. Match meta name="theme-color" and the SVG favicon to the new branding if appropriate.

Check: Review light and dark sections, hover/focus states, and validation messages; increase the stylesheet version.

:root {
  --ivory: #f8f5ee;
  --paper: #fffdf8;
  --ink: #262621;
  --muted: #66665e;
  --bronze: #806247;
  --line: #d7d2c7;
  --sand: #e9e1d3;
}

4. Fonts

Open / search: assets/css/style.css; search --bs-body-font-family and font-family.

  1. Change the Arial/Helvetica system stack for body copy if desired.
  2. Update the Georgia/Times headings and the separate .brand, blockquote, and .photo-caption font rules consistently.
  3. To add a licensed web font, supply it locally, define @font-face, and confirm usage rights. No font files or Google Fonts imports are supplied.

Check: Check long headings, navigation width, button wrapping, and readability at 200% text enlargement.

5. Hero and Homepage Copy

Open / search: index.html; search id="home", hero-description, hero-foot, and photo-caption.

  1. Edit the eyebrow location, “Good hair. Great energy.” headline, description, and supporting text.
  2. Keep the <em> tag if you want the accent-colored italic word. Use <br> only when the line break still works on mobile.
  3. Update the two hero buttons and their destinations if the booking flow changes.
  4. Review the Why Choose Us content at why-section and the decorative words in word-strip.

Check: Check that longer wording fits beside the image and that each button lands at the intended section.

6. Services, Starting Prices, and Appointment Durations

Open / search: index.html; search id="services", service-row, and select id="service".

  1. Edit each service name, description, price, and duration. The supplied entries are Cut & finish, Signature blowout, Single-process color, Highlights, Balayage, Conditioning ritual, and Bridal styling.
  2. Update matching choices in the booking dropdown. It also includes Color consultation.
  3. Review the pricing explanation below the list and any offer or policy that names a service.
  4. Treat displayed durations as copy only: the JavaScript does not use them to calculate appointment availability.

Check: Confirm the service list and dropdown agree, and check price alignment on narrow screens.

<div class="service-price">From $65<span>60 min</span></div>

7. Image Replacement Guide

All raster images live in assets/images/ and load locally. The current file dimensions below were read from the actual baseline images; suggested sizes are starting points, not fixed layout requirements.

FilenameUsed inActual dimensionsRecommended replacement
salon-hero.webpHero panel and head preload1800 × 2724 px1800 × 2724 px or a larger file with the same ratio
salon-interior.webpAbout image1254 × 1254 px1254 × 1254 px or larger square; review the crop at each breakpoint
salon-interior-prev.webpNot referenced by index.html1400 × 2489 pxNo replacement needed unless deliberately restored
gallery-auburn.webpGallery 01 and initial modal image1000 × 1777 px1000 × 1777 px or a larger file with the same ratio
gallery-balayage.webpGallery 021000 × 1500 px1000 × 1500 px or a larger file with the same ratio
gallery-blonde.webpGallery 031000 × 1500 px1000 × 1500 px or a larger file with the same ratio
gallery-color.webpGallery 041000 × 1500 px1000 × 1500 px or a larger file with the same ratio

Open / search: index.html and assets/images/; search the filename you are replacing.

  1. Export the replacement as WebP, keeping important subjects clear of the edges. Use the same filename for a simple replacement, or update every reference if renaming.
  2. For the hero, update both <img src> and the rel="preload" link. For gallery photos, update the thumbnail src and button data-image.
  3. Update descriptive alt text, intrinsic width/height, captions, accessible “Enlarge” labels, and data-title where relevant.
  4. Adjust .hero-photo>img, .about-image img, or .gallery-button img in CSS only if the new crop needs it.
  5. Review image credits for the files actually used; a reused filename does not establish an image’s source. Use a versioned filename or query string to avoid a stale image cache.

Check: Open thumbnails and their enlarged views, then inspect the hero and About crops at desktop, tablet, and mobile widths.

<img src="assets/images/salon-interior.webp"
     alt="Hairstylist working on a seated woman’s hair in a warm salon"
     width="1254" height="1254" loading="lazy">

The active hero is displayed with object-fit: cover and object-position: center 55% (53% on small screens). The About image uses cover cropping at heights of 560px, 500px, and 390px. Cropping is intentional; inspect the rendered area as well as the original aspect ratio.

Open / search: index.html; search id="main-nav".

  1. Change link labels while retaining their destinations, or update both href="#…" and the matching section ID.
  2. The primary links point to #services, #gallery, #hours, and #visit; appointment buttons use #booking.
  3. Preserve #home for wordmarks and #main for the skip link. Keep every ID unique.

Check: Click every menu item and ensure the sticky header does not cover its heading. Check scroll-padding-top if header height changes.

<a class="nav-link" href="#hours">Salon Hours</a>

9. Mobile Navigation and Appointment Button

Open / search: index.html: navbar-toggler, #main-nav, .mobile-book; main.js: #main-nav a.

  1. Keep data-bs-target="#main-nav", aria-controls="main-nav", and the menu ID synchronized. Bootstrap collapses the navigation below its lg breakpoint (992px).
  2. The custom script hides an open menu after a menu link is clicked. Keep the local Bootstrap bundle loaded before main.js.
  3. The fixed mobile appointment button appears at widths up to 575px. Change its text and destination together with other appointment buttons.
  4. Preserve the mobile footer clearance and review overlap if you change the fixed button height.

Check: Open and close the menu, choose Salon Hours and Book Appointment, and confirm content remains reachable with touch and keyboard.

Open / search: index.html: #gallery, .gallery-item, #gallery-modal; main.js: show.bs.modal.

  1. Each gallery button supplies data-image and data-title. Its child image supplies the alt text used in the enlarged view.
  2. Keep data-bs-toggle="modal" and data-bs-target="#gallery-modal".
  3. Change the visible caption, number, hidden “Enlarge” label, and title together.
  4. The modal is a single-image preview, not a slideshow. The page labels the gallery as stock inspiration; use genuine client results only with appropriate permission.

Check: Open all four images, verify the correct large image and title, close with the button and Escape, and check focus returns to the trigger.

<button class="gallery-button" type="button"
        data-bs-toggle="modal" data-bs-target="#gallery-modal"
        data-image="assets/images/gallery-auburn.webp"
        data-title="Auburn elegance">

11. Salon Hours

Open / search: index.html: #hours, .hours-table, .hours-note; main.js: openingHours.

  1. Edit the seven table rows, the time-zone label, evening note, and holiday note.
  2. Update the JavaScript schedule too. Keys use Sunday = 0 through Saturday = 6; omitted days are closed. Values are opening and closing hours on a 24-hour clock.
  3. If you open on Sunday or Monday, update both the HTML date feedback (“Tuesday–Saturday”) and the JavaScript custom validation message.
  4. For irregular holiday closures, split hours, or service-specific last starts, extend the booking logic or enforce them through a real provider. The current structure handles one whole-hour interval per open day.

Check: Choose an open day and a closed day, confirm time choices match the table, and check the last offered time.

const openingHours = {
  2: [10, 18], // Tuesday
  3: [10, 18], // Wednesday
  4: [10, 20], // Thursday
  5: [10, 19], // Friday
  6: [9, 17]   // Saturday
};

Times are offered at 30-minute intervals, ending 30 minutes before closing. Same-day future times may be offered. These choices use the visitor’s local clock and do not account for the selected service’s duration or existing bookings; production validation must apply the salon’s actual time zone and availability.

12. Appointment Request Form and Booking Integration

Current behavior: BOOKING_ENDPOINT is empty. The form validates fields and displays a demo notice; it does not send or store an appointment request. A preferred time is not a confirmed reservation.

Open / search: index.html: #appointment-form; assets/js/main.js: BOOKING_ENDPOINT.

  1. Choose an external booking platform or implement a custom server endpoint. No provider account or backend is included.
  2. For an external platform, update all href="#booking" buttons to its real booking URL and replace the form with suitable booking content. Remove or guard the form-specific JavaScript, which currently expects its DOM elements to exist. Preserve gallery, menu, and footer behavior.
  3. For a custom endpoint, set BOOKING_ENDPOINT only after implementing it. The optional relative path shown below is an example, not an included file.
  4. Keep the success message conditional: the endpoint must return HTTP 2xx and JSON {"success":true} only after actually accepting the request.
  5. Review the privacy notice, provider disclosures, service values, contact information, and error handling before enabling requests.

Check: Test missing fields, malformed email, closed/past dates, consent, real delivery, timeouts, and server errors. Confirm that success never claims a confirmed appointment.

// Current default:
const BOOKING_ENDPOINT = '';

// Example only: create and secure this handler before using it.
const BOOKING_ENDPOINT = './api/appointment.php';

Use only one endpoint declaration. The relative URL resolves against the page URL and can support a subfolder when the handler is installed beneath it. Test over HTTP/HTTPS, not by opening a file directly, when connecting the backend.

Payload fieldSource / behavior
nameRequired; HTML maxlength 120.
emailRequired email input; maxlength 254.
phoneRequired text via tel input; maxlength 30. No country-specific format check.
serviceSelected service label.
datePreferred date, YYYY-MM-DD.
timePreferred time, HH:MM.
messageOptional text; maxlength 2000.
consentChecked checkbox sends the string “on”; it is not a Boolean.

The script posts JSON with Content-Type: application/json, disables the button while sending, and uses a 15-second timeout. It hides .booking-demo-note whenever the endpoint is nonempty; that does not prove the endpoint works. Test delivery before launch. A timeout cannot establish whether the server accepted the request; follow the displayed advice to contact the salon before retrying.

Server work must validate and constrain all input, confirm allowed service/date/time values and consent, apply spam/rate controls, protect credentials, and reliably deliver or store requests. Apply request-origin and CSRF protections appropriate to your architecture. Turnstile is not included; adding it requires client integration and server-side token verification. No payment or deposit is collected by this form.

13. Reviews and Testimonials

Open / search: index.html; search reviews-section, blockquote, and SAMPLE REVIEW.

  1. Replace the three sample quotes and names with genuine reviews you have permission to publish.
  2. Remove the sample labels only after replacing the samples. Keep the section-level demonstration note while any sample remains.
  3. Do not add ratings or review-count claims unless they are accurate and attributable.

Check: Check quote lengths and card alignment on mobile and desktop.

14. New Client Offer

Open / search: index.html; search offer-section, WELCOME, and the first-visit paragraph in #policy-modal.

  1. Edit the offer headline, service, benefit, eligibility, and terms. The supplied offer is a complimentary conditioning ritual with a first cut & finish.
  2. Update the code WELCOME, exclusions, suitability note, and corresponding booking policy together.
  3. If removing the offer, remove or revise the matching policy paragraph too.

Check: Follow the offer button and confirm the salon’s booking workflow can honor the advertised benefit.

15. About the Salon

Open / search: index.html; search id="about", about-copy, and salon-interior.webp.

  1. Replace the two About paragraphs with your story and approach. Keep claims grounded in your actual salon.
  2. Update the image alt text and intrinsic dimensions to match the current file, as described in section 7.
  3. If adjusting image balance, edit .about-image img and its responsive height rules instead of stretching the source file.

Check: Check the image alongside the full text at desktop and tablet widths and after the layout stacks on mobile.

16. Visit Us, Parking, and Accessibility Information

Open / search: index.html; search id="visit", visit-grid, and google.com/maps.

  1. Replace the address and all contact links.
  2. The supplied map link searches Portland generally. Replace it with your exact studio destination and change the label to “Get directions” if appropriate.
  3. Confirm street parking, entry access, and styling-area access before publishing those statements.
  4. Keep weekly opening hours in their dedicated section; synchronize any additional hours you choose to display elsewhere.

Check: Open directions, verify the correct location, and confirm the contact links work on mobile.

17. FAQ Content

Open / search: index.html; search id="faq-list".

  1. Edit the question in each .accordion-button and its answer in .accordion-body.
  2. Existing answer IDs are faq-0 through faq-5. For a new item, use a new unique ID and update data-bs-target and aria-controls to match.
  3. Keep data-bs-parent="#faq-list" if only one answer should stay open.
  4. Keep cancellation, deposits, consultations, and confirmation language consistent with the form and policy modal.

Check: Expand and collapse every answer with mouse and keyboard and check that no question opens the wrong panel.

18. Social Media Links

Open / search: index.html; search instagram.com and pinterest.com.

  1. Replace the generic platform homepage URLs with your verified salon profiles.
  2. Update each accessible label, removing “sample social link” only when it points to the actual profile.
  3. Retain rel="noopener noreferrer" with target="_blank". Remove unwanted links rather than leaving misleading destinations.

Check: Open each link and verify the business profile.

19. SEO Setup Before Launch

The baseline includes a page title, meta description, viewport, theme color, favicon, headings, and image alt attributes. It does not include a canonical link, Open Graph tags, JSON-LD, sitemap.xml, or robots.txt. Sections 21–22 describe optional additions, not delivered features.

Open / search: index.html; review the <head>, H1, section headings, and #visit.

  1. Use the real business name and location consistently in the visible page and metadata.
  2. Describe actual salon services naturally in headings and copy. Avoid unsupported claims or keyword repetition.
  3. Decide the preferred production URL, including any subfolder, before adding optional SEO metadata.
  4. Choose whether buyer documentation should be publicly accessible. This README includes a noindex meta directive; it is not access protection.

Check: View the production page source and check for sample identity, broken images, or unintended indexing directives on the landing page.

20. Page Titles and Meta Descriptions

Open / search: index.html; search <title> and name="description".

  1. Replace the title with the real salon name and a concise description of its services or location.
  2. Write a specific, readable description that matches the page.
  3. Keep only one title and one meta description. Save using UTF-8 so punctuation displays correctly.

Check: Inspect the browser tab and source after upload; search engines may display different text.

<title>Elan Hair Studio | Cuts, Color &amp; A Little Confidence</title>
<meta name="description" content="Elan Hair Studio — considered cuts, dimensional color, and a moment for yourself. Explore our services, salon hours, and appointment requests.">

21. Canonical URLs, Social Metadata, and Structured Data

Open / search: index.html, inside <head>, if you choose to implement them.

  1. Add a canonical URL for the real preferred HTTPS page address; include the subfolder when applicable. Do not publish an example domain.
  2. Add Open Graph/social metadata only with the actual production title, description, URL, and an image intended for sharing. Use absolute public image URLs.
  3. For local-business JSON-LD, describe only real business details that agree with the page. Do not turn sample reviews into rating markup.
  4. Validate the finished markup using the relevant structured-data and social-preview tools after deployment.

Check: Check for duplicate tags and mismatched business names, hours, addresses, domains, or preview images.

22. Local SEO, Sitemap, Robots.txt, and Search Console

  1. Keep the business name, address, phone, and hours consistent with your verified business listings.
  2. If creating a sitemap, include the actual public landing-page URL and any real additional pages. Section anchors such as #services are not separate pages. Do not include buyer documentation or sample URLs.
  3. If using robots.txt, place it at the domain root and review its rules carefully. A file inside a template subfolder is not the domain’s robots.txt. It does not secure private files.
  4. Add and verify your own production property in Google Search Console, inspect the live URL, and submit a sitemap if you create one.
  5. Review crawl/indexing issues after launch. Do not promise a ranking or indexing deadline.

23. Performance and Image Optimization

Open / search: index.html, assets/images/, and assets/css/style.css.

  1. Keep the hero preload and fetchpriority="high" pointed at the same image. Do not lazy-load the hero.
  2. Keep below-the-fold images lazy-loaded and provide correct intrinsic dimensions. Correct the current interior-image mismatch when customizing.
  3. Export WebP at a size appropriate to its rendered area and high-density screens. Compare quality before reducing compression further.
  4. Keep dependencies local and avoid adding unused scripts. The previous interior photo is unreferenced, so it increases archive size but is not fetched by the page.
  5. Measure performance after deployment using real network conditions and a browser performance tool.

Check: Check for image layout shifts, missing assets, unreadable compression, and slow loading; no measured Core Web Vitals score is claimed.

24. Cache Busting

Open / search: index.html; search style.css?v=1.0.0 and main.js?v=1.0.0.

  1. After editing CSS or JavaScript, increase the corresponding URL version. The query string is not part of the file’s name on disk.
  2. For replaced images, use a new filename or a version query and update all thumbnail, modal, and preload references.
  3. If a hosting/CDN cache still serves old files, clear the relevant cache and test in a fresh browser session.

Check: Inspect the requested asset URLs after uploading and verify the intended content is served.

<link rel="stylesheet" href="assets/css/style.css?v=1.0.1">
<script src="assets/js/main.js?v=1.0.1" defer></script>

25. Responsive Testing

Test after changes to text, services, fonts, images, buttons, or form fields. Suggested viewport widths: 1440, 1200, 992, 768, 576, 430, 390, 375, and 320px. Check both tablet orientations and text enlargement.

  • No unintended horizontal scrolling or clipped headings.
  • Navigation collapse, menu closure after anchor selection, and correct anchor offset.
  • Hero/photo balance and About-image crop; compare rendered height, not just source ratio.
  • Service price alignment and the final service row.
  • Gallery previews, long captions, modal closing, and focus return.
  • Hours table readability and contact/email wrapping.
  • Form stacking, field errors, date picker, and request status.
  • Fixed mobile appointment button, footer spacing, and modal overlays.

The website CSS has custom breakpoints at 1199px, 991px, and 575px, plus a wide-screen rule from 1600px. Browser-based visual testing was not completed for this documentation delivery; inspect your customized website before launch.

26. Accessibility

Open / search: index.html: .skip-link, form labels, modal titles, aria-* attributes; style.css: :focus-visible and prefers-reduced-motion.

  1. Keep the skip link targeting #main, a clear H1, and logical section headings.
  2. Match every label’s for to its input ID. Keep readable validation feedback and the live status region.
  3. Retain modal labels, descriptive button names, visible focus, and the reduced-motion rules.
  4. Update alt text when changing an image, especially the replaced interior image.
  5. Review contrast and keyboard access after color or layout changes. Inclusion of these features is not an accessibility certification.

Check: Navigate with Tab, Shift+Tab, Enter, and Escape; test text enlargement and a screen reader where available.

27. Adding or Removing Services and Gallery Items

Service items — open index.html and find .services-grid.

  1. Duplicate a complete <article class="service-row"> block.
  2. Update its number, heading, copy, starting price, and duration.
  3. Add or remove the corresponding <option> under #service.
  4. Review the offer, FAQ, and any backend allowlist affected by the change.
  5. Check .service-row:last-child in CSS: it deliberately constrains the last item on desktop, regardless of whether the item count is odd or even. Adjust that rule if your new count needs a different layout.

Gallery items — find .gallery-grid.

  1. Duplicate or remove a whole <figure class="gallery-item">.
  2. Update image src, data-image, data-title, alt text, dimensions, visible caption, hidden Enlarge text, and number.
  3. Keep the shared #gallery-modal. If removing the first image, update the initial #gallery-enlarged source too.
  4. Review the desktop four-column and tablet/mobile two-column layout, including staggered even items.

Check: verify all remaining links and preview buttons, unique IDs, service dropdown options, and any newly added local file paths.

28. Hostinger / Shared Hosting Deployment

  1. Back up your existing website and identify the correct domain’s document root before uploading.
  2. Extract the package. Open your hosting account’s file manager for that domain (Hostinger labels may vary).
  3. For the main domain, upload the contents of elan-hair-studio/ into public_html/. The root should contain index.html and assets/ side by side.
  4. For a subfolder, place those same contents together under a folder such as public_html/elan/. Visit the corresponding /elan/ URL.
  5. Preserve file names and case. Upload CSS, JavaScript, images, and vendor dependencies, not only index.html.
  6. Enable HTTPS through the hosting controls and check that your preferred domain redirects consistently.
  7. Keep private credentials and backend configuration outside public files. The static site does not need .htaccess rewrites, PHP, or a database merely to display.
  8. If integrating a custom handler, install it separately, configure it securely, and test actual delivery over HTTPS.
  9. Retain README and license records with your original download. You may keep buyer documentation outside the public folder.
  10. Test the uploaded version with a fresh session on desktop, tablet, and phone. Check the browser console/network panel for failed requests.

Check: opening the production URL loads all local assets and every visible link reaches its intended destination. No deployment has been performed by adding this README.

29. Privacy and Booking Policies

Open / search: index.html: #privacy-modal, #policy-modal, #privacy-consent, and #faq-list.

  1. Replace sample policy text with wording reviewed for your actual business practices.
  2. The supplied booking text mentions 24 hours’ cancellation notice, a possible 50% late-cancellation fee, and a possible 25% deposit for certain appointments. These are sample terms, not payment capabilities.
  3. Keep offer, deposit, cancellation, and confirmation wording consistent throughout the page and with the service you connect.
  4. Update the privacy notice when enabling submissions, analytics, payment, or booking providers. The current notice that form entries are not transmitted becomes inaccurate once an endpoint is enabled.
  5. Retain the privacy acknowledgement if your workflow needs it. Do not treat it as separate permission for marketing.

Check: Read both modals through the footer and the form link; confirm the content matches actual operations and the form’s behavior.

30. Third-Party Libraries and Image Credits

Asset groupSource record / action
Bootstrap 5.3.8Local files in assets/vendor/; retain BOOTSTRAP-LICENSE.txt.
System fontsNo external font request or bundled font license is needed for the supplied system-font stack.
Four gallery imagesExisting IMAGE-CREDITS.md records Unsplash sources. The four files match the earlier supplied gallery assets.
Current salon hero and interiorThese are replacement files. Do not attribute them to the older Unsplash photographs merely because their filenames are reused. Confirm provenance and usage rights for the actual replacements.
salon-interior-prev.webpUnused previous interior image, retained in the ZIP. The earlier credit record identifies the original interior photo; retain appropriate provenance if using it again.
Gallery filenameRecorded photographerRecorded source page
gallery-auburn.webpjagadshdhttps://unsplash.com/photos/1JEr_PNa5EY
gallery-balayage.webpJessie Dee Dabrowskihttps://unsplash.com/photos/W6cwaL7PMSw
gallery-blonde.webpRafaella Mendes Dinizhttps://unsplash.com/photos/et_78QkMMQs
gallery-color.webpJessie Dee Dabrowskihttps://unsplash.com/photos/TETR8YLSqt4

These are source records from the package, not a new legal clearance of the imagery. Review the applicable source terms and permissions for your use. External credit links are references; this README does not load remote images, scripts, or fonts.

31. Pre-Launch Checklist

  • Real name, phone, email, address, map, and social profiles replace all sample details.
  • Service names, prices, durations, offers, and booking dropdown agree.
  • Visible hours, JavaScript schedule, closed-day messages, and time-zone handling agree.
  • Testimonials are genuine and sample labels are retained until replacement.
  • Images have appropriate rights, accurate credits, descriptive alt text, correct dimensions, and acceptable crops.
  • The interior dimensions and outdated salon-image credits are reviewed.
  • Booking is connected and tested end to end; no demo form is presented as operational.
  • Privacy and booking policies reflect actual practices and providers.
  • Page title and description are customized; optional SEO setup is clearly intentional.
  • Every navigation link, gallery modal, FAQ item, policy link, and mobile button is checked.
  • Local assets load from the production domain/subfolder over HTTPS.
  • Caches are refreshed after edits and responsive/keyboard checks pass.
  • A backup and a copy of the third-party license records are retained.

32. License and Usage

The baseline contains a Bootstrap license but no separate license defining the buyer’s rights to the Elan template itself. Use the purchase agreement or obtain the seller’s written terms for permitted sites, redistribution, resale, and support. Do not assume unlimited rights from possession of this ZIP.

Preserve the bundled third-party license notices. Image permissions are separate from template permissions; retain source records and confirm rights for replacement images, logos, reviews, and client photographs. This README does not create a new license.

33. Troubleshooting and Support

SymptomWhere to checkWhat to do
Page has no stylingindex.html stylesheet links; assets/css and assets/vendorUpload the full assets tree; verify relative paths, case, and file permissions.
Image missing or oldimg src, data-image, preload, cacheCheck file spelling/case; update all references and use a new version or filename.
Interior crop looks wrong.about-image img and image dimensionsCorrect intrinsic dimensions and alt text, then review fixed heights and object-position at each breakpoint.
Mobile menu or modal does nothingLocal bootstrap.bundle.min.js; script orderEnsure the bundle loads before main.js; inspect the first console error.
Form says no request was sentBOOKING_ENDPOINTExpected demo behavior while empty. Connect and test a real endpoint or provider.
Form still fails after configurationEndpoint response and server logsConfirm JSON POST handling, HTTP success and success:true, delivery, CORS if cross-origin, and timeout handling. Do not place secrets in JS.
Hours differ from time choices.hours-table and openingHoursUpdate both and revise closed-day messages; production availability must apply the salon time zone.
Gallery opens the wrong imagedata-image, data-title, thumbnail altUpdate all values on the corresponding gallery button.
Anchor target is coveredSection ID and scroll-padding-topPreserve target IDs and adjust header offset if header height changed.
Updated CSS/JS is not visible?v= suffix, browser/hosting cacheUpload the changed file, increase its query version, then reload.
README looks different from the landing pageREADME.html embedded styleExpected: documentation has its own self-contained layout and does not use the website stylesheet.

No support email or service commitment is supplied in this baseline. Use the seller’s actual purchase/support channel. Include the affected URL, file/section, device width, browser, reproduction steps, and a screenshot. Never send passwords, API keys, or customer form submissions as troubleshooting examples.

Final Recommendation

Customize one area at a time, keep a backup, and test on the real hosting path before launch. Connect booking only when the request can be received reliably. Keep this guide and the third-party records with your source files.

Documentation scope: this guide was produced from elan-hair-studio_v092426_1.zip. The new package preserves every original entry and adds only elan-hair-studio/README.html. Instructions describing corrections or optional features have not been applied to the website.

Back to Top ↑