Project Overview This repository contains the documentation and research conducted for the development of the KARD co-ed Kpop group's official website. The website aims to provide an immersive experience for fans and potential fans, offering information about the group's history, individual members, discography, schedule, merchandise, and a gallery of images.
User Audience Intent and Purpose • External User's Goal: Fans and potential fans seeking information about KARD's history, individual members, albums, schedule, and merchandise. They aim to learn more about the band, view their content, and potentially book them for shows. • Site Owner's Goal: KARD is interested in increasing music and merchandise sales, promoting their upcoming shows, and engaging with their audience effectively through an interactive online platform.
Value Provided to Users • Band Information: Detailed information about the group's history, individual member profiles, discography, and schedule. • Interactive Experience: Users can interact with the site by clicking on individual member profiles, accessing album details, viewing music videos, and exploring merchandise. • Engagement Opportunities: Direct links to social media profiles, enabling fans to connect and engage with the band on various platforms.
Website Features • Home Page:
- Background picture of the group with a scrollable section
- About section with some basic information about the group
- Individual member pictures that when clicked redirects to that member’s profile page • Member Profile Pages:
- Detailed information about each member, including their Korean name, birthday, nationality, and a background picture of their specific poker card.
- The member’s profile picture
- Stage name, birth name and Korean name
- Date of birth, MBTI and suit that represents that member
- Age and place of birth • Discography Page:
- Display of the group's album cover pictures with release dates.
- Clickable albums redirect to individual album pages. • Album Pages:
- Album name, description, release date
- Track list
- YouTube video of the title track's music video. • Schedule Page:
- Calendar of the group's schedule and upcoming events. • Shop Page:
- Access to the group's merchandise and albums for purchase. • Gallery Page:
- Collection of images featuring the group.
Javascript features • Menu
- Menu button that display the contents of the website
- Page titles that redirects to the page when clicked • Adjusting line
- An adjusting line in the album page that scale base on the content in the album description, as well as the size of the page • Calendar
- A working monthly calendar that shows the groups schedules
- Buttons to change the month to see past or upcoming schedule
- Highlighted current date
- Events button on each day where there is a event which shows a popup with the event information when clicked
External Code Attribution
- Normalize.css