FCC-Tribute Page

Code Feedback
1

I have just finished building the tribute page as first responsive project.
This is the CodePen Link.

I can’t pass the one test. Responsive image test. Need a little help in that.

Please tell me what do you think. Love to hear your feedback.

2 Likes
2

Looks good, it’s easy to read, and has a nice design.

You need to set your display to block on the image, not inline according to the fail text.

1 Like
3

in your css enter this
img{max-width:100%}

1 Like
4

Thank you.
Okay let me try it.

5

Okay…
Thank you for the response.

6

@Tirjasdyn setting the display: block somehow, disappears the image. Don’t know why…
Setting the max-width: 100% is not working.
i deleted the absolute values of height and width, because of that 9/10 tests are passing. Only problem is, image is not responsive.

7

You’re over thinking it. All you have to do is add this to your CSS:

img {
display:block;
}

1 Like
8

oh yes,
at first image disappeared when i added that. Then i removed the absolute values of height and width of the image then it is working now.
Thank you.

9

Nice project. I like that it’s responsive and looks good at any viewport.
And I have a few thought and want to share with you.

  1. Change the color of the next links and some margins to bottom. It’s not so good with your orange background. And add :active, :focus, :visited, :hover for better UI. It’s usually require for any real life projects.
    2018-07-17%2018_56_06-FCC%20-%20Tribute%20Page
  2. Make your fonts responsive with relative units em,rem, % etc. Check this StackOverflow unit(great place to dive deeper). And also make at mobile viewport line-height a little bigger then for desktop.
  3. And your footer looks a little mess for me with a white gap between two blocks.
    image
    image753×110 6.95 KB

And one more thing. I don’t know DJ AVICII and I’m too far from club music. Anyway I’d like to listen his music or watch his videos. It would be much easier to search all of this if you make a links to his tracks within a text. For example:
In 2011, Bergling released < a href=" somewhere where I can listen this" >Levels < / a>, which launced him into the mainstream.

WTG!

1 Like
10

Thanks a lot.

I am kinda bad in choosing the color. I could not think of better color so i kept it as default.
Yes, sure. I will work on responsive fonts. I heard a term called variable fonts so going to learn that and update this project later.
In footer i wanted to clearly define two sections, so i added a little border in the right side of first block.

Actually, it is a good idea to directly open the track mentioned in the text. Thank you for suggesting that.
Need to work more on this.
Again thank you for the response.

11

To choose a color use Johannes Itten color wheel calculator. It’s simple and it will look much better if you even don’t know anything about the web design.

1 Like
12

I like the scroll effect. is that parallax?

1 Like
13

Sure, will check it out.

14

Yes, It is a parallax.

1 Like