Concrete data - website development
Final website outcome: link
Choosing the main concept for my interface, I started to writing the code. I wanted it to look like a long timeline that would be divided into different incidents' categories: threats, violent attacks against people and violent attacks against properties (official categorisation presented by the KPH and Lambda).
I had difficulties with creating a long horizontal scroll website, but with a little bit of Oliver's help, I managed to do it and still keep the responsive content. Basically, the whole website is inside the big div called 'years' and the screen is divided into four full-screens (incidents from 2015, 2016, 2017 and end information). In CSS, I set html and body to 'width: 200%' and then the separate divs to 50vh.
I didn't want the events to be displayed right after the suers would enter the website. This is why I created a simple animation, using HTML and CSS, that would hide the descriptions. The idea is to show people how many incidents there was in these categories and then, when someone wants to know more - they can simply hover a mouse on top of the arrow and read the short description.
My initial idea was to create a dark interface, I changed my mind and went for rainbow colours instead. Even though, the issue presented on my website is serious and definitely not happy (as the colours might suggest), but the LGBT+ community is a positive place and hate speech can't change it in any way.
Between the hate speech events segment and the end page, I added a rainbow column as a divider. At the end of the website I included a short description of the purpose of the website and gave a link to the support landline and a button that can get users to the very beginning of the page if they want to research the content more.