Hi ShashaGazem nice work on this one! 👍
In answer to your questions:
-
This is fine, although you can combine it into one request - if you select both fonts you want in google fonts in one session it will combine it for you. This just means one less request to the server, which is always good!
-
On the svgs, you have the hover state on the parent link, so when the cursor is over the child it is no longer hovering on the link so the state disappears. I'm afraid I'm not sure how to resolve this! I've tried a bit but can't seem to fix it. Maybe ask in the Slack?
Please do let me know if you manage as I'm very curious!
Otherwise I think the page looks great. You might like to consider adding a no-repeat to the background, and then covering the background using background-size: cover? I find this works very well generally!
Keep up the good work 🙌 and please let me know if you solve that issue!!
Cheers '👋
@AngelusLovell
Posted
@dwhenson Hello, I just wanted to let you know that I have found the problem and solve the issue. The element itself was not the cause of the problem, rather a bug of having the attribution element to absolute. The problem occurred b/c the attribution element that I had placed to the left of the SVG element was set to 100% width, by default as it was a block element. So it was floating above the SVG element, covering it. Also since it was not covering the SVG element completely, the hover-event was responsive on the part above and below the element. It was fixed after setting the height and width element to auto.😁
Also, @dwhenson, if you would please, write me code to declare two different fonts in the same link element, if possible with different weights. Thank you.😅
@ShashaGazem sure here's what Google fonts give you if you select multiple fonts and multiple weights:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600&family=Roboto:ital,wght@0,400;1,900&display=swap" rel="stylesheet">
This is Roberto with 400 and 900 weights, and Dancing Script with 400 and 600. It also gives you the CSS snippet to use like this:
font-family: 'Dancing Script', cursive;
font-family: 'Roboto', sans-serif
Is that what you were looking for?
Great work on finding the bug in that CSS - I really struggled!
@AngelusLovell
Posted
@dwhenson Last question what does a CTA class defined.
@ShashaGazem well it’s a class so it can be whatever you want, but it usually stands for “Call To Action”.
Usually people add it to either buttons or links that look like buttons.
