Create a landing page according to the following instructions Para-1 --------- Now, Create a amazon affiliate marketing product's single page html landing page by following the theme of template attached, 'Template_For_Other_Landing_Pages.html'. BACKUP REFERENCE: If the attached file has issues, you can also refer to this GitHub template for structure reference: https://github.com/MawlaAliKalandar19/TemplateLandingPage/blob/main/Template_For_Other_Landing_Pages.html You replace all relevant info into the template with the info related to a new product. New product's details are given below where you can find some new features to add. Change images plus texts under the heading like, "What Customers Are Saying" according to the details given below. CRITICAL: Preserve the EXACT Google Sheets integration code from the GitHub template. This includes: 1. The EXACT Google Apps Script URL: https://script.google.com/macros/s/AKfycbyp1l8jNLj8PRwoAz6tluyP9or2yDSlc2rIJRIWCB5RSKSJHzox6DPPtUu2mnu6JwwWeA/exec 2. The EXACT form handling JavaScript structure with config object 3. IMPORTANT: In the config object, the 'niche' field MUST be set to: "Beauty & Personal Care" 4. Do NOT modify the Google Sheets integration code in any way - only update the product name in the config object You change the CTA redirection links in 3 or 4 buttons as: https://amzn.to/4pdHhje New product's details are given below. The template attached was actually created for a different product. Please keep all generalized in place but for SEO optimization use relevant products terms. Para-2 ---------- , use new product image link here. Keep thumbnail related intact, but use product image link instead of existing one. Replace the top-most image's link with the new product image. The very product image is the thumbnail and use product title as the alt image where necessary. CRITICAL: The main product image in the hero section MUST have the exact ID: id="heroimg" - just like in the template. For example: [PRODUCT TITLE] CRITICAL HERO IMAGE DISPLAY: The hero image MUST display without cropping. Use this exact structure: [PRODUCT TITLE] DO NOT apply object-fit: cover to the hero image. The class "w-full h-auto" ensures it displays at full width with natural height. CRITICAL: Preserve ALL existing tags from the template, including: 1. All technical meta tags (charset, viewport, cache-control, etc.) 2. All SEO meta tags (description, keywords, author, etc.) 3. All Open Graph meta tags (og:title, og:image, og:url, etc.) Specifically ensure these cache-control meta tags are included from the GitHub template: Say in the template a meta tag found is like, . Here use description of the new product instead. Another meta is like, . Here also use relevant keywords regarding new product for which we are designing the landing page. Following tags are given to you as a sample. In these properties, put real data regarding this product. Para-2(2) PROMO LINK DETECTION ELEMENT - MUST INCLUDE: ============================================= To ensure automated systems can detect the promo link, you MUST include this exact hidden element: Place this element in the section, preferably near the CTA buttons or in the footer. Requirements: 1. Element type: 2. ID attribute: id="promo_hidden" (EXACT) 3. Value attribute: value="https://amzn.to/4pdHhje" 4. Must be present in the final HTML output 5. Do NOT wrap it in comments or conditional statements Para-3 ------------ For property="og:image", use property="og:image", content = "https://m.media-amazon.com/images/I/71Ar7RDbwWL._SL1500_.jpg"> and Use , use new product's title here. , use new product's relevant content instead. Para-4 ---------- , this is landing page url. Please follow Landing Page's "First 3 Seconds attraction philosophy" for the audience which are: 1. What the product is used for. 2. Why the product's important (i.e., for product's benefits or usefulness/pros). 3. People need to what to get the product? The above things should be reflected in the landing page in proper positions, by seeing which the customer easily gets locked at the page and get extremely interested to buy it. Para-5 ----------- Following is the product's info: ------------------------------------------ Amazon Affiliate Product Details below: ---------------------------------------------------- Product image link: https://m.media-amazon.com/images/I/71Ar7RDbwWL._SL1500_.jpg With product image please show the below section with product's action images somewhere in the page, the image/s says about the product's actions/features: ACTION IMAGES (3 images): 1. https://m.media-amazon.com/images/S/aplus-media-library-service-media/34976225-b871-460f-af91-6cbcab4d3fc2.__CR0,0,1464,600_PT0_SX1464_V1___.jpg 2. https://m.media-amazon.com/images/S/aplus-media-library-service-media/fe05cb7e-7e5f-43cc-adf8-5434c0d30ccb.__CR0,0,1464,600_PT0_SX1464_V1___.jpg 3. https://m.media-amazon.com/images/S/aplus-media-library-service-media/fa0135a4-1504-42de-8f64-592fc472b221.__CR0,0,1464,600_PT0_SX1464_V1___.jpg CRITICAL ACTION IMAGES LAYOUT INSTRUCTIONS: ============================================ 1. IMAGE CONTAINERS: Display these images inside beautifully designed card elements 2. PERFECT IMAGE FITTING - FIXED TO PREVENT STRETCHING: Use this exact CSS for all action images: .image-container { position: relative; width: 100%; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; } .image-container img { width: 100%; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; transition: transform 0.3s ease; } .image-container:hover img { transform: scale(1.05); } 3. FLEXIBLE CONTAINER HEIGHT: Do NOT use fixed aspect ratio containers for action images. Instead, let the container height adjust naturally to the image height. Use min-height: 250px for desktop and min-height: 200px for mobile. 4. IMAGE PRESERVATION: Ensure images maintain their original proportions and are NOT cropped. 5. CRITICAL FOR ACTION IMAGES: Do NOT crop action images. They must show the complete product features. - object-fit: contain ensures full images are visible - This is different from hero image (no object-fit) and other images (object-fit: cover) 6. CREATIVE LAYOUT OPTIONS (Choose one): OPTION A (Recommended for 3 images): - First image: Larger, placed prominently at the top - Second & Third images: Smaller, arranged side-by-side below - Use CSS Grid: grid-template-columns: 1fr 1fr for the bottom row - Top image spans full width OPTION B (Equal emphasis): - Three images in a horizontal row - Each takes equal width (33.33%) - Gap between images: 15-20px - Stack vertically on mobile screens OPTION C (Featured layout): - Center image larger, side images smaller - Creates visual hierarchy - Good for highlighting main feature 7. MOBILE RESPONSIVENESS: - On screens smaller than 768px, stack all images vertically - Maintain consistent padding and margins - Ensure images don't overflow their containers 8. SAMPLE HTML STRUCTURE (for Option A with 3 images):
Main product feature
Secondary feature
Additional feature
9. CSS FOR SAMPLE LAYOUT: .action-images-section { display: flex; flex-direction: column; gap: 20px; } .image-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 768px) { .image-row { grid-template-columns: 1fr; } .image-container { min-height: 200px !important; } .image-container.featured { min-height: 250px !important; } } Para-6 ----------- Current Product Title: Collagen Hair Mask for Deep Conditioning, Keratin Hair Treatment with 4 Hydrolyzed Proteins, Moroccan & Avocado Oils Conditioner for Nourish, Calendula Gentian Extracts Care Dry & Damaged Hair Convert the title to a shorter one so that the customers can know what the product is for. Keep product's brand name in the shortened title. Para-7 ----------- Some scrapped Data about the product (product detail): ------------------------------------------------------------------------- Collagen Hair Mask for Deep Conditioning, Keratin Hair Treatment with 4 Hydrolyzed Proteins, Moroccan & Avocado Oils Conditioner for Nourish, Calendula Gentian Extracts Care Dry & Damaged Hair Visit the Srripo Store 4.7 4.7 out of 5 stars (171) | Search this page 2K+ bought in past month $13.99 with 60 percent savings-60% $13.99 $1.68 per ounce($1.68 / ounce) Typical price: $34.99Typical price: $34.99 FREE International Returns Exclusive Prime price $12.50 Shipping & Import Charges to South Africa Details Color: Brown (8.32 Ounce) Brown (8.32 Ounce) $13.99 with 60 percent savings$13.99 $1.68 per ounce($1.68 / ounce) $34.99 With Prime See 1 options with no featured offers Brand Srripo Item Form Cream Material Feature Moisturizing, Strengthening, Vegan Hair Type All Product Benefits Hydrate and moisturize dry, damaged hair, which leaves it soft, silky, and easier to manage. About this item REPAIR, REVITALIZE, REJUVENATE! Is your hair dry, brittle, and lacking shine? Imagine waking up with hair that feels healthier, smoother, and full of life. Our collagen hair mask, with four hydrolyzed proteins including keratin, works to protect and repair damaged hair, reviving split ends and preventing breakage. Just one use, and you'll see smoother, shinier hair. Soy, wheat, and corn proteins restore elasticity and brilliance. Calendula and gentian root extracts soothe your scalp and help regenerate damaged strands. Pamper your hair today, because it deserves the best—and so do you. NOURISH, WEIGHTLESS, SHINE! Tired of heavy conditioners that leave your hair greasy? Our keratin hair treatment is the solution for lightweight, powerful nourishment. Infused with four natural oils—glycerin, macadamia, avocado, and Moroccan—this deep conditioning hair mask provides deep hydration while feeling light and airy. Glycerin locks in hydration, while macadamia oil fights frizz and avocado oil boosts shine. Moroccan oil restores vitality to even the driest strands. No more compromise between hydration and volume. Treat your hair to the care it deserves and love the results. LOVED BY ALL HAIR TYPES! No matter your hair type—damaged, color-treated, bleached, dry, frizzy, or fine—our hair mask essence is here to transform it. Tested by over 1,400 volunteers across 23 countries, this formula is proven to adapt to your unique hair needs, delivering noticeable results. The lightweight formula hydrates deeply without weighing down, leaving even the finest hair soft and free-flowing. Carefully chosen ingredients repair, nourish, and revitalize—restoring your hair's natural beauty. Let your hair shine with the confidence backed by a formula trusted by thousands worldwide. PURE CARE, SENSATIONAL SCENT! Hair that feels like it's just been pampered at a luxury salon—refreshed, light, and irresistibly smooth. Our hair masks deliver the gentle care your hair needs, free from sulfates, parabens, alcohol, or harsh chemicals. Plus, it's cruelty-free, ensuring safety for every strand. From fighting dryness to restoring shine, it transforms dull, tired hair into something you love to touch and see in the mirror. With a delicate blend of floral notes, amber, and musk, our signature fragrance adds a touch of elegance to your routine. Let every day feel like a spa day. WITHOUT THE SPLURGE, SALON RESULTS! Whether you're getting ready for a big day or just want to feel fabulous, Srripo's deep conditioner for dry, damaged hair brings your hair back to life. Available in 250ml and 500ml sizes, it's crafted to fit seamlessly into your routine. Just apply to damp hair, leave on for 5-15 minutes, and rinse. It's that simple. In just a few uses, see and feel the difference—softer, shinier, and healthier hair that makes you smile every time you catch your reflection. No more compromises—get the salon-quality hair you deserve at a price you love. Report an Top reviews: Customers say Top reviews from the United States Yahandrys Santana 5.0 out of 5 stars The Collagen Hair Mask has been amazing for restoring moisture and strength to my hair Reviewed in the United States on November 21, 2025 Color: Brown (8.32 Ounce)Verified Purchase The combination of keratin and the four hydrolyzed proteins leaves my hair feeling noticeably softer and smoother after each use. The Moroccan and avocado oils add a deep level of nourishment without making my hair feel heavy or greasy. I really like that it also includes calendula and gentian extracts—my dry, damaged ends look healthier and more revived. Overall, this is a great deep-conditioning treatment that brings back shine, softness, and manageability. Highly recommend for anyone with dry or damaged hair! 7 people found this helpful Helpful Report Sonya 5.0 out of 5 stars Salon Results! Reviewed in the United States on October 28, 2025 Verified Purchase I absolutely love this hair mask! My hair was dry and brittle, but after just one use, it felt soft, smooth, and full of shine. It’s super lightweight—no greasy feel—and smells amazing, like a luxury spa. It definitely makes my hair easier to brush with no tangles. I also love that it’s free of harsh chemicals and cruelty-free. Perfect for all hair types and totally worth it. Feels like salon-quality care without the high price! Highly Recommend! 7 people found this helpful Helpful Report Liliana V Jimenez 5.0 out of 5 stars Soft and Healthy Hair from the First Use Reviewed in the United States on October 24, 2025 Color: Brown (8.32 Ounce)Verified Purchase I absolutely loved this hair mask! It has a creamy texture that spreads easily and leaves my hair incredibly soft, shiny, and frizz-free. I noticed my hair feeling stronger and smoother after the first use. It also has a pleasant scent and doesn’t leave any greasy residue. Perfect for deep hydration and repairing damage caused by coloring or heat. Definitely a salon-quality treatment I highly recommend. 9 people found this helpful Helpful Report Aylin 5.0 out of 5 stars Highly recommended! Reviewed in the United States on November 21, 2025 Color: Brown (8.32 Ounce)Verified Purchase I really loved this hair mask! From the very first use, my hair felt much softer, smoother, and noticeably shinier. The texture is creamy, it smells amazing, and it spreads very easily. My hair is damaged from coloring and heat styling, and this treatment with keratin, collagen, and natural oils truly helped repair it. It left my ends looking healthier and reduced the frizz a lot. Customer image Customer image 7 people found this helpful Helpful Report HeidyGC 5.0 out of 5 stars Smells amazing, gives salon quality result. Reviewed in the United States on October 29, 2025 Verified Purchase Absolutely love this hair mask! My hair feels so soft, smooth, and healthy after just one use. It smells amazing and gives salon-quality results at home. It deeply hydrates and repairs my dry, damaged hair leaving it shiny and easy to manage. Highly recommend! Customer image Customer image 7 people found this helpful Helpful Report Magdalena Pérez 5.0 out of 5 stars Salon quality at home! Reviewed in the United States on October 31, 2025 Color: Brown (8.32 Ounce)Verified Purchase This collagen hair mask is amazing — it leaves my hair soft, shiny, and so much healthier-looking after every use. I have dry, slightly damaged hair from heat styling, and this treatment really brings it back to life. The mix of keratin, collagen, and oils like Moroccan and avocado makes it super nourishing without weighing my hair down. One person found this helpful Helpful Report Sam 5.0 out of 5 stars Impressive results after one use! Reviewed in the United States on November 15, 2025 Color: Brown (8.32 Ounce)Verified Purchase Click to play video I was blown away by this hair mask after just one use. My hair feels so much softer, shinier, and more hydrated. I tend to get frizzy, especially this time of year, but the mask helped a lot to control it. It's easy to use, smells amazing, and I noticed a difference immediately after just 10 minutes. I'll definitely buy it again because my hair looks and feels healthier, and I've also noticed less breakage and a beautiful shine. Customer image Customer image 3 people found this helpful Helpful Report [ Please include those reviews which are positive regarding the product.] Para-8 ----------- For UI/UX shape, theme, elements' positioning, size, follow the template attached, 'Template_For_Other_Landing_Pages.html' (the user selected landing page name will be this). GitHub Backup: If needed for reference, check: https://github.com/MawlaAliKalandar19/TemplateLandingPage/blob/main/Template_For_Other_Landing_Pages.html HTML VALIDATION NOTE: When including Google Fonts or any external URLs with parameters in HTML attributes, encode ampersands (&) as & to prevent XML validation errors. For example: Use: Instead of: CRITICAL HEADER ALIGNMENT: The navigation menu and CTA button must be perfectly vertically aligned. Ensure: 1. The 'Get Yours Now' button text aligns horizontally with navigation link text 2. Use align-items: center on header container 3. Consistent line-height and vertical padding 4. Same baseline alignment for all header elements CRITICAL: The 'See Features' button (or any secondary CTA on gradient backgrounds) must have readable text. If placed on a gradient background, either: 1. Use white text with dark text-shadow 2. Add a semi-opaque white background behind the text 3. Use a solid color background for the button Example: Keep the scroll-to-top button and it's functionality similar to one used in the template attached and give consistent background color of the button. IMAGE DISPLAY FUNDAMENTALS (MUST FOLLOW): ========================================= To ensure all images display perfectly in their containers: 1. HERO IMAGE (id="heroimg") - SPECIAL RULES: - MUST use natural display without cropping - Use: [PRODUCT TITLE] - DO NOT use object-fit: cover on hero image - Let it display naturally at full width with auto height 2. ACTION IMAGES - Use rules from Para-5: - Use object-fit: contain (as specified in Para-5) - Maintain original proportions - Do NOT crop 3. OTHER IMAGES (non-hero, non-action): - Use object-fit: cover only when you need to fill containers - Combined with: width: 100%; height: 100% - For containers: Use fixed aspect ratios - Add: object-position: center (focus on important parts) 4. ASPECT RATIO TECHNIQUES: Technique A (Padding-bottom): .image-wrapper { position: relative; width: 100%; padding-bottom: 75%; /* 4:3 ratio */ overflow: hidden; } .image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } Technique B (Aspect-ratio property): .image-wrapper { aspect-ratio: 4/3; overflow: hidden; } .image-wrapper img { width: 100%; height: 100%; object-fit: cover; } 5. CRITICAL EXCEPTION FOR HERO IMAGE: - The hero image (id="heroimg") MUST NEVER use object-fit: cover - It should display naturally: class="w-full h-auto" - Example: [PRODUCT TITLE] 6. ALTERNATIVE: BACKGROUND IMAGE METHOD: When you need precise control:
KEY TAKEAWAY: Use appropriate object-fit based on image type: 1. Hero Image: Natural display (w-full h-auto) - NO object-fit 2. Action Images: object-fit: contain - maintain proportions 3. Other Images: object-fit: cover - fill containers when needed MUST PRESERVE: The lead magnet section with Google Sheets integration MUST use this EXACT code structure: EXACT GOOGLE SHEETS INTEGRATION CODE TO PRESERVE: ================================================= const config = { scriptUrl: "https://script.google.com/macros/s/AKfycbyp1l8jNLj8PRwoAz6tluyP9or2yDSlc2rIJRIWCB5RSKSJHzox6DPPtUu2mnu6JwwWeA/exec", niche: "Beauty & Personal Care", product: "[UPDATE THIS WITH NEW PRODUCT NAME ONLY]" }; const form = document.getElementById("contactForm"); if (form) { form.addEventListener("submit", async function (e) { e.preventDefault(); const formMessage = document.getElementById("form-message"); const submitButton = form.querySelector('button[type="submit"]'); const originalButtonText = submitButton.textContent; const name = form.querySelector('input[name="name"]').value.trim(); const email = form.querySelector('input[name="email"]').value.trim(); // Basic validation if (!name || !email) { showMessage(formMessage, "Please fill out all fields.", "error"); return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { showMessage(formMessage, "Enter a valid email.", "error"); return; } submitButton.disabled = true; submitButton.textContent = "Sending..."; try { const formData = new URLSearchParams(); formData.append("name", name); formData.append("email", email); formData.append("niche", config.niche); formData.append("product", config.product); const response = await fetch(config.scriptUrl, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: formData }); const result = await response.json(); if (result.success) { showMessage( formMessage, "Success! Check your email for your nail care guide.", "success" ); form.reset(); } else { throw new Error(result.error || "Failed to save your information"); } } catch (error) { showMessage(formMessage, "Error: " + error.message, "error"); } finally { submitButton.disabled = false; submitButton.textContent = originalButtonText; } }); function showMessage(element, text, type) { element.textContent = text; element.style.display = "block"; element.style.color = "white"; // Force white text for all messages element.style.backgroundColor = "rgba(0, 0, 0, 0.7)"; // Dark semi-transparent background element.style.padding = "12px"; element.style.borderRadius = "8px"; element.style.fontWeight = "600"; if (type === "error") { element.scrollIntoView({ behavior: "smooth", block: "center" }); } } } ================================================= CRITICAL FOOTER RESTRICTION: In the footer section, DO NOT include any links like "Privacy Policy", "Terms of Service", "Contact Us", "Shipping Info", "Returns", or "Support". These should not appear anywhere in the footer or any other part of the landing page. Only include basic navigation links that point to sections within the same page (like "Product", "Benefits", "Reviews", etc.). Para-9 --------- For theme base gradient color, extract color code from following: background: linear-gradient(45deg, #8A9A5B 0%, #B5651D 100%) CRITICAL TEXT CONTRAST & READABILITY REQUIREMENTS: ================================================== To ensure all text is readable on the selected theme gradient, follow these rules: 1. Based on your selected theme, ensure sufficient contrast between text and background 2. Primary buttons should use white text (#FFFFFF) 3. Secondary buttons should use dark text (#333333) 4. Add text shadows to white text on gradient backgrounds 6. SPECIFIC ELEMENTS TO FIX: - 'See Features' button on gradient hero section: Use dark text OR add background - Lead magnet success/error messages: White text on dark semi-transparent background - All text on gradient sections: Use white with text-shadow: 0 1px 2px rgba(0,0,0,0.5) - Form labels on gradient backgrounds: White text 7. BUTTON COLOR RULES: .btn-primary { background: [THEME GRADIENT]; color: white !important; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .btn-secondary { background: white; color: #333333 !important; border: 2px solid [MAIN THEME COLOR]; } 8. UNIVERSAL SAFETY RULE: If any text appears unreadable, override it with either: - color: white !important; (for dark gradients) - color: #333333 !important; (for light backgrounds) - Add background: rgba(0,0,0,0.7) behind white text on gradients Para-10 --------- For FAQ section please add your researched questions and proper answers... YouTube Video Section: Do NOT include any YouTube video section in the landing page. Para-11 ---------- No specific affiliate policy provided. Use standard affiliate marketing best practices. Pinterest Metadata Section -------------------------- After creating the complete landing page, add a commented paragraph at the very end of the HTML file (after the closing tag) with Pinterest metadata in the following format: SPECIFIC REQUIREMENTS FOR PINTEREST METADATA: 1. The Pinterest Title & Description should be SEO optimized as much as possible 2. The description should have relevant emojis in between where appropriate 3. The description should never be more than 1000 characters - make it compact and engaging 4. At the end of the description, include no more than 5 top most relevant hashtags separated by single spaces 5. The Landing Page URL is: https://health.riseinventor.com/health_chaan/LandingPage_00/LandingPage.html 6. The Alt Text should be SEO optimized and descriptive EXISTING PINTEREST BOARDS: -------------------------- - Must-Have Beauty, - Viral Skincare Dupes, - Nail Art Tutorials, - 4th of July Nail Art, - Sephora Skincare Faves, - Summer Bright Juicy Beauty, - Press On Nails At Home, - DIY Nail Ideas, - Quick Manicure Tips, - Affordable Beauty Finds After analyzing the product details above, select the MOST SUITABLE board from this list where the pin should be placed. Consider the product category, target audience, and board themes to make the best choice. EXAMPLE FORMAT (for a massage gun product):