{"id":12,"date":"2026-07-14T08:08:15","date_gmt":"2026-07-14T08:08:15","guid":{"rendered":"https:\/\/naeemtechnologies.net\/?page_id=12"},"modified":"2026-07-14T08:09:13","modified_gmt":"2026-07-14T08:09:13","slug":"love","status":"publish","type":"page","link":"https:\/\/naeemtechnologies.net\/","title":{"rendered":"LOVE"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ed8776 e-con e-atomic-element e-flexbox-base e-12c15fa \" data-id=\"9ed8776\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9ed8776\">\n    \t\t<div class=\"elementor-element elementor-element-e7f4b7f elementor-widget elementor-widget-html\" data-id=\"e7f4b7f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Paste complete code into ONE Elementor HTML Widget -->\r\n\r\n<div id=\"birthday\">\r\n\r\n<canvas id=\"fx\"><\/canvas>\r\n\r\n<audio id=\"music\" loop>\r\n  <source src=\"PASTE-MP3-URL-HERE\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n\r\n<!-- OPENING SCREEN -->\r\n\r\n<div id=\"gate\">\r\n\r\n  <div class=\"heart\">\u2665<\/div>\r\n\r\n  <small>17 \u2022 07 \u2022 2026<\/small>\r\n\r\n  <p>A little surprise for someone special...<\/p>\r\n\r\n  <h1>Sawera Sehar \u2764\ufe0f<\/h1>\r\n\r\n  <button id=\"enter\">\r\n    Tap to Enter Our Story \u2728\r\n  <\/button>\r\n\r\n  <em>\ud83c\udfb5 Tap starts the music<\/em>\r\n\r\n<\/div>\r\n\r\n\r\n<main id=\"site\">\r\n\r\n<!-- HERO -->\r\n\r\n<section class=\"hero\">\r\n\r\n  <div class=\"photo round\">\r\n\r\n    <span>ADD HER PHOTO \u2764\ufe0f<\/span>\r\n\r\n    <!--\r\n    Replace span with:\r\n\r\n    <img decoding=\"async\" src=\"PHOTO-URL-HERE\" alt=\"Sawera Sehar\">\r\n    -->\r\n\r\n  <\/div>\r\n\r\n  <small>17 \u2022 07 \u2022 2026<\/small>\r\n\r\n  <h1>\r\n\r\n    Happy Birthday\r\n\r\n    <br>\r\n\r\n    <b>Sawera Sehar \u2764\ufe0f<\/b>\r\n\r\n  <\/h1>\r\n\r\n  <p id=\"typing\"><\/p>\r\n\r\n  <a class=\"btn\" href=\"#story\">\r\n\r\n    \u2728 Begin Our Little Journey\r\n\r\n  <\/a>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- STORY -->\r\n\r\n<section id=\"story\" class=\"section reveal\">\r\n\r\n  <small>OUR STORY \u2764\ufe0f<\/small>\r\n\r\n  <h2>Then I Met You...<\/h2>\r\n\r\n  <p class=\"copy\">\r\n\r\n    I never knew one person could become my smile,\r\n    my peace, my happiness, and my whole world.\r\n\r\n    <br><br>\r\n\r\n    Then you came into my life.\r\n\r\n    <br><br>\r\n\r\n    And suddenly... everything felt more beautiful. \ud83d\udc95\r\n\r\n  <\/p>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- MEMORIES -->\r\n\r\n<section class=\"section reveal\">\r\n\r\n  <small>OUR MEMORIES \ud83d\udcf8<\/small>\r\n\r\n  <h2>Every Picture Has A Story \u2764\ufe0f<\/h2>\r\n\r\n  <div class=\"grid\">\r\n\r\n\r\n    <article>\r\n\r\n      <div class=\"photo\">\r\n\r\n        <span>ADD PHOTO 1<\/span>\r\n\r\n      <\/div>\r\n\r\n      <p>One of my favorite smiles \ud83e\udd79\u2764\ufe0f<\/p>\r\n\r\n    <\/article>\r\n\r\n\r\n    <article>\r\n\r\n      <div class=\"photo\">\r\n\r\n        <span>ADD PHOTO 2<\/span>\r\n\r\n      <\/div>\r\n\r\n      <p>My favorite person, always \ud83d\udc95<\/p>\r\n\r\n    <\/article>\r\n\r\n\r\n    <article>\r\n\r\n      <div class=\"photo\">\r\n\r\n        <span>ADD PHOTO 3<\/span>\r\n\r\n      <\/div>\r\n\r\n      <p>A moment I never want to forget \u2728<\/p>\r\n\r\n    <\/article>\r\n\r\n\r\n    <article>\r\n\r\n      <div class=\"photo\">\r\n\r\n        <span>ADD PHOTO 4<\/span>\r\n\r\n      <\/div>\r\n\r\n      <p>You + Me = My Favorite Story \u2764\ufe0f<\/p>\r\n\r\n    <\/article>\r\n\r\n\r\n  <\/div>\r\n\r\n  <p class=\"hint\">\r\n\r\n    Tap any photo to open full screen \u2764\ufe0f\r\n\r\n  <\/p>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- LOVE LETTER -->\r\n\r\n<section class=\"section reveal\">\r\n\r\n  <small>ONLY FOR YOU \ud83d\udc8c<\/small>\r\n\r\n  <h2>I Wrote Something For You...<\/h2>\r\n\r\n  <button id=\"envelope\">\ud83d\udc8c<\/button>\r\n\r\n  <br>\r\n\r\n  <button class=\"btn openLetter\">\r\n\r\n    Open My Letter\r\n\r\n  <\/button>\r\n\r\n\r\n  <div id=\"letter\">\r\n\r\n    <h3>My Love \u2764\ufe0f<\/h3>\r\n\r\n    <div id=\"letterText\"><\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- CAKE -->\r\n\r\n<section class=\"section reveal\">\r\n\r\n  <h2>\r\n\r\n    Make A Wish, Meri Jaan... \ud83c\udf82\r\n\r\n  <\/h2>\r\n\r\n\r\n  <div class=\"cake\">\r\n\r\n    <i id=\"flame\"><\/i>\r\n\r\n    <i class=\"candle\"><\/i>\r\n\r\n    <div class=\"top\">\u2764\ufe0f<\/div>\r\n\r\n    <div class=\"bottom\">SAWERA<\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <button class=\"btn\" id=\"blow\">\r\n\r\n    \ud83d\udd6f\ufe0f Blow The Candles\r\n\r\n  <\/button>\r\n\r\n\r\n  <h3 id=\"wish\">\r\n\r\n    \u2728 I Hope Every Wish In Your Heart Comes True \u2764\ufe0f\r\n\r\n  <\/h3>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- REASONS -->\r\n\r\n<section class=\"section reveal\">\r\n\r\n  <small>\r\n\r\n    JUST 10 OF A MILLION REASONS \u2764\ufe0f\r\n\r\n  <\/small>\r\n\r\n  <h2>Why I Love You<\/h2>\r\n\r\n\r\n  <div class=\"reasons\">\r\n\r\n    <div>\u2764\ufe0f Your beautiful smile<\/div>\r\n\r\n    <div>\ud83e\udd79 The way you care<\/div>\r\n\r\n    <div>\ud83d\udc95 Your kind heart<\/div>\r\n\r\n    <div>\ud83d\ude0d The way you look at me<\/div>\r\n\r\n    <div>\ud83d\ude02 Our silly moments<\/div>\r\n\r\n    <div>\ud83e\udd17 Your hugs<\/div>\r\n\r\n    <div>\ud83d\udc96 The peace I feel with you<\/div>\r\n\r\n    <div>\u2728 The memories we create<\/div>\r\n\r\n    <div>\ud83e\udef6 The person you are<\/div>\r\n\r\n    <div>\u2764\ufe0f Because You're YOU<\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- FINAL -->\r\n\r\n<section class=\"final reveal\">\r\n\r\n  <p>In every lifetime...<\/p>\r\n\r\n  <p>In every universe...<\/p>\r\n\r\n  <p>In every version of me...<\/p>\r\n\r\n\r\n  <h2>\r\n\r\n    \u2764\ufe0f I Would Still Choose You \u2764\ufe0f\r\n\r\n  <\/h2>\r\n\r\n\r\n  <h1>\r\n\r\n    Happy Birthday, My Love \ud83c\udf82\r\n\r\n  <\/h1>\r\n\r\n\r\n  <p>\r\n\r\n    I Love You More Than Words Can Say.\r\n\r\n  <\/p>\r\n\r\n\r\n  <button class=\"btn\" id=\"love\">\r\n\r\n    \u2764\ufe0f Tap If You Love Me Too\r\n\r\n  <\/button>\r\n\r\n\r\n  <h2 id=\"knew\">\r\n\r\n    I Knew It \ud83d\ude0c\u2764\ufe0f\ud83d\ude02\r\n\r\n  <\/h2>\r\n\r\n<\/section>\r\n\r\n<\/main>\r\n\r\n\r\n<!-- MUSIC BUTTON -->\r\n\r\n<button id=\"musicBtn\">\ud83c\udfb5<\/button>\r\n\r\n\r\n<!-- PHOTO LIGHTBOX -->\r\n\r\n<div id=\"lightbox\">\r\n\r\n  <button id=\"close\">\u00d7<\/button>\r\n\r\n  <img id=\"bigPhoto\" alt=\"Our Memory\">\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<style>\r\n\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Great+Vibes&family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500&display=swap');\r\n\r\n\r\nhtml{\r\nscroll-behavior:smooth;\r\n}\r\n\r\n\r\n#birthday{\r\n\r\n--pink:#ff9fba;\r\n--gold:#f2c879;\r\n\r\nbackground:#140309;\r\n\r\ncolor:white;\r\n\r\nfont-family:'Poppins',sans-serif;\r\n\r\noverflow:hidden;\r\n\r\nposition:relative;\r\n\r\n}\r\n\r\n\r\n#birthday *{\r\n\r\nbox-sizing:border-box;\r\n\r\n}\r\n\r\n\r\n#fx{\r\n\r\nposition:fixed;\r\n\r\ninset:0;\r\n\r\nwidth:100%;\r\n\r\nheight:100%;\r\n\r\npointer-events:none;\r\n\r\nz-index:10000;\r\n\r\n}\r\n\r\n\r\n\/* OPENING *\/\r\n\r\n\r\n#gate{\r\n\r\nposition:fixed;\r\n\r\ninset:0;\r\n\r\nz-index:9999;\r\n\r\nmin-height:100vh;\r\n\r\ndisplay:flex;\r\n\r\nflex-direction:column;\r\n\r\nalign-items:center;\r\n\r\njustify-content:center;\r\n\r\ntext-align:center;\r\n\r\npadding:25px;\r\n\r\nbackground:\r\n\r\nradial-gradient(\r\n\r\ncircle at 50% 25%,\r\n\r\n#7a193d,\r\n\r\n#280711 48%,\r\n\r\n#070103\r\n\r\n);\r\n\r\ntransition:1.1s;\r\n\r\n}\r\n\r\n\r\n#gate.hide{\r\n\r\nopacity:0;\r\n\r\nvisibility:hidden;\r\n\r\ntransform:scale(1.12);\r\n\r\n}\r\n\r\n\r\n#gate h1,\r\n\r\n.hero b,\r\n\r\n.section h2,\r\n\r\n.final h1,\r\n\r\n.final h2,\r\n\r\n#letter h3{\r\n\r\nfont-family:'Great Vibes',cursive;\r\n\r\n}\r\n\r\n\r\n#gate h1{\r\n\r\nfont-size:clamp(52px,9vw,88px);\r\n\r\ncolor:var(--pink);\r\n\r\nmargin:5px 0 25px;\r\n\r\ntext-shadow:0 0 30px #ff3f76;\r\n\r\n}\r\n\r\n\r\n#gate em{\r\n\r\ndisplay:block;\r\n\r\nmargin-top:15px;\r\n\r\nopacity:.7;\r\n\r\nfont-size:12px;\r\n\r\n}\r\n\r\n\r\n.heart{\r\n\r\nfont-size:70px;\r\n\r\ncolor:#ff416f;\r\n\r\nanimation:beat 1s infinite;\r\n\r\n}\r\n\r\n\r\n#birthday small{\r\n\r\ncolor:var(--gold);\r\n\r\nletter-spacing:5px;\r\n\r\nfont-size:12px;\r\n\r\n}\r\n\r\n\r\nbutton,\r\n\r\n.btn{\r\n\r\nborder:0;\r\n\r\ndisplay:inline-block;\r\n\r\nbackground:\r\n\r\nlinear-gradient(\r\n\r\n135deg,\r\n\r\n#ff4775,\r\n\r\n#a70d3c\r\n\r\n);\r\n\r\ncolor:white !important;\r\n\r\npadding:16px 28px;\r\n\r\nborder-radius:50px;\r\n\r\ncursor:pointer;\r\n\r\ntext-decoration:none;\r\n\r\nbox-shadow:\r\n\r\n0 10px 35px\r\n\r\nrgba(255,50,100,.35);\r\n\r\ntransition:.3s;\r\n\r\n}\r\n\r\n\r\nbutton:hover,\r\n\r\n.btn:hover{\r\n\r\ntransform:\r\n\r\ntranslateY(-3px)\r\n\r\nscale(1.03);\r\n\r\n}\r\n\r\n\r\n\/* SITE *\/\r\n\r\n\r\n#site{\r\n\r\nopacity:0;\r\n\r\ntransition:1.4s;\r\n\r\n}\r\n\r\n\r\n#site.show{\r\n\r\nopacity:1;\r\n\r\n}\r\n\r\n\r\n\/* HERO *\/\r\n\r\n\r\n.hero{\r\n\r\nmin-height:100vh;\r\n\r\ndisplay:flex;\r\n\r\nflex-direction:column;\r\n\r\nalign-items:center;\r\n\r\njustify-content:center;\r\n\r\ntext-align:center;\r\n\r\npadding:70px 20px;\r\n\r\nbackground:\r\n\r\nradial-gradient(\r\n\r\ncircle at top,\r\n\r\n#701536,\r\n\r\n#260611 50%,\r\n\r\n#100106\r\n\r\n);\r\n\r\n}\r\n\r\n\r\n.hero h1{\r\n\r\nfont-family:\r\n\r\n'Playfair Display',\r\n\r\nserif;\r\n\r\nfont-size:\r\n\r\nclamp(38px,6vw,62px);\r\n\r\nline-height:1.15;\r\n\r\n}\r\n\r\n\r\n.hero b{\r\n\r\ncolor:var(--pink);\r\n\r\nfont-size:\r\n\r\nclamp(55px,8vw,88px);\r\n\r\n}\r\n\r\n\r\n#typing{\r\n\r\nmax-width:680px;\r\n\r\nmin-height:75px;\r\n\r\nline-height:1.8;\r\n\r\ncolor:#ffdce6;\r\n\r\n}\r\n\r\n\r\n\/* PHOTOS *\/\r\n\r\n\r\n.photo{\r\n\r\nbackground:\r\n\r\nlinear-gradient(\r\n\r\n135deg,\r\n\r\n#5e1730,\r\n\r\n#240711\r\n\r\n);\r\n\r\nmin-height:300px;\r\n\r\ndisplay:flex;\r\n\r\nalign-items:center;\r\n\r\njustify-content:center;\r\n\r\ncolor:#ffadc3;\r\n\r\nborder:\r\n\r\n1px solid\r\n\r\nrgba(255,255,255,.16);\r\n\r\noverflow:hidden;\r\n\r\ncursor:pointer;\r\n\r\n}\r\n\r\n\r\n.photo img{\r\n\r\nwidth:100%;\r\n\r\nheight:100%;\r\n\r\nobject-fit:cover;\r\n\r\ndisplay:block;\r\n\r\n}\r\n\r\n\r\n.round{\r\n\r\nwidth:280px;\r\n\r\nheight:280px;\r\n\r\nmin-height:280px;\r\n\r\nborder-radius:50%;\r\n\r\nborder:\r\n\r\n4px solid\r\n\r\nvar(--gold);\r\n\r\nbox-shadow:\r\n\r\n0 0 45px\r\n\r\nrgba(255,75,125,.5);\r\n\r\nanimation:\r\n\r\nfloat 3s\r\n\r\nease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n\/* SECTIONS *\/\r\n\r\n\r\n.section{\r\n\r\npadding:100px 20px;\r\n\r\ntext-align:center;\r\n\r\nmax-width:1100px;\r\n\r\nmargin:auto;\r\n\r\n}\r\n\r\n\r\n.section h2,\r\n\r\n.final h2{\r\n\r\nfont-size:\r\n\r\nclamp(44px,7vw,68px);\r\n\r\ncolor:var(--pink);\r\n\r\n}\r\n\r\n\r\n.copy{\r\n\r\nmax-width:720px;\r\n\r\nmargin:auto;\r\n\r\nline-height:2;\r\n\r\nfont:\r\n\r\n21px\r\n\r\n'Playfair Display',\r\n\r\nserif;\r\n\r\n}\r\n\r\n\r\n\/* MEMORY GRID *\/\r\n\r\n\r\n.grid{\r\n\r\ndisplay:grid;\r\n\r\ngrid-template-columns:\r\n\r\nrepeat(2,1fr);\r\n\r\ngap:30px;\r\n\r\nmargin-top:50px;\r\n\r\n}\r\n\r\n\r\n.grid article{\r\n\r\nbackground:#fff4ee;\r\n\r\npadding:\r\n\r\n15px 15px 25px;\r\n\r\ncolor:#501127;\r\n\r\ntransform:rotate(-2deg);\r\n\r\nbox-shadow:\r\n\r\n0 20px 50px\r\n\r\nrgba(0,0,0,.4);\r\n\r\ntransition:.4s;\r\n\r\n}\r\n\r\n\r\n.grid article:nth-child(even){\r\n\r\ntransform:rotate(2deg);\r\n\r\n}\r\n\r\n\r\n.grid article:hover{\r\n\r\ntransform:\r\n\r\nrotate(0)\r\n\r\nscale(1.03);\r\n\r\n}\r\n\r\n\r\n.grid article p{\r\n\r\nfont:\r\n\r\n27px\r\n\r\n'Great Vibes',\r\n\r\ncursive;\r\n\r\n}\r\n\r\n\r\n.hint{\r\n\r\nopacity:.6;\r\n\r\nfont-size:13px;\r\n\r\n}\r\n\r\n\r\n\/* LETTER *\/\r\n\r\n\r\n#envelope{\r\n\r\nbackground:none;\r\n\r\nbox-shadow:none;\r\n\r\nfont-size:100px;\r\n\r\nanimation:\r\n\r\nfloat 2.5s infinite;\r\n\r\n}\r\n\r\n\r\n#letter{\r\n\r\nmax-width:700px;\r\n\r\nmargin:45px auto 0;\r\n\r\nbackground:#fff8ec;\r\n\r\ncolor:#511326;\r\n\r\npadding:0 45px;\r\n\r\ntext-align:left;\r\n\r\nline-height:2;\r\n\r\nmax-height:0;\r\n\r\nopacity:0;\r\n\r\noverflow:hidden;\r\n\r\ntransform:scaleY(0);\r\n\r\ntransform-origin:top;\r\n\r\ntransition:1s;\r\n\r\n}\r\n\r\n\r\n#letter.open{\r\n\r\npadding-top:45px;\r\n\r\npadding-bottom:45px;\r\n\r\nmax-height:1800px;\r\n\r\nopacity:1;\r\n\r\ntransform:scaleY(1);\r\n\r\n}\r\n\r\n\r\n#letter h3{\r\n\r\nfont-size:50px;\r\n\r\nmargin:0;\r\n\r\n}\r\n\r\n\r\n\/* CAKE *\/\r\n\r\n\r\n.cake{\r\n\r\nwidth:260px;\r\n\r\nheight:280px;\r\n\r\nmargin:35px auto;\r\n\r\ndisplay:flex;\r\n\r\nflex-direction:column;\r\n\r\nalign-items:center;\r\n\r\njustify-content:flex-end;\r\n\r\n}\r\n\r\n\r\n.cake i{\r\n\r\ndisplay:block;\r\n\r\n}\r\n\r\n\r\n.candle{\r\n\r\nwidth:16px;\r\n\r\nheight:60px;\r\n\r\nbackground:\r\n\r\nrepeating-linear-gradient(\r\n\r\n45deg,\r\n\r\nwhite 0 8px,\r\n\r\n#ff8eaa 8px 16px\r\n\r\n);\r\n\r\n}\r\n\r\n\r\n#flame{\r\n\r\nwidth:24px;\r\n\r\nheight:34px;\r\n\r\nbackground:#ffd35c;\r\n\r\nborder-radius:60% 40%;\r\n\r\nbox-shadow:\r\n\r\n0 0 25px\r\n\r\n#ff8a00;\r\n\r\nanimation:\r\n\r\nflame .45s\r\n\r\ninfinite alternate;\r\n\r\ntransition:.5s;\r\n\r\n}\r\n\r\n\r\n.top,\r\n\r\n.bottom{\r\n\r\ndisplay:flex;\r\n\r\nalign-items:center;\r\n\r\njustify-content:center;\r\n\r\nfont-weight:600;\r\n\r\nletter-spacing:4px;\r\n\r\n}\r\n\r\n\r\n.top{\r\n\r\nwidth:210px;\r\n\r\nheight:70px;\r\n\r\nbackground:#ff9ab5;\r\n\r\nborder-radius:\r\n\r\n20px 20px 8px 8px;\r\n\r\n}\r\n\r\n\r\n.bottom{\r\n\r\nwidth:260px;\r\n\r\nheight:100px;\r\n\r\nbackground:#8e1740;\r\n\r\nborder-radius:12px;\r\n\r\n}\r\n\r\n\r\n#wish,\r\n\r\n#knew{\r\n\r\nopacity:0;\r\n\r\ntransform:scale(.4);\r\n\r\ntransition:.8s;\r\n\r\ncolor:var(--gold);\r\n\r\n}\r\n\r\n\r\n#wish.show,\r\n\r\n#knew.show{\r\n\r\nopacity:1;\r\n\r\ntransform:scale(1);\r\n\r\n}\r\n\r\n\r\n\/* REASONS *\/\r\n\r\n\r\n.reasons{\r\n\r\ndisplay:grid;\r\n\r\ngrid-template-columns:\r\n\r\nrepeat(2,1fr);\r\n\r\ngap:15px;\r\n\r\n}\r\n\r\n\r\n.reasons div{\r\n\r\npadding:25px;\r\n\r\nbackground:\r\n\r\nrgba(255,255,255,.06);\r\n\r\nborder:\r\n\r\n1px solid\r\n\r\nrgba(255,150,180,.15);\r\n\r\nborder-radius:15px;\r\n\r\n}\r\n\r\n\r\n\/* FINAL *\/\r\n\r\n\r\n.final{\r\n\r\nmin-height:100vh;\r\n\r\npadding:100px 20px;\r\n\r\nbackground:\r\n\r\nradial-gradient(\r\n\r\ncircle,\r\n\r\n#741536,\r\n\r\n#240510 50%,\r\n\r\n#070103\r\n\r\n);\r\n\r\ndisplay:flex;\r\n\r\nflex-direction:column;\r\n\r\nalign-items:center;\r\n\r\njustify-content:center;\r\n\r\ntext-align:center;\r\n\r\n}\r\n\r\n\r\n.final h1{\r\n\r\nfont-size:\r\n\r\nclamp(52px,8vw,88px);\r\n\r\ncolor:#ffadc3;\r\n\r\n}\r\n\r\n\r\n.final p{\r\n\r\nfont:\r\n\r\n20px\r\n\r\n'Playfair Display',\r\n\r\nserif;\r\n\r\n}\r\n\r\n\r\n\/* MUSIC *\/\r\n\r\n\r\n#musicBtn{\r\n\r\nposition:fixed;\r\n\r\nright:18px;\r\n\r\nbottom:18px;\r\n\r\nz-index:9000;\r\n\r\nwidth:52px;\r\n\r\nheight:52px;\r\n\r\npadding:0;\r\n\r\nbackground:\r\n\r\nrgba(83,9,35,.8);\r\n\r\nborder:\r\n\r\n1px solid\r\n\r\nrgba(255,255,255,.25);\r\n\r\n}\r\n\r\n\r\n.playing{\r\n\r\nanimation:\r\n\r\nspin 4s linear infinite;\r\n\r\n}\r\n\r\n\r\n\/* LIGHTBOX *\/\r\n\r\n\r\n#lightbox{\r\n\r\nposition:fixed;\r\n\r\ninset:0;\r\n\r\nz-index:9998;\r\n\r\nbackground:\r\n\r\nrgba(5,0,3,.95);\r\n\r\ndisplay:flex;\r\n\r\nalign-items:center;\r\n\r\njustify-content:center;\r\n\r\npadding:25px;\r\n\r\nopacity:0;\r\n\r\nvisibility:hidden;\r\n\r\ntransition:.4s;\r\n\r\n}\r\n\r\n\r\n#lightbox.open{\r\n\r\nopacity:1;\r\n\r\nvisibility:visible;\r\n\r\n}\r\n\r\n\r\n#lightbox img{\r\n\r\nmax-width:95%;\r\n\r\nmax-height:88vh;\r\n\r\nobject-fit:contain;\r\n\r\nborder:\r\n\r\n3px solid\r\n\r\nvar(--gold);\r\n\r\n}\r\n\r\n\r\n#close{\r\n\r\nposition:absolute;\r\n\r\nright:20px;\r\n\r\ntop:15px;\r\n\r\nbackground:none;\r\n\r\nbox-shadow:none;\r\n\r\nfont-size:45px;\r\n\r\n}\r\n\r\n\r\n\/* SCROLL ANIMATION *\/\r\n\r\n\r\n.reveal{\r\n\r\nopacity:0;\r\n\r\ntransform:\r\n\r\ntranslateY(45px);\r\n\r\ntransition:1s;\r\n\r\n}\r\n\r\n\r\n.reveal.visible{\r\n\r\nopacity:1;\r\n\r\ntransform:none;\r\n\r\n}\r\n\r\n\r\n\/* ANIMATIONS *\/\r\n\r\n\r\n@keyframes beat{\r\n\r\n50%{\r\n\r\ntransform:scale(1.25);\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n@keyframes float{\r\n\r\n50%{\r\n\r\ntransform:translateY(-15px);\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n@keyframes flame{\r\n\r\nto{\r\n\r\ntransform:\r\n\r\nscale(1.2)\r\n\r\nrotate(7deg);\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n@keyframes spin{\r\n\r\nto{\r\n\r\ntransform:rotate(360deg);\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n\/* MOBILE *\/\r\n\r\n\r\n@media(max-width:600px){\r\n\r\n.grid,\r\n\r\n.reasons{\r\n\r\ngrid-template-columns:1fr;\r\n\r\n}\r\n\r\n\r\n.round{\r\n\r\nwidth:220px;\r\n\r\nheight:220px;\r\n\r\nmin-height:220px;\r\n\r\n}\r\n\r\n\r\n.section{\r\n\r\npadding:80px 18px;\r\n\r\n}\r\n\r\n\r\n#letter{\r\n\r\npadding-left:22px;\r\n\r\npadding-right:22px;\r\n\r\n}\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\n(function(){\r\n\r\nconst R = document.getElementById('birthday');\r\n\r\nconst $ = s => R.querySelector(s);\r\n\r\nconst $$ = s => [...R.querySelectorAll(s)];\r\n\r\nconst audio = $('#music');\r\n\r\nconst canvas = $('#fx');\r\n\r\nconst ctx = canvas.getContext('2d');\r\n\r\nlet particles = [];\r\n\r\nlet typed = false;\r\n\r\nlet letterDone = false;\r\n\r\n\r\nfunction resize(){\r\n\r\ncanvas.width = window.innerWidth;\r\n\r\ncanvas.height = window.innerHeight;\r\n\r\n}\r\n\r\n\r\nresize();\r\n\r\nwindow.addEventListener('resize',resize);\r\n\r\n\r\nfunction burst(amount){\r\n\r\nfor(let i=0;i<amount;i++){\r\n\r\nparticles.push({\r\n\r\nx:window.innerWidth\/2,\r\n\r\ny:window.innerHeight\/2,\r\n\r\nvx:(Math.random()-.5)*14,\r\n\r\nvy:(Math.random()-.8)*13,\r\n\r\nsize:Math.random()*18+10,\r\n\r\nlife:110,\r\n\r\nchar:[\r\n\r\n'\u2764\ufe0f',\r\n\r\n'\ud83d\udc96',\r\n\r\n'\u2728',\r\n\r\n'\ud83c\udf39',\r\n\r\n'\ud83c\udf89'\r\n\r\n][Math.floor(Math.random()*5)]\r\n\r\n});\r\n\r\n}\r\n\r\n}\r\n\r\n\r\nfunction animate(){\r\n\r\nctx.clearRect(\r\n\r\n0,\r\n\r\n0,\r\n\r\ncanvas.width,\r\n\r\ncanvas.height\r\n\r\n);\r\n\r\n\r\nparticles.forEach((p,index)=>{\r\n\r\nctx.globalAlpha = p.life\/110;\r\n\r\nctx.font = p.size+'px Arial';\r\n\r\nctx.fillText(\r\n\r\np.char,\r\n\r\np.x,\r\n\r\np.y\r\n\r\n);\r\n\r\n\r\np.x += p.vx;\r\n\r\np.y += p.vy;\r\n\r\np.vy += .09;\r\n\r\np.life--;\r\n\r\n\r\nif(p.life<=0){\r\n\r\nparticles.splice(index,1);\r\n\r\n}\r\n\r\n});\r\n\r\n\r\nctx.globalAlpha=1;\r\n\r\nrequestAnimationFrame(animate);\r\n\r\n}\r\n\r\n\r\nanimate();\r\n\r\n\r\nasync function playMusic(){\r\n\r\ntry{\r\n\r\nawait audio.play();\r\n\r\n$('#musicBtn').textContent='\ud83c\udfb6';\r\n\r\n$('#musicBtn').classList.add('playing');\r\n\r\n}\r\n\r\ncatch(e){}\r\n\r\n}\r\n\r\n\r\nfunction typeHero(){\r\n\r\nif(typed)return;\r\n\r\ntyped=true;\r\n\r\n\r\nconst text =\r\n\r\n\"Today isn't just your birthday... It's the day my favorite person came into this world. \u2764\ufe0f\";\r\n\r\n\r\nlet i=0;\r\n\r\nconst element=$('#typing');\r\n\r\n\r\nconst timer=setInterval(()=>{\r\n\r\nelement.textContent += text.charAt(i);\r\n\r\ni++;\r\n\r\n\r\nif(i>=text.length){\r\n\r\nclearInterval(timer);\r\n\r\n}\r\n\r\n},48);\r\n\r\n}\r\n\r\n\r\nfunction openLetter(){\r\n\r\n$('#letter').classList.add('open');\r\n\r\nburst(35);\r\n\r\n\r\nif(letterDone)return;\r\n\r\nletterDone=true;\r\n\r\n\r\nconst lines=[\r\n\r\n\"I don't know if words will ever be enough to explain how special you are to me.\",\r\n\r\n\"You are not only my wife...\",\r\n\r\n\"You are my happiness, my peace, my best friend, and the most beautiful part of my life.\",\r\n\r\n\"Every moment with you becomes a memory I want to keep forever.\",\r\n\r\n\"On your birthday, I just want you to know one thing...\",\r\n\r\n\"If I had to choose again, I would choose you. Every single time. \u2764\ufe0f\",\r\n\r\n\"Happy Birthday, Meri Jaan. \ud83c\udf82\u2764\ufe0f\",\r\n\r\n\"Forever Yours, Naeem \u2764\ufe0f\"\r\n\r\n];\r\n\r\n\r\nconst box=$('#letterText');\r\n\r\nlet line=0;\r\n\r\nlet character=0;\r\n\r\nlet paragraph;\r\n\r\n\r\nfunction typeLetter(){\r\n\r\nif(line>=lines.length)return;\r\n\r\n\r\nif(character===0){\r\n\r\nparagraph=document.createElement('p');\r\n\r\nbox.appendChild(paragraph);\r\n\r\n}\r\n\r\n\r\nif(character<lines[line].length){\r\n\r\nparagraph.textContent +=\r\n\r\nlines[line].charAt(character);\r\n\r\ncharacter++;\r\n\r\nsetTimeout(typeLetter,22);\r\n\r\n}\r\n\r\nelse{\r\n\r\nline++;\r\n\r\ncharacter=0;\r\n\r\nsetTimeout(typeLetter,180);\r\n\r\n}\r\n\r\n}\r\n\r\n\r\ntypeLetter();\r\n\r\n}\r\n\r\n\r\n$('#enter').onclick=function(){\r\n\r\n$('#gate').classList.add('hide');\r\n\r\n$('#site').classList.add('show');\r\n\r\nplayMusic();\r\n\r\ntypeHero();\r\n\r\nburst(100);\r\n\r\n};\r\n\r\n\r\n$('#musicBtn').onclick=function(){\r\n\r\nif(audio.paused){\r\n\r\nplayMusic();\r\n\r\n}\r\n\r\nelse{\r\n\r\naudio.pause();\r\n\r\nthis.textContent='\ud83d\udd07';\r\n\r\nthis.classList.remove('playing');\r\n\r\n}\r\n\r\n};\r\n\r\n\r\n$('#envelope').onclick=openLetter;\r\n\r\n$('.openLetter').onclick=openLetter;\r\n\r\n\r\n$('#blow').onclick=function(){\r\n\r\n$('#flame').style.opacity='0';\r\n\r\n$('#wish').classList.add('show');\r\n\r\nburst(180);\r\n\r\n};\r\n\r\n\r\n$('#love').onclick=function(){\r\n\r\n$('#knew').classList.add('show');\r\n\r\nburst(250);\r\n\r\n};\r\n\r\n\r\n\/* PHOTO LIGHTBOX *\/\r\n\r\n\r\n$$('.photo').forEach(photo=>{\r\n\r\nphoto.onclick=function(){\r\n\r\nconst image=photo.querySelector('img');\r\n\r\n\r\nif(image){\r\n\r\n$('#bigPhoto').src=image.src;\r\n\r\n$('#lightbox').classList.add('open');\r\n\r\n}\r\n\r\n};\r\n\r\n});\r\n\r\n\r\n$('#close').onclick=function(){\r\n\r\n$('#lightbox').classList.remove('open');\r\n\r\n};\r\n\r\n\r\n$('#lightbox').onclick=function(e){\r\n\r\nif(e.target.id==='lightbox'){\r\n\r\n$('#lightbox').classList.remove('open');\r\n\r\n}\r\n\r\n};\r\n\r\n\r\n\/* SCROLL EFFECT *\/\r\n\r\n\r\nconst observer=\r\n\r\nnew IntersectionObserver(entries=>{\r\n\r\nentries.forEach(entry=>{\r\n\r\nif(entry.isIntersecting){\r\n\r\nentry.target.classList.add('visible');\r\n\r\n}\r\n\r\n});\r\n\r\n},{\r\n\r\nthreshold:.12\r\n\r\n});\r\n\r\n\r\n$$('.reveal').forEach(element=>{\r\n\r\nobserver.observe(element);\r\n\r\n});\r\n\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2665 17 \u2022 07 \u2022 2026 A little surprise for someone special&#8230; Sawera Sehar \u2764\ufe0f Tap to Enter Our Story \u2728 \ud83c\udfb5 Tap starts the music ADD HER PHOTO \u2764\ufe0f 17 \u2022 07 \u2022 2026 Happy Birthday Sawera Sehar \u2764\ufe0f \u2728 Begin Our Little Journey OUR STORY \u2764\ufe0f Then I Met You&#8230; I never knew [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naeemtechnologies.net\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naeemtechnologies.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/naeemtechnologies.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/naeemtechnologies.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naeemtechnologies.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":4,"href":"https:\/\/naeemtechnologies.net\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/naeemtechnologies.net\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/naeemtechnologies.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}