Welcome to the forums @parumani. Your page looks okay but there are a few things you need to go back and revisit;
- On using codepen. codepen only expects the code you’d put within the
<body> </body>tags in HTML. (No need to include the body tags). For anything you want to add to<head>click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.- The link to your fonts would go in the box labeled ‘Stuff for <head>’
- Expanding on the above, your
<body> </body>tags are not only not needed, they are in the wrong place.
- you have a closing
</figure>tag but there is no opening one. You should delete it. You have other stray tags too. Try running your code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab. - Don’t use the
<br>element to force spacing. Use margin and/or padding in CSS. - Not sure if you noticed but even though you’re using the
<strong>tag the text on your page doesn’t render as such. This is because when you imported your font you only selected regular. Go back to Google Fonts and when you select your font it will give you the link. All well and good so far but what you then need to do is click on the ‘customize’ link (next to ‘embed’) and there click the bold checkbox also. Click the ‘embed’ link and put the new link in your page. (Notice it now has weights for 400 & 700). Btw, I did this too with a page I was working on and asked a question about why I wasn’t seeing the font output the way I expected here in the forums and it was explained to me. Here’s the link to my post which includes a quick video the responder made showing how to do what I just explained.
When you’ve cleaned up your HTML, click on the arrow in the upper right and then click on ‘Format HTML’ to give you a sense of how to structure your code so it’s easier for you, and everyone else, to read.