So I’ve been messing about with Product Landing exercise and so far I like where it’s going but I’m still looking for some tips. I’m thinking of adding hamburger menu for nav bar but what else am I missing?
Thank for the advice.
Looks very nice, and the responsiveness is great. A couple of nit-picky items in the header come to mind:
The large title font for “Brushy” could stand to be a bit thicker so it stands out from the background better. Or maybe use that lovely script font you have in the navbar, though I don’t know how good it looks at that size.
The “elevate your art to the next level” doesn’t stand out at all. Try a translucent grey background in the box so it’s more distinguishable from the background.
I’ve edited it a bit and added a black transparent background so that the title and button pop up a bit more. Think it’s better with that background that goes all over the screen or should I just leave font and button like before?
I figured it’s easier to fiddle with the font and color when the background is simpler since the hero image is so colorful.
Not sure the matte behind “Brushy” is needed now that the font is bolder, just for the small box below it. Try taking out the one and leaving just the one for “Elevate your art…”
Tried it like that and I thought it looked kinda weird if the background is just around “Elevate…” so I’ve took you first advice and added translucent background in the box.
Looks terrific now. Next thing I noticed was an issue with the links (I should have tried them before, sorry). Specifically, the “about” link seems to scroll past the “About Brushy” header to the middle of the paragraph. I think you might not be accounting for the height of the navbar there. Also, the contact form could use a good-size margin under it so that the “contact” link scrolls the contact part up to the top. Right now, it sits on the bottom of the page even after clicking the link.
That’s what’s been givin me a headache. I’ve tried using this
:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}
And it doesn’t seem to work unless I remove negative margin.
If I remove negative margin it looks nice but If I scroll up I can see that it created empty block of space. Do I need to use another id or class instead of target?
Unfortunately, I don’t have a great answer to that problem. Most of what I write is single-page internal apps for other engineers, so I have little experience getting things to scroll correctly. When I use anchors into a single page, I either put blank divs in there with the appropriate height, or use large top margins, and I just live with the whitespace. This sometimes enhances the look of the page (look how much whitespace is in the average Apple web page) but sometimes it doesn’t.
Anyone else want to chime in here with some help on the links issue?
Ill just leave it like that 'cos I’d rather that the links go where they should and then I’ll try to figure it out while I fiddle with the page. Thanks for all the help 