Finally! The hover state finally works ! I’m so happy cause its turned out so much better than I thought it would. After Wessie helped to fix my code I added it to mine and then I started to edit those badges because they were way too big and there were a couple of mistakes in them.
So I ended up making them a bit longer, I added a small black border around them and I spaced out the text more so it wasn’t so cramped. I think they look a lot better now, they not as cramped anymore. I really like the shape of them as well cause they meant resemble an army medal, like the army commendation medal since this is basically a wall of fame.
I ended up dropping the oppacity of them to 80% until you hover over it, then it goes to full opacity. I just felt the full white was a bit too bright for my website but I tested out having a black background and all the text white and it didnt work for this design. I also changed the original shape to a square instead of the original circle, again, this suited my theme much better.
I felt so smart working out the spacing between each of them as well as the spacing between the heading and the images. I did a nice little subtraction sum so that the spacing between the even and image was the same for the odds.
The donkey work came in when Wessie reminded me about the ‘spam’ tag. I had to change every one of ‘strong’ tags to a span tag with a class that links it to a bolder version of Gilroy. I brought this upon myself though, but its chilled, I ended up pasting the span tag with a class over the strong tag and then deleting the ‘trong’ (from Strong) and typing ‘pan’ instead. It’s safe to say i can type ‘pan’ ridiculously fast now.
I also tried to neaten up my code by removing unnecessary spaces and gaps and I made sure everything was indented correctly.
I took a screen recording of the whole thing, If you don’t feel like watching me type the word ‘pan’ a hundred times and removing spaces in my code then you can just stop watching after the first 2 minutes.
JWL 2020 