Hi I just finished the my tribute page for the most part. I say for the most part because I will be refactoring the code over the rest of the day. I spent a lot of time experimenting with different ideas, which left the code really messy and a bit bloated. After I finish refactoring, then I will focus on optimizing since as it is it loads really slow. I decided I was going to do a dark theme design, was skeptical about going with it at first because I know it could be hard to make thing pop on the site, but I decided to take the leap anyways. Again as with all my projects I wanted to implement all functionality with pure css and html. On my previous projects I used jquery in only one functionality, to trigger my navigation. In this project I figured out how to do this without javascript, so this time I was successful in making a 100% pure html and css site. here it is:
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
I made sure the tests passed before I did anything else. I commented out the test suite after it had passed, I believe the minification removed them from the github version, I just uncommented the codepen version. I look forward to rely on my programmatic logic as well. Since I haven’t started learning javascript yet i’m trying to take this opportunity to “learn css well”. I appreciate the comments. I noticed the other problems you pointed out, I will try my best to fix them.
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.
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: