Code in the Wind - Challenge Site

Hotel recommendation

Reference

Objectives

  • สร้างการ์ดโรงแรม ประกอบด้วย พื้นที่สำหรับรูปภาพทางด้านซ้าย และข้อมูลทางด้านขวา ครอบด้วยกล่องสีแดงที่มีไอคอนรูปป้ายราคา และมีข้อความว่า “Special recommendation”

    • รูปป้ายราคา: /images/price-label-white.svg

  • เพิ่มรูปภาพ 3 รูป แบ่งเป็น 2 แถว โดยแถวแรกมีภาพ 1 ภาพ และแถวที่สองมี 2 ภาพ มีช่องว่างระหว่างภาพเล็กๆ แต่ไม่มีช่องว่างระหว่างภาพกับกรอบที่ล้อมรอบ

    • Image 1: /images/bed.jpg
    • Image 2: /images/bath.jpg
    • Image 3: /images/sofa.jpg

  • ในส่วนที่แสดงข้อมูล ใส่ชื่อโรงแรมที่ด้านบน และใส่ราคาที่ด้านล่างขวา

    • ชื่อโรงแรม: Flexbox Suites Bangkok
    • ราคาเดิม: ฿5,000 มีขีดฆ่า
    • ราคาที่ลดแล้ว: ฿892 เป็นตัวหนังสือสีแดงที่ใหญ่กว่า โดยด้านล่างมีข้อความ “FREE CANCELLATION” เป็นสีเขียว

  • ใส่คะแนนใต้ชื่อโรงแรม ซึ่งประกอบด้วย

    • ดาวสีทอง 3 ดวง - รูปดาว: /images/star-amber-500.svg
    • ข้อความว่า “8.9 Exceptional” เป็นสีน้ำเงิน
    • ข้อความว่า “(8,774 reviews)”

  • ในส่วนที่แสดงข้อมูล ให้ใส่รายละเอียดเพิ่มเติมดังนี้

    • แถวที่แสดงข้อความ “Promoted” มีเส้นขอบรอบข้อความ
    • แถวที่แสดงตำแหน่งโรงแรม “Siam - City center” - รูปหมุด: /images/pin-neutral-800.svg
    • แถวที่แสดงข้อความสีเขียว “Breakfast included”
    • แถวที่แสดงข้อความสีแดง “Only 1 left!”

  • Create a hotel card with images section on the left, information on the right, wrapped in a red box whose title has a price tag icon and text “Special recommendation”.

    • Price tag icon: /images/price-label-white.svg

  • Add 3 images to the images section. The image section has 2 rows. First row has one image, the second row has 2 images. There is a little space between images but there is no space between the image and enclosing box.

    • Image 1: /images/bed.jpg
    • Image 2: /images/bath.jpg
    • Image 3: /images/sofa.jpg

  • Hotel name at the top and price at the bottom right.

    • Hotel name: Flexbox Suites Bangkok
    • Original price: ฿5,000 with strikethrough
    • Discounted price: ฿892 in bigger red text, below with words “FREE CANCELLATION” in green.

  • Rating below hotel name, consists of:

    • 3 yellow-orange stars - star image: /images/star-amber-500.svg
    • “8.9 Exceptional” in blue
    • “(8,774 reviews)”

  • More detailed section as follows:

    • A “Promoted” row with a border
    • A location row with text “Siam - City center” - pin image: /images/pin-neutral-800.svg
    • A green “Breakfast included” row
    • A red “Only 1 left!” row.

Stage

Audience submissions