Etkile\u015fimli Grid Hero Tasar\u0131m\u0131<\/title><br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;700&family=Playfair+Display:wght@900&display=swap\" rel=\"stylesheet\">\n<style>\n \/* Font tan\u0131mlar\u0131 *\/\n body {\n font-family: 'Inter', sans-serif;\n cursor: default;\n }\n .font-serif-display {\n font-family: 'Playfair Display', serif;\n }<\/p>\n<p> \/* Hero konteyneri ve Grid efekti *\/\n .hero-container {\n position: relative;\n overflow: hidden;\n \/* CSS De\u011fi\u015fkenleri fare konumu i\u00e7in *\/\n --mouse-x: 50%;\n --mouse-y: 50%;\n }<\/p>\n<p> \/* Grid \u00e7izgilerini ve fare efektini olu\u015fturan pseudo-element *\/\n .hero-container::before {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: 0; \/* \u0130\u00e7eri\u011fin arkas\u0131nda *\/<\/p>\n<p> \/* Grid \u00c7izgileri (Repeating Linear Gradient) *\/\n background-image:\n \/* Fare Etraf\u0131ndaki I\u015f\u0131k Halkas\u0131 (Radial Gradient) *\/\n radial-gradient(\n circle 300px at var(--mouse-x) var(--mouse-y),\n rgba(0, 200, 255, 0.15) 0%, \/* A\u00e7\u0131k mavi parlama *\/\n rgba(0, 200, 255, 0.0) 70% \/* Kenarlara do\u011fru \u015feffafla\u015fma *\/\n ),\n \/* Dikey \u00c7izgiler *\/\n repeating-linear-gradient(\n to right,\n transparent 0,\n transparent 49px,\n rgba(100, 116, 139, 0.15) 50px, \/* Slate-500\/15 - ince \u00e7izgi *\/\n transparent 51px,\n transparent 100px\n ),\n \/* Yatay \u00c7izgiler *\/\n repeating-linear-gradient(\n to bottom,\n transparent 0,\n transparent 49px,\n rgba(100, 116, 139, 0.15) 50px, \/* Slate-500\/15 - ince \u00e7izgi *\/\n transparent 51px,\n transparent 100px\n );\n background-size: 100% 100%, 100px 100px, 100px 100px; \/* Grid boyutu *\/\n opacity: 0.7; \/* Genel grid g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fc *\/\n transition: background 0.1s ease-out; \/* Efektin yumu\u015fak hareketi i\u00e7in *\/\n }\n <\/style>\n<p><\/head><br \/>\n<body class=\"bg-slate-900\"> <\/p>\n<section id=\"hero-container\" class=\"hero-container relative w-full min-h-screen flex items-center justify-center text-white p-8\">\n<div class=\"relative z-10 text-center max-w-3xl mx-auto\">\n<h1 class=\"text-5xl sm:text-6xl md:text-7xl font-serif-display font-black mb-5 leading-tight text-gray-100\">\n Zarif Etkile\u015fim<br \/>\n <\/h1>\n<p class=\"text-lg md:text-xl text-slate-300 mb-10 font-light\">\n Minimalist grid \u00fczerinde farenizle \u0131\u015f\u0131\u011f\u0131 y\u00f6nlendirin, estetik ve teknolojinin bulu\u015fmas\u0131.\n <\/p>\n<p> <a href=\"#detaylar\"\n class=\"inline-block border border-slate-500 hover:border-slate-300 hover:bg-slate-700\/30 text-slate-200 font-semibold py-3 px-10 rounded-sm transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-900\"><br \/>\n Detaylar\u0131 G\u00f6r<br \/>\n <\/a>\n <\/div>\n<\/section>\n<p> <script>\n \/\/ JavaScript ile Grid \u00dczerinde I\u015f\u0131k Efekti\n const heroContainer = document.getElementById('hero-container');<\/p>\n<p> heroContainer.addEventListener('mousemove', (e) => {\n \/\/ Konteynerin sol \u00fcst k\u00f6\u015fesine g\u00f6re fare koordinatlar\u0131\n const rect = heroContainer.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;<\/p>\n<p> \/\/ CSS de\u011fi\u015fkenlerini g\u00fcncelle (pseudo-element bunlar\u0131 kullanacak)\n heroContainer.style.setProperty('--mouse-x', `${mouseX}px`);\n heroContainer.style.setProperty('--mouse-y', `${mouseY}px`);\n });<\/p>\n<p> \/\/ Fare konteynerden ayr\u0131ld\u0131\u011f\u0131nda efekti s\u0131f\u0131rla (iste\u011fe ba\u011fl\u0131)\n heroContainer.addEventListener('mouseleave', () => {\n heroContainer.style.setProperty('--mouse-x', `50%`);\n heroContainer.style.setProperty('--mouse-y', `50%`);\n });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"featured_media":0,"template":"","landing_category":[],"landing_technology":[],"landing_library":[],"class_list":["post-1326","landing_page","type-landing_page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page\/1326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/landing_page"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=1326"}],"wp:term":[{"taxonomy":"landing_category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_category?post=1326"},{"taxonomy":"landing_technology","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_technology?post=1326"},{"taxonomy":"landing_library","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_library?post=1326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1326,"date":"2025-04-12T23:48:36","date_gmt":"2025-04-12T20:48:36","guid":{"rendered":"https:\/\/mudosdigital.com\/tr\/?landing_page=etkilesimli-grid-hero-tasarimi"},"modified":"2025-04-12T23:48:36","modified_gmt":"2025-04-12T20:48:36","slug":"etkilesimli-grid-hero-tasarimi","status":"publish","type":"landing_page","link":"https:\/\/mudosdigital.com\/tr\/store\/etkilesimli-grid-hero-tasarimi\/","title":{"rendered":"Etkile\u015fimli Grid Hero Tasar\u0131m\u0131"},"content":{"rendered":"

\n
\n
\n
\n
\n Etkile\u015fimli Grid Hero Tasar\u0131m\u0131<\/title><br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;700&family=Playfair+Display:wght@900&display=swap\" rel=\"stylesheet\">\n<style>\n \/* Font tan\u0131mlar\u0131 *\/\n body {\n font-family: 'Inter', sans-serif;\n cursor: default;\n }\n .font-serif-display {\n font-family: 'Playfair Display', serif;\n }<\/p>\n<p> \/* Hero konteyneri ve Grid efekti *\/\n .hero-container {\n position: relative;\n overflow: hidden;\n \/* CSS De\u011fi\u015fkenleri fare konumu i\u00e7in *\/\n --mouse-x: 50%;\n --mouse-y: 50%;\n }<\/p>\n<p> \/* Grid \u00e7izgilerini ve fare efektini olu\u015fturan pseudo-element *\/\n .hero-container::before {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: 0; \/* \u0130\u00e7eri\u011fin arkas\u0131nda *\/<\/p>\n<p> \/* Grid \u00c7izgileri (Repeating Linear Gradient) *\/\n background-image:\n \/* Fare Etraf\u0131ndaki I\u015f\u0131k Halkas\u0131 (Radial Gradient) *\/\n radial-gradient(\n circle 300px at var(--mouse-x) var(--mouse-y),\n rgba(0, 200, 255, 0.15) 0%, \/* A\u00e7\u0131k mavi parlama *\/\n rgba(0, 200, 255, 0.0) 70% \/* Kenarlara do\u011fru \u015feffafla\u015fma *\/\n ),\n \/* Dikey \u00c7izgiler *\/\n repeating-linear-gradient(\n to right,\n transparent 0,\n transparent 49px,\n rgba(100, 116, 139, 0.15) 50px, \/* Slate-500\/15 - ince \u00e7izgi *\/\n transparent 51px,\n transparent 100px\n ),\n \/* Yatay \u00c7izgiler *\/\n repeating-linear-gradient(\n to bottom,\n transparent 0,\n transparent 49px,\n rgba(100, 116, 139, 0.15) 50px, \/* Slate-500\/15 - ince \u00e7izgi *\/\n transparent 51px,\n transparent 100px\n );\n background-size: 100% 100%, 100px 100px, 100px 100px; \/* Grid boyutu *\/\n opacity: 0.7; \/* Genel grid g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fc *\/\n transition: background 0.1s ease-out; \/* Efektin yumu\u015fak hareketi i\u00e7in *\/\n }\n <\/style>\n<p><\/head><br \/>\n<body class=\"bg-slate-900\"> <\/p>\n<section id=\"hero-container\" class=\"hero-container relative w-full min-h-screen flex items-center justify-center text-white p-8\">\n<div class=\"relative z-10 text-center max-w-3xl mx-auto\">\n<h1 class=\"text-5xl sm:text-6xl md:text-7xl font-serif-display font-black mb-5 leading-tight text-gray-100\">\n Zarif Etkile\u015fim<br \/>\n <\/h1>\n<p class=\"text-lg md:text-xl text-slate-300 mb-10 font-light\">\n Minimalist grid \u00fczerinde farenizle \u0131\u015f\u0131\u011f\u0131 y\u00f6nlendirin, estetik ve teknolojinin bulu\u015fmas\u0131.\n <\/p>\n<p> <a href=\"#detaylar\"\n class=\"inline-block border border-slate-500 hover:border-slate-300 hover:bg-slate-700\/30 text-slate-200 font-semibold py-3 px-10 rounded-sm transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-900\"><br \/>\n Detaylar\u0131 G\u00f6r<br \/>\n <\/a>\n <\/div>\n<\/section>\n<p> <script>\n \/\/ JavaScript ile Grid \u00dczerinde I\u015f\u0131k Efekti\n const heroContainer = document.getElementById('hero-container');<\/p>\n<p> heroContainer.addEventListener('mousemove', (e) => {\n \/\/ Konteynerin sol \u00fcst k\u00f6\u015fesine g\u00f6re fare koordinatlar\u0131\n const rect = heroContainer.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;<\/p>\n<p> \/\/ CSS de\u011fi\u015fkenlerini g\u00fcncelle (pseudo-element bunlar\u0131 kullanacak)\n heroContainer.style.setProperty('--mouse-x', `${mouseX}px`);\n heroContainer.style.setProperty('--mouse-y', `${mouseY}px`);\n });<\/p>\n<p> \/\/ Fare konteynerden ayr\u0131ld\u0131\u011f\u0131nda efekti s\u0131f\u0131rla (iste\u011fe ba\u011fl\u0131)\n heroContainer.addEventListener('mouseleave', () => {\n heroContainer.style.setProperty('--mouse-x', `50%`);\n heroContainer.style.setProperty('--mouse-y', `50%`);\n });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"featured_media":0,"template":"","landing_category":[],"landing_technology":[],"landing_library":[],"class_list":["post-1326","landing_page","type-landing_page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page\/1326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/landing_page"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=1326"}],"wp:term":[{"taxonomy":"landing_category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_category?post=1326"},{"taxonomy":"landing_technology","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_technology?post=1326"},{"taxonomy":"landing_library","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_library?post=1326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}