After some experimenting and some help from other users i managed to complete my Tribute Page.It is dedicated to a woman named Lisa Randall who’s a physicist that i admire.
Please, tell me , how does it look to you? What else does it need? It’s an amateur’s work and i know that it’s messy but i’m working on fixing my style of coding. No one wants a messy coder , i even get lost trying to follow me code lines.
Here’s the Link:
I really your tribute page. Putting all the text and pictures in the white boxes makes your page easy on the eyes. Also, One thing that bugged me is that one of the book covers isn’t as big as the other ones. But I love the little border animations when I hover my mouse over the books. How did you do that?
I think its the .books class in the css that causes the animation. I am relatively new to this, could be talking rubbish
First of all , thank you for leaving a comment . At first i was a little hesistant about putting many containers but i did it hoping that other users will find it as you said ‘easy on the eyes’. As for the books section, well you know what? That’s the main problem i’m facing. I cant have a static width and height without breaking something from the bootstrap grid system. If you noticed not all images are equal in height and i dont know why.
The hover thing, there’s a line in my code books:hover . While searching for CSS commands i found this. What it does is when you hover over an element it activates something, in my case i’ve set a background with 10px padding and set it to color #2f2f2f with the background-color command.
Moreover, i’ve added the transitiondelay effect which is a property of the transition command.
transition: all 0.5s ease;
all > specifies all properties , both background-color and padding will transition.
Yes, that’s it. The “book:hover” is responsible for that .
This is the sort of detail (book images being different sizes) that would keep me up at night!
You could resize the book images to all be the same size/ratio. I would use Photoshop but there are online tools, too. This one looks good:
Yes, this might work. It will save me lots of time, but shouldn’t i be able to fix this with code? I feel like i MUST know how to fix