:root {--primary: #1f3a8a; --secondary: #0ea5e9; --bg: #f8fafc; --text: #0f172a; --card: #ffffff; --shadow: rgba(15, 23, 42, 0.08);} *{box-sizing: border-box; margin:0; padding: 0; } body {font-family: "Inter", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } header {background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #ffffff; padding:2rem 1rem;} .container {max-width:1160px; margin: 0 auto; padding: 0 1rem;} .nav {display: flex; justify-content: space-between; align-items: center; gap: 1rem;flex-wrap: wrap; } .logo {font-size: 1.5rem; font-weight: 700; } .menu {display: flex; gap: 1rem; flex-wrap: wrap; } .menu a {color: rgba(255, 255, 255, 0.9); text-decoration: none; font-weight: 500;} .hero { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; padding: 3rem 0; } .hero h1 {font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.05; margin-bottom: 1rem; } .hero p {max-width: 40rem; margin-bottom: 1.5rem; color: rgba(255, 255, 255, 0.95); } .btn-primary {display: inline-block; background: #ffffff; color: var(--primary); padding: 0.9rem 1.6rem; border-radius: 999px; text-decoration: none; font-weight: 600; transition: transform 0.2s ease; } .btn-primary:hover {transform: translateY(-2px);} .hero-image { width: 100%; min-height: 300px; background: rgba(255, 255, 255, 0.15); border-radius: 1.5rem; display:flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.8); font-size: 1.25rem; text-align: center; padding: 2rem; } main {margin-top: -2rem; padding-bottom: 4rem; } section {padding: 4rem 0;} .section-title {text-align: center; margin-bottom: 2rem;} .section-title h2 {font-size: 2rem; margin-bottom: 0.5rem;} .section-title p {color: #475569; max-width: 42rem; margin: 0 auto; } .grid {display: grid;gap: 1.5rem; } .cards {grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));} .card {background: var(--card); border-radius: 1rem; box-shadow: 0 20px 50px var(--shadow); padding: 2rem; border: 1px solid #e2e8f0;} .card h3 {margin-bottom: 0.75rem; color: var(--primary);} .card p {color: #475569; } .highlight {color: var(--secondary); font-weight: 700; } .about {display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center;} .about-text h3 {color:var(--secondary); margin-bottom: 1rem;} .about-text p {color: #334155;} .about-box {background: var(--card); border-radius: 1.25rem; box-shadow: 0 20px 50px var(--shadow); padding: 2rem; border: 1px solid #e2e8f0;} .stats {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem;} .stat {background: #f1f5f9; border-radius: 1rem; text-align: center; padding: 1rem; } .stat h4 {font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--primary); } .contact-card {display:grid; gap: 1rem; background: var(--card); border-radius: 1.5rem; box-shadow: 0 20px 50px var(--shadow); padding: 2rem; border: 1px solid #e2e8f0; } .contact-card label {font-weight: 600; color: #334155;} .contact-card input,.contact-card textarea {width: 100%; border: 1px solid #cbd5e1; border-radius: 0.85rem; padding: 0.9rem 1rem; font-size: 0.95rem; color: var(--text);background: #f8fafc;} .contact-card button {background: var(--primary); color: #ffffff; border: none; border-radius: 999px; padding: 0.9rem 1.4rem; cursor: pointer; font-weight: 600; } .contact-card button:hover {opacity: 0.95;} footer {text-align: center; padding: 2rem 0; color: #64748b;} embed {display:block; width: 100%; height: calc(100vh - 48px); border: 1px solid #444; } @media (max-width: 900px) {.about {grid-template-columns: 1fr;}} @media (max-width: 700px) {.nav {flex-direction: column; align-items: flex-start; } .hero {padding-top: 2rem;} } /* Pok Studio | บริษัทออกแบบเว็บไซต์
บริการ เกี่ยวกับ ติดต่อ

สร้างเว็บไซต์สำหรับธุรกิจของคุณ ให้โดดเด่น สวยงาม และใช้งานง่าย

Pok Studio ให้บริการออกแบบเว็บไซต์ครบวงจร ทั้งดีไซน์, พัฒนา, และดูแลหลังการขาย เพื่อช่วยธุรกิจคุณเติบโตอย่างมืออาชีพในยุคดิจิทัล

ปรึกษาฟรี
ดีไซน์โมเดิร์น พร้อมโครงสร้างเว็บไซต์ใช้งานง่าย

บริการของเรา

เราออกแบบเว็บไซต์ที่สวยงาม พร้อมฟังก์ชันที่ตอบโจทย์ธุรกิจ ทั้งร้านค้าออนไลน์, บล็อก, และเว็บไซต์บริษัท

ออกแบบเว็บไซต์

ดีไซน์ทันสมัย สวยงาม และใช้งานง่าย รองรับทั้งมือถือและเดสก์ท็อป

พัฒนาเว็บ

ระบบเว็บไซต์ใช้งานได้จริง พร้อมฟังก์ชันตามความต้องการของธุรกิจคุณ

ดูแลและอัพเดต

บริการหลังการขาย อัพเดตเนื้อหาและปรับปรุงเว็บไซต์ให้ทันสมัยอยู่เสมอ

บริษัทที่เข้าใจธุรกิจคุณ

Pok Studio ก่อตั้งขึ้นเพื่อช่วยธุรกิจไทยสร้างตัวตนบนโลกออนไลน์ ด้วยการออกแบบเว็บไซต์ที่สวยงามและมีประสิทธิภาพ เราเน้นความเรียบง่ายแต่โดดเด่น ให้ลูกค้าของคุณรู้สึกประทับใจตั้งแต่ครั้งแรกที่เข้าชม

120+

โปรเจกต์ที่สำเร็จ

98%

ลูกค้าพึงพอใจ

24/7

บริการดูแลหลังงาน

เน้นผลลัพธ์ที่วัดได้

เราทำเว็บไซต์ที่ไม่เพียงแต่สวย แต่ยังพร้อมช่วยเพิ่มยอดขายและการติดต่อสื่อสารกับลูกค้า ผ่านการวางโครงสร้างที่ชัดเจนและเนื้อหาที่เหมาะสม

ติดต่อเรา

พร้อมเริ่มโปรเจกต์เว็บไซต์ใหม่หรือปรับปรุงเว็บไซต์เดิม ติดต่อเราได้เลย

*/