Final Project - Creating a Single-Page Website for Your Favourite Artist
28.8.2023 - 27.11.2023 (Week1- Week 14)
Tiffany Tan Xuan / 0362472
Interactive Design / Bachelor of Design (Honours) in Creative
Media
Final Project - Creating a Single-Page Website for Your Favourite Artist
INSRUCTUIONS
Final Project - Creating a Single-Page Website for Your Favourite Artist
Project Overview:
In this web design project, you will create a single-page website dedicated to your favorite artist. This project will help you develop your web design and development skills while allowing you to showcase your passion for the artist of your choice.
Project Requirements:
Artist Selection: Choose your favorite artist as the subject of your website. It can be a musician, painter, actor, or any other creative individual or group. Ensure you have a genuine interest in the artist, as this will help you create a more engaging website.
Content:
Your single-page website should include the following sections:
Header with the artist's name and a brief tagline.
Introduction: Provide an overview of the artist's background and why you admire them.
Gallery: Showcase images, videos, or other multimedia related to the artist's work.
Biography: Include a brief biography or description of the artist's life and career.
Contact Information: If applicable, include contact details or links to the artist's social media profiles.
Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your personal taste.
Ensure a visually appealing layout with a balanced use of text and multimedia.
Create a responsive design that adapts to different screen sizes (mobile-friendly).
Navigation: Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.
Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.
In this web design project, you will create a single-page website dedicated to your favorite artist. This project will help you develop your web design and development skills while allowing you to showcase your passion for the artist of your choice.
Project Requirements:
Artist Selection: Choose your favorite artist as the subject of your website. It can be a musician, painter, actor, or any other creative individual or group. Ensure you have a genuine interest in the artist, as this will help you create a more engaging website.
Content:
Your single-page website should include the following sections:
Header with the artist's name and a brief tagline.
Introduction: Provide an overview of the artist's background and why you admire them.
Gallery: Showcase images, videos, or other multimedia related to the artist's work.
Biography: Include a brief biography or description of the artist's life and career.
Contact Information: If applicable, include contact details or links to the artist's social media profiles.
Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your personal taste.
Ensure a visually appealing layout with a balanced use of text and multimedia.
Create a responsive design that adapts to different screen sizes (mobile-friendly).
Navigation: Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.
Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.
Progression:
Why do I
choose Baekhyun and why I like him so much?
Firstly, his exceptional vocal prowess has played a significant role in capturing my heart. Baekhyun's ability to convey emotions through his singing, coupled with his impressive vocal range, has earned him admiration and respect within the music industry.
Beyond his vocal talents, Baekhyun's charismatic stage presence and dynamic performances have contributed to his popularity. Whether as a member of the boy group EXO or as a solo artist, he has consistently delivered captivating and energetic shows, leaving a lasting impression on audiences worldwide. His stage persona, coupled with his natural charm, has endeared him to a diverse range of fans.
Baekhyun's versatility as an artist is another factor that has contributed to his widespread appeal. Apart from his singing career, he has also delved into acting and has successfully showcased his talents in various entertainment fields. This multi-faceted approach has allowed him to connect with fans on different levels, expanding his fanbase beyond just music enthusiasts.
Additionally, Baekhyun's active engagement with fans through social media platforms has played a pivotal role in fostering a strong and loyal community. Regular updates, personal interactions, and behind-the-scenes glimpses into his life create a sense of intimacy and connection between Baekhyun and his fans, further solidifying their support.
Moreover, Baekhyun's involvement in philanthropic activities and his advocacy for social issues have endeared him to fans who appreciate not only his artistry but also his commitment to making a positive impact on society. Fans often rally behind artists who use their platform for meaningful causes, and Baekhyun's sincerity in these efforts has strengthened the bond with his supporters.
In summary, Baekhyun's widespread fanbase can be attributed to a combination of his exceptional musical talents, captivating stage presence, versatility as an artist, active engagement with fans, and his commitment to social causes. This multifaceted approach has allowed him to connect with a diverse audience, making him a beloved figure in the world of K-pop and entertainment.
Visual References:
Colour Palette :
Progression in DW:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
</head>
<link rel="stylesheet" href="./index.css">
<body>
<div class="nav">
<div class="nav_logo">
<div class="nav_logo_img">
BAEK HYUN
</div>
<div class="nav_title">
<div><a href="./index.html"
style="color: #142858">home</a></div>
<div><a
href="#">television</a></div>
<div><a
href="#">music</a></div>
<div><a
href="#">award</a></div>
<div>
<a href="#">personage</a>
</div>
</div>
<div class="nav_input"><input type="text"
/><span>search</span></div>
</div>
</div>
<div class="box_slideshow">
<div class="slideshow"></div>
</div>
<div class="abount">
<div class="heritage">
<div class="heritage_text_d">in regard to BAEK
HYUN</div>
<div class="heritage_text">
<div>
———————————————————————— in regard to
BAEK HYUN ————————————————————————
</div>
</div>
<div class="heritage_bor">
<div class="heritage_bor_img">
<img src="./images/2.webp" alt=""
class="heritage_bor_img" />
</div>
<div class="heritage_bor_r">
<div class="heritage_bor_r_box">
<div class="heritage_h1"> in
regard to BAEK HYUN</div>
<div class="heritage_h5">
Byun BAEK HYUN (변백현),
stage name Baek Hyun, born on May 6, 1992 in Bucheon, Gyeonggi Province,
South
Korea, is a South Korean
singer and actor, and member of boy bands EXO, EXO-K, EXO-CBX, and SuperM.
On
April 8, 2012, EXO-K
released their debut mini
album MAMA, which sold
70,000 copies in one month. On August 14, 2013, the Korean national anthem
was sung
during a friendly soccer
match to mark the 50th anniversary of the establishment of diplomatic
relations
between Korea
and Peru. On February 16,
2014, SUHO became the host of the music show "Popular Ballads". In April
2015,
he starred in the love
network drama "My neighbor is EXO", which was the first South Korean network
drama
to break 10
million clicks; Photo taken
on October 15, the 23rd anniversary of the fashion magazine ELLE.
</div>
<div
class="heritage_but">know more about ></div>
</div>
</div>
</div>
</div>
</div>
<div class="abount">
<div class="heritage">
<div class="heritage_text_d">film and television
works</div>
<div class="heritage_text">
<div>
———————————————————————— film and
television works ————————————————————————
</div>
</div>
<div class="history" style="margin-top: 20px">
<div><img src="./images/3.webp" alt=""
/></div>
<div class="history_text">City
Lights</div>
<div><img src="./images/4.jpg" alt=""
/></div>
<div class="history_text">Treading On Thin
Ice</div>
</div>
<div class="history">
<div
class="history_text">dream</div>
<div><img src="./images/5.jpg" alt=""
/></div>
<div
class="history_text">heartbeat</div>
<div><img src="./images/6.webp" alt=""
/></div>
</div>
</div>
</div>
<div class="abount">
<div class="heritage">
<div class="heritage_text_d">music
piece</div>
<div class="heritage_text">
<div>
———————————————————————— music piece
————————————————————————
</div>
</div>
<div class="memory">
<div class="memory_l">
Because I want to be loved </div>
<div class="memory_r">
<div class="memory_r_item">
<div
class="memory_r_item_24">
On the way to you
</div>
<div
class="memory_r_item_25">
Happy
</div>
</div>
<div class="memory_r_item">
<div
class="memory_r_item_26">
Am I
</div>
<div
class="memory_r_item_27">
The day we meet
</div>
</div>
</div>
</div>
</div>
</div>
<div class="abount">
<div class="heritage">
<div class="heritage_text_d">Warm
words</div>
<div class="heritage_text">
<div>
———————————————————————— Warm words
————————————————————————
</div>
</div>
<div class="message">
<div class="message_zx">
<div class="message_zx_img">
<img src="./images/12.webp"
alt="" />
</div>
<div class="message_zx_text">
I don't think there's anything
that can't be done. It is right to do the best in everything rather than
fail
to do it
</div>
</div>
<div class="message_r">
<div class="message_r_text">
Through countless nights with the
stars until the day we meet again </div>
<div><img src="./images/13.webp"
alt="" /></div>
<div class="message_r_text">
Don't think about the future,
don't think about the past days, live in the present, happy is happy, sad is
sad </div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
}
.nav {
display: flex;
justify-content: center;
width: 100%;
background-color: #7c9dbc;
}
.nav_logo {
width: 80%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #ffffff3c;
border-radius: 20px 20px 0 0;
color: #142858;
}
.nav_logo img {
width: 50px;
height: 50px;
border-radius: 100%;
margin-right: 10px;
}
.nav_logo_img {
display: flex;
font-size: 22px;
font-weight: 800;
align-items: center;
}
.nav_title {
display: flex;
}
.nav_title a {
color: #fff;
padding: 0 20px;
text-decoration: none;
}
.nav_title a:hover {
color: #142858;
}
input {
width: 250px;
height: 30px;
border: 1px solid #142858;
border-radius: 100px 0 0 100px;
}
.nav span {
display: flex;
align-items: center;
height: 30px;
padding: 0 10px;
background-color: #142858;
color: #fff;
border-radius: 0 100px 100px 0;
font-size: 12px;
}
.nav_input {
display: flex;
overflow: hidden;
}
.box_slideshow {
display: flex;
justify-content: center;
background-color: #7c9dbc;
}
.slideshow {
width: 80%;
min-height: 550px;
background: url(./images/1.webp) no-repeat;
background-size: 100% 100%;
}
.abount {
display: flex;
justify-content: center;
width: 100%;
background-color: #7c9dbc;
}
.heritage {
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
z-index: 1001;
background-color: #ffffff3c;
color: #fff;
padding: 20px 0;
}
.heritage_text {
display: flex;
justify-content: center;
font-size: 14px;
font-weight: 800;
color: #142858;
}
.heritage_text_d {
font-weight: 800;
font-size: 24px;
margin-bottom: 5px;
color: #142858;
}
.heritage_bor {
width: 80%;
margin-top: 100px;
border: 2px solid #707070;
padding: 40px;
position: relative;
}
.heritage_bor_img {
width: 500px;
position: absolute;
top: -20px;
left: -20px;
}
.heritage_bor_r {
width: 100%;
display: flex;
flex-direction: column;
align-items: end;
}
.heritage_bor_r_box {
width: 43%;
}
.heritage_bor_r_box div {
margin-bottom: 10px;
}
.heritage_h1 {
font-weight: 800;
font-size: 18px;
}
.heritage_h5 {
font-size: 12px;
}
.heritage_but {
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
width: 150px;
padding: 5px;
background-color: #142858;
font-size: 12px;
}
.history {
display: flex;
width: 80%;
}
.history div {
width: 25%;
height: 200px;
background-color: #fff;
}
.history img {
width: 100%;
height: 200px;
}
.history_text {
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 800;
font-size: 22px;
color: #142858;
}
.memory {
width: 80%;
display: flex;
margin-top: 20px;
}
.memory_l {
display: flex;
align-items: end;
padding: 10px;
font-weight: 800;
width: 50%;
height: 400px;
width: 50%;
min-height: 400px;
background: url(./images/7.webp) no-repeat;
background-size: 100% 100%;
}
.memory_r {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 50%;
height: 400px;
padding-left: 10px;
}
.memory_r_item {
display: flex;
justify-content: space-between;
width: 100%;
height: 195px;
}
.memory_r_item_24 {
display: flex;
align-items: end;
padding: 10px;
font-weight: 800;
width: 49%;
height: 195px;
background: url(./images/8.webp) no-repeat;
background-size: 100% 100%;
}
.memory_r_item_25 {
display: flex;
align-items: end;
padding: 10px;
font-weight: 800;
width: 49%;
height: 195px;
background: url(./images/9.webp) no-repeat;
background-size: 100% 100%;
}
.memory_r_item_26 {
display: flex;
align-items: end;
padding: 10px;
font-weight: 800;
width: 49%;
height: 195px;
background: url(./images/10.webp) no-repeat;
background-size: 100% 100%;
}
.memory_r_item_27 {
display: flex;
align-items: end;
padding: 10px;
font-weight: 800;
width: 49%;
height: 195px;
background: url(./images/11.webp) no-repeat;
background-size: 100% 100%;
}
.message {
margin-top: 20px;
width: 80%;
}
.message_zx {
display: flex;
}
.message_zx_img {
width: 30%;
height: 200px;
}
.message_zx_img img {
width: 100%;
height: 200px;
}
.message_zx_text {
display: flex;
align-items: center;
width: 70%;
height: 200px;
padding: 20px;
color: #fff;
background-color: #142858;
}
.message_r {
display: flex;
}
.message_r {
display: flex;
}
.message_r div {
width: 33.33333%;
height: 200px;
}
.message_r img {
width: 100%;
height: 200px;
}
.message_r_text {
display: flex;
align-items: center;
background-color: #fff;
color: #142858;
padding: 10px;
}
Final Project Final Outcome:
Comments
Post a Comment