Shirobako

In this example below you will see how to do a Shirobako with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by T1, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright T1 ©
  • HTML
  • CSS
  • JavaScript
    <html>
  <head>
    <title>A web page about Shirobako</title>
  </head>
  <body>
    <img src="http://vignette4.wikia.nocookie.net/shirobako/images/7/7a/Ojp.jpg" alt="" width="100%"/>

    <h1>Shirobako</h1>
    <p> A story about 5 girls who venture into the anime (Japanese animation) scene after finishing highschool and leaving their anime production club. The 26 episodes long serie show how each of the girls cope with the challenges in the anime production world with their success and failures. The story mainly follows  Aoi Miyamori (middle girl with brown on the above picture) but also focus on the other girls as Aoi meets them in her life.<p>

    <h2 id="past">Past</h2>
    <p>All the 5 girls know each other from their anime production club in highschool. Main reason the school had such a club was Aoi's fault and the same can be said about having the rest of the girls join. At the end of Aoi graduating, the club managed to release a short animation which the whole school watched and applaused. The girls promises each other to re-make the animation when they are professionals</p>

    <h2 id="characters">Characters</h2>
    <p>The main characters in the story are:</p>
    <ul>
      <li>Aoi Miyamori</li>
      <ul>
        <li>Graduates together with Shizuka and Ema.
        </li>
        <li>Nicknamed <em>Oi-chan</em> by Misa and Midori.
        </li>
      </ul>
      <li>Ema Yasuhara</li>
      <ul>
        <li>Graduates together with Shizuka and Aoi.
        </li>
      </ul>
      <li>Shizuka Sakaki</li>
      <ul>
        <li>Graduates with Aoi and Ema.
        </li>
        <li>Nicknamed as <em>Zuka</em> by the rest of the girls.
        </li>
      </ul>
      <li>Misa Toudou</li>
      <ul>
        <li>Graduates after Aoi, Ema and Shizuka but before Midori.
        </li>
        <li>Nicknamed <em>Mii</em> by the rest of the girls.
        </li>
      </ul>
      <li>Midori Imai</li>
      <ul>
        <li>The youngest of all girls. She met the rest of the girls while she was in middleschool and the rest were in highschool. </li>
        <li>In the story she earns the nickname <em> Diesel</em> after doing a freelance research job for Aoi's company.</li>
      </ul>
    </ul>

    <h2 id="roles">Roles</h2>
    <p>Here is a little more details about the girls on how they look and what they do in the story:</p>
    <table>
      <tr>
        <th>Aoi Miyamori</th>
        <th>Ema Yasuhara</th>
        <th>Shizuka Sakaki</th>
        <th>Misa Toudou</th>
        <th>Midori Imai</th>
      </tr>
      <tr class="centering">
        <td><img src="http://www.shirobako-anime.com/images/character/01circle.png" alt="4 faces of Aoi" width="150"/></td>
        <td><img src="http://www.shirobako-anime.com/images/character/02circle.png" alt="4 faces of Ema" width="150"/></td>
        <td><img src="http://www.shirobako-anime.com/images/character/03circle.png" alt="4 faces of Shizuka" width="150"/></td>
        <td><img src="http://www.shirobako-anime.com/images/character/04circle.png" alt="4 faces of Misa" width="150"/></td>
        <td><img src="http://www.shirobako-anime.com/images/character/05circle.png" alt="4 faces of Midori" width="150"/></td>
      </tr>
      <tr>
        <td>
          <ul>
            <li>Production assistant</li>
            <li>Production manager</li>
          </ul>
        </td>
        <td>
          <ul>
            <li>Key animator</li>
            <li>Assistant general animation supervisor</li>
          </ul>
        </td>
        <td>
          <ul>
            <li>Waitress part-timer</li>
            <li>Voice actress</li>
          </ul>
        </td>
        <td>
          <ul>
            <li>3D computer graphics operator</li>
          </ul>
        </td>
        <td>
          <ul>
            <li>University student</li>
            <li>Setting instructor</li>
            <li>Assistant scriptwriter</li>
          </ul>
        </td>
      </tr>
      <tr class="centering">
        <td>Musashino Animation</td>
        <td>Musashino Animation</td>
        <td>Akaoni Production</td>
        <td>Super Media Creations<br>
          Studio Kanabun</td>
        <td>University</td>
      </tr>
    </table>

    <h2 id="morefacts">More facts about Shirobako</h2>
    <ul>
      <li><a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=16189">Anime News Network has more detailed information about the people behind the animation.</a></li>
      <li><a href="https://en.wikipedia.org/wiki/Shirobako#Characters" >The wikipedia page about Shirobako contains more information about the story and the girls.</a></li>
    </ul>
  </body>

/*Downloaded from https://www.codeseek.co/T1/shirobako-yYoNrO */
    body{
  background-color:#B61670;
}

h1, h2{
 text-align:center;
}

h1{
  color:white;
}

a{
  color:white;
}

table{
  border-collapse: collapse;
}


.centering{
  text-align: center;
}

table, td, th{
  border: 3px solid black;
}

#past{
  color: #711BA1;
}

#characters{
  color: #F1D91D; 
}

#roles{
  color: #0FC175;
}

#morefacts{
  color: #3927A7;
}


/*Downloaded from https://www.codeseek.co/T1/shirobako-yYoNrO */
    

Comments