View file File name : giftletter.html Content :<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="robots" content="noindex" /> <meta name="description" content="At Giftlancer you'll find the perfect gift for your friends, family and loved ones. Our products include accessories, electronics, housewares, and much more." /> <meta name="keywords" content="Giftlancer, Gifts, Gifts For Dads,Gifts for Family,Gifts for mother,Gifts for brothers,Gifts for loved ones,Gifts for sisters,Gifts for friends" /> <link rel="icon" href="./Images/favicon.ico" /> <title>GIFT LANCER | HOME</title> <!-- CSS Files --> <link rel="stylesheet" href="./Style/style.css" /> <link rel="stylesheet" href="./Style/utility.css" /> <link rel="stylesheet" href="./Style/moblie.css" /> <!-- Fontawesome CDN --> <script defer src="https://kit.fontawesome.com/cac1fb3af9.js" crossorigin="anonymous" ></script> </head> <body class="landingPage__body"> <!-- Notification Header --> <div class="notificationHeader flex--between max--width"> <div class="notificationHeader__media hidden"> <a href="#"> <img src="./Images/icons/fb.png" width="20" height="20" loading="lazy" alt="facebook" /> <span class="hidden">Facebook</span> </a> <a href="#"> <img src="./Images/icons/twitter.png" width="20" height="20" loading="lazy" alt="twitter" style="mix-blend-mode: difference;" /> <span class="hidden"> Twitter</span> </a> <a href="#"> <img src="./Images/icons/youtube.png" width="20" height="20" loading="lazy" alt="Youtube" /> <span class="hidden">Youtube</span> </a> <a href="#"> <img src="./Images/icons/instagram.png" width="20" height="20" loading="lazy" alt="Instagram" /> <span class="hidden">Instagram</span> </a> </div> <div class="flex--between font__small notificationHeader__phone"> <img src="./Images/icons/call.png" width="15" height="15" alt="Whatsapp Icon" /> <div class="bold__text">(+1) 934 - 300 - 500</div> </div> </div> <!-- Notification Header Ends --> <!-- Navigation Menu --> <header> <nav class="landingPage__nav"> <div class="nav blogBody max--width"> <div class="nav__logo"> <a href="./index.html"> <img src="./images/giftlancer-logo.png" loading="lazy" alt="Logo" class="landingPage_navLogo" /> </a> </div> <div class="nav_items"> <ul class="nav__list"> <li class="nav__item"> <a href="./aboutUs.html" class="nav__link">About Us</a> </li> <li class="nav__item"> <a href="./giftIdeas.html" class="nav__link"> Letter to </a> </li> <li class="nav__item dropdown__parent"> <a href="#" class="nav__link" >Services <i class="fa fa-caret-down"></i> </a> <!-- Services Dropdown --> <div class="navLink__dropdown"> <ul> <li class="nav__item"> <a href="#" class="nav__link">Gift a letter</a> </li> <li class="nav__item"> <a href="#" class="nav__link">Redeem you gift</a> </li> <li class="nav__item"> <a href="./letter-for-business.html" class="nav__link" >Letter for business</a > </li> </ul> </div> <!-- Services Dropdown Ends --> </li> <li class="nav__item"> <a href="./faq.html" class="nav__link">FAQ</a> </li> <li class="nav__item"> <a href="./contact.html" class="nav__link">Contact us</a> </li> </ul> </div> <div class="nav__hamburger d-mobile"> <i class="fa fa-bars nav__burgerIcon" style="color: #fff"></i> </div> </div> </nav> </header> <!-- End of Navigation Menu --> <!-- Breadcrumbs --> <div class="max--width flex--between margin__top"> <div class="breadcrumbs"> <a href="./index.html" class="breadcrumbs__link breadcrumbs_unactive" >Home</a > <span><i class="fa fa-greater-than"></i></span> <a href="./giftletter.html" class="breadcrumbs__link">Gift Letter</a> </div> <!-- Disclosure Text --> <div class="homePage__disclosure hidden"> <div class="home__topText"> Disclosure: <span class="home__dropdowns"> <a href="#"> Affliatate commissions</a> <p class="home__dropdown"> We are a participant in the Amazon Services LLC Associates Program, an affiliate adverising program designed to provide a means for us to earn commissions by linking to Amazon.com and affiliated sites. </p> </span> <span class="home__dropdowns"> <a href="#" ><i class="fa-solid fa-lock"></i> 256-bit encryption</a > <p class="home__dropdown"> this website is secured by 256-bit encryption </p> </span> </div> </div> <!--End of Disclosure Text--> </div> <!-- Breadcrumbs ends --> <main class="blogBody max--width"> <!-- Steps --> <!-- <div class="giftletter__steps"> <div class="giftletter__step"> <p class="giftletter__step__title">Select Envelope</p> <div class="giftletter__step__status"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none" > <circle cx="11" cy="11" r="11" fill="#FBA93C" /> <circle cx="11" cy="11" r="8" fill="white" /> <circle cx="11" cy="11" r="4" fill="#FBA93C" /> </svg> </div> </div> <div class="giftletter__step"> <p class="giftletter__step__title">Fill Details</p> <div class="giftletter__step__status"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none" > <circle cx="11" cy="11" r="11" fill="#FBA93C" /> </svg> </div> </div> <div class="giftletter__step"> <p class="giftletter__step__title">Payment</p> <div class="giftletter__step__status"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none" > <circle cx="11" cy="11" r="11" fill="#FBA93C" /> </svg> </div> </div> </div> --> <!-- Select Envelope --> <!-- <section class="select__envelope__template"> <div class="select__envelope"> <div class="select__envelope__header"> <img src="./Images/icons/select-envelope-type-icon.png" width="22" height="22" alt="Select Envelope Type" /> <p class="select__title">Select Envelope Type</p> </div> <div class="margin__top envelopes__lists"> <div class="envelope__list"> <div class="envelope__title"> <input type="radio" name="envelopOption" id="envelopeA" /> <label for="envelopeA">Envelope A</label> </div> <div class="envelope__image"> <img src="./images/envelope-a.png" alt="Envelope" /> </div> <p class="bold__text">Free</p> </div> <div class="envelope__list"> <div class="envelope__title"> <input type="radio" name="envelopOption" id="envelopeB" /> <label for="envelopeB">Envelope B</label> </div> <div class="envelope__image"> <img src="./images/envelope-b.png" alt="Envelope" /> </div> <p class="bold__text">$12.99</p> </div> <div class="envelope__list"> <div class="envelope__title"> <input type="radio" name="envelopOption" id="envelopeC" /> <label for="envelopeC">Envelope C</label> </div> <div class="envelope__image"> <img src="./images/envelope-c.png" alt="Envelope" /> </div> <p class="bold__text">$22.99</p> </div> <div class="envelope__list"> <div class="envelope__title"> <input type="radio" name="envelopOption" id="envelopeD" /> <label for="envelopeD">Envelope D</label> </div> <div class="envelope__image"> <img src="./images/envelope-d.png" alt="Envelope" /> </div> <p class="bold__text">$32.99</p> </div> <div class="envelope__list"> <div class="envelope__title"> <input type="radio" name="envelopOption" id="envelopeE" checked /> <label for="envelopeE">Envelope E</label> </div> <div class="envelope__image"> <img src="./images/envelope-e.png" alt="Envelope" /> </div> <p class="bold__text">$42.99</p> </div> </div> <div class="margin__top envelope__features envelop__featuresBlock"> <div class="selected__envelope"> <div class="selected__envelope__title bold__text">Envelope A</div> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </div> <div class="selected__envelope__line"></div> </div> <ul class="selected__envelope__featureList"> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Gift Letter </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />2 Free Copies </li> </ul> </div> <div class="margin__top envelope__features envelop__featuresBlock"> <div class="selected__envelope"> <div class="selected__envelope__title bold__text">Envelope B</div> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </div> <div class="selected__envelope__line"></div> </div> <ul class="selected__envelope__featureList"> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Gift Letter </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />2 Free Copies </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Pre-made Design Templates </li> </ul> </div> <div class="margin__top envelope__features envelop__featuresBlock"> <div class="selected__envelope"> <div class="selected__envelope__title bold__text">Envelope C</div> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </div> <div class="selected__envelope__line"></div> </div> <ul class="selected__envelope__featureList"> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Gift Letter </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />2 Free Copies </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Pre-made Design Templates </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Custom Design Template </li> </ul> </div> <div class="margin__top envelope__features envelop__featuresBlock"> <div class="selected__envelope"> <div class="selected__envelope__title bold__text">Envelope D</div> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </div> <div class="selected__envelope__line"></div> </div> <ul class="selected__envelope__featureList"> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Gift Letter </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />2 Free Copies </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Pre-made Design Templates </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Custom Design Template </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Custom Wax Seal </li> </ul> </div> <div class="margin__top envelope__features envelop__featuresBlock"> <div class="selected__envelope"> <div class="selected__envelope__title bold__text">Envelope E</div> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </div> <div class="selected__envelope__line"></div> </div> <ul class="selected__envelope__featureList"> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Gift Letter </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />2 Free Copies </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Pre-made Design Templates </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Custom Design Template </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Custom Wax Seal </li> <li> <img src="./Images/icons/check-icon.png" alt="Check" width="24" height="24" />Coupon Gift Code to be Redeemed in Bitcoin </li> </ul> </div> </div> <div class="select__tempelate"> <div class="select__template__header"> <img src="./Images/icons/select-template-icon.png" width="22" height="22" alt="Select Template Type" /> <p class="select__title">Select Template</p> </div> <div class="margin__top template__lists"> <div class="template__list"> <img src="./images/template-palin.png" alt="Template" /> <h3>Plain</h3> </div> <div class="template__list"> <img src="./images/template-for-son.png" alt="Template" /> <h3>For Son</h3> </div> <div class="template__list"> <img src="./images/template-for-mother.png" alt="Template" /> <h3>For Mother</h3> </div> <div class="template__list"> <img src="./images/template-for-innovation.png" alt="Template" /> <h3>Invitation</h3> </div> <div class="template__list"> <img src="./images/template-for-christmas.png" alt="Template" /> <h3>Christmas</h3> </div> <div class="template__list"> <img src="./images/template-for-housewarming.png" alt="Template" /> <h3>Housewarming</h3> </div> <div class="template__list"> <img src="./images/template-custom.png" alt="Template" /> <h3>Custom</h3> </div> <div class="template__list"> <img src="./images/template-for-love-letter.png" alt="Template" /> <h3>Love Letter</h3> </div> <div class="template__list"> <img src="./images/template-for-fiance.png" alt="Template" /> <h3>For Fiance</h3> </div> </div> <div class="margin__top envelope__features"> <div class="select__template__header"> <img src="./Images/icons/customize-your-design-icon.png" width="22" height="22" alt="Customize Envelope Type Type" /> <p class="select__title">Customize your Envelope Type</p> </div> <div class="customize__envelope__design"> <div class="customize__envelope__input"> <label for="file">Envelope Color</label> <div class="customize__imageInput"> <input type="text" class="contactUs__input" /> </div> </div> <div class="customize__envelope__input"> <label for="Quantity">Quantity</label> <div class="select__container"> <select name="Select the quantity" id="select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> </div> <div class="customize__envelope__input"> <label for="file">Upload Print</label> <div class="customize__imageInput"> <input type="file" class="contactUs__input" id="fileInput" /> <div id="imagePreviewBlock"> <img src="" alt="Preview" id="imagePreview" width="70" height="70" /> <div class="unselectImage"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" > <path d="M8.4 17L12 13.4L15.6 17L17 15.6L13.4 12L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4L10.6 12L7 15.6L8.4 17ZM12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6867 5.825 19.9743 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26333 14.6833 2.00067 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31333 6.88333 4.02567 5.825 4.925 4.925C5.825 4.025 6.88333 3.31267 8.1 2.788C9.31667 2.26333 10.6167 2.00067 12 2C13.3833 2 14.6833 2.26267 15.9 2.788C17.1167 3.31333 18.175 4.02567 19.075 4.925C19.975 5.825 20.6877 6.88333 21.213 8.1C21.7383 9.31667 22.0007 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6867 17.1167 19.9743 18.175 19.075 19.075C18.175 19.975 17.1167 20.6877 15.9 21.213C14.6833 21.7383 13.3833 22.0007 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="#878787" /> </svg> </div> </div> </div> </div> <div class="customize__envelope__input"> <label for="Quantity">Wax Seal</label> <div class="select__container"> <select name="Select the quantity" id="select"> <option value="1">Mary Christmas 3</option> <option value="1">Mary Christmas 3</option> <option value="1">Mary Christmas 3</option> <option value="1">Mary Christmas 3</option> <option value="1">Mary Christmas 3</option> </select> </div> </div> </div> </div> </div> </section> --> <!-- Select Envelope Ends --> <!-- Fill Details --> <!-- Steps --> <div class="giftletter__steps"> <div class="giftletter__step"> <p class="giftletter__step__title">Select Envelope</p> <div class="giftletter__step__status"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none" > <circle cx="11" cy="11" r="11" fill="#FBA93C" /> </svg> </div> </div> <div class="giftletter__step"> <p class="giftletter__step__title">Fill Details</p> <div class="giftletter__step__status"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none" > <circle cx="11" cy="11" r="11" fill="#FBA93C" /> <circle cx="11" cy="11" r="8" fill="white" /> <circle cx="11" cy="11" r="4" fill="#FBA93C" /> </svg> </div> </div> <div class="giftletter__step"> <p class="giftletter__step__title">Payment</p> <div class="giftletter__step__status"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none" > <circle cx="11" cy="11" r="11" fill="#FBA93C" /> </svg> </div> </div> </div> <div class="select__envelope__template"> <!-- Sender Details --> <div class="select__envelope sender__details"> <div class="select__template__header"> <img src="./Images/icons/select-envelope-type-icon.png" width="22" height="22" alt="Select Template Type" /> <p class="select__title">Select Details</p> </div> <form class="margin__top sender__form"> <div class="sender__input"> <label for="email">Sender Email</label> <input type="email" class="contactUs__input" /> </div> <div class="sender__input"> <label for="name">Sender Name</label> <input type="text" class="contactUs__input" /> </div> <div class="sender__input"> <label for="adderess">Sender Address</label> <input type="text" class="contactUs__input" /> </div> <div class="sender__input"> <label for="message">Message</label> <textarea rows="10" cols="50" class="contactUs__input" placeholder="Enter your message here" maxlength="1000" style="resize: none;" ></textarea> </div> </form> </div> <div class="receiver__detail"> <div class="select__envelope"> <div class="select__template__header"> <img src="./Images/icons/select-envelope-type-icon.png" width="22" height="22" alt="Select Template Type" /> <p class="select__title">Receiver Details</p> </div> <form class="margin__top sender__form"> <div class="sender__input"> <label for="email">Receiver Email</label> <input type="email" class="contactUs__input" /> </div> <div class="sender__input"> <label for="name">Receiver Name</label> <input type="text" class="contactUs__input" /> </div> <div class="sender__input"> <label for="adderess">Receiver Number</label> <input type="number" class="contactUs__input" /> </div> <div class="sender__input"> <label for="message">Receiver Address</label> <input type="text" class="contactUs__input" /> </div> </form> </div> <div class="trust__policy select__envelope margin__top"> <img src="./Images/trust-policy.png" alt="Trust policy" /> <div> <h2>Your Trust Our Policy</h2> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </div> </div> </div> </div> <!-- Sender DetailsEnds --> </div> <!-- Fill Details Ends --> </main> <!-- CTA buttons --> <!-- <div class="giftletter__ctaBlock"> <button class="giftletter__ctaContinue flex--center"> Continue <div id="contineu"></div> <img src="./images/icons/cta-continue-icon.png" width="20" height="20" alt="Continue" /> </button> <button class="giftletter__ctaBack">Back</button> <div class="giftletter__freeGift"> <div class="freeGift__header flex--between"> <span>Free Gift</span> <img src="./Images/icons/info-icon.png" width="20" height="20" alt="Info"> </div> <div class="freeGift__text"> Free Gift Coupon in the Letter </div> </div> <div class="freeGift__bottomPara">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</div> </div> --> <!-- CTA buttons Ends --> <div class="max--width"> <!-- Scroll to top --> <button class="scrollToTop"> <i class="fa-solid fa-angle-up"></i> </button> <!-- End of Scroll to top --> </div> <!-- Footer Content --> <footer> <div class="footer max--width"> <div class="footer__menuBar hidden"> <h3>Get Notified</h3> <ul> <li>Subscribe Our Newsletter</li> </ul> <form action="#" class="blogSearch footerSearch"> <input type="text" class="blogSearch_input footerSearch_input" placeholder="Enter you email " /> <button class="blogSearch__btn bold__text">Subscribe</button> </form> <div class="footer__bottom__mediaIcons"> <a href="#"> <img src="./Images/icons/fb.png" width="20" height="20" loading="lazy" alt="facebook" /> </a> <a href="#"> <img src="./Images/icons/twitter.png" width="20" height="20" loading="lazy" alt="twitter" style="mix-blend-mode: difference;" /> </a> <a href="#"> <img src="./Images/icons/youtube.png" width="20" height="20" loading="lazy" alt="Youtube" /> </a> <a href="#"> <img src="./Images/icons/instagram.png" width="20" height="20" loading="lazy" alt="Instagram" /> </a> </div> </div> <div class="footer__menuBar"> <div class="footer__title"> <h3>Company</h3> </div> <ul> <li><a href="./aboutUs.html"> About us</a></li> <li><a href="./contact.html"> Contact us</a></li> <li><a href="./blog.html"> Blog </a></li> <li><a href="./reviews.html"> Reviews </a></li> </ul> </div> <div class="footer__menuBar"> <div class="footer__title"> <h3>Services</h3> </div> <ul> <li><a href="#"> Send a letter </a></li> <li> <a href="./letter-for-business.html"> Letter for business </a> </li> <li><a href="#">Redeem your free gift </a></li> <li> <a href="./subscribe.html">Subscribe Page</a> </li> </ul> </div> <div class="footer__menuBar"> <div class="footer__title"> <h3>Quick Link</h3> </div> <ul> <li><a href="./gift-for-mom.html">Mum gift ideas</a></li> <li><a href="./gift-for-dad.html">Dad gift ideas</a></li> <li><a href="./gift-for-uncle.html">Uncle gift ideas</a></li> <li><a href="./gift-for-uncle.html">Uncle gift ideas</a></li> </ul> </div> <div class="footer__menuBar"> <div class="footer__title"> <h3>Info</h3> </div> <ul> <li> <a href="./footerPages/affilate.html"> Affiliate disclosure </a> </li> <li><a href="./footerPages/policy.html">Privacy Policy</a></li> <li> <a href="./footerPages/termsandconditions.html" >Terms and Conditions</a > </li> <li> <a href="./footerPages/humanSitemap.html">Human Sitemap</a> </li> </ul> </div> </div> <div class="footer__bottom maxWidth__new"> <div class="footer__bottom__mediaIcons d-mobile"> <a href="#"> <img src="./Images/icons/fb.png" width="20" height="20" loading="lazy" alt="facebook" /> </a> <a href="#"> <img src="./Images/icons/twitter.png" width="20" height="20" loading="lazy" alt="twitter" style="mix-blend-mode: difference;" /> </a> <a href="#"> <img src="./Images/icons/youtube.png" width="20" height="20" loading="lazy" alt="Youtube" /> </a> <a href="#"> <img src="./Images/icons/instagram.png" width="20" height="20" loading="lazy" alt="Instagram" /> </a> </div> <div class="footer__bottom__text text--center hidden"> <h3 class="footer__bottomHeading"> © 2019 - 2022 One Media, LLC. All Rights Reserved. </h3> <p class="footer__bottomPara"> 7 St Andrews Lane, Cyffylliog , United Kingdom </p> </div> </div> </footer> <!-- End of Footer Content --> <!-- JS file --> <script defer src="./JS/main.js"></script> </body> </html>