{"id":14,"date":"2026-09-05T07:55:08","date_gmt":"2026-09-05T07:55:08","guid":{"rendered":"https:\/\/digitalshankar.in\/?page_id=14"},"modified":"2026-09-05T07:55:58","modified_gmt":"2026-09-05T07:55:58","slug":"home-1","status":"publish","type":"page","link":"https:\/\/digitalshankar.in\/?page_id=14","title":{"rendered":"home 1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14\" class=\"elementor elementor-14\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6531fd e-con-full e-flex e-con e-parent\" data-id=\"b6531fd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a20a7f3 elementor-widget elementor-widget-html\" data-id=\"a20a7f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t```html\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n    <title>Shankar \u2014 Creative Web Developer & Freelancer<\/title>\r\n\r\n    <meta name=\"description\"\r\n        content=\"Shankar is a creative web developer and freelancer creating modern, responsive and high-performing websites for businesses and brands.\">\r\n\r\n    <meta name=\"keywords\"\r\n        content=\"web developer, web designer, freelancer, website development, WordPress developer, SEO\">\r\n\r\n    <meta name=\"author\" content=\"Shankar\">\r\n\r\n    <style>\r\n        \/* =========================\r\n           RESET\r\n        ========================= *\/\r\n\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        html {\r\n            scroll-behavior: smooth;\r\n        }\r\n\r\n        body {\r\n            font-family: Arial, Helvetica, sans-serif;\r\n            background: #f7f7f4;\r\n            color: #111111;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        a {\r\n            text-decoration: none;\r\n            color: inherit;\r\n        }\r\n\r\n        ul {\r\n            list-style: none;\r\n        }\r\n\r\n        img {\r\n            max-width: 100%;\r\n            display: block;\r\n        }\r\n\r\n        .container {\r\n            width: 90%;\r\n            max-width: 1250px;\r\n            margin: auto;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           HEADER\r\n        ========================= *\/\r\n\r\n        header {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            z-index: 999;\r\n            background: rgba(247, 247, 244, 0.9);\r\n            backdrop-filter: blur(15px);\r\n            border-bottom: 1px solid #deded9;\r\n        }\r\n\r\n        .navbar {\r\n            height: 78px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n        }\r\n\r\n        .logo {\r\n            font-size: 27px;\r\n            font-weight: 900;\r\n            letter-spacing: -1px;\r\n        }\r\n\r\n        .logo span {\r\n            color: #ff4d4d;\r\n        }\r\n\r\n        .nav-links {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 32px;\r\n        }\r\n\r\n        .nav-links a {\r\n            font-size: 15px;\r\n            font-weight: 600;\r\n            color: #333;\r\n            transition: 0.3s;\r\n        }\r\n\r\n        .nav-links a:hover {\r\n            color: #ff4d4d;\r\n        }\r\n\r\n        .nav-btn {\r\n            background: #111;\r\n            color: #fff !important;\r\n            padding: 11px 19px;\r\n            border-radius: 50px;\r\n        }\r\n\r\n        .nav-btn:hover {\r\n            background: #ff4d4d;\r\n        }\r\n\r\n        .menu-btn {\r\n            display: none;\r\n            font-size: 28px;\r\n            cursor: pointer;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           HERO\r\n        ========================= *\/\r\n\r\n        .hero {\r\n            min-height: 100vh;\r\n            padding-top: 150px;\r\n            padding-bottom: 80px;\r\n            display: flex;\r\n            align-items: center;\r\n            background:\r\n                radial-gradient(circle at 85% 20%, #ffcece, transparent 30%),\r\n                radial-gradient(circle at 10% 80%, #d9d1ff, transparent 28%);\r\n        }\r\n\r\n        .hero-grid {\r\n            display: grid;\r\n            grid-template-columns: 1.15fr 0.85fr;\r\n            gap: 70px;\r\n            align-items: center;\r\n        }\r\n\r\n        .hero-label {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            padding: 8px 15px;\r\n            background: #fff;\r\n            border: 1px solid #deded9;\r\n            border-radius: 50px;\r\n            font-size: 13px;\r\n            font-weight: 700;\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        .status-dot {\r\n            width: 9px;\r\n            height: 9px;\r\n            border-radius: 50%;\r\n            background: #20b26b;\r\n        }\r\n\r\n        .hero h1 {\r\n            font-size: clamp(50px, 7vw, 92px);\r\n            line-height: 0.96;\r\n            letter-spacing: -4px;\r\n            max-width: 900px;\r\n        }\r\n\r\n        .hero h1 .red {\r\n            color: #ff4d4d;\r\n        }\r\n\r\n        .hero h1 .purple {\r\n            color: #7357ff;\r\n        }\r\n\r\n        .hero-text {\r\n            max-width: 650px;\r\n            color: #626262;\r\n            font-size: 19px;\r\n            margin: 30px 0;\r\n        }\r\n\r\n        .hero-buttons {\r\n            display: flex;\r\n            gap: 14px;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .btn {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 15px 25px;\r\n            border-radius: 7px;\r\n            font-weight: 700;\r\n            transition: 0.3s;\r\n        }\r\n\r\n        .btn-dark {\r\n            background: #111;\r\n            color: #fff;\r\n        }\r\n\r\n        .btn-dark:hover {\r\n            background: #ff4d4d;\r\n            transform: translateY(-3px);\r\n        }\r\n\r\n        .btn-light {\r\n            border: 1px solid #cfcfc9;\r\n            background: #fff;\r\n        }\r\n\r\n        .btn-light:hover {\r\n            border-color: #111;\r\n            transform: translateY(-3px);\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           CREATIVE CARD\r\n        ========================= *\/\r\n\r\n        .creative-card {\r\n            position: relative;\r\n            min-height: 500px;\r\n            border-radius: 30px;\r\n            background: #111;\r\n            overflow: hidden;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        .circle-one,\r\n        .circle-two,\r\n        .circle-three {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n        }\r\n\r\n        .circle-one {\r\n            width: 300px;\r\n            height: 300px;\r\n            background: #ff4d4d;\r\n            top: -80px;\r\n            right: -80px;\r\n        }\r\n\r\n        .circle-two {\r\n            width: 220px;\r\n            height: 220px;\r\n            background: #7357ff;\r\n            bottom: -70px;\r\n            left: -50px;\r\n        }\r\n\r\n        .circle-three {\r\n            width: 120px;\r\n            height: 120px;\r\n            background: #ffce4a;\r\n            top: 45%;\r\n            left: 40%;\r\n        }\r\n\r\n        .creative-text {\r\n            position: relative;\r\n            z-index: 2;\r\n            color: #fff;\r\n            text-align: center;\r\n            font-size: 70px;\r\n            font-weight: 900;\r\n            line-height: 0.9;\r\n            transform: rotate(-7deg);\r\n        }\r\n\r\n        .creative-text span {\r\n            display: block;\r\n        }\r\n\r\n        .creative-text .small {\r\n            font-size: 25px;\r\n            letter-spacing: 5px;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           SECTION\r\n        ========================= *\/\r\n\r\n        section {\r\n            padding: 110px 0;\r\n        }\r\n\r\n        .section-head {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            gap: 40px;\r\n            align-items: end;\r\n            margin-bottom: 55px;\r\n        }\r\n\r\n        .section-number {\r\n            font-size: 13px;\r\n            color: #ff4d4d;\r\n            font-weight: 800;\r\n            letter-spacing: 2px;\r\n            text-transform: uppercase;\r\n        }\r\n\r\n        .section-head h2 {\r\n            font-size: clamp(40px, 5vw, 65px);\r\n            line-height: 1;\r\n            letter-spacing: -2px;\r\n            margin-top: 12px;\r\n        }\r\n\r\n        .section-head p {\r\n            max-width: 470px;\r\n            color: #6c6c6c;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           SERVICES\r\n        ========================= *\/\r\n\r\n        .services {\r\n            background: #111;\r\n            color: #fff;\r\n        }\r\n\r\n        .services .section-head p {\r\n            color: #aaa;\r\n        }\r\n\r\n        .service-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 18px;\r\n        }\r\n\r\n        .service {\r\n            min-height: 300px;\r\n            padding: 32px;\r\n            border: 1px solid #2d2d2d;\r\n            border-radius: 18px;\r\n            transition: 0.4s;\r\n        }\r\n\r\n        .service:hover {\r\n            transform: translateY(-8px);\r\n            border-color: #ff4d4d;\r\n        }\r\n\r\n        .service-number {\r\n            font-size: 13px;\r\n            color: #777;\r\n        }\r\n\r\n        .service-icon {\r\n            font-size: 38px;\r\n            margin: 40px 0 20px;\r\n        }\r\n\r\n        .service h3 {\r\n            font-size: 24px;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .service p {\r\n            color: #999;\r\n            font-size: 15px;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           ABOUT\r\n        ========================= *\/\r\n\r\n        .about-grid {\r\n            display: grid;\r\n            grid-template-columns: 0.85fr 1.15fr;\r\n            gap: 80px;\r\n            align-items: center;\r\n        }\r\n\r\n        .about-image {\r\n            min-height: 520px;\r\n            border-radius: 25px;\r\n            background: #7357ff;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .about-image::before {\r\n            content: \"\";\r\n            width: 300px;\r\n            height: 300px;\r\n            border-radius: 50%;\r\n            background: #ffce4a;\r\n            position: absolute;\r\n            top: -80px;\r\n            right: -80px;\r\n        }\r\n\r\n        .about-image::after {\r\n            content: \"\";\r\n            width: 230px;\r\n            height: 230px;\r\n            border-radius: 50%;\r\n            background: #ff4d4d;\r\n            position: absolute;\r\n            bottom: -70px;\r\n            left: -60px;\r\n        }\r\n\r\n        .about-symbol {\r\n            font-size: 130px;\r\n            font-weight: 900;\r\n            color: #111;\r\n            z-index: 2;\r\n        }\r\n\r\n        .about-content h2 {\r\n            font-size: 55px;\r\n            line-height: 1;\r\n            letter-spacing: -2px;\r\n            margin: 12px 0 25px;\r\n        }\r\n\r\n        .about-content p {\r\n            color: #686868;\r\n            font-size: 17px;\r\n            margin-bottom: 18px;\r\n        }\r\n\r\n        .about-list {\r\n            margin: 25px 0;\r\n        }\r\n\r\n        .about-list li {\r\n            margin-bottom: 10px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .about-list li::before {\r\n            content: \"\u2713\";\r\n            color: #ff4d4d;\r\n            font-weight: bold;\r\n            margin-right: 10px;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           SKILLS\r\n        ========================= *\/\r\n\r\n        .skills {\r\n            background: #e9e9e4;\r\n        }\r\n\r\n        .skills-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            gap: 15px;\r\n        }\r\n\r\n        .skill {\r\n            background: #fff;\r\n            border-radius: 14px;\r\n            padding: 28px;\r\n            text-align: center;\r\n            transition: 0.3s;\r\n        }\r\n\r\n        .skill:hover {\r\n            transform: translateY(-6px);\r\n        }\r\n\r\n        .skill-icon {\r\n            font-size: 38px;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .skill h3 {\r\n            font-size: 18px;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           PORTFOLIO\r\n        ========================= *\/\r\n\r\n        .portfolio-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 25px;\r\n        }\r\n\r\n        .project {\r\n            overflow: hidden;\r\n            border-radius: 20px;\r\n            background: #eee;\r\n        }\r\n\r\n        .project-image {\r\n            height: 350px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 65px;\r\n            transition: 0.4s;\r\n        }\r\n\r\n        .project:nth-child(1) .project-image {\r\n            background: #ffce4a;\r\n        }\r\n\r\n        .project:nth-child(2) .project-image {\r\n            background: #7357ff;\r\n        }\r\n\r\n        .project:nth-child(3) .project-image {\r\n            background: #ff6969;\r\n        }\r\n\r\n        .project:nth-child(4) .project-image {\r\n            background: #62dfae;\r\n        }\r\n\r\n        .project:hover .project-image {\r\n            transform: scale(1.03);\r\n        }\r\n\r\n        .project-info {\r\n            background: #fff;\r\n            padding: 25px;\r\n        }\r\n\r\n        .project-info small {\r\n            color: #777;\r\n        }\r\n\r\n        .project-info h3 {\r\n            font-size: 25px;\r\n            margin: 5px 0;\r\n        }\r\n\r\n        .project-info p {\r\n            color: #777;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           PRICING\r\n        ========================= *\/\r\n\r\n        .pricing {\r\n            background: #111;\r\n            color: #fff;\r\n        }\r\n\r\n        .pricing .section-head p {\r\n            color: #aaa;\r\n        }\r\n\r\n        .pricing-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 20px;\r\n        }\r\n\r\n        .price-card {\r\n            border: 1px solid #2d2d2d;\r\n            border-radius: 18px;\r\n            padding: 35px;\r\n        }\r\n\r\n        .price-card.featured {\r\n            background: #ff4d4d;\r\n            color: #111;\r\n            border-color: #ff4d4d;\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .price-card h3 {\r\n            font-size: 23px;\r\n        }\r\n\r\n        .price {\r\n            font-size: 45px;\r\n            font-weight: 900;\r\n            margin: 20px 0;\r\n        }\r\n\r\n        .price-card ul {\r\n            margin: 25px 0;\r\n        }\r\n\r\n        .price-card li {\r\n            margin: 10px 0;\r\n            color: #aaa;\r\n        }\r\n\r\n        .featured li {\r\n            color: #222;\r\n        }\r\n\r\n        .price-btn {\r\n            width: 100%;\r\n            border: 1px solid #555;\r\n            text-align: center;\r\n            padding: 13px;\r\n            border-radius: 7px;\r\n            display: block;\r\n        }\r\n\r\n        .featured .price-btn {\r\n            background: #111;\r\n            color: #fff;\r\n            border-color: #111;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           TESTIMONIAL\r\n        ========================= *\/\r\n\r\n        .testimonial-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 20px;\r\n        }\r\n\r\n        .testimonial {\r\n            background: #fff;\r\n            border: 1px solid #deded9;\r\n            padding: 30px;\r\n            border-radius: 16px;\r\n        }\r\n\r\n        .stars {\r\n            margin-bottom: 18px;\r\n        }\r\n\r\n        .testimonial p {\r\n            color: #666;\r\n            margin-bottom: 22px;\r\n        }\r\n\r\n        .client {\r\n            font-weight: 800;\r\n        }\r\n\r\n        .client span {\r\n            display: block;\r\n            font-size: 13px;\r\n            color: #999;\r\n            font-weight: normal;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           CONTACT\r\n        ========================= *\/\r\n\r\n        .contact {\r\n            background: #ffce4a;\r\n        }\r\n\r\n        .contact-grid {\r\n            display: grid;\r\n            grid-template-columns: 0.9fr 1.1fr;\r\n            gap: 70px;\r\n            align-items: start;\r\n        }\r\n\r\n        .contact-title {\r\n            font-size: 65px;\r\n            line-height: 0.95;\r\n            letter-spacing: -3px;\r\n            margin: 15px 0 25px;\r\n        }\r\n\r\n        .contact-text {\r\n            color: #4c4c4c;\r\n            max-width: 500px;\r\n        }\r\n\r\n        .contact-info {\r\n            margin-top: 35px;\r\n        }\r\n\r\n        .contact-info p {\r\n            margin-bottom: 10px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .contact-form {\r\n            background: #fff;\r\n            padding: 35px;\r\n            border-radius: 20px;\r\n        }\r\n\r\n        .form-group {\r\n            margin-bottom: 17px;\r\n        }\r\n\r\n        .form-group label {\r\n            display: block;\r\n            font-size: 13px;\r\n            font-weight: 700;\r\n            margin-bottom: 7px;\r\n        }\r\n\r\n        input,\r\n        textarea,\r\n        select {\r\n            width: 100%;\r\n            padding: 15px;\r\n            border: 1px solid #d3d3ce;\r\n            border-radius: 7px;\r\n            outline: none;\r\n            font-family: inherit;\r\n            font-size: 15px;\r\n        }\r\n\r\n        input:focus,\r\n        textarea:focus,\r\n        select:focus {\r\n            border-color: #111;\r\n        }\r\n\r\n        textarea {\r\n            height: 130px;\r\n            resize: vertical;\r\n        }\r\n\r\n        .submit-btn {\r\n            width: 100%;\r\n            border: none;\r\n            cursor: pointer;\r\n            background: #111;\r\n            color: #fff;\r\n            padding: 16px;\r\n            border-radius: 7px;\r\n            font-weight: 800;\r\n            font-size: 15px;\r\n        }\r\n\r\n        .submit-btn:hover {\r\n            background: #ff4d4d;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           FOOTER\r\n        ========================= *\/\r\n\r\n        footer {\r\n            background: #111;\r\n            color: #fff;\r\n            padding: 60px 0 25px;\r\n        }\r\n\r\n        .footer-top {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            gap: 30px;\r\n            margin-bottom: 50px;\r\n        }\r\n\r\n        .footer-logo {\r\n            font-size: 28px;\r\n            font-weight: 900;\r\n        }\r\n\r\n        .footer-logo span {\r\n            color: #ff4d4d;\r\n        }\r\n\r\n        .footer-text {\r\n            color: #888;\r\n            max-width: 400px;\r\n        }\r\n\r\n        .socials {\r\n            display: flex;\r\n            gap: 12px;\r\n        }\r\n\r\n        .socials a {\r\n            width: 42px;\r\n            height: 42px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            border: 1px solid #333;\r\n            border-radius: 50%;\r\n            transition: 0.3s;\r\n        }\r\n\r\n        .socials a:hover {\r\n            background: #ff4d4d;\r\n            border-color: #ff4d4d;\r\n        }\r\n\r\n        .copyright {\r\n            padding-top: 25px;\r\n            border-top: 1px solid #252525;\r\n            color: #666;\r\n            font-size: 14px;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           WHATSAPP\r\n        ========================= *\/\r\n\r\n        .whatsapp {\r\n            position: fixed;\r\n            right: 22px;\r\n            bottom: 22px;\r\n            width: 58px;\r\n            height: 58px;\r\n            border-radius: 50%;\r\n            background: #25D366;\r\n            color: #fff;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 26px;\r\n            z-index: 1000;\r\n            box-shadow: 0 8px 30px #0003;\r\n        }\r\n\r\n\r\n        \/* =========================\r\n           RESPONSIVE\r\n        ========================= *\/\r\n\r\n        @media(max-width: 950px) {\r\n\r\n            .hero-grid,\r\n            .about-grid,\r\n            .contact-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .service-grid,\r\n            .pricing-grid,\r\n            .testimonial-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n            }\r\n\r\n            .skills-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n            }\r\n\r\n            .hero h1 {\r\n                font-size: 60px;\r\n            }\r\n\r\n        }\r\n\r\n\r\n        @media(max-width: 700px) {\r\n\r\n            .navbar {\r\n                height: 68px;\r\n            }\r\n\r\n            .menu-btn {\r\n                display: block;\r\n            }\r\n\r\n            .nav-links {\r\n                position: absolute;\r\n                top: 68px;\r\n                left: 0;\r\n                width: 100%;\r\n                background: #fff;\r\n                display: none;\r\n                flex-direction: column;\r\n                gap: 0;\r\n                border-bottom: 1px solid #ddd;\r\n            }\r\n\r\n            .nav-links.active {\r\n                display: flex;\r\n            }\r\n\r\n            .nav-links li {\r\n                width: 100%;\r\n                padding: 14px 5%;\r\n                border-bottom: 1px solid #eee;\r\n            }\r\n\r\n            .nav-btn {\r\n                display: inline-block;\r\n            }\r\n\r\n            .hero {\r\n                padding-top: 115px;\r\n            }\r\n\r\n            .hero h1 {\r\n                font-size: 48px;\r\n                letter-spacing: -2px;\r\n            }\r\n\r\n            .hero-text {\r\n                font-size: 16px;\r\n            }\r\n\r\n            .creative-card {\r\n                min-height: 360px;\r\n            }\r\n\r\n            .creative-text {\r\n                font-size: 55px;\r\n            }\r\n\r\n            .section-head {\r\n                display: block;\r\n            }\r\n\r\n            .section-head p {\r\n                margin-top: 20px;\r\n            }\r\n\r\n            .service-grid,\r\n            .skills-grid,\r\n            .portfolio-grid,\r\n            .pricing-grid,\r\n            .testimonial-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .about-image {\r\n                min-height: 350px;\r\n            }\r\n\r\n            .about-content h2 {\r\n                font-size: 42px;\r\n            }\r\n\r\n            .project-image {\r\n                height: 250px;\r\n            }\r\n\r\n            .price-card.featured {\r\n                transform: none;\r\n            }\r\n\r\n            .contact-title {\r\n                font-size: 50px;\r\n            }\r\n\r\n            .footer-top {\r\n                flex-direction: column;\r\n            }\r\n\r\n            section {\r\n                padding: 75px 0;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n\r\n<!-- ================= HEADER ================= -->\r\n\r\n<header>\r\n\r\n    <div class=\"container navbar\">\r\n\r\n        <a href=\"#\" class=\"logo\">\r\n            Shankar<span>.<\/span>\r\n        <\/a>\r\n\r\n        <div class=\"menu-btn\" onclick=\"toggleMenu()\">\r\n            \u2630\r\n        <\/div>\r\n\r\n        <ul class=\"nav-links\" id=\"navLinks\">\r\n\r\n            <li><a href=\"#home\">Home<\/a><\/li>\r\n            <li><a href=\"#services\">Services<\/a><\/li>\r\n            <li><a href=\"#about\">About<\/a><\/li>\r\n            <li><a href=\"#work\">Work<\/a><\/li>\r\n            <li><a href=\"#pricing\">Pricing<\/a><\/li>\r\n            <li><a href=\"#contact\" class=\"nav-btn\">Let's Talk \u2192<\/a><\/li>\r\n\r\n        <\/ul>\r\n\r\n    <\/div>\r\n\r\n<\/header>\r\n\r\n\r\n<!-- ================= HERO ================= -->\r\n\r\n<section class=\"hero\" id=\"home\">\r\n\r\n    <div class=\"container hero-grid\">\r\n\r\n        <div>\r\n\r\n            <div class=\"hero-label\">\r\n                <span class=\"status-dot\"><\/span>\r\n                Available for freelance projects\r\n            <\/div>\r\n\r\n            <h1>\r\n                Creative\r\n                <span class=\"red\">websites<\/span>\r\n                for\r\n                <span class=\"purple\">bold ideas.<\/span>\r\n            <\/h1>\r\n\r\n            <p class=\"hero-text\">\r\n                I design and develop modern websites that help\r\n                businesses look better, perform faster and grow\r\n                online.\r\n            <\/p>\r\n\r\n            <div class=\"hero-buttons\">\r\n\r\n                <a href=\"#contact\" class=\"btn btn-dark\">\r\n                    Start a Project \u2192\r\n                <\/a>\r\n\r\n                <a href=\"#work\" class=\"btn btn-light\">\r\n                    View My Work\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"creative-card\">\r\n\r\n            <div class=\"circle-one\"><\/div>\r\n            <div class=\"circle-two\"><\/div>\r\n            <div class=\"circle-three\"><\/div>\r\n\r\n            <div class=\"creative-text\">\r\n\r\n                <span class=\"small\">DESIGN<\/span>\r\n\r\n                <span>CREATE<\/span>\r\n\r\n                <span>LAUNCH<\/span>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ================= SERVICES ================= -->\r\n\r\n<section class=\"services\" id=\"services\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"section-head\">\r\n\r\n            <div>\r\n                <div class=\"section-number\">\r\n                    01 \u2014 Services\r\n                <\/div>\r\n\r\n                <h2>\r\n                    What I<br>\r\n                    Can Do.\r\n                <\/h2>\r\n            <\/div>\r\n\r\n            <p>\r\n                From simple business websites to complete digital\r\n                experiences, I build solutions designed around your\r\n                goals.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"service-grid\">\r\n\r\n            <div class=\"service\">\r\n\r\n                <div class=\"service-number\">01<\/div>\r\n\r\n                <div class=\"service-icon\">\ud83c\udf10<\/div>\r\n\r\n                <h3>Web Development<\/h3>\r\n\r\n                <p>\r\n                    Fast, responsive and professional websites\r\n                    built using modern technologies.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"service\">\r\n\r\n                <div class=\"service-number\">02<\/div>\r\n\r\n                <div class=\"service-icon\">\ud83c\udfa8<\/div>\r\n\r\n                <h3>UI \/ UX Design<\/h3>\r\n\r\n                <p>\r\n                    Clean and creative interfaces designed to\r\n                    give your visitors a great experience.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"service\">\r\n\r\n                <div class=\"service-number\">03<\/div>\r\n\r\n                <div class=\"service-icon\">\u26a1<\/div>\r\n\r\n                <h3>WordPress<\/h3>\r\n\r\n                <p>\r\n                    Custom WordPress websites that are easy to\r\n                    manage, update and scale.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"service\">\r\n\r\n                <div class=\"service-number\">04<\/div>\r\n\r\n                <div class=\"service-icon\">\ud83d\udcf1<\/div>\r\n\r\n                <h3>Responsive Design<\/h3>\r\n\r\n                <p>\r\n                    Pixel-perfect layouts that work beautifully\r\n                    across mobile, tablet and desktop.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"service\">\r\n\r\n                <div class=\"service-number\">05<\/div>\r\n\r\n                <div class=\"service-icon\">\ud83d\udd0e<\/div>\r\n\r\n                <h3>SEO Optimization<\/h3>\r\n\r\n                <p>\r\n                    Search-engine-friendly websites built with\r\n                    clean structure and performance in mind.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"service\">\r\n\r\n                <div class=\"service-number\">06<\/div>\r\n\r\n                <div class=\"service-icon\">\ud83d\udee0\ufe0f<\/div>\r\n\r\n                <h3>Maintenance<\/h3>\r\n\r\n                <p>\r\n                    Website updates, fixes, security and ongoing\r\n                    performance improvements.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ================= ABOUT ================= -->\r\n\r\n<section id=\"about\">\r\n\r\n    <div class=\"container about-grid\">\r\n\r\n        <div class=\"about-image\">\r\n\r\n            <div class=\"about-symbol\">\r\n                &lt;\/&gt;\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"about-content\">\r\n\r\n            <div class=\"section-number\">\r\n                02 \u2014 About Me\r\n            <\/div>\r\n\r\n            <h2>\r\n                Turning ideas into digital experiences.\r\n            <\/h2>\r\n\r\n            <p>\r\n                I'm Shankar, a creative web developer and freelancer\r\n                who loves turning ideas into beautiful and functional\r\n                websites.\r\n            <\/p>\r\n\r\n            <p>\r\n                I focus on creating websites that are not only\r\n                visually impressive but also fast, responsive,\r\n                user-friendly and optimized for search engines.\r\n            <\/p>\r\n\r\n\r\n            <ul class=\"about-list\">\r\n\r\n                <li>Modern & Professional Design<\/li>\r\n                <li>Mobile Responsive<\/li>\r\n                <li>SEO Friendly Structure<\/li>\r\n                <li>Fast Loading Performance<\/li>\r\n                <li>Clean & Maintainable Code<\/li>\r\n\r\n            <\/ul>\r\n\r\n            <a href=\"#contact\" class=\"btn btn-dark\">\r\n                Work With Me \u2192\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ================= SKILLS ================= -->\r\n\r\n<section class=\"skills\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"section-head\">\r\n\r\n            <div>\r\n\r\n                <div class=\"section-number\">\r\n                    03 \u2014 Skills\r\n                <\/div>\r\n\r\n                <h2>\r\n                    Tools I Use.\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n            <p>\r\n                Technologies and tools I use to turn creative\r\n                ideas into real websites.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"skills-grid\">\r\n\r\n            <div class=\"skill\">\r\n                <div class=\"skill-icon\">\ud83c\udf10<\/div>\r\n                <h3>HTML5<\/h3>\r\n            <\/div>\r\n\r\n            <div class=\"skill\">\r\n                <div class=\"skill-icon\">\ud83c\udfa8<\/div>\r\n                <h3>CSS3<\/h3>\r\n            <\/div>\r\n\r\n            <div class=\"skill\">\r\n                <div class=\"skill-icon\">\u26a1<\/div>\r\n                <h3>JavaScript<\/h3>\r\n            <\/div>\r\n\r\n            <div class=\"skill\">\r\n                <div class=\"skill-icon\">\ud83d\udcdd<\/div>\r\n                <h3>WordPress<\/h3>\r\n            <\/div>\r\n\r\n            <div class=\"skill\">\r\n                <div class=\"skill-icon\">\ud83d\udc18<\/div>\r\n                <h3>PHP<\/h3>\r\n            <\/div>\r\n\r\n            <div class=\"skill\">\r\n                <div class=\"skill-icon\">\ud83d\udd0d<\/div>\r\n                <h3>SEO<\/h3>\r\n            <\/div>\r\n\r\n            <div class=\"skill\">\r\n                <div class=\"skill-icon\">\ud83d\udcf1<\/div>\r\n                <h3>Responsive UI<\/h3>\r\n            <\/div>\r\n\r\n            <div class=\"skill\">\r\n                <div class=\"skill-icon\">\ud83d\ude80<\/div>\r\n                <h3>Performance<\/h3>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ================= PORTFOLIO ================= -->\r\n\r\n<section id=\"work\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"section-head\">\r\n\r\n            <div>\r\n\r\n                <div class=\"section-number\">\r\n                    04 \u2014 Selected Work\r\n                <\/div>\r\n\r\n                <h2>\r\n                    Recent Projects.\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n            <p>\r\n                A few examples of the type of websites and digital\r\n                experiences I can create.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"portfolio-grid\">\r\n\r\n            <div class=\"project\">\r\n\r\n                <div class=\"project-image\">\r\n                    \ud83c\udfe5\r\n                <\/div>\r\n\r\n                <div class=\"project-info\">\r\n\r\n                    <small>01 \u2014 Healthcare<\/small>\r\n\r\n                    <h3>Doctor Website<\/h3>\r\n\r\n                    <p>\r\n                        Professional healthcare website with\r\n                        appointment-focused design.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"project\">\r\n\r\n                <div class=\"project-image\">\r\n                    \ud83c\udfe2\r\n                <\/div>\r\n\r\n                <div class=\"project-info\">\r\n\r\n                    <small>02 \u2014 Business<\/small>\r\n\r\n                    <h3>Corporate Website<\/h3>\r\n\r\n                    <p>\r\n                        Modern business website focused on\r\n                        trust and conversion.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"project\">\r\n\r\n                <div class=\"project-image\">\r\n                    \ud83d\uded2\r\n                <\/div>\r\n\r\n                <div class=\"project-info\">\r\n\r\n                    <small>03 \u2014 E-Commerce<\/small>\r\n\r\n                    <h3>Online Store<\/h3>\r\n\r\n                    <p>\r\n                        Clean product-focused interface for\r\n                        an online business.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"project\">\r\n\r\n                <div class=\"project-image\">\r\n                    \ud83d\udcbc\r\n                <\/div>\r\n\r\n                <div class=\"project-info\">\r\n\r\n                    <small>04 \u2014 Portfolio<\/small>\r\n\r\n                    <h3>Personal Brand<\/h3>\r\n\r\n                    <p>\r\n                        Creative portfolio website for a\r\n                        professional freelancer.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ================= PRICING ================= -->\r\n\r\n<section class=\"pricing\" id=\"pricing\">\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"section-head\">\r\n\r\n            <div>\r\n\r\n                <div class=\"section-number\">\r\n                    05 \u2014 Pricing\r\n                <\/div>\r\n\r\n                <h2>\r\n                    Simple Plans.\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n            <p>\r\n                Flexible packages for different project sizes.\r\n                Every project can also be customized to your needs.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pricing-grid\">\r\n\r\n            <div class=\"price-card\">\r\n\r\n                <h3>Starter<\/h3>\r\n\r\n                <div class=\"price\">\r\n                    \u20b94,999\r\n                <\/div>\r\n\r\n                <p>Perfect for small businesses.<\/p>\r\n\r\n                <ul>\r\n                    <li>\u2713 3\u20135 Pages<\/li>\r\n                    <li>\u2713 Responsive Design<\/li>\r\n                    <li>\u2713 Contact Form<\/li>\r\n                    <li>\u2713 Basic SEO<\/li>\r\n                    <li>\u2713 Social Media Links<\/li>\r\n                <\/ul>\r\n\r\n                <a href=\"#contact\" class=\"price-btn\">\r\n                    Get Started\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"price-card featured\">\r\n\r\n                <h3>Professional<\/h3>\r\n\r\n                <div class=\"price\">\r\n                    \u20b99,999\r\n                <\/div>\r\n\r\n                <p>Best for growing businesses.<\/p>\r\n\r\n                <ul>\r\n                    <li>\u2713 7\u201310 Pages<\/li>\r\n                    <li>\u2713 Premium UI Design<\/li>\r\n                    <li>\u2713 Advanced SEO<\/li>\r\n                    <li>\u2713 WhatsApp Integration<\/li>\r\n                    <li>\u2713 Speed Optimization<\/li>\r\n                <\/ul>\r\n\r\n                <a href=\"#contact\" class=\"price-btn\">\r\n                    Choose Professional\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"price-card\">\r\n\r\n                <h3>Business<\/h3>\r\n\r\n                <div class=\"price\">\r\n                    Custom\r\n                <\/div>\r\n\r\n                <p>For advanced requirements.<\/p>\r\n\r\n                <ul>\r\n                    <li>\u2713 Custom Development<\/li>\r\n                    <li>\u2713 WordPress \/ PHP<\/li>\r\n                    <li>\u2713 Advanced Features<\/li>\r\n                    <li>\u2713 SEO Strategy<\/li>\r\n                    <li>\u2713 Ongoing Support<\/li>\r\n                <\/ul>\r\n\r\n                <a href=\"#contact\" class=\"price-btn\">\r\n                    Discuss Project\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ================= TESTIMONIALS ================= -->\r\n\r\n<section>\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"section-head\">\r\n\r\n            <div>\r\n\r\n                <div class=\"section-number\">\r\n                    06 \u2014 Testimonials\r\n                <\/div>\r\n\r\n                <h2>\r\n                    Happy Clients.\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n            <p>\r\n                Replace these demo reviews with your real client\r\n                testimonials when your projects are completed.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"testimonial-grid\">\r\n\r\n            <div class=\"testimonial\">\r\n\r\n                <div class=\"stars\">\r\n                    \u2605\u2605\u2605\u2605\u2605\r\n                <\/div>\r\n\r\n                <p>\r\n                    \"The website looks fantastic and works perfectly\r\n                    on mobile. Very happy with the result.\"\r\n                <\/p>\r\n\r\n                <div class=\"client\">\r\n                    Client Name\r\n                    <span>Business Owner<\/span>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"testimonial\">\r\n\r\n                <div class=\"stars\">\r\n                    \u2605\u2605\u2605\u2605\u2605\r\n                <\/div>\r\n\r\n                <p>\r\n                    \"Excellent communication and a very professional\r\n                    approach throughout the project.\"\r\n                <\/p>\r\n\r\n                <div class=\"client\">\r\n                    Client Name\r\n                    <span>Entrepreneur<\/span>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"testimonial\">\r\n\r\n                <div class=\"stars\">\r\n                    \u2605\u2605\u2605\u2605\u2605\r\n                <\/div>\r\n\r\n                <p>\r\n                    \"Exactly what I needed. The design is modern,\r\n                    clean and easy to use.\"\r\n                <\/p>\r\n\r\n                <div class=\"client\">\r\n                    Client Name\r\n                    <span>Startup Founder<\/span>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ================= CONTACT ================= -->\r\n\r\n<section class=\"contact\" id=\"contact\">\r\n\r\n    <div class=\"container contact-grid\">\r\n\r\n        <div>\r\n\r\n            <div class=\"section-number\">\r\n                07 \u2014 Contact\r\n            <\/div>\r\n\r\n            <h2 class=\"contact-title\">\r\n                Have a project?\r\n                Let's make it happen.\r\n            <\/h2>\r\n\r\n            <p class=\"contact-text\">\r\n                Tell me about your project, your goals and what\r\n                you're looking to build. I'll get back to you\r\n                as soon as possible.\r\n            <\/p>\r\n\r\n\r\n            <div class=\"contact-info\">\r\n\r\n                <p>\ud83d\udce7 hello@yourwebsite.com<\/p>\r\n\r\n                <p>\ud83d\udcf1 +91 99999 99999<\/p>\r\n\r\n                <p>\ud83d\udccd India<\/p>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"contact-form\">\r\n\r\n            <form onsubmit=\"sendWhatsApp(event)\">\r\n\r\n                <div class=\"form-group\">\r\n\r\n                    <label>Your Name<\/label>\r\n\r\n                    <input\r\n                        type=\"text\"\r\n                        id=\"name\"\r\n                        placeholder=\"Enter your name\"\r\n                        required\r\n                    >\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"form-group\">\r\n\r\n                    <label>Email Address<\/label>\r\n\r\n                    <input\r\n                        type=\"email\"\r\n                        id=\"email\"\r\n                        placeholder=\"Enter your email\"\r\n                        required\r\n                    >\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"form-group\">\r\n\r\n                    <label>Service<\/label>\r\n\r\n                    <select id=\"service\" required>\r\n\r\n                        <option value=\"\">\r\n                            Select a service\r\n                        <\/option>\r\n\r\n                        <option>\r\n                            Website Development\r\n                        <\/option>\r\n\r\n                        <option>\r\n                            Website Design\r\n                        <\/option>\r\n\r\n                        <option>\r\n                            WordPress Website\r\n                        <\/option>\r\n\r\n                        <option>\r\n                            SEO Optimization\r\n                        <\/option>\r\n\r\n                        <option>\r\n                            Website Maintenance\r\n                        <\/option>\r\n\r\n                    <\/select>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"form-group\">\r\n\r\n                    <label>Project Details<\/label>\r\n\r\n                    <textarea\r\n                        id=\"message\"\r\n                        placeholder=\"Tell me about your project...\"\r\n                        required\r\n                    ><\/textarea>\r\n\r\n                <\/div>\r\n\r\n\r\n                <button\r\n                    type=\"submit\"\r\n                    class=\"submit-btn\"\r\n                >\r\n                    Send Enquiry via WhatsApp \u2192\r\n                <\/button>\r\n\r\n            <\/form>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ================= FOOTER ================= -->\r\n\r\n<footer>\r\n\r\n    <div class=\"container\">\r\n\r\n        <div class=\"footer-top\">\r\n\r\n            <div>\r\n\r\n                <div class=\"footer-logo\">\r\n                    Shankar<span>.<\/span>\r\n                <\/div>\r\n\r\n                <p class=\"footer-text\">\r\n                    Creative web developer helping businesses\r\n                    build a stronger digital presence.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"socials\">\r\n\r\n                <a href=\"#\" aria-label=\"Instagram\">\r\n                    IG\r\n                <\/a>\r\n\r\n                <a href=\"#\" aria-label=\"LinkedIn\">\r\n                    IN\r\n                <\/a>\r\n\r\n                <a href=\"#\" aria-label=\"Facebook\">\r\n                    FB\r\n                <\/a>\r\n\r\n                <a href=\"#\" aria-label=\"YouTube\">\r\n                    YT\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"copyright\">\r\n\r\n            \u00a9 2026 Shankar Web Development.\r\n            All Rights Reserved.\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/footer>\r\n\r\n\r\n<!-- ================= WHATSAPP ================= -->\r\n\r\n<a\r\n    href=\"https:\/\/wa.me\/919999999999\"\r\n    target=\"_blank\"\r\n    class=\"whatsapp\"\r\n    aria-label=\"WhatsApp\"\r\n>\r\n    \u260e\r\n<\/a>\r\n\r\n\r\n<script>\r\n\r\n    \/* =========================\r\n       MOBILE MENU\r\n    ========================= *\/\r\n\r\n    function toggleMenu() {\r\n\r\n        document\r\n            .getElementById(\"navLinks\")\r\n            .classList.toggle(\"active\");\r\n\r\n    }\r\n\r\n\r\n    \/* Close menu after clicking link *\/\r\n\r\n    document\r\n        .querySelectorAll(\".nav-links a\")\r\n        .forEach(function(link) {\r\n\r\n            link.addEventListener(\"click\", function() {\r\n\r\n                document\r\n                    .getElementById(\"navLinks\")\r\n                    .classList.remove(\"active\");\r\n\r\n            });\r\n\r\n        });\r\n\r\n\r\n    \/* =========================\r\n       WHATSAPP CONTACT FORM\r\n    ========================= *\/\r\n\r\n    function sendWhatsApp(event) {\r\n\r\n        event.preventDefault();\r\n\r\n        const name =\r\n            document.getElementById(\"name\").value;\r\n\r\n        const email =\r\n            document.getElementById(\"email\").value;\r\n\r\n        const service =\r\n            document.getElementById(\"service\").value;\r\n\r\n        const message =\r\n            document.getElementById(\"message\").value;\r\n\r\n\r\n        \/* CHANGE THIS NUMBER *\/\r\n\r\n        const phone = \"919999999999\";\r\n\r\n\r\n        const text =\r\n            \"Hello Shankar,%0A%0A\" +\r\n\r\n            \"Name: \" + name + \"%0A\" +\r\n\r\n            \"Email: \" + email + \"%0A\" +\r\n\r\n            \"Service: \" + service + \"%0A%0A\" +\r\n\r\n            \"Project Details:%0A\" +\r\n            message;\r\n\r\n\r\n        window.open(\r\n            \"https:\/\/wa.me\/\" +\r\n            phone +\r\n            \"?text=\" +\r\n            text,\r\n            \"_blank\"\r\n        );\r\n\r\n    }\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n```\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&#8220;`html Shankar \u2014 Creative Web Developer &#038; Freelancer Shankar. \u2630 Home Services About Work Pricing Let&#8217;s Talk \u2192 Available for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digitalshankar.in\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalshankar.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalshankar.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalshankar.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalshankar.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":7,"href":"https:\/\/digitalshankar.in\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/digitalshankar.in\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/digitalshankar.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}