Frank Medrano Tribute Page Review

[kasiaczar]

Hi there,
I’d appreciate any feedback on my first ever coding project. Thank you in advance.

Frank Medrano Tribute Page

[mikechristopher]

Hi @kasiaczar
Good job in getting started.

I would recommend taking a look at the readability of the text against the background as i know on mobile at least its difficult to read the black against the bricks.

Good luck!

[kasiaczar]

Thank you, I couldn’t find a way to change the background opacity behind the text. I would love it to be semi transparent with a sort of milky effect that would counteract the sharp pictures edges.

[mikechristopher]

Take a look here- may help

https://www.w3schools.com/css/css_image_transparency.asp

[sitek94]

Hej Kasia, dobra robota!

As @mikechristopher already said you could improve the readability of the text.

At the moment you set the background in two different places.

In this div wrapper (HTML):

<main id="main">
  <div style="background-image: url('https://images.unsplash.com/22/brick-wall.JPG?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb');">

And in the body (CSS):

body {
  ...
  background-image: url("https://images.unsplash.com/22/brick-wall.JPG?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb");
}

The easiest way to go about it would be to remove that wrapper div completely and add linear gradient with some transparency to background-image:

body {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    url("link-to-the-photo");
}

Good luck

[kasiaczar]

Thank you, it looks like it’s not possible to change the brick background opacity the way I want to. I decided to change the background image, not 100% happy with it but the text looks more clear…

[kasiaczar]

Hey, thanks I tried but it didn’t quite look the way I wanted to. I changed the background image instead and I learnt a lot looking for a solution …