I’m looking for feedback on my first project. It’s simply designed and meant to capture the green “hacker” style and basic terminal from The Matrix, with the subject of the page being Keanu Reeves and Neo. I went with Keanu/Neo as the subject because I’m a fan of his movies and he’s been everywhere because of his inclusion in the Cyberpunk 2077 game.
One thing that was odd for me is using “id” instead of “class” for attributing CSS. Using id was a requirement for the project so I couldn’t use class in the way it normally would. Did I still do it the way I was supposed to?
@emTr0 You have passed the tests so the code is functioning. You can us ‘id’, ‘class’, or both to target the same element. Your page looks pretty good visually.
The page is not responsive at all so I suggest, as a challenge, going back to make sure it will fit on a cell phone.
I updated the code to be more responsive based on screen size. It should now fully display appropriately on smaller screens. Can you let me know what you think?
Well, maybe around 20px. One thing to keep in mind is the switch sometime takes a little time to settle in (psychologically). It will look too big at first because you have looked at the small text size for so long. I’d suggest setting it and leaving the page for 10 minutes, then come back and look at it again. It should seem less big then.
There are also more extreme fonts like VT323 which might look cool, giving it more an old school video game vibe. Just make sure the size is big enough so it is still legible.
@lasjorg Orbitron is a cool font. I have used it in a project or two.
@emTr0 I suggest using something like Hack font for the paragraphs. That is a font that people would use in a terminal. https://sourcefoundry.org/hack/
Nice Nice, Cyberpunk 2077 launch was interesting indeed.
I love the style however if you want, you could try using a complimentary color to green for some elements ( the border or caption) or alternatively use different shades of green to add some visual separation.
You could also try and using a css grid columns with rows inside of them for the time-line, but I am guessing the choice of style was intentional.
I don’t know, using an @media call to a min-width in the CSS sounds like a pretty good idea to me. That way you could have multiple versions according to size. Maybe that just needs a bit of experimentation.
Another thought would be if the whole thing were so perfectly scalable that a viewport statement did the trick.
My approach to that can be viewed in the CSS here https://codepen.io/dwaynebrock/pen/byypMm.
It got my attention, because I faced a similar problem. but I am sure my way to solve it is not the only one.
In the end, those are just my opinions about it. You might find another way entirely.
Just a few thoughts, I look forward to seeing what you come up with. I definitely like the cyberpunkish color scheme. It makes me want to go read Neuromancer again.
Um, oops. I need to make a correction and an apology.
This was my version of the same challenge. I approached it by going after the mobile first, then going larger. did all of the scaling in CSS and kept html for the content separation. I learned from my end that if you don’t separate them this way, the html validator doesn’t approve.