Since I posted the initial Steematch project idea a few weeks ago, I made some progress with coding the responsive page layout in HTML and CSS.
The idea is to have a one page site where a player need to find the matching pairs out of 30 tiles as quickly as possible. The result will be logged in a highscore.
The current layout looks like this
Since I am new to webdesign it took me a good while to get the layout responsive to various screensizes and for mobile as well. But I think I got there using CSS Flexbox.
I also tried to add some small transition effects to the tiles when you hover over with the mouse.
Once I get more knowledge I also like to add a "flip" effect when you click on the tile and the profile image will be shown.
I am 80% done with the HTML and and Style part. Once completed I try to dig into the complicated stuff which is to get profile images randomly pulled from Steemit and assign them in pairs to the tiles. I believe this can be done via JavaScript but I am open for any recommendation / help with that.
I also didn't figure out yet how to best implement the highscore table and how to log and save data into it.
If you are a programmer or designer and like to help or work together with me on this project, that would be great! You can send me a message on the Steemit Chat.
I also uploaded my current files to github in case you like to look over.
Any suggestions to improve the code or overall implementation are very welcome.