Finished my tribute page Evaristo Paramos

Code Feedback
1

Style is probably not for everyone but let me know your thoughts…

I am particularity pleased with the tittle. It was looking like this:

PNG
PNG1673×804 618 KB

I was not happy with the fonts as it just was not quite the look I wanted. I tried a few fonts and it was just not doing it.
so I set the font color to transparent and gave the title a background image of the cutout letters I made in photoshop. that way it is still visible to screen readers but I get the look I wanted.

Noticed that when viewing at codependen it gets a bit wonky on mobile.
Looks better on its hosted url
http://chriscline.tk/evaristo/

1 Like
2

The transparent rotated font for accessibility is fantastic, and I really like the overall punk design. Looks great on mobile!

1 Like
3

thank you very much, glad you liked

1 Like
4

Very cool! Much more advanced than mine! I love it! Nailed the punk look.

5

thanks, I tried to find you page, care to share?

1 Like
6

Hey there. As a new forum member, it wouldn’t let me post a link. Trying to figure out how many posts I have to make before I can.

7

There we go! Got a few posted, here’s the link to mine. https://codepen.io/Jerami/pen/NoKGdN

8

that looks pretty good

I found an image that does not have watermarks, tested and it works

https://images-na.ssl-images-amazon.com/images/I/51wuD01vXIL._SX331_BO1,204,203,200_.jpg

good job

check out what this line of code does (put it at the top of the css)

:root{
  font-size: calc(12px + (28 - 12) * ((100vw - 300px) / (1600 - 300)));
	
}
1 Like
9

@ChrisCline1138 That is visually captivating and an enjoyable read. Nice work!

There are a few extra spaces after text and before a comma in the body of the text you might want to delete (typos).

1 Like
10

Hey thanks for the help! I wasn’t too worried about the watermark, since you know, that’s what stock images are for but, it does look much better without it. I also prefer the smaller image size. I was going to resize it but, I left it for now.

I added the font-size code but, can that expression be simplified? I kinda understand what it’s doing, it’s based on an original font-size of 12px. It’s the rest that I’m having a little trouble deciphering. Is it based on container size?

Thanks for the help. If you don’t have the time to explain, no worries. I’m sure I’ll get there.:slight_smile:

EDIT Also, after adding that font-size, I was forced to change the padding to a relative unit on my ordered list, which is probably better anyway.

11

The calculations create a fluid font size based on screen width
At 12px for a 300px wide screen growing up to 28px for a 1600px wide screen. The 100vw stands for 100% of the viewport width. As the viewport is is scaled so will your font size. You can adjust what the base numbers are by changing the equation. For example replace 12 with 14 ( change both instances of 12) that would set the minimum font size to 14px.
Then yes use rem for all your measurements for example .5rem would be 7 to 14 px depending on screen size
It comes from an article at https://css-tricks.com

1 Like
12

Thanks will get that fixed.

13

It’s nice, very colourful.

1 Like
14

Thank you very much. Glad you like

15

Great work brother… I love the creativity…

1 Like
16

Thanks, it’s my favorite musician so that helped getting into a grove

17

Great explanation! That makes so much sense. I’m trying to switch to best practice of basing everything on viewport size. And thanks for the link to the article. Super helpful!

1 Like
18

awesome, we all learn by doing and sharing

1 Like
19