{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/freecodecamp/frontend/html/fcc-challenge-16-add-images-to-your-website/","result":{"data":{"site":{"siteMetadata":{"title":"Be Brav3"}},"markdownRemark":{"id":"cd632a1f-b38f-5267-af0c-b37859f4d3a8","excerpt":"In Free Code Camp Challenge 16 we’re tasked with adding an image to the code: html h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family…","html":"<p>In <a href=\"https://www.freecodecamp.com/challenges/add-images-to-your-website\">Free Code Camp Challenge 16</a> we’re tasked with adding an image to the code:</p>\n<p>[html]</p>\n<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">\n  \n<style>\n    \n.red-text {\n      \ncolor: red;\n    \n}\n<p>h2 {</p>\n<p>font-family: Lobster, Monospace;</p>\n<p>}</p>\n<p>p {</p>\n<p>font-size: 16px;</p>\n<p>font-family: Monospace;</p>\n<p>}</p>\n</style>\n<h2 class=\"red-text\">CatPhotoApp</h2>\n<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>\n  \n<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>\n  \n[/html]\n<p>You can add the img tag any where after the closing style tag. After modifying the code, it should look like this:</p>\n<p>[html]</p>\n<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">\n  \n<style>\n    \n.red-text {\n      \ncolor: red;\n    \n}\n<p>h2 {</p>\n<p>font-family: Lobster, Monospace;</p>\n<p>}</p>\n<p>p {</p>\n<p>font-size: 16px;</p>\n<p>font-family: Monospace;</p>\n<p>}</p>\n<img src=\"https://bit.ly/fcc-relaxing-cat\">\n  \n<h2 class=\"red-text\">CatPhotoApp</h2>\n<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>\n  \n<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>\n  \n[/html]\n<blockquote>\n<p>You can add images to your website by using the img element, and point to a specific image’s URL using the src attribute.</p>\n<p>An example of this would be:</p>\n</blockquote>\n<blockquote>\n<p>[html]</p>\n</blockquote>\n<blockquote>\n<img src=\"https://www.your-image-source.com/your-image.jpg\">\n</blockquote>\n<blockquote>\n<p>[/html]</p>\n</blockquote>\n<blockquote>\n<p>Note that in most cases, img elements are self-closing.</p>\n<p>Try it with this image:</p>\n<p><a href=\"https://bit.ly/fcc-relaxing-cat\">https://bit.ly/fcc-relaxing-cat</a></p>\n</blockquote>","frontmatter":{"title":"FCC Challenge 16: Add Images to your Website","date":"March 07, 2016","description":null}}},"pageContext":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-16-add-images-to-your-website/","previous":{"fields":{"slug":"/blog/freecodecamp/frontend/css/fcc-challenge-15-specify-how-fonts-should-degrade/"},"frontmatter":{"title":"FCC Challenge 15: Specify How Fonts Should Degrade"}},"next":{"fields":{"slug":"/blog/freecodecamp/frontend/css/fcc-challenge-17-size-your-images/"},"frontmatter":{"title":"FCC Challenge 17: Size your Images"}}}}}