Categories
Coding

First Website Design

I tried my hand at making my own HTML + CSS website for my school assignment.

And let’s just say it was not my best effort. But I did end up with lots of learning and also got inspirations to improve my website further.

Content

The website was a fan page for the movie Big Hero 6 which is a 2014 American animated superhero film produced by Walt Disney Animation Studios. The movie tells the story of Hiro Hamada, a young robotics prodigy and Baymax, a healthcare robot invented by his late brother, Tadashi. They form a superhero team to combat a supervillain responsible for Tadashi’s death.

Why I chose HTML + CSS

  • To me, HTML and CSS are beginner friendly. You don’t need complex software to start, just a text editor like Notepad and a browser. This makes it very convenient to create your own website.
  • Separation of content and design. HTML handles the content, and CSS handles the design. This makes them easier to update, fix and is overall more organised.
  • Consistency across pages. Using one CSS file means all pages use the same colour, font and layout. This makes the website look professional and polished.

My project

Now that I knew what content to write and how to write it, I then started with the coding. I wanted the overall theme to match Big Hero 6, so I went with the their iconic red colour and almost identical font layout.

Target Audience

We were also told to research a common demographic of people who would visit the website.

Website UI Elements

Before starting, the teacher advised us to brainstorm a few User Interactive features, even if they seem far fetched. I did add some of these elements into my final website, but others felt complicated.

USABILITY

  • Easy to read information: using a simple font and a readable size makes it easier for kids to read
  • Visually pleasing: using consistent colour scheme inspired by the movie’s aesthetic loved by the animation fans and all children
  • Adaptive screen size: website will look consistent over mobile phones, laptops and tablets for all target audience to view with ease
  • Menu bar: easy to use and clean with icon navigations makes it easier for them especially kids to access what they want on their own

ACCESIBILITY

  • Captions/transcripts on videos: accessible for deaf users to read
  • Large text size: for people with readability issues
  • Audio narrator (text to speech): accessible for blind users to hear

INLCUSIVITY

  • Language translation: allows foreign users to understand the content of the website if their primary language isn’t English (especially since many kids and animation fans are global, as it’s a popular film)
  • Censoring sensitive images: Ensures nothing displayed could offend viewers, making the website kid-friendly and trusted by parents
  • Use of gender-neutral terms: Promotes inclusivity for all users

Mood Board

A mood board is a visual collage of images, colors, textures, and text used to define the style, mood, and direction for a creative project.

Site Map

A sitemap is a simple roadmap for a website, listing all its pages in an organized way to help both visitors and search engines find and understand the site’s structure and important content.

I made a simple sitemap, showcasing all the pages I intended to code using HTML.

Coding

style.css

body {
  background-color: #f5f5f5;
  font-family: 'Orbitron', serif;
  color: #333;
  padding: 40px;
  max-width: 900px;
  margin: 0 auto;
}

h1 {
  color: #e60012; 
  text-align: center;
  font-size: 3rem;
  margin-bottom:10px;
}

h2 {
  color: #e60012;
  margin-top: 40px;
  margin-bottom: 15px;
  border-bottom: 2px solid #e60012;
  padding-bottom: 5px;
}

h3 {
  color: #444;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 30px;
}

h4 {
  color: #444;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 30px;
}


p {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.9;
  margin-bottom: 20px;
  font-size: 1.1rem;
  color: #000000;
  
}

a {
  color: #0085ff;
  font-weight: bold;
  font-size: 1.3rem;
  text-align: center;
}

.center-link {
  text-align: center;
  margin-top: 20px;
}

.left-link {
  text-align: left;
  margin-top: 20px;
}

.image-row {
  display: flex;
  justify-content: center;
  gap: 15px; 
  margin-top: 20px;
  flex-wrap: wrap; 
}

style.css(02) (used in some pages with minor changes like text alignment and font thickness)

body {
  background-color: #f5f5f5;
  font-family: 'Orbitron', serif;
  color: #333;
  padding: 40px;
  max-width: 900px;
  margin: 0 auto;
}

h1 {
  color: #e60012; 
  text-align: center;
  font-size: 3rem;
  margin-bottom:10px;
}

h2 {
  color: #e60012;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 15px;
  border-bottom: 2px solid #e60012;
  padding-bottom: 5px;
}

h3 {
  color: #444;
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 30px;
}

h4 {
  color: #444;
  text-align: left;
  font-size: 1.5rem;
  margin-bottom: 30px;
}

p {
  font-family: 'Open Sans',
  sans-serif;
  line-height: 1.9;
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.1rem;
  color: #000000;
  
}

a {
  color: #0085ff;
  font-weight: bold;
  font-size: 1.3rem;
}

.center-link {
  text-align: center;
  margin-top: 20px;
}

.video-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

index.html

<!DOCTYPE html>
<html lang="en"> 

<html>
<head>
  <meta charset="UTF-8">
  <title>Big Hero 6 Fanpage</title>
  <link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap" rel="stylesheet">

</head>

<body>

<h1> The Ultimate Big Hero 6 Fanpage! </h1>
<h3> Welcome to the Nerd Lab. </h3>

<img src="Images/Big_Hero_6_Baymax.jpg" alt="Baymax waving" style="display:block; margin: 0 auto; height:500px;">
<h4> "Hi! I am Baymax, your personal healthcare companion." </h4>

<div class="center-link">
  <h2> <a href="about_page.html">ABOUT PAGE</a> </h2>
</div>

<p> This is the place where fans unite to celebrate one of the most heroic and the cutest superhero squad: The Big Hero 6! <br>
This website is filled with lots of fun and can be a great way to chat with other fans or be introduced to the fandom. </p>

<h2> Movie Orgin Story </h2>
<p> Big Hero 6 is a 2014 animation superhero-comedy film directed by Don Hall and Chris Williams, produced by Walt Disney Animation Studios. <br> The film is inspired by the Marvel comic book series Big Hero 6. </p>

<h2> Trailers </h2>

<iframe width="560" height="315" src="https://www.youtube.com/embed/z3biFxZIJOQ?si=d4NWh1Q_Lk95Znqq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/8IdMPpKMdcc?si=0LsDmjdXh48fqHj_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

  <p> Learn more about Big Hero 6:<a href="team.html">Meet the Team</a> </p>
  <p> Learn more about the villains in Big Hero 6: <a href="main_villain.html"> Meet the Bad Guy </a> </p>
  <p> Learn more about the series of Big Hero 6: <a href="shows.html"> Shows </a> </p>

</body>
</html>

about_page.html

<!DOCTYPE html>
<html lang="en"> 
<html>
<head>
  <meta charset="UTF-8">
  <title>Big Hero 6 Fanpage</title>
  <link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap" rel="stylesheet">

</head>

<body>

<h1> About Page </h1>

<img src="Images/baymax_Hiro_hugging.jpg" alt="Baymax hugging Hiro" style="display:block; margin: 0 auto; height:500px;">

<p> This website is for all Big Hero 6 fans and is usable, accessible and inclusive. This website provides you with a lot of information on your favourite Big Hero6 characters, villains and more. It could also be a great way to get your friends or family members to be a part of the fan club! </p> 

<h2> Who deisigned this website? </h2>
<p> Done by a high school student as part of a school assignment. I was really channelling Fred as an enthusiastic Big Hero 6 fan to create this website! </p>

<img src="Images/handshake_baymax.jpeg" alt="Baymax and Hiro doing a secrect fist bump" style="display:block; margin: 0 auto; height:380px;">

<h3> “Ba la la la la.” </h3>

<div class="center-link">
  <a href="index.html">BACK TO HOMEPAGE</a> 
</div>

</body>
</html>

team.html

<!DOCTYPE html>
<html lang="en">

<html>
<head>
  <meta charset="UTF-8">
  <title>Big Hero 6 Fanpage</title>
  <link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap" rel="stylesheet">

</head>

<body>

<h1> Welcome to the Nerd Lab </h1>
<h3> Fred  |  Go Go  |  Baymax  |  Hiro  |  Honey Lemon  |  Wasabi </h3>

<img src="Images/TheTeam-poster.jpg" alt="Big Hero 6 The Team" style="display:block; margin: 0 auto; height:500px;">

<p> Meet the nerdy, cool students at the San Fransokyo Institute of Technology research lab who have a secret double life. (shhhhh) <br>
Introducing the awesome team of superheroes made up of Baymax, Hiro, Honey Lemon, Gogo, Fred and Wasabi. </p>

<h2> Who are they? </h2>

<p> Originally just a band of self-professed nerds involved with the San Fransokyo Institute of Technology science program plus a healthcare robot, Big Hero 6 was forged when brought together by Hiro Hamada to defeat and unmask Yokai. </p>

<img src="Images/big-hero-6-poster-team.jpg" alt="The team in super suits" style="display:block; margin: 0 auto; height:500px;">

<h3> “We didn't set out to be superheroes. But sometimes life doesn't go the way you planned. The good thing is, my brother wanted to help a lot of people and that's what we're going to do. Who are we?” <br>
- Hiro </h3>

<div class="center-link">
  <p> Learn more about the team in their character profiles: <a href="characters.html">Meet the characters</a> </p>
  <a href="index.html">BACK TO HOMEPAGE</a> 
</div>

</body>
</html>

characters.html

<!DOCTYPE html>
<html lang="en">

<html>
<head>
  <meta charset="UTF-8">
  <title>Big Hero 6 Fanpage</title>
  <link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap" rel="stylesheet">

</head>
<body>

<h1> Character Profiles </h1>
<img src="Images/BigHero6Team.webp" alt="All the Big Hero 6 members" style="display:block; margin: 0 auto; height:500px;">

<h2> Hiro Hamada </h2>
<img src="Images/Hiro_Suit_Render.webp" alt="Hero in a super suit" style="display:block; margin: 0 auto; height:400px;">

<p> This 14 year old boy is the main protagonist with his state of the art battle bots that dominate the underground bot fights held in the dark corners of San Fransokyo. When his older brother Tadashi Hamada introduces him to the San Fransokyo Institute of Technology he finds his place and his new job as a superhero. </p>
<h3> "Guys, the city needs us. We were the ones who decided to be superheroes. Now's the time to be super." </h3>


<h2> Baymax </h2>
<img src="Images/Baymax_Armor_Wings_Render.webp" alt="Baymax in a super suit" style="display:block; margin: 0 auto; height:400px;">
<h3> “Hello. I am Baymax, your personal healthcare companion.” </h3>

<p> The walking marshmallow, Baymax was created by the brilliant Tadashi Hamada during his time studying at the San Fransokyo Institute of Technology, as a healthcare providing nurse to improve healthcare around the world. However, after the unfortunate incident of Tadashi’s death, Hiro’s takes over his brother’s robot making him into an armoured hero. Baymax then becomes a superhero and a healthcare assistant for all. <br>From a paper cut to closing a portal that could suck in San Fransokyo, Baymax can do it all. </p>

<h3> "I have some concerns. This armor may undermine my non-threatening, huggable design." </h3>
<h3> "I will add "fist bump" to my care-giving matrix." </h3>
<h3> "Data transfer complete. I fail to see how karate makes me a better healthcare companion." </h3>

<h2> Honey Lemon </h2> 
<img src="Images/Honey_render.webp" alt="Honey Lemon in a super suit" style="display:block; margin: 0 auto; height:500px;">

<p> Her passion for chemistry led her to enrolment at San Fransokyo Institute of Technology with the goal of introducing energy-efficient, environmentally friendly chemical formulas. Honey is equipped with special features and weapons from her suit, like the chem purse which allows her to create spherical grenade-like capsules called chem-balls. The suit also protects her skin from potential chemical leaks. </p> 

<h3> “I believe the world can be made into a happier, healthier, and much brighter place, through the thorough application of nature's toolbox—chemistry!” </h3>
<h3> "Let's not jump to conclusions. We don't KNOW he's trying to kill us...HE'S TRYING TO KILL US! </h3> 

<h2> Go Go Tomago </h2> 
<img src="Images/Go_Go_Superhero.webp" alt="Go Go in a super suit" style="display:block; margin: 0 auto; height:500px;">
<h3> "Stop whining, woman up." </h3>

<p> Go Go majors in Mechanical Engineering and Industrial Design and is an accomplished racer. Her battle suit is based on her science experiment seen during her introduction at the San Fransokyo Institute of Technology. This suit incorporates her bike design and the same electromagnetic wheels to achieve speed. </p>

<h2> Fred </h2>
<img src="Images/Fred_Superhero.webp" alt="Fred in a super suit" style="display:block; margin: 0 auto; height:500px;">

<h3> "The name's Fred; school mascot by day, but by night... I'm also the school mascot." </h3>

<p> He is not one of the students at San Fransokyo Institute of Technology, but he is “a MAJOR science enthusiast.” Though he only has average intelligence he is a scholar when it comes to any sort of comic book lore. His "Fredzilla" super suit is designed to look like a Kaiju (or Japanese monster) and gifts him abilities like one. </p>	

<h2> Wasabi </h2>
<img src="Images/Wasabi_in_Suit.webp" alt="Wasabi in a super suit" style="display:block; margin: 0 auto; height:500px;">

<h3> "I have a system: there's a place for everything, everything in its place." </h3>

<p> His interest in science started after joining the San Fransokyo Institute of Technology, majoring in Applied Physics, he befriended students Tadashi Hamada, Honey Lemon, Go Go Tomago, and the school mascot, Fred Frederickson. He received the nickname "Wasabi" from Fred, after accidentally spilling the condiment onto his own shirt on a single occasion. </p>

<h3> "I spilled wasabi on my shirt one time, people. ONE TIME!" </h3>


<div class="center-link">
  <a href="team.html">Back to team page</a> 
</div>

</body>
</html>

main_villain.html

<!DOCTYPE html>
<html lang="en"> 

<html>
<head>
  <meta charset="UTF-8">
  <title>Big Hero 6 Fanpage</title>
  <link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap" rel="stylesheet">

</head>

<body>

<h1> The Bad Guy </h1>
<h4> aka. the main villain </h4>

<img src="Images/Yokai.black.webp" alt="Yokai in a dark setting" style="display: block; margin: 0 auto; height: 400px;">

<p> There are a lot of villains that the Big Hero 6 fight, but they are mostly in Big Hero 6: The Series. The main villain that forced the formation of Big Hero 6 was 'Yokai' who made his debut in the 2014 movie. </p>

<h3> WARNING: Major movie spoiler ahead skip to <a href="other_villains.html">Other Bad Guys </a> to be spoiler free!</h3>

<h2> Yokai </h2>
<p> Yokai is an alter-ego made by Professor Robert Callaghan who is a major antagonist in Disney’s Big Hero 6 franchise, serving as the main antagonist of Disney’s 54th full-length animated feature film Big Hero 6 and a minor character in Big Hero 6: The Series. </p>

<img src="Images/Callaghan.webp" alt="Callaghan without his Yokai mask on threatening Krei scene" style="display: block; margin: 0 auto; height: 350px;">

<h2> Orgin Story </h2>
<img src="Images/Callaghan_facing_Krei.webp" alt="Callaghan without his Yokai mask on threatening Krei scene" style="display: block; margin: 0 auto; height: 350px;">
<p> Callaghan transforms into the villain, Yokai after a personal tragedy involving his daughter and a malfunction in a portal experiment led by Alistair Krei. He becomes consumed with revenge and seeks to destroy Krei. To seek his revenge and fully transform into Yokai, Callaghan fakes his death by setting fire to the San Fransokyo Institute of Technology. Tadashi tragically dies while trying to save Callaghan who was said to still be inside the burning building. This connection of Callaghan to Tadashi’s death further fuels Hiro’s passion to destroy the masked Yokai, leading to the formation of Big Hero 6. </p>

<h4> Check out other bad guys from Big Hero 6: The Series <br> <a href="other_villains.html">Other Villains </a> </h4>


<div class="center-link">
  <a href="index.html">BACK TO HOMEPAGE</a> 
</div>

</body>
</html>

other_villains

<!DOCTYPE html>
<html lang="en">

<html>
<head>
  <meta charset="UTF-8">
  <title>Big Hero 6 Fanpage</title>
  <link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap" rel="stylesheet">

</head>
<body>

<h1> Bad Guys Profiles </h1>

<p> These villains are from Big Hero 6: The series that aired between November 20, 2017, and February 15, 2021. The series introduced two villains: Obake in season 1 and Liv Amara in season 2 respectively.

<h2> Obake </h2>
<img src="Images/Obake.webp" alt="Image of Obake" style="display:block; margin: 0 auto; height:400px;">

<h3> "Tragedy has molded us, intellect has driven us. Now we stand at the doorway to greatness!" <br>
 -Obake </h3>
<p> Obake, formerly known as Bob Aken, was the main antagonist of the first season. He is a cold-hearted scientist with dreams of being revered and remembered for his genius, even in death. After enduring an accident that resulted in severe neurological damage, Obake sought to leave his mark on the world by destroying San Fransokyo, with the intention of recreating the city in his image. </p>

<h2> Liv Amara </h2>
<img src="Images/LivAmara.webp" alt="Image of Liv Amara" style="display:block; margin: 0 auto; height:400px;">
<h3> "Liv Amara is 23 and runs her own biotech company. In other words—totally hardcore." <br> -Go Go on Liv </h3>

<p> She is a self-made billionaire and the founder of Sycorax, a biotech company, who was placed into cryogenic stasis after experimenting on herself with life-threatening parasites. While in suspended animation, her clone, Di Amara, impersonated her, tasked to save her life no matter what. </p>


<a href="main_villain.html">Back to Main Villain page</a> 

</body>
</html>

shows.html

<!DOCTYPE html>
<html lang="en">

<html>
<head>
  <meta charset="UTF-8">
  <title>Big Hero 6 Fanpage</title>
  <link rel="stylesheet" href="style(02).css">


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap" rel="stylesheet">

</head>

<body>

<h1> Shows </h1>

<h2> 2017 </h2>
<h3> Big Hero 6: The Series </h3>

<p> After the success of the movie Big Hero 6 it led to Disney announcing that a Big Hero 6 television series that premiered on Disney Channel and Disney XD in 2017. </p>

<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/uapgLQveCYM?si=rRiN62Ip0AB2f_9H" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<p> Learn more about <a href="The_Series.html">Big Hero 6: The Series</a> </p>

<h2> 2020 </h2>

<h3> Baymax! </h3>
<p> In December 2020, Disney announced a new Disney+ series titled Baymax!, which would follow Baymax working as a nurse around San Fransokyo. The series, produced by Walt Disney Animation Studios, premiered on June 29, 2022. </p>

<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/lcYPrMk12zw?si=KLhsbD6fZIRy1WXG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

<p> Learn more about <a href="baymax!_show.html">Baymax!</a> </p>


<div class="center-link">
  <a href="index.html">BACK TO HOMEPAGE</a> 
</div>

</body>
</html>

The_Series.html

<!DOCTYPE html>
<html lang="en">

<html>
<head>
  <meta charset="UTF-8">
  <title>Big Hero 6 Fanpage</title>
  <link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap" rel="stylesheet">

</head>

<body>

<h1> Big Hero 6: The Series </h1>
<img src="Images/series_poster.webp" alt="Honey Lemon taking a group selfie" style="display:block; margin: 0 auto; height:500px;">

<p> Big Hero 6: The Series is an American superhero animated children's TV series that aired between November 20, 2017, and February 15, 2021. The show was produced by Disney Television Animation and was created by Mark McCorkle and Bob Schooley. It is a follow-up to the original film and uses traditional hand-drawn animation. </p> 
<p> The show premiered with a 43-minute episode titled "Baymax Returns" on Disney XD on November 20, 2017. </p>

<h2> Synopsis </h2>
<img src="Images/Group_photo.webp" alt="Honey Lemon taking a group selfie" style="display:block; margin: 0 auto; height:450px;">
<p> The series is set after the events of Big Hero 6 (2014) and continues the adventures of 14-year-old tech genius Hiro Hamada and his walking marshmallow robot Baymax, created by his late brother Tadashi. Along with his friends Wasabi, Honey Lemon, Go Go and Fred, they form the superhero team Big Hero 6 and embark on high-tech adventures as they protect their city from an array of scientifically enhanced villains like Obake. Hiro is also shown as facing academic challenges as the new prodigy at San Fransokyo Institute of Technology (SFIT). </p>

<p> The series follows the group as they fight villains threatening the peace of San Fransokyo over 3 seasons. New characters are introduced like Professor Grace Granville, Karmi a young prodigy like Hiro, Richardson Mole as Fred’s arch nemesis and many more. </p>

<h2> Theme song </h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/TeNwMzQEaYk?si=lBjZN3jmVnNgV3XF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<div class="left-link">
  <a href="shows.html">Back to shows </a> 
</div>

</body>
</html>

baymax!_show

<!DOCTYPE html>
<html lang="en">

<html>
<head>
  <meta charset="UTF-8">
  <title>Big Hero 6 Fanpage</title>
  <link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap" rel="stylesheet">

</head>

<body>

<h1> Baymax! </h1>
<img src="Images/baymax!_poster.jpeg" alt="Baymax standing together with the characters" style="float: left; height: 500px; margin-right: 20px; margin-bottom: 10px;">

<p> Baymax! is a 6 episode animated sequel series created by Don Hall and premiered on Disney+ on June 29, 2022, featuring the one and only walking marshmallow </p> 
<p> The Disney+ show is the second TV series set within the Big Hero 6 universe as the action film previously inspired a spin-off aptly titled Big Hero 6: The Series. </p>

<h2> Synopsis </h2>
<p> The series follows healthcare companion robot Baymax as he helps people in the city of San Fransokyo. Each episode sees Baymax visit one of the side characters in the Big Hero 6 world, responding to a ‘medical emergency’, taking an unexpected turn, and aiding said character in learning a life lesson or two, until the conclusion where all come to the aid of the friendly balloon-bot. </p>

<div class="image-row">
 <img src="Images/baymax_01.jpg" alt="Baymax in a classroom covered in bandages" style="display:block; margin: 0 auto; height:460px;">
 <img src="Images/baymax_02.jpg" alt="Baymax waving to a man on a foodtruck" style="display:block; margin: 0 auto; height:460px;">
 <img src="Images/baymax_03.webp" alt="Baymax waving to an old woman" style="display:block; margin: 0 auto; height:510px;">
</div>

<h3> “Hello! I am Baymax. Your personal healthcare companion.” </h3>

<h2> Trailer </h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7xidOWnzSu4?si=SB5je7F04nz0VKNJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<div class="left-link">
  <a href="shows.html">Back to shows </a> 
</div>

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *