กลับไปหน้าแรก
Rixum | พอร์ตโฟลิโอสร้างสรรค์ — Free HTML5 Tailwind CSS Website Template Preview
วางเมาส์เพื่อเลื่อนดู
Creative & Media 4.9 MB เวอร์ชัน: 1.0.0

Rixum — เทมเพลตเว็บไซต์ Creative & Media ฟรี

Rixum เป็นเทมเพลต HTML สำหรับครีเอทีฟและสื่อแบบฟรี พัฒนาด้วย HTML5, Tailwind CSS และ JavaScript แบบ vanilla ขนาดแพ็คเกจ 4.9 MB รวมเจ็ดหน้า: index, about, blog, contact, projects, rixum และ services CSS เขียนด้วยมือร่วมกับ utility ของ Tailwind และไลบรารีภายนอกเพียงอย่างเดียวคือ Google Fonts แพลตเทมเพลตมาพร้อมภาพท้องถิ่น 20 ภาพ รวมถึงฟอร์ม HTML สำหรับติดต่อหรือสมัครรับจดหมายข่าวเพื่อการเก็บข้อมูลลูกค้า

หน้าแรกแบ่งเป็นเซกชันที่ชัดเจน: ชื่อพร้อมชีวประวัติ, ความสำเร็จที่น่าสนใจ, แนะนำดีไซเนอร์, ค่าบริการ, ไฮไลท์พอร์ตโฟลิโอ, คำวิจารณ์จากลูกค้า, บริษัทที่ไว้วางใจ, และบทความล่าสุด โครงสร้างใช้ semantic markup พร้อมเว้นระยะว่างอย่างเหมาะสม ทำให้เข้าถึงง่าย ไม่มี JavaScript framework หรือ third-party trackers ให้เลย—แค่ HTML, CSS และการโต้ตอบระดับเบา

คุณสมบัติเด่น

  • โครงข่ายกริดแบบมือถือ
  • การแสดงงานโปรเจกท์แบบโต้ตอบ
  • ปฏิทินจองงานฝังในตัว
  • การปรับแต่งโหมดมืด
เทคโนโลยี HTML5, Tailwind CSS, JavaScript
วันที่เปิดตัว 2026-07-05
สัญญาอนุญาต ฟรี (ต้องคงลิงก์เครดิตที่ส่วนท้าย)

เหมาะสำหรับและกรณีการใช้งาน

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

ส่วนประกอบของหน้าเว็บ

เทมเพลตนี้ประกอบด้วยหน้า index ที่มีส่วน hero พื้นที่ความสำเร็จที่น่าจับตา ภาพรวมบริการดีไซน์ รายการค่าธรรมเนียมบริการ แกลเลอรีพอร์ตโฟลิโอดีไซน์สร้างสรรค์ คำติชมจากลูกค้า โชว์เคสด่าน บริษัทที่ไว้วางใจ และฟีดบล็อกล่าสุด หน้าแยกเพิ่มเติมครอบคลุมเกี่ยวกับ โปรเจกต์ บริการ บล็อก ติดต่อ และหน้าแบรนด์นิ่ง rixum เฉพาะหน้า นอกจากนี้ยังมี footer พร้อมลิงก์โซเชียลมีเดียและระบบสมัครรับจดหมายข่าวที่ผสานอยู่ในส่วนติดต่อ การนำทางครอบคลุมทั้งเจ็ดไฟล์ HTML โดยมีมาร์กอัปส่วนหัวที่สอดคล้องกันและรูปแบบ responsive ผ่าน Tailwind CSS

ทำไมเราถึงแนะนำ

Rixum มอบพอร์ตโฟลิโอหลายหน้าที่ครบถ้วนโดยไม่บังคับให้ซื้อ upgrades สำหรับฟีเจอร์พื้นฐาน การผสมผสานระหว่าง CSS ที่เขียนด้วยมือกับ utility ของ Tailwind ช่วยให้ผู้พัฒนาควบคุมการจัดรูปแบบได้อย่างเต็มที่ขณะที่ยังคงโครงสร้างไฟล์ให้อ่านง่ายเลย์เอาต์เจ็ดหน้าครอบคลุมความต้องการด้านพอร์ตโฟลิโอ บริการ บล็อก และการติดต่อในตัว รวมถึงฟอร์มในตัวที่รองรับการเก็บข้อมูลลูกค้าได้ทันทีโดยไม่ต้องใช้ backend

ข้อมูลจำเพาะทางเทคนิค

ต้องใช้ Tailwind CSS v3.2 พร้อมการตั้งค่า build มาตรฐาน ใช้ PostCSS พร้อม autoprefixer เพื่อความเข้ากันได้กับเบราว์เซอร์ ปรับแต่งสีและระยะห่างใน tailwind.config.js โดยใช้ค่า HEX หรือ HSL ทำงานได้ดีกับ VS Code และปลั๊กอิน Tailwind CSS เพื่อตัวอย่างแบบ real-time ไม่จำเป็นต้องใช้ React, Vue หรือ build step จาก framework ใดๆ—เป็น static HTML, CSS และ JavaScript ล้วน

กรณีการใช้งานในอุดมคติ

ดีไซเนอร์กราฟิกอิสระและสตูดิโอครีเอทีฟขนาดเล็กสามารถใช้ Rixum เป็นพอร์ตโฟลิโอส่วนตัวหรือหน้า landing page ของเอเจนซีได้ ทั้งเจ็ดหน้าครอบคลุมการแสดงผลงาน ราคารับงาน คำชมจากลูกค้า และบล็อก—เหมาะสำหรับฟรีแลนซ์ที่ต้องการ Presence เชิง-professional โดยไม่ต้องจัดการ CMS ฟอร์มติดต่อสามารถส่งข้อมูลไปยัง endpoint ใดก็ได้ผ่าน Formspree และเว็บสามารถโฮสต์แบบ static บน Netlify หรือ GitHub Pages ได้ฟรี

คะแนนประสิทธิภาพ

Performance
90
Accessibility
90
Best Practices
100
SEO
83
-- การดู -- ดาวน์โหลด
เดโมสด ดีพลอย
ดูซอร์สบน GitHub

คำถามที่พบบ่อย

เทมเพลตนี้ต้องการขั้นตอนการสร้างเพื่อทำงานในเครื่องหรือไม่?
ไม่ต้องใช้เครื่องมือสร้าง เพียงเปิดไฟล์ index.html โดยตรงในเบราว์เซอร์ เทมเพลตใช้ Tailwind CSS ผ่าน CDN และ Google Fonts โหลดจาก CDN ที่เกี่ยวข้อง จึงทำงานได้ทันทีโดยไม่ต้องคอมไพล์หรือติดตั้งคำสั่งใดๆ
สามารถเปลี่ยนภาพภายในเครื่องด้วยภาพหน้าจอโปรเจกต์ของตนเองได้หรือไม่?
ได้ ภาพในเครื่อง 20 ภาพเป็นเพียงภาพตัวอย่าง เพียงเปลี่ยนเส้นทางไฟล์ในส่วน HTML markup และการอ้างอิง CSS ด้วย URL ภาพของคุณเองหรือไฟล์ในเครื่อง ไม่มีข้อกำหนดการตั้งชื่อพิเศษจากโครงสร้างเทมเพลต
ฟอร์มติดต่อมีโครงสร้างอย่างไรและวางอยู่ที่ไหน?
ฟอร์มติดต่ออยู่ที่ contact.html และมีการจัดเรียงตามรูปแบบมาตรฐานสำหรับช่องกรอกชื่อ อีเมล และข้อความ ใช้รูปแบบฟอร์มสไตล์ newsletter พร้อมองค์ประกอบฟอร์ม HTML5 แบบ semantic ที่ห่อหุ้มด้วยคลาส Tailwind utility สำหรับการจัดระยะห่างและเลย์เอาต์
การนำทางมีความสอดคล้องกันในทุกเจ็ดหน้าหรือไม่?
ใช่ แต่ละหน้า HTML มีโครงสร้างการนำทางเหมือนกันโดยลิงก์ไปยังหน้า index, about, projects, services, blog และ contact มาร์กอัปส่วนหัวถูกทำซ้ำในทุกเจ็ดหน้าด้วยเป้าหมาย anchor และสตایلแบบคลาสที่เหมือนกัน
ฟอนต์ familys เริ่มต้นคืออะไรและโหลดอย่างไร?
เทมเพลตโหลด Google Fonts ผ่าน stylesheet ที่เชื่อมต่อบนส่วนหัวของเอกสาร CSS อ้างอิง font-family โดยใช้ชื่อตามที่ประกาศไว้ใน config ของ Tailwind ไม่จำเป็นต้องกำหนดค่าเพิ่มเติมนอกจากลิงก์ CDN ที่มีอยู่แล้วในทุกหน้า