{"id":176,"date":"2026-04-28T16:17:15","date_gmt":"2026-04-28T16:17:15","guid":{"rendered":"https:\/\/darksalmon-seal-746514.hostingersite.com\/?page_id=176"},"modified":"2026-04-30T09:41:03","modified_gmt":"2026-04-30T09:41:03","slug":"contact","status":"publish","type":"page","link":"https:\/\/coffeegram.in\/index.php\/contact\/","title":{"rendered":"contact"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nContact Us<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif;}\r\n\r\nbody{\r\n background:#fff;\r\n color:#111;\r\n}\r\n\r\n\/* \ud83d\udd25 NAV *\/\r\nnav{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n padding:18px 60px;\r\n background:#fff;\r\n border-bottom:1px solid #eee;\r\n animation:fadeDown .6s ease;\r\n}\r\n\r\n.logo{\r\n color:#52a447;\r\n text-decoration:none;\r\n font-size:22px;\r\n font-weight:600;\r\n}\r\n\r\n.back{\r\n color:#666;\r\n text-decoration:none;\r\n font-size:14px;\r\n}\r\n\r\n\/* SECTION *\/\r\n.section{\r\n max-width:1100px;\r\n margin:auto;\r\n padding:60px;\r\n}\r\n\r\n\/* TITLE *\/\r\nh1{\r\n font-size:42px;\r\n margin-bottom:10px;\r\n color:#52a447;\r\n\r\n opacity:0;\r\n transform:translateY(20px);\r\n animation:fadeUp .6s ease forwards;\r\n}\r\n\r\n.sub{\r\n color:#666;\r\n margin-bottom:40px;\r\n\r\n opacity:0;\r\n transform:translateY(20px);\r\n animation:fadeUp .6s ease forwards;\r\n animation-delay:.2s;\r\n}\r\n\r\n\/* LAYOUT *\/\r\n.wrapper{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:40px;\r\n}\r\n\r\n\/* FORM *\/\r\n.form-box{\r\n background:#fff;\r\n padding:30px;\r\n border-radius:16px;\r\n border:1px solid #eee;\r\n box-shadow:0 10px 30px rgba(0,0,0,0.05);\r\n\r\n transition:.3s;\r\n}\r\n\r\n.form-box:hover{\r\n transform:translateY(-5px);\r\n}\r\n\r\n\/* INPUT *\/\r\n.form-box input,\r\n.form-box textarea{\r\n width:100%;\r\n margin-bottom:15px;\r\n padding:12px;\r\n background:#f9f9f9;\r\n border:1px solid #eee;\r\n border-radius:8px;\r\n color:#111;\r\n transition:.3s;\r\n}\r\n\r\n\/* FOCUS *\/\r\n.form-box input:focus,\r\n.form-box textarea:focus{\r\n border-color:#52a447;\r\n outline:none;\r\n box-shadow:0 0 0 3px rgba(82,164,71,0.15);\r\n}\r\n\r\n.form-box textarea{\r\n height:120px;\r\n resize:none;\r\n}\r\n\r\n\/* BUTTON *\/\r\n.btn{\r\n width:100%;\r\n background:#52a447;\r\n color:#fff;\r\n padding:12px;\r\n border:none;\r\n border-radius:10px;\r\n cursor:pointer;\r\n transition:.3s;\r\n}\r\n\r\n.btn:hover{\r\n transform:translateY(-3px);\r\n box-shadow:0 10px 25px rgba(82,164,71,0.3);\r\n}\r\n\r\n\/* INFO *\/\r\n.info{\r\n padding:10px 20px;\r\n}\r\n\r\n.info h2{\r\n margin-bottom:12px;\r\n color:#52a447;\r\n}\r\n\r\n.info p{\r\n margin-bottom:15px;\r\n color:#555;\r\n}\r\n\r\n\/* SOCIAL *\/\r\n.social{\r\n margin-top:20px;\r\n}\r\n\r\n.social a{\r\n display:inline-block;\r\n margin-right:10px;\r\n padding:6px 12px;\r\n border:1px solid #52a447;\r\n border-radius:20px;\r\n color:#52a447;\r\n text-decoration:none;\r\n font-size:13px;\r\n transition:.3s;\r\n}\r\n\r\n.social a:hover{\r\n background:#52a447;\r\n color:#fff;\r\n}\r\n\r\n\/* MAP *\/\r\n.map{\r\n margin-top:40px;\r\n border-radius:16px;\r\n overflow:hidden;\r\n box-shadow:0 10px 30px rgba(0,0,0,0.08);\r\n\r\n opacity:0;\r\n transform:translateY(20px);\r\n animation:fadeUp .6s ease forwards;\r\n animation-delay:.4s;\r\n}\r\n\r\niframe{\r\n width:100%;\r\n height:250px;\r\n border:0;\r\n}\r\n\r\n\/* \ud83d\udd25 ANIMATIONS *\/\r\n@keyframes fadeDown{\r\n from{opacity:0; transform:translateY(-20px);}\r\n to{opacity:1; transform:translateY(0);}\r\n}\r\n\r\n@keyframes fadeUp{\r\n to{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n}\r\n\r\n\/* ================= MOBILE ================= *\/\r\n@media(max-width:900px){\r\n\r\n nav{\r\n padding:15px 20px;\r\n }\r\n\r\n .section{\r\n padding:30px 20px;\r\n }\r\n\r\n h1{\r\n font-size:28px;\r\n text-align:center;\r\n }\r\n\r\n .sub{\r\n text-align:center;\r\n font-size:14px;\r\n }\r\n\r\n .wrapper{\r\n grid-template-columns:1fr;\r\n gap:25px;\r\n }\r\n\r\n .form-box{\r\n padding:20px;\r\n }\r\n\r\n .info{\r\n text-align:center;\r\n }\r\n\r\n .info h2{\r\n font-size:18px;\r\n }\r\n\r\n .info p{\r\n font-size:14px;\r\n }\r\n\r\n .social{\r\n display:flex;\r\n justify-content:center;\r\n flex-wrap:wrap;\r\n gap:10px;\r\n }\r\n\r\n iframe{\r\n height:220px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<nav>\r\n <a href=\"index.html\" class=\"logo\">\u2615 Coffeegram<\/a>\r\n <a href=\"#\" class=\"back\">\u2190 Back<\/a>\r\n<\/nav>\r\n\r\n<div class=\"section\">\r\n\r\n<h1>Contact Us<\/h1>\r\n<p class=\"sub\">We\u2019d love to hear from you<\/p>\r\n\r\n<div class=\"wrapper\">\r\n\r\n<!-- FORM -->\r\n<div class=\"form-box\">\r\n <input type=\"text\" placeholder=\"Your Name\">\r\n <input type=\"email\" placeholder=\"Your Email\">\r\n <textarea placeholder=\"Your Message\"><\/textarea>\r\n <button class=\"btn\">Send Message<\/button>\r\n<\/div>\r\n\r\n<!-- INFO -->\r\n<div class=\"info\">\r\n <h2>Visit Us<\/h2>\r\n <p>Coffeegram Caf\u00e9<br>Janakpuri, New Delhi<\/p>\r\n\r\n <h2>Call<\/h2>\r\n <p>+91 98765 43210<\/p>\r\n\r\n <h2>Email<\/h2>\r\n <p>hello@coffeegram.in<\/p>\r\n\r\n <div class=\"social\">\r\n <a href=\"#\">Instagram<\/a>\r\n <a href=\"#\">WhatsApp<\/a>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<!-- MAP -->\r\n<div class=\"map\">\r\n<iframe data-src=\"https:\/\/maps.google.com\/maps?q=janakpuri%20delhi&t=&z=13&ie=UTF8&iwloc=&output=embed\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\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>Contact Us \u2615 Coffeegram \u2190 Back Contact Us We\u2019d love to hear from you Send Message Visit Us Coffeegram Caf\u00e9Janakpuri, New Delhi Call +91 98765 43210 Email hello@coffeegram.in Instagram WhatsApp<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-176","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/coffeegram.in\/index.php\/wp-json\/wp\/v2\/pages\/176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coffeegram.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/coffeegram.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/coffeegram.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coffeegram.in\/index.php\/wp-json\/wp\/v2\/comments?post=176"}],"version-history":[{"count":13,"href":"https:\/\/coffeegram.in\/index.php\/wp-json\/wp\/v2\/pages\/176\/revisions"}],"predecessor-version":[{"id":298,"href":"https:\/\/coffeegram.in\/index.php\/wp-json\/wp\/v2\/pages\/176\/revisions\/298"}],"wp:attachment":[{"href":"https:\/\/coffeegram.in\/index.php\/wp-json\/wp\/v2\/media?parent=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}