A tribute page! Comments appreciated

Code Feedback
1

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.

2

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.

3

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

4

@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?

5

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

6

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 {
  display:block;
  margin-left: auto;
  margin-right: auto;
  max-height:400px;
  width:auto;
}

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

7

Thanks @sorinr - I have adjusted as you suggested!