i’d make the scroll buttons for the links not go any further once the last option is visible so it stops them from all sliding off the screen. Then the text for the links themselves disappear once you hover over them as the picture blends in with them too much. Maybe just change the size/color of them?
Then on smaller screens, the links take up 90% of the screen, so just work on getting it to look nice for a mobile phone.
Other than that it’s looking very good so far!
So I did my best to optimize and refactor the code. It looks completely different under the hood, I’m pleased with it. I love this project, I pushed my css way beyond anything I thought possible. Here is the final project. The github version is optimized and minified so it will be near impossible to read. the codepen version is more for reading:
@EricHeredia I did my best to stop the scroll on the links at a certain point. It’s not a perfect solution since it only works if you repeatedly press the arrows, but if you hold them down the scroll will still not stop. I tried to come up with a better css only solution but this was all I could think about. I also fixed the issue you pointed out with the link text disappearing on hover. I also tried to make it look cleaner on mobile. Thank you for your input.
Looking forward to hear what everybody thinks about the final version.
giving this one a small Monday morning bump, can hoping someone could give me some kind of feedback on this project.
Pretty impressive you’re doing all this with css only! Good work.
Yeah, I ditto the sentiment expressed earlier that you are doing this all with CSS and markup, effectively running the whole UI as a series of nested
if statements. I applaud the virtuosity.
- Out of curiosity, I noticed that you haven’t included the testing suite. Does it pass the tests for the project? It’d be a shame if all this work didn’t get you towards the certificate.
- If you click the chevron-right, you can limit the movement of the sliding links, but not on the left side. As you said, scroll behavior with a long mouse press is still broken
- tablet & smaller breakpoints look good. The vital statistics floating to the right of the bio pics get a little scrunched under 330px wide, but I wouldn’t worry about that since the only device I know of that has that narrow a viewport is the iPhone 3GS.
Looks great. And I thought my css was good. I guess I like to rely on my programmatic logic. But you have the kind of mind that generates css libraries.
Hey, sorry if I’m repeating anybody, but I’ve only read the first post.
First of all - I like the idea of keeping everything on one page without the need to scroll, pretty creative design you have there.
There are some things I think would be better if you changed them:
- The blue border around when hovering buttons at the bottom. Doesn’t look good, remove it but kepe the rest as is.
- The content on each “tab” is hidden by default (not including the “Tribute To The IMF” text, and it wasn’t clear that I have to click the button on the top right to display more content. There are 2 changes that I’d make here:
- Make the content shown by default, if you have a list of operatives in the “Operators” category, make the first one (Ethan Hawk in this case) active by default.
- The text is pretty dark, make it as bright as it gets when you hover over the div.
- Experiment with the main image being a bit higher.
- Increase the thickness of the border in the navigation, think it looks better at 0.2rem compared to the current 0.1rem
Thank you so much for the input. I will work on these points you made and I will update as soon as i’m done.
@Gigusek I made the changes you recommended. Looks Better, and it’s more intuitive. Thanks again.
The UX is kinda difficult. Try to make it more user friendly.
I see you’re displaying some info by default when I choose any category, that’s good However the text is still pretty dark until hovered on. Here:
Should be like this: