Tribute page to my favorite photographer - wondering if my code is "hacky"

Code Feedback
1

hi all! just finished my tribute page. if anyone has the time and wants to look at it and give feedback, I’d really appreciate it!

I’m wondering if my code is “hacky” because I made a bunch of bootstrap containers and kept overriding the default container style by adding classes called “container2”, “container3,” etc., with different styles I wrote myself… is there a better way to achieve the same effect I ended up with (with different background colors for each of the containers, and the uppermost container with one column filled in solid black to make it look like the camera shutter button)? I went with what I did because I read that you can’t nest containers in bootstrap, but I’m not sure if my solution is a good one.

thanks in advance! :smiley:

2

It looks better in a new tab: https://codepen.io/addyleeliu/full/owBXpL/

1 Like
3

Thanks addyleeliu for adding the link to open it in a new tab.

The page does not look that bad now. One thing I would suggest is to use the “Inspect” element option to see what is happening in CSS in the background. Right-click on the page, or element, and select this option. This is a good way to experiment by changing some CSS properties to see what looks best to you. Once you find what you want, you can copy it to your own CSS file, or change the classes you are using.

1 Like
4

Thank you for the suggestion! I didn’t really know about the “inspect” tool before, but I just went and watched a youtube tutorial video on it and it seems like it’ll be very useful.

5

Pen look great on PC. But on mobile text is difficult to read. Add bootstrap row and col-xs-* classes in container3 instead of custom CSS.