← Code in the Wind #1 challenge site

Qualifiers #3: Instagram Post

Reference

Reference image

Objectives

  • สร้างส่วนหัวของโพสที่มีความกว้าง 360px โดยมี Avatar ตามด้วยชื่อ และ ไอคอนจุดๆๆอยู่ทางขวาสุด
    • Avatar URL: https://i.showdown.space/e01/sky.jpeg
  • ใส่รูปที่มีอัตราส่วน 1:1
    • Image URL: https://i.showdown.space/e01/beach.jpeg
  • ใต้รูปภาพใส่จำนวนยอดไลค์ และคำบรรยาย โดย “…more” และ “View all 1,012 comments” ให้มีสีที่จางลงตามแบบที่กำหนด
  • ใส่ ไอคอนหัวใจ บุ๊คมาร์ค และ carousel indicator (ที่เป็นจุด)
    • https://i.showdown.space/e01/heart.svg
    • https://i.showdown.space/e01/bookmark.svg
  • ใส่วงแหวน gradient ให้กับ avatar โดยใช้สีที่ใกล้เคียงกับแบบที่กำหนด

English

  • Create a post header that is 360px wide, with an avatar, followed by username, and a kebab menu icon on the far right.
    • Avatar URL: https://i.showdown.space/e01/sky.jpeg
  • Add an image with a ratio of 1:1.
    • Image URL: https://i.showdown.space/e01/beach.jpeg
  • Under the photo, put the number of likes and caption with “…more” and “View all 1,012 comments” in faded color.
  • Put the heart icon, bookmark, and carousel indicator
    • https://i.showdown.space/e01/heart.svg
    • https://i.showdown.space/e01/bookmark.svg
  • Add a gradient ring around the avatar.