A tribute page! Comments appreciated

Well, I’ve done it! Here’s my tribute page:

I suspect the code will look a little odd in places and I didn’t use a huge amount of Bootstrap…I did use quite a bit of CSS (despite the project video indicating that they had used very little in their example video). Comments appreciated.

I’m a big fan of Eddie Vedder and Pearl Jam.

I like your choice of fonts and font-size was easy to read, but I’m not so sure about the color combination based on the jumbo-tron image, Not that its bad, but I would have pushed you to try other color combinations. I played with your codepen and colors for this look Trust me, I’m no artist, all I did was I used a color picker plug-in for chrome and sampled some of the main color codes in the image and then looked for complimentary colors and tried to keep a nice contrast.

Overall, I liked it. Would appreciate feedback on my tribute page from 6 days ago.

Adding `class=“img-fluid” to your img tag and deleteing inline styling will make your image responsive

@KerryRuddock Glad to meet another Vedder fan! Thanks for taking the time to comment and for putting together your tweeked version of my page. I have adjusted my colours at your suggestion using a colour-picker.

@sorinr Thanks for your comment; I originally tried using img-fluid but the image was appearing massive on my screen. I wanted it smaller and could think of no way of reducing the size beyond using inline (or perhaps CSS) styling. I suppose if I was hosting the image myself, I could just adjust the actual image so that it was smaller. Any suggestions for adjusting the image size so that it appears smaller on a regular computer screen whilst still using the img-fluid?

Nice approach. But the image is not responsive with other elements of the page. So probably you might wanna fix that.

To also be responsive and keep the img dimensions lower you can:

<img src="https://cdn-images-1.medium.com/max/1200/1*5ljTaKexM3PHKODigzcunw.jpeg" alt="Eddie Vedder, lead singer of Pearl Jam" class="img-fluid image">

and in css:

.image {
  margin-left: auto;
  margin-right: auto;

Try to put all your css in one place. Avoid using inline styling.

Thanks @sorinr - I have adjusted as you suggested!