កិច្ចការផ្ទះ សប្តាហ៍ទី ៦ & ៧ (Homework Week 06 & 07)

ប្រធានបទ: បង្កើតតារាងតម្លៃកញ្ចប់សេវាកម្ម (Subscription Pricing Cards)

កាលបរិច្ឆេទដាក់:...............................

កាលបរិច្ឆេទផុតកំណត់: [១ សប្តាហ៍បន្ទាប់]

១. ស្ថានការណ៍ (Scenario)

អ្នកកំពុងបង្កើតគេហទំព័រសម្រាប់ក្រុមហ៊ុនតន្ត្រីអនឡាញមួយឈ្មោះ "Khmer Music+"។ ក្រុមហ៊ុនត្រូវការទំព័រមួយដើម្បី បង្ហាញកញ្ចប់សេវាកម្មចំនួន ៣ ដល់អតិថិជនគឺ៖ Basic, Standard, និង Premium។

គោលដៅគឺធ្វើឱ្យកញ្ចប់ Standard (កណ្តាល) មានភាពលេចធ្លោជាងគេ ដើម្បីទាក់ទាញអតិថិជនឱ្យទិញ។

២. តម្រូវការបច្ចេកទេស (Requirements)

ផ្នែកទី ១: រចនាសម្ព័ន្ធ HTML (index.html)

សូមបង្កើតកាតចំនួន ៣ (ប្រើ div) ដែលរៀបរាប់ពីកញ្ចប់នីមួយៗ៖

1. កញ្ចប់ Basic:
   • ចំណងជើង: "Basic"
   • តម្លៃ: "$2.99 / ខែ"
   • លក្ខណៈពិសេស (<ul>): ស្តាប់បានតែអនឡាញ, មានពាណិជ្ជកម្ម។
   • ប៊ូតុង: "ជ្រើសរើស"
2. កញ្ចប់ Standard (ត្រូវតែពិសេសជាងគេ):
   • ចំណងជើង: "Standard"
   • តម្លៃ: "$5.99 / ខែ"
   • លក្ខណៈពិសេស: គ្មានពាណិជ្ជកម្ម, ស្តាប់បាន Offline។
   • ប៊ូតុង: "ជ្រើសរើស"
3. កញ្ចប់ Premium:
   • ចំណងជើង: "Premium"
   • តម្លៃ: "$9.99 / ខែ"
   • លក្ខណៈពិសេស: គុណភាពសំឡេងខ្ពស់, ប្រើបាន ៥ ឧបករណ៍។
   • ប៊ូតុង: "ជ្រើសរើស"

ផ្នែកទី ២: ការតុបតែង CSS (style.css)

1. Typography (អក្សរ):

• ប្រើប្រាស់ Google Fonts (សូមប្រើ Font ខ្មែរ ដូចជា 'Kantumruy Pro'ឬ 'Battambang' សម្រាប់អត្ថបទទាំងអស់)។
• ចំណងជើងកញ្ចប់ (Basic, Standard...) ត្រូវមានទំហំធំ និងដិត (font-weight: bold)។
• តម្លៃត្រូវមានពណ៌ដាច់ដោយឡែក (ឧ. ពណ៌ក្រហម ឬ ខៀវ)។

2. Borders & Backgrounds (ស៊ុម និងផ្ទៃ):

• កាតទាំង ៣ ត្រូវមាន Border ជុំវិញ (ឧ. 1px solid gray)។
• កាតទាំង ៣ ត្រូវមាន Border Radius (ជ្រុងមូល) យ៉ាងតិច 10px។
• ចំណុចសំខាន់: កាត Standard ត្រូវតែមាន Border ក្រាស់ជាងគេ និងពណ៌ខុសគេ (ឧ. 3px solid gold) ដើម្បីឱ្យលេចធ្លោ។

3. Buttons (ប៊ូតុង):

• ប៊ូតុងត្រូវមានជ្រុងមូលខ្លាំង (ដូចគ្រាប់ថ្នាំ)។
• ប៊ូតុងនៃកាត Standard ត្រូវមានពណ៌ផ្ទៃ (background-color) ស្រស់ជាងគេ។
• ដកបន្ទាត់ពីក្រោម Link ចោល (text-decoration: none)។

៥. របៀបបញ្ជូនកិច្ចការ

1. បង្កើត Folder ឈ្មោះ HW67_YourName។
2. ដាក់ឯកសារ index.html និង style.css ក្នុងនោះ។
3. Zip Folder

ចំណាំ: Layout (Flexbox/Grid) កាតទាំង ៣ របស់អ្នកនឹងរត់តម្រៀបគ្នាពីលើចុះក្រោម។ នេះជារឿងត្រឹមត្រូវ មិនបាច់បារម្ភទេ! (តែបើអ្នកចង់ឱ្យវានៅជួរដេក អ្នកអាចសាកល្បង display: inline-block បាន)