Our Story - Vine & Dine<\/title>\r\n\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\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\nbody{\r\n font-family:'DM Sans', sans-serif;\r\n background:#f5eee4;\r\n color:#33251d;\r\n}\r\n\r\n\r\n\/* ==============================\r\n OUR STORY SECTION\r\n================================= *\/\r\n\r\n.our-story{\r\n\r\n position:relative;\r\n\r\n width:100%;\r\n\r\n min-height:592px;\r\n\r\n overflow:hidden;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 15% 50%,\r\n rgba(255,255,255,.45),\r\n transparent 35%\r\n ),\r\n #f5eee4;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n DECORATIVE BACKGROUND\r\n================================= *\/\r\n\r\n.our-story::before{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n width:500px;\r\n height:500px;\r\n\r\n left:-180px;\r\n top:-180px;\r\n\r\n border-radius:50%;\r\n\r\n background:\r\n radial-gradient(\r\n circle,\r\n rgba(194,146,102,.08) 1px,\r\n transparent 1px\r\n );\r\n\r\n background-size:12px 12px;\r\n\r\n opacity:.6;\r\n\r\n}\r\n\r\n.our-story::after{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n width:230px;\r\n height:230px;\r\n\r\n right:-50px;\r\n top:145px;\r\n\r\n border:2px solid rgba(190,135,83,.25);\r\n\r\n border-radius:50%;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n CONTAINER\r\n================================= *\/\r\n\r\n.story-container{\r\n\r\n width:100%;\r\n\r\n max-width:1250px;\r\n\r\n min-height:592px;\r\n\r\n margin:0 auto;\r\n\r\n padding:45px 40px;\r\n\r\n display:grid;\r\n\r\n grid-template-columns:48% 52%;\r\n\r\n align-items:center;\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n LEFT IMAGE\r\n================================= *\/\r\n\r\n.story-image-area{\r\n\r\n position:relative;\r\n\r\n height:500px;\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n}\r\n\r\n\r\n\/* POLAROID *\/\r\n\r\n.polaroid{\r\n\r\n position:relative;\r\n\r\n width:390px;\r\n\r\n background:#fff;\r\n\r\n padding:16px 16px 72px;\r\n\r\n box-shadow:\r\n 0 18px 30px rgba(58,38,24,.18),\r\n 0 3px 8px rgba(58,38,24,.08);\r\n\r\n transform:rotate(-5deg);\r\n\r\n z-index:3;\r\n\r\n}\r\n\r\n\r\n\/* IMAGE *\/\r\n\r\n.polaroid img{\r\n\r\n width:100%;\r\n\r\n height:385px;\r\n\r\n display:block;\r\n\r\n object-fit:cover;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n TAPE\r\n================================= *\/\r\n\r\n.tape{\r\n\r\n position:absolute;\r\n\r\n width:145px;\r\n\r\n height:45px;\r\n\r\n top:-27px;\r\n\r\n left:120px;\r\n\r\n background:rgba(205,163,112,.72);\r\n\r\n transform:rotate(-4deg);\r\n\r\n z-index:5;\r\n\r\n opacity:.85;\r\n\r\n}\r\n\r\n.tape::after{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset:0;\r\n\r\n background:\r\n repeating-linear-gradient(\r\n 90deg,\r\n transparent 0,\r\n transparent 5px,\r\n rgba(130,94,61,.08) 6px,\r\n transparent 7px\r\n );\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n DECORATIVE LEAF\r\n================================= *\/\r\n\r\n.leaf-decoration{\r\n\r\n position:absolute;\r\n\r\n bottom:20px;\r\n\r\n left:35px;\r\n\r\n width:125px;\r\n\r\n height:90px;\r\n\r\n z-index:4;\r\n\r\n transform:rotate(-12deg);\r\n\r\n}\r\n\r\n.leaf{\r\n\r\n position:absolute;\r\n\r\n width:18px;\r\n\r\n height:58px;\r\n\r\n border-radius:100% 0 100% 0;\r\n\r\n background:#708363;\r\n\r\n transform-origin:bottom center;\r\n\r\n}\r\n\r\n.leaf:nth-child(1){\r\n left:25px;\r\n bottom:8px;\r\n transform:rotate(-42deg);\r\n}\r\n\r\n.leaf:nth-child(2){\r\n left:43px;\r\n bottom:18px;\r\n transform:rotate(-20deg);\r\n}\r\n\r\n.leaf:nth-child(3){\r\n left:58px;\r\n bottom:20px;\r\n transform:rotate(5deg);\r\n}\r\n\r\n.leaf:nth-child(4){\r\n left:70px;\r\n bottom:12px;\r\n transform:rotate(28deg);\r\n}\r\n\r\n.leaf:nth-child(5){\r\n left:78px;\r\n bottom:4px;\r\n transform:rotate(48deg);\r\n}\r\n\r\n\r\n\/* ==============================\r\n STAMP\r\n================================= *\/\r\n\r\n.stamp{\r\n\r\n position:absolute;\r\n\r\n width:100px;\r\n height:100px;\r\n\r\n border:2px solid rgba(177,122,72,.22);\r\n\r\n border-radius:50%;\r\n\r\n right:20px;\r\n\r\n bottom:30px;\r\n\r\n transform:rotate(-12deg);\r\n\r\n z-index:2;\r\n\r\n}\r\n\r\n.stamp::before{\r\n\r\n content:\"VINE & DINE\";\r\n\r\n position:absolute;\r\n\r\n inset:14px;\r\n\r\n border:1px solid rgba(177,122,72,.2);\r\n\r\n border-radius:50%;\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n text-align:center;\r\n\r\n font-size:8px;\r\n\r\n letter-spacing:1px;\r\n\r\n color:rgba(177,122,72,.4);\r\n\r\n}\r\n\r\n.stamp::after{\r\n\r\n content:\"\u2726\";\r\n\r\n position:absolute;\r\n\r\n top:42px;\r\n\r\n left:44px;\r\n\r\n font-size:16px;\r\n\r\n color:rgba(177,122,72,.4);\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n RIGHT CONTENT\r\n================================= *\/\r\n\r\n.story-content{\r\n\r\n padding-left:45px;\r\n\r\n padding-right:30px;\r\n\r\n}\r\n\r\n\r\n\/* SMALL TITLE *\/\r\n\r\n.story-label{\r\n\r\n color:#a75e2d;\r\n\r\n font-size:17px;\r\n\r\n font-weight:700;\r\n\r\n letter-spacing:.5px;\r\n\r\n margin-bottom:12px;\r\n\r\n}\r\n\r\n\r\n\/* MAIN TITLE *\/\r\n\r\n.story-title{\r\n\r\n font-family:'Playfair Display', serif;\r\n\r\n font-size:43px;\r\n\r\n line-height:1.2;\r\n\r\n color:#34251d;\r\n\r\n max-width:600px;\r\n\r\n margin-bottom:22px;\r\n\r\n}\r\n\r\n\r\n\/* DECORATIVE LINE *\/\r\n\r\n.story-divider{\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n width:100px;\r\n\r\n margin-bottom:27px;\r\n\r\n}\r\n\r\n.story-divider::before{\r\n\r\n content:\"\";\r\n\r\n width:30px;\r\n\r\n height:2px;\r\n\r\n background:#a76437;\r\n\r\n}\r\n\r\n.story-divider span{\r\n\r\n color:#a76437;\r\n\r\n font-size:18px;\r\n\r\n margin:0 8px;\r\n\r\n}\r\n\r\n.story-divider::after{\r\n\r\n content:\"\";\r\n\r\n width:30px;\r\n\r\n height:2px;\r\n\r\n background:#a76437;\r\n\r\n}\r\n\r\n\r\n\/* PARAGRAPH *\/\r\n\r\n.story-text{\r\n\r\n max-width:610px;\r\n\r\n font-size:16px;\r\n\r\n line-height:1.9;\r\n\r\n color:#4f433a;\r\n\r\n margin-bottom:15px;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n BUTTON\r\n================================= *\/\r\n\r\n.story-button{\r\n\r\n display:inline-flex;\r\n\r\n align-items:center;\r\n\r\n gap:12px;\r\n\r\n margin-top:10px;\r\n\r\n padding:14px 25px;\r\n\r\n background:#b66326;\r\n\r\n color:white;\r\n\r\n text-decoration:none;\r\n\r\n border-radius:6px;\r\n\r\n font-size:14px;\r\n\r\n font-weight:700;\r\n\r\n letter-spacing:.3px;\r\n\r\n transition:all .3s ease;\r\n\r\n}\r\n\r\n.story-button span{\r\n\r\n font-size:18px;\r\n\r\n line-height:1;\r\n\r\n transition:.3s;\r\n\r\n}\r\n\r\n.story-button:hover{\r\n\r\n background:#91491b;\r\n\r\n transform:translateY(-2px);\r\n\r\n box-shadow:0 8px 18px rgba(145,73,27,.2);\r\n\r\n}\r\n\r\n.story-button:hover span{\r\n\r\n transform:translateX(4px);\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n HANDWRITTEN DECORATION\r\n================================= *\/\r\n\r\n.handwriting{\r\n\r\n position:absolute;\r\n\r\n left:20px;\r\n\r\n top:65px;\r\n\r\n color:rgba(123,86,59,.10);\r\n\r\n font-family:cursive;\r\n\r\n font-size:28px;\r\n\r\n line-height:1.4;\r\n\r\n transform:rotate(-10deg);\r\n\r\n z-index:1;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n COFFEE STAIN\r\n================================= *\/\r\n\r\n.coffee-stain{\r\n\r\n position:absolute;\r\n\r\n right:-35px;\r\n\r\n bottom:25px;\r\n\r\n width:170px;\r\n\r\n height:170px;\r\n\r\n border:7px solid rgba(184,132,82,.12);\r\n\r\n border-radius:50%;\r\n\r\n transform:rotate(-15deg);\r\n\r\n}\r\n\r\n.coffee-stain::before{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n width:120px;\r\n\r\n height:120px;\r\n\r\n top:12px;\r\n\r\n left:12px;\r\n\r\n border:4px solid rgba(184,132,82,.08);\r\n\r\n border-radius:50%;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n RESPONSIVE\r\n================================= *\/\r\n\r\n@media(max-width:1000px){\r\n\r\n .story-container{\r\n\r\n grid-template-columns:1fr;\r\n\r\n padding:70px 30px;\r\n\r\n }\r\n\r\n .story-image-area{\r\n\r\n height:480px;\r\n\r\n margin-bottom:30px;\r\n\r\n }\r\n\r\n .story-content{\r\n\r\n padding:0;\r\n\r\n text-align:left;\r\n\r\n }\r\n\r\n .story-title{\r\n\r\n font-size:40px;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n@media(max-width:600px){\r\n\r\n .our-story{\r\n\r\n min-height:auto;\r\n\r\n }\r\n\r\n .story-container{\r\n\r\n padding:70px 20px;\r\n\r\n }\r\n\r\n .story-image-area{\r\n\r\n height:390px;\r\n\r\n }\r\n\r\n .polaroid{\r\n\r\n width:285px;\r\n\r\n padding:12px 12px 50px;\r\n\r\n }\r\n\r\n .polaroid img{\r\n\r\n height:285px;\r\n\r\n }\r\n\r\n .tape{\r\n\r\n width:110px;\r\n\r\n height:35px;\r\n\r\n left:87px;\r\n\r\n top:-20px;\r\n\r\n }\r\n\r\n .leaf-decoration{\r\n\r\n left:0;\r\n\r\n bottom:5px;\r\n\r\n transform:scale(.75) rotate(-12deg);\r\n\r\n }\r\n\r\n .stamp{\r\n\r\n right:-5px;\r\n\r\n bottom:15px;\r\n\r\n transform:scale(.75) rotate(-12deg);\r\n\r\n }\r\n\r\n .story-label{\r\n\r\n font-size:14px;\r\n\r\n }\r\n\r\n .story-title{\r\n\r\n font-size:32px;\r\n\r\n }\r\n\r\n .story-text{\r\n\r\n font-size:14px;\r\n\r\n line-height:1.8;\r\n\r\n }\r\n\r\n .coffee-stain{\r\n\r\n width:110px;\r\n\r\n height:110px;\r\n\r\n right:-50px;\r\n\r\n }\r\n\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n\r\n\r\n\r\n<section class=\"our-story\">\r\n\r\n \r\n <div class=\"handwriting\">\r\n good coffee,<br>\r\n good music,<br>\r\n good moments.\r\n <\/div>\r\n\r\n <div class=\"coffee-stain\"><\/div>\r\n\r\n\r\n <div class=\"story-container\">\r\n\r\n\r\n \r\n\r\n <div class=\"story-image-area\">\r\n\r\n <div class=\"polaroid\">\r\n\r\n <div class=\"tape\"><\/div>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/vineanddine.my.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-7-2026-11_25_44-AM-1.png\"\r\n alt=\"Interior Vine & Dine\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"leaf-decoration\">\r\n\r\n <div class=\"leaf\"><\/div>\r\n <div class=\"leaf\"><\/div>\r\n <div class=\"leaf\"><\/div>\r\n <div class=\"leaf\"><\/div>\r\n <div class=\"leaf\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"stamp\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n\r\n \r\n\r\n <div class=\"story-content\">\r\n\r\n <div class=\"story-label\">\r\n OUR STORY\r\n <\/div>\r\n\r\n\r\n <h1 class=\"story-title\">\r\n Dari Kecintaan pada Kopi<br>\r\n dan Musik\r\n <\/h1>\r\n\r\n\r\n <div class=\"story-divider\">\r\n <span>\u2726<\/span>\r\n <\/div>\r\n\r\n\r\n <p class=\"story-text\">\r\n\r\n Vine & Dine lahir dari kecintaan kami\r\n terhadap dua hal yang tak terpisahkan:\r\n kopi yang nikmat dan musik yang bermakna.\r\n Kami percaya, secangkir kopi terbaik akan\r\n semakin lengkap dengan alunan musik yang\r\n tepat dan suasana yang hangat.\r\n\r\n <\/p>\r\n\r\n\r\n <p class=\"story-text\">\r\n\r\n Di sini, kami ingin menciptakan ruang bagi\r\n semua orang untuk bersantai, menikmati momen,\r\n menemukan lagu favorit baru, dan berbagi cerita.\r\n\r\n <\/p>\r\n\r\n\r\n <a href=\"#\" class=\"story-button\">\r\n\r\n LEBIH LANJUT\r\n\r\n <span>\u203a<\/span>\r\n\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-bd81345 e-con e-atomic-element e-flexbox-base e-6b49334 \" data-id=\"bd81345\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"bd81345\">\n \t\t<div class=\"elementor-element elementor-element-64f12b4 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"64f12b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\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>Vine & Dine - About Us<\/title>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\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\nbody{\r\n font-family:'DM Sans', sans-serif;\r\n color:#30221a;\r\n}\r\n\r\n\r\n\/* ========================================\r\n GENERAL\r\n======================================== *\/\r\n\r\n.section-title{\r\n text-align:center;\r\n font-size:26px;\r\n font-weight:700;\r\n letter-spacing:.5px;\r\n margin-bottom:25px;\r\n}\r\n\r\n.title-decoration{\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:10px;\r\n margin-top:-12px;\r\n margin-bottom:35px;\r\n}\r\n\r\n.title-decoration::before,\r\n.title-decoration::after{\r\n content:\"\";\r\n width:85px;\r\n height:1px;\r\n background:#9a622f;\r\n}\r\n\r\n.title-decoration span{\r\n color:#b26d2d;\r\n font-size:18px;\r\n}\r\n\r\n\r\n\/* ========================================\r\n WHAT MAKES US DIFFERENT\r\n======================================== *\/\r\n\r\n.different-section{\r\n\r\n position:relative;\r\n\r\n width:100%;\r\n\r\n padding:34px 7% 40px;\r\n\r\n background:\r\n linear-gradient(\r\n rgba(35,20,12,.93),\r\n rgba(35,20,12,.93)\r\n ),\r\n #2a180e;\r\n\r\n color:#fff;\r\n\r\n overflow:hidden;\r\n}\r\n\r\n\r\n\/* subtle texture *\/\r\n\r\n.different-section::before{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset:0;\r\n\r\n opacity:.12;\r\n\r\n background-image:\r\n radial-gradient(\r\n rgba(255,255,255,.3) 1px,\r\n transparent 1px\r\n );\r\n\r\n background-size:14px 14px;\r\n\r\n pointer-events:none;\r\n\r\n}\r\n\r\n\r\n\/* title *\/\r\n\r\n.different-section .section-title{\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n color:#f2dfc5;\r\n\r\n}\r\n\r\n\r\n\/* decoration *\/\r\n\r\n.different-section .title-decoration{\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n}\r\n\r\n.different-section .title-decoration::before,\r\n.different-section .title-decoration::after{\r\n\r\n background:#9c612d;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n DIFFERENT GRID\r\n======================================== *\/\r\n\r\n.different-grid{\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n max-width:1200px;\r\n\r\n margin:0 auto;\r\n\r\n display:grid;\r\n\r\n grid-template-columns:\r\n repeat(4,1fr);\r\n\r\n}\r\n\r\n\r\n.different-item{\r\n\r\n min-height:165px;\r\n\r\n padding:0 42px;\r\n\r\n text-align:center;\r\n\r\n display:flex;\r\n\r\n flex-direction:column;\r\n\r\n align-items:center;\r\n\r\n justify-content:flex-start;\r\n\r\n border-right:1px solid rgba(180,117,58,.45);\r\n\r\n}\r\n\r\n\r\n.different-item:last-child{\r\n\r\n border-right:none;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n ICON\r\n======================================== *\/\r\n\r\n.feature-icon{\r\n\r\n width:58px;\r\n\r\n height:58px;\r\n\r\n margin-bottom:16px;\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n font-size:42px;\r\n\r\n color:#e9c99d;\r\n\r\n filter:\r\n grayscale(1)\r\n brightness(1.4);\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n DIFFERENT TITLE\r\n======================================== *\/\r\n\r\n.different-item h3{\r\n\r\n color:#d28a4b;\r\n\r\n font-size:16px;\r\n\r\n font-weight:700;\r\n\r\n margin-bottom:14px;\r\n\r\n letter-spacing:.2px;\r\n\r\n text-transform:uppercase;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n DIFFERENT TEXT\r\n======================================== *\/\r\n\r\n.different-item p{\r\n\r\n max-width:245px;\r\n\r\n color:#d9cabe;\r\n\r\n font-size:13px;\r\n\r\n line-height:1.65;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n OUR VALUES\r\n======================================== *\/\r\n\r\n.values-section{\r\n\r\n position:relative;\r\n\r\n width:100%;\r\n\r\n padding:34px 7% 48px;\r\n\r\n background:#f5eee4;\r\n\r\n overflow:hidden;\r\n\r\n}\r\n\r\n\r\n\/* paper texture *\/\r\n\r\n.values-section::before{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset:0;\r\n\r\n opacity:.22;\r\n\r\n background-image:\r\n radial-gradient(\r\n rgba(120,90,60,.16) .7px,\r\n transparent .7px\r\n );\r\n\r\n background-size:8px 8px;\r\n\r\n pointer-events:none;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n VALUES TITLE\r\n======================================== *\/\r\n\r\n.values-section .section-title{\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n color:#34261e;\r\n\r\n margin-bottom:25px;\r\n\r\n}\r\n\r\n\r\n.values-section .title-decoration{\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n VALUES GRID\r\n======================================== *\/\r\n\r\n.values-grid{\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n max-width:1050px;\r\n\r\n margin:0 auto;\r\n\r\n display:grid;\r\n\r\n grid-template-columns:\r\n repeat(3,1fr);\r\n\r\n}\r\n\r\n\r\n.value-item{\r\n\r\n min-height:155px;\r\n\r\n padding:0 60px;\r\n\r\n text-align:center;\r\n\r\n border-right:2px dotted rgba(96,70,49,.35);\r\n\r\n}\r\n\r\n\r\n.value-item:last-child{\r\n\r\n border-right:none;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n VALUE ICON\r\n======================================== *\/\r\n\r\n.value-icon{\r\n\r\n height:58px;\r\n\r\n display:flex;\r\n\r\n justify-content:center;\r\n\r\n align-items:center;\r\n\r\n margin-bottom:14px;\r\n\r\n font-size:42px;\r\n\r\n color:#34261e;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n VALUE TITLE\r\n======================================== *\/\r\n\r\n.value-item h3{\r\n\r\n font-size:16px;\r\n\r\n font-weight:700;\r\n\r\n color:#30221a;\r\n\r\n margin-bottom:14px;\r\n\r\n text-transform:uppercase;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n VALUE TEXT\r\n======================================== *\/\r\n\r\n.value-item p{\r\n\r\n color:#55483e;\r\n\r\n font-size:13px;\r\n\r\n line-height:1.7;\r\n\r\n max-width:250px;\r\n\r\n margin:0 auto;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n RESPONSIVE TABLET\r\n======================================== *\/\r\n\r\n@media(max-width:900px){\r\n\r\n .different-section{\r\n\r\n padding-left:30px;\r\n padding-right:30px;\r\n\r\n }\r\n\r\n .different-grid{\r\n\r\n grid-template-columns:\r\n repeat(2,1fr);\r\n\r\n row-gap:35px;\r\n\r\n }\r\n\r\n .different-item:nth-child(2){\r\n\r\n border-right:none;\r\n\r\n }\r\n\r\n .different-item:nth-child(3){\r\n\r\n border-right:1px solid rgba(180,117,58,.45);\r\n\r\n }\r\n\r\n .values-grid{\r\n\r\n grid-template-columns:\r\n repeat(3,1fr);\r\n\r\n }\r\n\r\n .value-item{\r\n\r\n padding:0 25px;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n RESPONSIVE MOBILE\r\n======================================== *\/\r\n\r\n@media(max-width:600px){\r\n\r\n .different-section{\r\n\r\n padding:45px 25px;\r\n\r\n }\r\n\r\n .values-section{\r\n\r\n padding:45px 25px;\r\n\r\n }\r\n\r\n .section-title{\r\n\r\n font-size:23px;\r\n\r\n }\r\n\r\n .title-decoration{\r\n\r\n margin-bottom:30px;\r\n\r\n }\r\n\r\n .title-decoration::before,\r\n .title-decoration::after{\r\n\r\n width:45px;\r\n\r\n }\r\n\r\n\r\n \/* DIFFERENT *\/\r\n\r\n .different-grid{\r\n\r\n grid-template-columns:1fr;\r\n\r\n gap:35px;\r\n\r\n }\r\n\r\n .different-item{\r\n\r\n padding:0 20px 30px;\r\n\r\n border-right:none !important;\r\n\r\n border-bottom:1px solid rgba(180,117,58,.35);\r\n\r\n }\r\n\r\n .different-item:last-child{\r\n\r\n border-bottom:none;\r\n\r\n padding-bottom:0;\r\n\r\n }\r\n\r\n\r\n \/* VALUES *\/\r\n\r\n .values-grid{\r\n\r\n grid-template-columns:1fr;\r\n\r\n gap:35px;\r\n\r\n }\r\n\r\n .value-item{\r\n\r\n padding:0 20px 30px;\r\n\r\n border-right:none;\r\n\r\n border-bottom:2px dotted rgba(96,70,49,.3);\r\n\r\n }\r\n\r\n .value-item:last-child{\r\n\r\n border-bottom:none;\r\n\r\n padding-bottom:0;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n WORDPRESS FIX\r\n======================================== *\/\r\n\r\n.different-section *,\r\n.values-section *{\r\n\r\n box-sizing:border-box;\r\n\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n\r\n\r\n<section class=\"different-section\">\r\n\r\n <h2 class=\"section-title\">\r\n WHAT MAKES US DIFFERENT\r\n <\/h2>\r\n\r\n\r\n <div class=\"title-decoration\">\r\n <span>\u2726<\/span>\r\n <\/div>\r\n\r\n\r\n <div class=\"different-grid\">\r\n\r\n\r\n \r\n\r\n <div class=\"different-item\">\r\n\r\n <div class=\"feature-icon\">\r\n \u2615\r\n <\/div>\r\n\r\n <h3>\r\n KOPI BERKUALITAS\r\n <\/h3>\r\n\r\n <p>\r\n Kami memilih biji kopi terbaik\r\n dan menyajikannya dengan penuh\r\n perhatian di setiap cangkir.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"different-item\">\r\n\r\n <div class=\"feature-icon\">\r\n \ud83d\udcbf\r\n <\/div>\r\n\r\n <h3>\r\n KOLEKSI VINYL PILIHAN\r\n <\/h3>\r\n\r\n <p>\r\n Koleksi piringan hitam kami\r\n dipilih dengan hati, dari klasik\r\n hingga rilisan terbaru.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"different-item\">\r\n\r\n <div class=\"feature-icon\">\r\n \ud83d\udecb\r\n <\/div>\r\n\r\n <h3>\r\n SUASANA NYAMAN\r\n <\/h3>\r\n\r\n <p>\r\n Desain cozy dan hangat untuk\r\n teman bekerja, bersantai,\r\n atau sekadar menikmati waktu.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"different-item\">\r\n\r\n <div class=\"feature-icon\">\r\n \u2667\r\n <\/div>\r\n\r\n <h3>\r\n KOMUNITAS\r\n <\/h3>\r\n\r\n <p>\r\n Lebih dari tempat nongkrong,\r\n kami adalah ruang untuk\r\n terhubung dan berbagi.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n\r\n\r\n<section class=\"values-section\">\r\n\r\n <h2 class=\"section-title\">\r\n OUR VALUES\r\n <\/h2>\r\n\r\n\r\n <div class=\"title-decoration\">\r\n <span>\u2726<\/span>\r\n <\/div>\r\n\r\n\r\n <div class=\"values-grid\">\r\n\r\n\r\n \r\n\r\n <div class=\"value-item\">\r\n\r\n <div class=\"value-icon\">\r\n \u2661\r\n <\/div>\r\n\r\n <h3>\r\n PASSION\r\n <\/h3>\r\n\r\n <p>\r\n Kami melakukan segala sesuatu\r\n dengan cinta \u2014 dari kopi yang kami\r\n seduh hingga musik yang kami putar.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"value-item\">\r\n\r\n <div class=\"value-icon\">\r\n \u2667\r\n <\/div>\r\n\r\n <h3>\r\n AUTHENTICITY\r\n <\/h3>\r\n\r\n <p>\r\n Kami tetap jujur pada diri kami sendiri,\r\n menyajikan pengalaman yang asli\r\n dan apa adanya.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"value-item\">\r\n\r\n <div class=\"value-icon\">\r\n \u2667\r\n <\/div>\r\n\r\n <h3>\r\n QUALITY\r\n <\/h3>\r\n\r\n <p>\r\n Kami berkomitmen untuk selalu\r\n memberikan kualitas terbaik dalam\r\n setiap aspek.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-4c78647 e-con e-atomic-element e-flexbox-base e-db7256c \" data-id=\"4c78647\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4c78647\">\n \t\t<div class=\"elementor-element elementor-element-5a5c5d6 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"5a5c5d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\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>Vine & Dine<\/title>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&family=Caveat:wght@500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\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\nbody{\r\n margin:0;\r\n font-family:'DM Sans',sans-serif;\r\n background:#24140d;\r\n color:#fff;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n MAIN SECTION\r\n===================================================== *\/\r\n\r\n.vd-gallery-banner{\r\n\r\n width:100%;\r\n\r\n overflow:hidden;\r\n\r\n background:#24140d;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n TOP PHOTO GALLERY\r\n===================================================== *\/\r\n\r\n.vd-photo-gallery{\r\n\r\n width:100%;\r\n\r\n display:grid;\r\n\r\n grid-template-columns:\r\n repeat(4,1fr);\r\n\r\n height:250px;\r\n\r\n}\r\n\r\n\r\n\/* PHOTO ITEM *\/\r\n\r\n.vd-photo{\r\n\r\n position:relative;\r\n\r\n overflow:hidden;\r\n\r\n border-right:2px solid rgba(255,255,255,.25);\r\n\r\n}\r\n\r\n.vd-photo:last-child{\r\n\r\n border-right:none;\r\n\r\n}\r\n\r\n\r\n\/* IMAGE *\/\r\n\r\n.vd-photo img{\r\n\r\n width:100%;\r\n\r\n height:100%;\r\n\r\n display:block;\r\n\r\n object-fit:cover;\r\n\r\n transition:\r\n transform .6s ease,\r\n filter .6s ease;\r\n\r\n}\r\n\r\n\r\n\/* DARK OVERLAY *\/\r\n\r\n.vd-photo::after{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset:0;\r\n\r\n background:\r\n linear-gradient(\r\n to bottom,\r\n rgba(0,0,0,.05),\r\n rgba(0,0,0,.25)\r\n );\r\n\r\n pointer-events:none;\r\n\r\n}\r\n\r\n\r\n\/* HOVER *\/\r\n\r\n.vd-photo:hover img{\r\n\r\n transform:scale(1.06);\r\n\r\n filter:brightness(.9);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n BOTTOM CONTENT\r\n===================================================== *\/\r\n\r\n.vd-bottom{\r\n\r\n position:relative;\r\n\r\n min-height:178px;\r\n\r\n padding:\r\n 32px 8%\r\n 25px;\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n background:\r\n\r\n radial-gradient(\r\n circle at 15% 60%,\r\n rgba(126,78,39,.12),\r\n transparent 28%\r\n ),\r\n\r\n radial-gradient(\r\n circle at 88% 30%,\r\n rgba(126,78,39,.10),\r\n transparent 25%\r\n ),\r\n\r\n #24140d;\r\n\r\n overflow:hidden;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n SUBTLE BACKGROUND TEXT\r\n===================================================== *\/\r\n\r\n.vd-bottom::before{\r\n\r\n content:\r\n \"good coffee, good music, good moments.\";\r\n\r\n position:absolute;\r\n\r\n left:35px;\r\n\r\n bottom:-25px;\r\n\r\n width:380px;\r\n\r\n font-family:'Caveat',cursive;\r\n\r\n font-size:43px;\r\n\r\n line-height:.9;\r\n\r\n color:rgba(182,126,77,.07);\r\n\r\n transform:rotate(-10deg);\r\n\r\n pointer-events:none;\r\n\r\n}\r\n\r\n\r\n.vd-bottom::after{\r\n\r\n content:\r\n \"good coffee, good music, good moments.\";\r\n\r\n position:absolute;\r\n\r\n right:-15px;\r\n\r\n bottom:-25px;\r\n\r\n width:350px;\r\n\r\n font-family:'Caveat',cursive;\r\n\r\n font-size:42px;\r\n\r\n line-height:.9;\r\n\r\n color:rgba(182,126,77,.06);\r\n\r\n transform:rotate(-8deg);\r\n\r\n pointer-events:none;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n CONTENT WRAPPER\r\n===================================================== *\/\r\n\r\n.vd-content{\r\n\r\n position:relative;\r\n\r\n z-index:3;\r\n\r\n width:100%;\r\n\r\n max-width:1050px;\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n gap:90px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n LEFT CONTENT\r\n===================================================== *\/\r\n\r\n.vd-message{\r\n\r\n text-align:center;\r\n\r\n position:relative;\r\n\r\n min-width:570px;\r\n\r\n}\r\n\r\n\r\n\/* VINYL ICON *\/\r\n\r\n.vd-vinyl-icon{\r\n\r\n position:absolute;\r\n\r\n left:-2px;\r\n\r\n top:1px;\r\n\r\n width:42px;\r\n\r\n height:42px;\r\n\r\n border-radius:50%;\r\n\r\n background:\r\n radial-gradient(\r\n circle at center,\r\n #c88b4e 0 6px,\r\n #2a180f 7px 11px,\r\n #c88b4e 12px 13px,\r\n #2a180f 14px 100%\r\n );\r\n\r\n box-shadow:\r\n 0 0 0 2px rgba(221,181,133,.45);\r\n\r\n}\r\n\r\n\r\n\/* MAIN HEADING *\/\r\n\r\n.vd-title{\r\n\r\n font-family:'Playfair Display',serif;\r\n\r\n font-size:31px;\r\n\r\n line-height:1.2;\r\n\r\n color:#f3e0c4;\r\n\r\n font-weight:600;\r\n\r\n margin-bottom:4px;\r\n\r\n}\r\n\r\n\r\n\/* SCRIPT TAGLINE *\/\r\n\r\n.vd-tagline{\r\n\r\n font-family:'Caveat',cursive;\r\n\r\n font-size:28px;\r\n\r\n line-height:1.2;\r\n\r\n color:#d4a06b;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n DECORATIVE DIVIDER\r\n===================================================== *\/\r\n\r\n.vd-divider{\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n gap:10px;\r\n\r\n margin-top:20px;\r\n\r\n}\r\n\r\n\r\n.vd-divider::before,\r\n.vd-divider::after{\r\n\r\n content:\"\";\r\n\r\n width:180px;\r\n\r\n height:1px;\r\n\r\n background:#70451f;\r\n\r\n}\r\n\r\n\r\n.vd-divider span{\r\n\r\n color:#d18b47;\r\n\r\n font-size:18px;\r\n\r\n line-height:1;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n BUTTON\r\n===================================================== *\/\r\n\r\n.vd-button{\r\n\r\n display:inline-flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n gap:10px;\r\n\r\n min-width:188px;\r\n\r\n padding:14px 24px;\r\n\r\n background:#b76527;\r\n\r\n border:1px solid #c97b38;\r\n\r\n border-radius:6px;\r\n\r\n color:#fff;\r\n\r\n text-decoration:none;\r\n\r\n font-size:13px;\r\n\r\n font-weight:700;\r\n\r\n letter-spacing:.4px;\r\n\r\n transition:\r\n background .3s ease,\r\n transform .3s ease,\r\n box-shadow .3s ease;\r\n\r\n}\r\n\r\n\r\n.vd-button span{\r\n\r\n font-size:17px;\r\n\r\n line-height:1;\r\n\r\n}\r\n\r\n\r\n.vd-button:hover{\r\n\r\n background:#d07832;\r\n\r\n transform:translateY(-2px);\r\n\r\n box-shadow:\r\n 0 8px 20px rgba(0,0,0,.25);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n RESPONSIVE - TABLET\r\n===================================================== *\/\r\n\r\n@media(max-width:900px){\r\n\r\n .vd-photo-gallery{\r\n\r\n height:220px;\r\n\r\n }\r\n\r\n .vd-content{\r\n\r\n gap:45px;\r\n\r\n }\r\n\r\n .vd-message{\r\n\r\n min-width:0;\r\n\r\n }\r\n\r\n .vd-vinyl-icon{\r\n\r\n position:relative;\r\n\r\n left:auto;\r\n\r\n top:auto;\r\n\r\n margin:0 auto 10px;\r\n\r\n }\r\n\r\n .vd-title{\r\n\r\n font-size:27px;\r\n\r\n }\r\n\r\n .vd-tagline{\r\n\r\n font-size:25px;\r\n\r\n }\r\n\r\n .vd-divider::before,\r\n .vd-divider::after{\r\n\r\n width:100px;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n RESPONSIVE - MOBILE\r\n===================================================== *\/\r\n\r\n@media(max-width:650px){\r\n\r\n .vd-photo-gallery{\r\n\r\n grid-template-columns:\r\n repeat(2,1fr);\r\n\r\n height:auto;\r\n\r\n }\r\n\r\n .vd-photo{\r\n\r\n height:150px;\r\n\r\n }\r\n\r\n .vd-photo:nth-child(2){\r\n\r\n border-right:none;\r\n\r\n }\r\n\r\n .vd-photo:nth-child(3),\r\n .vd-photo:nth-child(4){\r\n\r\n border-top:2px solid rgba(255,255,255,.25);\r\n\r\n }\r\n\r\n .vd-bottom{\r\n\r\n padding:\r\n 38px 20px\r\n 35px;\r\n\r\n }\r\n\r\n .vd-content{\r\n\r\n flex-direction:column;\r\n\r\n gap:28px;\r\n\r\n }\r\n\r\n .vd-message{\r\n\r\n min-width:0;\r\n\r\n width:100%;\r\n\r\n }\r\n\r\n .vd-title{\r\n\r\n font-size:25px;\r\n\r\n }\r\n\r\n .vd-tagline{\r\n\r\n font-size:24px;\r\n\r\n }\r\n\r\n .vd-divider{\r\n\r\n margin-top:15px;\r\n\r\n }\r\n\r\n .vd-divider::before,\r\n .vd-divider::after{\r\n\r\n width:65px;\r\n\r\n }\r\n\r\n .vd-button{\r\n\r\n width:190px;\r\n\r\n }\r\n\r\n .vd-bottom::before{\r\n\r\n left:-20px;\r\n\r\n font-size:32px;\r\n\r\n }\r\n\r\n .vd-bottom::after{\r\n\r\n right:-50px;\r\n\r\n font-size:32px;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n VERY SMALL MOBILE\r\n===================================================== *\/\r\n\r\n@media(max-width:400px){\r\n\r\n .vd-photo{\r\n\r\n height:125px;\r\n\r\n }\r\n\r\n .vd-title{\r\n\r\n font-size:22px;\r\n\r\n }\r\n\r\n .vd-tagline{\r\n\r\n font-size:21px;\r\n\r\n }\r\n\r\n .vd-divider::before,\r\n .vd-divider::after{\r\n\r\n width:45px;\r\n\r\n }\r\n\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n\r\n\r\n<section class=\"vd-gallery-banner\">\r\n\r\n\r\n \r\n\r\n <div class=\"vd-photo-gallery\">\r\n\r\n\r\n \r\n\r\n <div class=\"vd-photo\">\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1495474472287-4d71bcdd2085?w=1200\"\r\n alt=\"Vine and Dine Coffee Bar\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"vd-photo\">\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1501339847302-ac426a4a7cbb?w=1200\"\r\n alt=\"Vine and Dine Interior\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"vd-photo\">\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1509042239860-f550ce710b93?w=1200\"\r\n alt=\"Vine and Dine Coffee\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"vd-photo\">\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1539375665275-f9de415ef9ac?w=1200\"\r\n alt=\"Vine and Dine Vinyl Collection\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n\r\n \r\n\r\n <div class=\"vd-bottom\">\r\n\r\n\r\n <div class=\"vd-content\">\r\n\r\n\r\n \r\n\r\n <div class=\"vd-message\">\r\n\r\n\r\n <div class=\"vd-vinyl-icon\"><\/div>\r\n\r\n\r\n <h2 class=\"vd-title\">\r\n\r\n Good Coffee, Good Music,\r\n Good Moments.\r\n\r\n <\/h2>\r\n\r\n\r\n <div class=\"vd-tagline\">\r\n\r\n Sampai jumpa di Vine & Dine!\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"vd-divider\">\r\n\r\n <span>\u2726<\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"#\"\r\n class=\"vd-button\"\r\n >\r\n\r\n <span>\u2667<\/span>\r\n\r\n KUNJUNGI KAMI\r\n\r\n <span>\u203a<\/span>\r\n\r\n <\/a>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n<\/section>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Story – Vine & Dine good coffee, good music, good moments. OUR STORY Dari Kecintaan pada Kopi dan Musik \u2726 Vine & Dine lahir dari kecintaan kami terhadap dua hal yang tak terpisahkan: kopi yang nikmat dan musik yang bermakna. Kami percaya, secangkir kopi terbaik akan semakin lengkap dengan alunan musik yang tepat dan […]<\/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-16","page","type-page","status-publish","hentry","wpbf-post"],"_links":{"self":[{"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":4,"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions\/103"}],"wp:attachment":[{"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t $\"\"$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\nOur Story - Vine & Dine<\/title>\r\n\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\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\nbody{\r\n font-family:'DM Sans', sans-serif;\r\n background:#f5eee4;\r\n color:#33251d;\r\n}\r\n\r\n\r\n\/* ==============================\r\n OUR STORY SECTION\r\n================================= *\/\r\n\r\n.our-story{\r\n\r\n position:relative;\r\n\r\n width:100%;\r\n\r\n min-height:592px;\r\n\r\n overflow:hidden;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 15% 50%,\r\n rgba(255,255,255,.45),\r\n transparent 35%\r\n ),\r\n #f5eee4;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n DECORATIVE BACKGROUND\r\n================================= *\/\r\n\r\n.our-story::before{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n width:500px;\r\n height:500px;\r\n\r\n left:-180px;\r\n top:-180px;\r\n\r\n border-radius:50%;\r\n\r\n background:\r\n radial-gradient(\r\n circle,\r\n rgba(194,146,102,.08) 1px,\r\n transparent 1px\r\n );\r\n\r\n background-size:12px 12px;\r\n\r\n opacity:.6;\r\n\r\n}\r\n\r\n.our-story::after{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n width:230px;\r\n height:230px;\r\n\r\n right:-50px;\r\n top:145px;\r\n\r\n border:2px solid rgba(190,135,83,.25);\r\n\r\n border-radius:50%;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n CONTAINER\r\n================================= *\/\r\n\r\n.story-container{\r\n\r\n width:100%;\r\n\r\n max-width:1250px;\r\n\r\n min-height:592px;\r\n\r\n margin:0 auto;\r\n\r\n padding:45px 40px;\r\n\r\n display:grid;\r\n\r\n grid-template-columns:48% 52%;\r\n\r\n align-items:center;\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n LEFT IMAGE\r\n================================= *\/\r\n\r\n.story-image-area{\r\n\r\n position:relative;\r\n\r\n height:500px;\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n}\r\n\r\n\r\n\/* POLAROID *\/\r\n\r\n.polaroid{\r\n\r\n position:relative;\r\n\r\n width:390px;\r\n\r\n background:#fff;\r\n\r\n padding:16px 16px 72px;\r\n\r\n box-shadow:\r\n 0 18px 30px rgba(58,38,24,.18),\r\n 0 3px 8px rgba(58,38,24,.08);\r\n\r\n transform:rotate(-5deg);\r\n\r\n z-index:3;\r\n\r\n}\r\n\r\n\r\n\/* IMAGE *\/\r\n\r\n.polaroid img{\r\n\r\n width:100%;\r\n\r\n height:385px;\r\n\r\n display:block;\r\n\r\n object-fit:cover;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n TAPE\r\n================================= *\/\r\n\r\n.tape{\r\n\r\n position:absolute;\r\n\r\n width:145px;\r\n\r\n height:45px;\r\n\r\n top:-27px;\r\n\r\n left:120px;\r\n\r\n background:rgba(205,163,112,.72);\r\n\r\n transform:rotate(-4deg);\r\n\r\n z-index:5;\r\n\r\n opacity:.85;\r\n\r\n}\r\n\r\n.tape::after{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset:0;\r\n\r\n background:\r\n repeating-linear-gradient(\r\n 90deg,\r\n transparent 0,\r\n transparent 5px,\r\n rgba(130,94,61,.08) 6px,\r\n transparent 7px\r\n );\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n DECORATIVE LEAF\r\n================================= *\/\r\n\r\n.leaf-decoration{\r\n\r\n position:absolute;\r\n\r\n bottom:20px;\r\n\r\n left:35px;\r\n\r\n width:125px;\r\n\r\n height:90px;\r\n\r\n z-index:4;\r\n\r\n transform:rotate(-12deg);\r\n\r\n}\r\n\r\n.leaf{\r\n\r\n position:absolute;\r\n\r\n width:18px;\r\n\r\n height:58px;\r\n\r\n border-radius:100% 0 100% 0;\r\n\r\n background:#708363;\r\n\r\n transform-origin:bottom center;\r\n\r\n}\r\n\r\n.leaf:nth-child(1){\r\n left:25px;\r\n bottom:8px;\r\n transform:rotate(-42deg);\r\n}\r\n\r\n.leaf:nth-child(2){\r\n left:43px;\r\n bottom:18px;\r\n transform:rotate(-20deg);\r\n}\r\n\r\n.leaf:nth-child(3){\r\n left:58px;\r\n bottom:20px;\r\n transform:rotate(5deg);\r\n}\r\n\r\n.leaf:nth-child(4){\r\n left:70px;\r\n bottom:12px;\r\n transform:rotate(28deg);\r\n}\r\n\r\n.leaf:nth-child(5){\r\n left:78px;\r\n bottom:4px;\r\n transform:rotate(48deg);\r\n}\r\n\r\n\r\n\/* ==============================\r\n STAMP\r\n================================= *\/\r\n\r\n.stamp{\r\n\r\n position:absolute;\r\n\r\n width:100px;\r\n height:100px;\r\n\r\n border:2px solid rgba(177,122,72,.22);\r\n\r\n border-radius:50%;\r\n\r\n right:20px;\r\n\r\n bottom:30px;\r\n\r\n transform:rotate(-12deg);\r\n\r\n z-index:2;\r\n\r\n}\r\n\r\n.stamp::before{\r\n\r\n content:\"VINE & DINE\";\r\n\r\n position:absolute;\r\n\r\n inset:14px;\r\n\r\n border:1px solid rgba(177,122,72,.2);\r\n\r\n border-radius:50%;\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n text-align:center;\r\n\r\n font-size:8px;\r\n\r\n letter-spacing:1px;\r\n\r\n color:rgba(177,122,72,.4);\r\n\r\n}\r\n\r\n.stamp::after{\r\n\r\n content:\"\u2726\";\r\n\r\n position:absolute;\r\n\r\n top:42px;\r\n\r\n left:44px;\r\n\r\n font-size:16px;\r\n\r\n color:rgba(177,122,72,.4);\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n RIGHT CONTENT\r\n================================= *\/\r\n\r\n.story-content{\r\n\r\n padding-left:45px;\r\n\r\n padding-right:30px;\r\n\r\n}\r\n\r\n\r\n\/* SMALL TITLE *\/\r\n\r\n.story-label{\r\n\r\n color:#a75e2d;\r\n\r\n font-size:17px;\r\n\r\n font-weight:700;\r\n\r\n letter-spacing:.5px;\r\n\r\n margin-bottom:12px;\r\n\r\n}\r\n\r\n\r\n\/* MAIN TITLE *\/\r\n\r\n.story-title{\r\n\r\n font-family:'Playfair Display', serif;\r\n\r\n font-size:43px;\r\n\r\n line-height:1.2;\r\n\r\n color:#34251d;\r\n\r\n max-width:600px;\r\n\r\n margin-bottom:22px;\r\n\r\n}\r\n\r\n\r\n\/* DECORATIVE LINE *\/\r\n\r\n.story-divider{\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n width:100px;\r\n\r\n margin-bottom:27px;\r\n\r\n}\r\n\r\n.story-divider::before{\r\n\r\n content:\"\";\r\n\r\n width:30px;\r\n\r\n height:2px;\r\n\r\n background:#a76437;\r\n\r\n}\r\n\r\n.story-divider span{\r\n\r\n color:#a76437;\r\n\r\n font-size:18px;\r\n\r\n margin:0 8px;\r\n\r\n}\r\n\r\n.story-divider::after{\r\n\r\n content:\"\";\r\n\r\n width:30px;\r\n\r\n height:2px;\r\n\r\n background:#a76437;\r\n\r\n}\r\n\r\n\r\n\/* PARAGRAPH *\/\r\n\r\n.story-text{\r\n\r\n max-width:610px;\r\n\r\n font-size:16px;\r\n\r\n line-height:1.9;\r\n\r\n color:#4f433a;\r\n\r\n margin-bottom:15px;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n BUTTON\r\n================================= *\/\r\n\r\n.story-button{\r\n\r\n display:inline-flex;\r\n\r\n align-items:center;\r\n\r\n gap:12px;\r\n\r\n margin-top:10px;\r\n\r\n padding:14px 25px;\r\n\r\n background:#b66326;\r\n\r\n color:white;\r\n\r\n text-decoration:none;\r\n\r\n border-radius:6px;\r\n\r\n font-size:14px;\r\n\r\n font-weight:700;\r\n\r\n letter-spacing:.3px;\r\n\r\n transition:all .3s ease;\r\n\r\n}\r\n\r\n.story-button span{\r\n\r\n font-size:18px;\r\n\r\n line-height:1;\r\n\r\n transition:.3s;\r\n\r\n}\r\n\r\n.story-button:hover{\r\n\r\n background:#91491b;\r\n\r\n transform:translateY(-2px);\r\n\r\n box-shadow:0 8px 18px rgba(145,73,27,.2);\r\n\r\n}\r\n\r\n.story-button:hover span{\r\n\r\n transform:translateX(4px);\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n HANDWRITTEN DECORATION\r\n================================= *\/\r\n\r\n.handwriting{\r\n\r\n position:absolute;\r\n\r\n left:20px;\r\n\r\n top:65px;\r\n\r\n color:rgba(123,86,59,.10);\r\n\r\n font-family:cursive;\r\n\r\n font-size:28px;\r\n\r\n line-height:1.4;\r\n\r\n transform:rotate(-10deg);\r\n\r\n z-index:1;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n COFFEE STAIN\r\n================================= *\/\r\n\r\n.coffee-stain{\r\n\r\n position:absolute;\r\n\r\n right:-35px;\r\n\r\n bottom:25px;\r\n\r\n width:170px;\r\n\r\n height:170px;\r\n\r\n border:7px solid rgba(184,132,82,.12);\r\n\r\n border-radius:50%;\r\n\r\n transform:rotate(-15deg);\r\n\r\n}\r\n\r\n.coffee-stain::before{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n width:120px;\r\n\r\n height:120px;\r\n\r\n top:12px;\r\n\r\n left:12px;\r\n\r\n border:4px solid rgba(184,132,82,.08);\r\n\r\n border-radius:50%;\r\n\r\n}\r\n\r\n\r\n\/* ==============================\r\n RESPONSIVE\r\n================================= *\/\r\n\r\n@media(max-width:1000px){\r\n\r\n .story-container{\r\n\r\n grid-template-columns:1fr;\r\n\r\n padding:70px 30px;\r\n\r\n }\r\n\r\n .story-image-area{\r\n\r\n height:480px;\r\n\r\n margin-bottom:30px;\r\n\r\n }\r\n\r\n .story-content{\r\n\r\n padding:0;\r\n\r\n text-align:left;\r\n\r\n }\r\n\r\n .story-title{\r\n\r\n font-size:40px;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n@media(max-width:600px){\r\n\r\n .our-story{\r\n\r\n min-height:auto;\r\n\r\n }\r\n\r\n .story-container{\r\n\r\n padding:70px 20px;\r\n\r\n }\r\n\r\n .story-image-area{\r\n\r\n height:390px;\r\n\r\n }\r\n\r\n .polaroid{\r\n\r\n width:285px;\r\n\r\n padding:12px 12px 50px;\r\n\r\n }\r\n\r\n .polaroid img{\r\n\r\n height:285px;\r\n\r\n }\r\n\r\n .tape{\r\n\r\n width:110px;\r\n\r\n height:35px;\r\n\r\n left:87px;\r\n\r\n top:-20px;\r\n\r\n }\r\n\r\n .leaf-decoration{\r\n\r\n left:0;\r\n\r\n bottom:5px;\r\n\r\n transform:scale(.75) rotate(-12deg);\r\n\r\n }\r\n\r\n .stamp{\r\n\r\n right:-5px;\r\n\r\n bottom:15px;\r\n\r\n transform:scale(.75) rotate(-12deg);\r\n\r\n }\r\n\r\n .story-label{\r\n\r\n font-size:14px;\r\n\r\n }\r\n\r\n .story-title{\r\n\r\n font-size:32px;\r\n\r\n }\r\n\r\n .story-text{\r\n\r\n font-size:14px;\r\n\r\n line-height:1.8;\r\n\r\n }\r\n\r\n .coffee-stain{\r\n\r\n width:110px;\r\n\r\n height:110px;\r\n\r\n right:-50px;\r\n\r\n }\r\n\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n\r\n\r\n\r\n<section class=\"our-story\">\r\n\r\n \r\n <div class=\"handwriting\">\r\n good coffee,<br>\r\n good music,<br>\r\n good moments.\r\n <\/div>\r\n\r\n <div class=\"coffee-stain\"><\/div>\r\n\r\n\r\n <div class=\"story-container\">\r\n\r\n\r\n \r\n\r\n <div class=\"story-image-area\">\r\n\r\n <div class=\"polaroid\">\r\n\r\n <div class=\"tape\"><\/div>\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/vineanddine.my.id\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-7-2026-11_25_44-AM-1.png\"\r\n alt=\"Interior Vine & Dine\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"leaf-decoration\">\r\n\r\n <div class=\"leaf\"><\/div>\r\n <div class=\"leaf\"><\/div>\r\n <div class=\"leaf\"><\/div>\r\n <div class=\"leaf\"><\/div>\r\n <div class=\"leaf\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"stamp\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n\r\n \r\n\r\n <div class=\"story-content\">\r\n\r\n <div class=\"story-label\">\r\n OUR STORY\r\n <\/div>\r\n\r\n\r\n <h1 class=\"story-title\">\r\n Dari Kecintaan pada Kopi<br>\r\n dan Musik\r\n <\/h1>\r\n\r\n\r\n <div class=\"story-divider\">\r\n <span>\u2726<\/span>\r\n <\/div>\r\n\r\n\r\n <p class=\"story-text\">\r\n\r\n Vine & Dine lahir dari kecintaan kami\r\n terhadap dua hal yang tak terpisahkan:\r\n kopi yang nikmat dan musik yang bermakna.\r\n Kami percaya, secangkir kopi terbaik akan\r\n semakin lengkap dengan alunan musik yang\r\n tepat dan suasana yang hangat.\r\n\r\n <\/p>\r\n\r\n\r\n <p class=\"story-text\">\r\n\r\n Di sini, kami ingin menciptakan ruang bagi\r\n semua orang untuk bersantai, menikmati momen,\r\n menemukan lagu favorit baru, dan berbagi cerita.\r\n\r\n <\/p>\r\n\r\n\r\n <a href=\"#\" class=\"story-button\">\r\n\r\n LEBIH LANJUT\r\n\r\n <span>\u203a<\/span>\r\n\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-bd81345 e-con e-atomic-element e-flexbox-base e-6b49334 \" data-id=\"bd81345\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"bd81345\">\n \t\t<div class=\"elementor-element elementor-element-64f12b4 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"64f12b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\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>Vine & Dine - About Us<\/title>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\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\nbody{\r\n font-family:'DM Sans', sans-serif;\r\n color:#30221a;\r\n}\r\n\r\n\r\n\/* ========================================\r\n GENERAL\r\n======================================== *\/\r\n\r\n.section-title{\r\n text-align:center;\r\n font-size:26px;\r\n font-weight:700;\r\n letter-spacing:.5px;\r\n margin-bottom:25px;\r\n}\r\n\r\n.title-decoration{\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:10px;\r\n margin-top:-12px;\r\n margin-bottom:35px;\r\n}\r\n\r\n.title-decoration::before,\r\n.title-decoration::after{\r\n content:\"\";\r\n width:85px;\r\n height:1px;\r\n background:#9a622f;\r\n}\r\n\r\n.title-decoration span{\r\n color:#b26d2d;\r\n font-size:18px;\r\n}\r\n\r\n\r\n\/* ========================================\r\n WHAT MAKES US DIFFERENT\r\n======================================== *\/\r\n\r\n.different-section{\r\n\r\n position:relative;\r\n\r\n width:100%;\r\n\r\n padding:34px 7% 40px;\r\n\r\n background:\r\n linear-gradient(\r\n rgba(35,20,12,.93),\r\n rgba(35,20,12,.93)\r\n ),\r\n #2a180e;\r\n\r\n color:#fff;\r\n\r\n overflow:hidden;\r\n}\r\n\r\n\r\n\/* subtle texture *\/\r\n\r\n.different-section::before{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset:0;\r\n\r\n opacity:.12;\r\n\r\n background-image:\r\n radial-gradient(\r\n rgba(255,255,255,.3) 1px,\r\n transparent 1px\r\n );\r\n\r\n background-size:14px 14px;\r\n\r\n pointer-events:none;\r\n\r\n}\r\n\r\n\r\n\/* title *\/\r\n\r\n.different-section .section-title{\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n color:#f2dfc5;\r\n\r\n}\r\n\r\n\r\n\/* decoration *\/\r\n\r\n.different-section .title-decoration{\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n}\r\n\r\n.different-section .title-decoration::before,\r\n.different-section .title-decoration::after{\r\n\r\n background:#9c612d;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n DIFFERENT GRID\r\n======================================== *\/\r\n\r\n.different-grid{\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n max-width:1200px;\r\n\r\n margin:0 auto;\r\n\r\n display:grid;\r\n\r\n grid-template-columns:\r\n repeat(4,1fr);\r\n\r\n}\r\n\r\n\r\n.different-item{\r\n\r\n min-height:165px;\r\n\r\n padding:0 42px;\r\n\r\n text-align:center;\r\n\r\n display:flex;\r\n\r\n flex-direction:column;\r\n\r\n align-items:center;\r\n\r\n justify-content:flex-start;\r\n\r\n border-right:1px solid rgba(180,117,58,.45);\r\n\r\n}\r\n\r\n\r\n.different-item:last-child{\r\n\r\n border-right:none;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n ICON\r\n======================================== *\/\r\n\r\n.feature-icon{\r\n\r\n width:58px;\r\n\r\n height:58px;\r\n\r\n margin-bottom:16px;\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n font-size:42px;\r\n\r\n color:#e9c99d;\r\n\r\n filter:\r\n grayscale(1)\r\n brightness(1.4);\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n DIFFERENT TITLE\r\n======================================== *\/\r\n\r\n.different-item h3{\r\n\r\n color:#d28a4b;\r\n\r\n font-size:16px;\r\n\r\n font-weight:700;\r\n\r\n margin-bottom:14px;\r\n\r\n letter-spacing:.2px;\r\n\r\n text-transform:uppercase;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n DIFFERENT TEXT\r\n======================================== *\/\r\n\r\n.different-item p{\r\n\r\n max-width:245px;\r\n\r\n color:#d9cabe;\r\n\r\n font-size:13px;\r\n\r\n line-height:1.65;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n OUR VALUES\r\n======================================== *\/\r\n\r\n.values-section{\r\n\r\n position:relative;\r\n\r\n width:100%;\r\n\r\n padding:34px 7% 48px;\r\n\r\n background:#f5eee4;\r\n\r\n overflow:hidden;\r\n\r\n}\r\n\r\n\r\n\/* paper texture *\/\r\n\r\n.values-section::before{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset:0;\r\n\r\n opacity:.22;\r\n\r\n background-image:\r\n radial-gradient(\r\n rgba(120,90,60,.16) .7px,\r\n transparent .7px\r\n );\r\n\r\n background-size:8px 8px;\r\n\r\n pointer-events:none;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n VALUES TITLE\r\n======================================== *\/\r\n\r\n.values-section .section-title{\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n color:#34261e;\r\n\r\n margin-bottom:25px;\r\n\r\n}\r\n\r\n\r\n.values-section .title-decoration{\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n VALUES GRID\r\n======================================== *\/\r\n\r\n.values-grid{\r\n\r\n position:relative;\r\n\r\n z-index:2;\r\n\r\n max-width:1050px;\r\n\r\n margin:0 auto;\r\n\r\n display:grid;\r\n\r\n grid-template-columns:\r\n repeat(3,1fr);\r\n\r\n}\r\n\r\n\r\n.value-item{\r\n\r\n min-height:155px;\r\n\r\n padding:0 60px;\r\n\r\n text-align:center;\r\n\r\n border-right:2px dotted rgba(96,70,49,.35);\r\n\r\n}\r\n\r\n\r\n.value-item:last-child{\r\n\r\n border-right:none;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n VALUE ICON\r\n======================================== *\/\r\n\r\n.value-icon{\r\n\r\n height:58px;\r\n\r\n display:flex;\r\n\r\n justify-content:center;\r\n\r\n align-items:center;\r\n\r\n margin-bottom:14px;\r\n\r\n font-size:42px;\r\n\r\n color:#34261e;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n VALUE TITLE\r\n======================================== *\/\r\n\r\n.value-item h3{\r\n\r\n font-size:16px;\r\n\r\n font-weight:700;\r\n\r\n color:#30221a;\r\n\r\n margin-bottom:14px;\r\n\r\n text-transform:uppercase;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n VALUE TEXT\r\n======================================== *\/\r\n\r\n.value-item p{\r\n\r\n color:#55483e;\r\n\r\n font-size:13px;\r\n\r\n line-height:1.7;\r\n\r\n max-width:250px;\r\n\r\n margin:0 auto;\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n RESPONSIVE TABLET\r\n======================================== *\/\r\n\r\n@media(max-width:900px){\r\n\r\n .different-section{\r\n\r\n padding-left:30px;\r\n padding-right:30px;\r\n\r\n }\r\n\r\n .different-grid{\r\n\r\n grid-template-columns:\r\n repeat(2,1fr);\r\n\r\n row-gap:35px;\r\n\r\n }\r\n\r\n .different-item:nth-child(2){\r\n\r\n border-right:none;\r\n\r\n }\r\n\r\n .different-item:nth-child(3){\r\n\r\n border-right:1px solid rgba(180,117,58,.45);\r\n\r\n }\r\n\r\n .values-grid{\r\n\r\n grid-template-columns:\r\n repeat(3,1fr);\r\n\r\n }\r\n\r\n .value-item{\r\n\r\n padding:0 25px;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n RESPONSIVE MOBILE\r\n======================================== *\/\r\n\r\n@media(max-width:600px){\r\n\r\n .different-section{\r\n\r\n padding:45px 25px;\r\n\r\n }\r\n\r\n .values-section{\r\n\r\n padding:45px 25px;\r\n\r\n }\r\n\r\n .section-title{\r\n\r\n font-size:23px;\r\n\r\n }\r\n\r\n .title-decoration{\r\n\r\n margin-bottom:30px;\r\n\r\n }\r\n\r\n .title-decoration::before,\r\n .title-decoration::after{\r\n\r\n width:45px;\r\n\r\n }\r\n\r\n\r\n \/* DIFFERENT *\/\r\n\r\n .different-grid{\r\n\r\n grid-template-columns:1fr;\r\n\r\n gap:35px;\r\n\r\n }\r\n\r\n .different-item{\r\n\r\n padding:0 20px 30px;\r\n\r\n border-right:none !important;\r\n\r\n border-bottom:1px solid rgba(180,117,58,.35);\r\n\r\n }\r\n\r\n .different-item:last-child{\r\n\r\n border-bottom:none;\r\n\r\n padding-bottom:0;\r\n\r\n }\r\n\r\n\r\n \/* VALUES *\/\r\n\r\n .values-grid{\r\n\r\n grid-template-columns:1fr;\r\n\r\n gap:35px;\r\n\r\n }\r\n\r\n .value-item{\r\n\r\n padding:0 20px 30px;\r\n\r\n border-right:none;\r\n\r\n border-bottom:2px dotted rgba(96,70,49,.3);\r\n\r\n }\r\n\r\n .value-item:last-child{\r\n\r\n border-bottom:none;\r\n\r\n padding-bottom:0;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\/* ========================================\r\n WORDPRESS FIX\r\n======================================== *\/\r\n\r\n.different-section *,\r\n.values-section *{\r\n\r\n box-sizing:border-box;\r\n\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n\r\n\r\n<section class=\"different-section\">\r\n\r\n <h2 class=\"section-title\">\r\n WHAT MAKES US DIFFERENT\r\n <\/h2>\r\n\r\n\r\n <div class=\"title-decoration\">\r\n <span>\u2726<\/span>\r\n <\/div>\r\n\r\n\r\n <div class=\"different-grid\">\r\n\r\n\r\n \r\n\r\n <div class=\"different-item\">\r\n\r\n <div class=\"feature-icon\">\r\n \u2615\r\n <\/div>\r\n\r\n <h3>\r\n KOPI BERKUALITAS\r\n <\/h3>\r\n\r\n <p>\r\n Kami memilih biji kopi terbaik\r\n dan menyajikannya dengan penuh\r\n perhatian di setiap cangkir.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"different-item\">\r\n\r\n <div class=\"feature-icon\">\r\n \ud83d\udcbf\r\n <\/div>\r\n\r\n <h3>\r\n KOLEKSI VINYL PILIHAN\r\n <\/h3>\r\n\r\n <p>\r\n Koleksi piringan hitam kami\r\n dipilih dengan hati, dari klasik\r\n hingga rilisan terbaru.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"different-item\">\r\n\r\n <div class=\"feature-icon\">\r\n \ud83d\udecb\r\n <\/div>\r\n\r\n <h3>\r\n SUASANA NYAMAN\r\n <\/h3>\r\n\r\n <p>\r\n Desain cozy dan hangat untuk\r\n teman bekerja, bersantai,\r\n atau sekadar menikmati waktu.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"different-item\">\r\n\r\n <div class=\"feature-icon\">\r\n \u2667\r\n <\/div>\r\n\r\n <h3>\r\n KOMUNITAS\r\n <\/h3>\r\n\r\n <p>\r\n Lebih dari tempat nongkrong,\r\n kami adalah ruang untuk\r\n terhubung dan berbagi.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n\r\n\r\n<section class=\"values-section\">\r\n\r\n <h2 class=\"section-title\">\r\n OUR VALUES\r\n <\/h2>\r\n\r\n\r\n <div class=\"title-decoration\">\r\n <span>\u2726<\/span>\r\n <\/div>\r\n\r\n\r\n <div class=\"values-grid\">\r\n\r\n\r\n \r\n\r\n <div class=\"value-item\">\r\n\r\n <div class=\"value-icon\">\r\n \u2661\r\n <\/div>\r\n\r\n <h3>\r\n PASSION\r\n <\/h3>\r\n\r\n <p>\r\n Kami melakukan segala sesuatu\r\n dengan cinta \u2014 dari kopi yang kami\r\n seduh hingga musik yang kami putar.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"value-item\">\r\n\r\n <div class=\"value-icon\">\r\n \u2667\r\n <\/div>\r\n\r\n <h3>\r\n AUTHENTICITY\r\n <\/h3>\r\n\r\n <p>\r\n Kami tetap jujur pada diri kami sendiri,\r\n menyajikan pengalaman yang asli\r\n dan apa adanya.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"value-item\">\r\n\r\n <div class=\"value-icon\">\r\n \u2667\r\n <\/div>\r\n\r\n <h3>\r\n QUALITY\r\n <\/h3>\r\n\r\n <p>\r\n Kami berkomitmen untuk selalu\r\n memberikan kualitas terbaik dalam\r\n setiap aspek.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-4c78647 e-con e-atomic-element e-flexbox-base e-db7256c \" data-id=\"4c78647\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4c78647\">\n \t\t<div class=\"elementor-element elementor-element-5a5c5d6 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"5a5c5d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\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>Vine & Dine<\/title>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&family=Caveat:wght@500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\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\nbody{\r\n margin:0;\r\n font-family:'DM Sans',sans-serif;\r\n background:#24140d;\r\n color:#fff;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n MAIN SECTION\r\n===================================================== *\/\r\n\r\n.vd-gallery-banner{\r\n\r\n width:100%;\r\n\r\n overflow:hidden;\r\n\r\n background:#24140d;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n TOP PHOTO GALLERY\r\n===================================================== *\/\r\n\r\n.vd-photo-gallery{\r\n\r\n width:100%;\r\n\r\n display:grid;\r\n\r\n grid-template-columns:\r\n repeat(4,1fr);\r\n\r\n height:250px;\r\n\r\n}\r\n\r\n\r\n\/* PHOTO ITEM *\/\r\n\r\n.vd-photo{\r\n\r\n position:relative;\r\n\r\n overflow:hidden;\r\n\r\n border-right:2px solid rgba(255,255,255,.25);\r\n\r\n}\r\n\r\n.vd-photo:last-child{\r\n\r\n border-right:none;\r\n\r\n}\r\n\r\n\r\n\/* IMAGE *\/\r\n\r\n.vd-photo img{\r\n\r\n width:100%;\r\n\r\n height:100%;\r\n\r\n display:block;\r\n\r\n object-fit:cover;\r\n\r\n transition:\r\n transform .6s ease,\r\n filter .6s ease;\r\n\r\n}\r\n\r\n\r\n\/* DARK OVERLAY *\/\r\n\r\n.vd-photo::after{\r\n\r\n content:\"\";\r\n\r\n position:absolute;\r\n\r\n inset:0;\r\n\r\n background:\r\n linear-gradient(\r\n to bottom,\r\n rgba(0,0,0,.05),\r\n rgba(0,0,0,.25)\r\n );\r\n\r\n pointer-events:none;\r\n\r\n}\r\n\r\n\r\n\/* HOVER *\/\r\n\r\n.vd-photo:hover img{\r\n\r\n transform:scale(1.06);\r\n\r\n filter:brightness(.9);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n BOTTOM CONTENT\r\n===================================================== *\/\r\n\r\n.vd-bottom{\r\n\r\n position:relative;\r\n\r\n min-height:178px;\r\n\r\n padding:\r\n 32px 8%\r\n 25px;\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n background:\r\n\r\n radial-gradient(\r\n circle at 15% 60%,\r\n rgba(126,78,39,.12),\r\n transparent 28%\r\n ),\r\n\r\n radial-gradient(\r\n circle at 88% 30%,\r\n rgba(126,78,39,.10),\r\n transparent 25%\r\n ),\r\n\r\n #24140d;\r\n\r\n overflow:hidden;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n SUBTLE BACKGROUND TEXT\r\n===================================================== *\/\r\n\r\n.vd-bottom::before{\r\n\r\n content:\r\n \"good coffee, good music, good moments.\";\r\n\r\n position:absolute;\r\n\r\n left:35px;\r\n\r\n bottom:-25px;\r\n\r\n width:380px;\r\n\r\n font-family:'Caveat',cursive;\r\n\r\n font-size:43px;\r\n\r\n line-height:.9;\r\n\r\n color:rgba(182,126,77,.07);\r\n\r\n transform:rotate(-10deg);\r\n\r\n pointer-events:none;\r\n\r\n}\r\n\r\n\r\n.vd-bottom::after{\r\n\r\n content:\r\n \"good coffee, good music, good moments.\";\r\n\r\n position:absolute;\r\n\r\n right:-15px;\r\n\r\n bottom:-25px;\r\n\r\n width:350px;\r\n\r\n font-family:'Caveat',cursive;\r\n\r\n font-size:42px;\r\n\r\n line-height:.9;\r\n\r\n color:rgba(182,126,77,.06);\r\n\r\n transform:rotate(-8deg);\r\n\r\n pointer-events:none;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n CONTENT WRAPPER\r\n===================================================== *\/\r\n\r\n.vd-content{\r\n\r\n position:relative;\r\n\r\n z-index:3;\r\n\r\n width:100%;\r\n\r\n max-width:1050px;\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n gap:90px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n LEFT CONTENT\r\n===================================================== *\/\r\n\r\n.vd-message{\r\n\r\n text-align:center;\r\n\r\n position:relative;\r\n\r\n min-width:570px;\r\n\r\n}\r\n\r\n\r\n\/* VINYL ICON *\/\r\n\r\n.vd-vinyl-icon{\r\n\r\n position:absolute;\r\n\r\n left:-2px;\r\n\r\n top:1px;\r\n\r\n width:42px;\r\n\r\n height:42px;\r\n\r\n border-radius:50%;\r\n\r\n background:\r\n radial-gradient(\r\n circle at center,\r\n #c88b4e 0 6px,\r\n #2a180f 7px 11px,\r\n #c88b4e 12px 13px,\r\n #2a180f 14px 100%\r\n );\r\n\r\n box-shadow:\r\n 0 0 0 2px rgba(221,181,133,.45);\r\n\r\n}\r\n\r\n\r\n\/* MAIN HEADING *\/\r\n\r\n.vd-title{\r\n\r\n font-family:'Playfair Display',serif;\r\n\r\n font-size:31px;\r\n\r\n line-height:1.2;\r\n\r\n color:#f3e0c4;\r\n\r\n font-weight:600;\r\n\r\n margin-bottom:4px;\r\n\r\n}\r\n\r\n\r\n\/* SCRIPT TAGLINE *\/\r\n\r\n.vd-tagline{\r\n\r\n font-family:'Caveat',cursive;\r\n\r\n font-size:28px;\r\n\r\n line-height:1.2;\r\n\r\n color:#d4a06b;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n DECORATIVE DIVIDER\r\n===================================================== *\/\r\n\r\n.vd-divider{\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n gap:10px;\r\n\r\n margin-top:20px;\r\n\r\n}\r\n\r\n\r\n.vd-divider::before,\r\n.vd-divider::after{\r\n\r\n content:\"\";\r\n\r\n width:180px;\r\n\r\n height:1px;\r\n\r\n background:#70451f;\r\n\r\n}\r\n\r\n\r\n.vd-divider span{\r\n\r\n color:#d18b47;\r\n\r\n font-size:18px;\r\n\r\n line-height:1;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n BUTTON\r\n===================================================== *\/\r\n\r\n.vd-button{\r\n\r\n display:inline-flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n gap:10px;\r\n\r\n min-width:188px;\r\n\r\n padding:14px 24px;\r\n\r\n background:#b76527;\r\n\r\n border:1px solid #c97b38;\r\n\r\n border-radius:6px;\r\n\r\n color:#fff;\r\n\r\n text-decoration:none;\r\n\r\n font-size:13px;\r\n\r\n font-weight:700;\r\n\r\n letter-spacing:.4px;\r\n\r\n transition:\r\n background .3s ease,\r\n transform .3s ease,\r\n box-shadow .3s ease;\r\n\r\n}\r\n\r\n\r\n.vd-button span{\r\n\r\n font-size:17px;\r\n\r\n line-height:1;\r\n\r\n}\r\n\r\n\r\n.vd-button:hover{\r\n\r\n background:#d07832;\r\n\r\n transform:translateY(-2px);\r\n\r\n box-shadow:\r\n 0 8px 20px rgba(0,0,0,.25);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n RESPONSIVE - TABLET\r\n===================================================== *\/\r\n\r\n@media(max-width:900px){\r\n\r\n .vd-photo-gallery{\r\n\r\n height:220px;\r\n\r\n }\r\n\r\n .vd-content{\r\n\r\n gap:45px;\r\n\r\n }\r\n\r\n .vd-message{\r\n\r\n min-width:0;\r\n\r\n }\r\n\r\n .vd-vinyl-icon{\r\n\r\n position:relative;\r\n\r\n left:auto;\r\n\r\n top:auto;\r\n\r\n margin:0 auto 10px;\r\n\r\n }\r\n\r\n .vd-title{\r\n\r\n font-size:27px;\r\n\r\n }\r\n\r\n .vd-tagline{\r\n\r\n font-size:25px;\r\n\r\n }\r\n\r\n .vd-divider::before,\r\n .vd-divider::after{\r\n\r\n width:100px;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n RESPONSIVE - MOBILE\r\n===================================================== *\/\r\n\r\n@media(max-width:650px){\r\n\r\n .vd-photo-gallery{\r\n\r\n grid-template-columns:\r\n repeat(2,1fr);\r\n\r\n height:auto;\r\n\r\n }\r\n\r\n .vd-photo{\r\n\r\n height:150px;\r\n\r\n }\r\n\r\n .vd-photo:nth-child(2){\r\n\r\n border-right:none;\r\n\r\n }\r\n\r\n .vd-photo:nth-child(3),\r\n .vd-photo:nth-child(4){\r\n\r\n border-top:2px solid rgba(255,255,255,.25);\r\n\r\n }\r\n\r\n .vd-bottom{\r\n\r\n padding:\r\n 38px 20px\r\n 35px;\r\n\r\n }\r\n\r\n .vd-content{\r\n\r\n flex-direction:column;\r\n\r\n gap:28px;\r\n\r\n }\r\n\r\n .vd-message{\r\n\r\n min-width:0;\r\n\r\n width:100%;\r\n\r\n }\r\n\r\n .vd-title{\r\n\r\n font-size:25px;\r\n\r\n }\r\n\r\n .vd-tagline{\r\n\r\n font-size:24px;\r\n\r\n }\r\n\r\n .vd-divider{\r\n\r\n margin-top:15px;\r\n\r\n }\r\n\r\n .vd-divider::before,\r\n .vd-divider::after{\r\n\r\n width:65px;\r\n\r\n }\r\n\r\n .vd-button{\r\n\r\n width:190px;\r\n\r\n }\r\n\r\n .vd-bottom::before{\r\n\r\n left:-20px;\r\n\r\n font-size:32px;\r\n\r\n }\r\n\r\n .vd-bottom::after{\r\n\r\n right:-50px;\r\n\r\n font-size:32px;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n VERY SMALL MOBILE\r\n===================================================== *\/\r\n\r\n@media(max-width:400px){\r\n\r\n .vd-photo{\r\n\r\n height:125px;\r\n\r\n }\r\n\r\n .vd-title{\r\n\r\n font-size:22px;\r\n\r\n }\r\n\r\n .vd-tagline{\r\n\r\n font-size:21px;\r\n\r\n }\r\n\r\n .vd-divider::before,\r\n .vd-divider::after{\r\n\r\n width:45px;\r\n\r\n }\r\n\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n\r\n\r\n<section class=\"vd-gallery-banner\">\r\n\r\n\r\n \r\n\r\n <div class=\"vd-photo-gallery\">\r\n\r\n\r\n \r\n\r\n <div class=\"vd-photo\">\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1495474472287-4d71bcdd2085?w=1200\"\r\n alt=\"Vine and Dine Coffee Bar\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"vd-photo\">\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1501339847302-ac426a4a7cbb?w=1200\"\r\n alt=\"Vine and Dine Interior\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"vd-photo\">\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1509042239860-f550ce710b93?w=1200\"\r\n alt=\"Vine and Dine Coffee\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div class=\"vd-photo\">\r\n\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1539375665275-f9de415ef9ac?w=1200\"\r\n alt=\"Vine and Dine Vinyl Collection\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n\r\n \r\n\r\n <div class=\"vd-bottom\">\r\n\r\n\r\n <div class=\"vd-content\">\r\n\r\n\r\n \r\n\r\n <div class=\"vd-message\">\r\n\r\n\r\n <div class=\"vd-vinyl-icon\"><\/div>\r\n\r\n\r\n <h2 class=\"vd-title\">\r\n\r\n Good Coffee, Good Music,\r\n Good Moments.\r\n\r\n <\/h2>\r\n\r\n\r\n <div class=\"vd-tagline\">\r\n\r\n Sampai jumpa di Vine & Dine!\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"vd-divider\">\r\n\r\n <span>\u2726<\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n\r\n \r\n\r\n <a\r\n href=\"#\"\r\n class=\"vd-button\"\r\n >\r\n\r\n <span>\u2667<\/span>\r\n\r\n KUNJUNGI KAMI\r\n\r\n <span>\u203a<\/span>\r\n\r\n <\/a>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n<\/section>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Story – Vine & Dine good coffee, good music, good moments. OUR STORY Dari Kecintaan pada Kopi dan Musik \u2726 Vine & Dine lahir dari kecintaan kami terhadap dua hal yang tak terpisahkan: kopi yang nikmat dan musik yang bermakna. Kami percaya, secangkir kopi terbaik akan semakin lengkap dengan alunan musik yang tepat dan […]<\/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-16","page","type-page","status-publish","hentry","wpbf-post"],"_links":{"self":[{"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":4,"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions\/103"}],"wp:attachment":[{"href":"https:\/\/vineanddine.my.id\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}