{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/freecodecamp/frontend/html/fcc-challenge-22-nest-an-anchor-element-within-a-paragraph/","result":{"data":{"site":{"siteMetadata":{"title":"Be Brav3"}},"markdownRemark":{"id":"c575f1be-ff36-56ea-9238-63751de7d57e","excerpt":"In Free Code Camp Challenge 22 we need to nest the anchor element in the paragraph tag Again, here’s a diagram of an a element for your reference: Here’s an…","html":"<p>In <a href=\"https://www.freecodecamp.com/challenges/nest-an-anchor-element-within-a-paragraph\">Free Code Camp Challenge 22</a> we need to nest the anchor element in the paragraph tag</p>\n<blockquote>\n<p>Again, here’s a diagram of an a element for your reference:</p>\n<p>Here’s an example:</p>\n</blockquote>\n<blockquote>\n<p>[html]</p>\n</blockquote>\n<blockquote>\n<p>Here&#8217;s a <a href=\"https://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p>\n</blockquote>\n<blockquote>\n<p>[/html]</p>\n</blockquote>\n<blockquote>\n<p>Nesting just means putting one element inside of another element.</p>\n<p>Now nest your existing a element within a new p element (just after the existing h2 element) so that the surrounding paragraph says “View more cat photos”, but where only “cat photos” is a link, and the rest of the text is plain text. </p>\n</blockquote>\n<p>The original code is:</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<p>.thick-green-border {</p>\n<p>border-color: green;</p>\n<p>border-width: 10px;</p>\n<p>border-style: solid;</p>\n<p>border-radius: 50%;</p>\n<p>}</p>\n<p>.smaller-image {</p>\n<p>width: 100px;</p>\n<p>}</p>\n</style>\n<h2 class=\"red-text\">CatPhotoApp</h2>\n<p><a href=\"http://www.freecatphotoapp.com\">cat photos</a></p>\n<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">\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>The updated code should look like:</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<p>.thick-green-border {</p>\n<p>border-color: green;</p>\n<p>border-width: 10px;</p>\n<p>border-style: solid;</p>\n<p>border-radius: 50%;</p>\n<p>}</p>\n<p>.smaller-image {</p>\n<p>width: 100px;</p>\n<p>}</p>\n</style>\n<h2 class=\"red-text\">CatPhotoApp</h2>\n<p>view more <a href=\"http://www.freecatphotoapp.com\">cat photos</a></p>\n<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">\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]","frontmatter":{"title":"FCC Challenge 22: Nest an Anchor Element within a Paragraph","date":"March 08, 2016","description":null}}},"pageContext":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-22-nest-an-anchor-element-within-a-paragraph/","previous":{"fields":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-21-link-to-external-pages-with-anchor-elements/"},"frontmatter":{"title":"FCC Challenge 21: Link to External Pages with Anchor Elements"}},"next":{"fields":{"slug":"/blog/selenium/using-selenium-to-navigate-to-a-url/"},"frontmatter":{"title":"Using Selenium to Navigate to a URL"}}}}}