Love-live-group-rank-screen
This mini project implements a front-end version of a web page that appeared in an anime show.
View the Project on GitHub lawrenceabaeo/love-live-group-rank-screen
Make It Like The Screenshot
What is this project?
I copied the web page that some of the Love Live girls are looking at when they want to find out their group’s popularity ranking. This happens after the show opening in Season 1 Episode 9.
I also made this same page responsive, to look somewhat like the phone app that Honoka is looking at in Season 1 Episode 11.
Why?
I wanted to practice implementing ‘comps’. Since I don’t have real comps, I took screenshots of a web page that appeared in Love Live: School Idol Project.
How did you get the specs if you didn’t have real comps?
I guessed the site *could* be 960 pixel wide, so I resized the screenshot to show the website at 960 pixels. With that resized image, I measured everything else on the page using a pixel ruler. I used a color picker add on tool in Firefox to capture color codes from the screenshots. I could NOT find exact matching fonts, graphics or icons, so I found ones that fit the ‘spirit’ of the originals.
Honoka's cell phone shows what looks like a mobile app that uses the entire screen. Websites don't have the entire screen to use (the address bar and toolbars take up screen space), so I took more liberties implementing the mobile site than the desktop site.
What technology skills were learned/retrieved?
SASS, CSS3, Responsiveness decisions, HTML5 Boilerplate, Brackets Editor, GIMP
What are this project’s limitations?
Non-functional (it’s meant to practice front-end). Fonts are not exact. No stretchiness in mobile
References
- Love Live Episodes 9, 11
- Free Ruler Mac tool
- colorPicker Firefox add-on
- Brackets
- gimp.org
Fonts and font icons:
Fontello - this website was used to get the font icons used in the lower right
Font license info
Modern Pictograms Copyright (c) 2012 by John Caserta. All rights reserved. Author: John Caserta License: SIL http://scripts.sil.org/OFL Homepage: http://thedesignoffice.org/project/modern-pictograms
Typicons (c) Stephen Hutchings 2012 Author: Stephen Hutchings License: SIL http://scripts.sil.org/OFL Homepage: http://typicons.com
Entypo Copyright (C) 2012 by Daniel Bruce Author: Daniel Bruce License: SIL http://scripts.sil.org/OFL Homepage: http://www.entypo.com
Aldrich-Regular Copyright (c) 2011 by Matthew Desmond (mattdesmond@gmail.com), with Reserved Font Name Aldrich. Author: Matthew Desmond License: This Font Software is licensed under the SIL Open Font License, Version 1.1. Homepage: http://www.madtype.com