HTML
<!DOCTYPE html>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<html lang="en">
<head>
<!--
Copyright (c) 2019 by freeCodeCamp (https://codepen.io/freeCodeCamp/pen/zNqgVx)
Fork of an original work by Chaitanya (https://codepen.io/ChaituVR/pen/PzxGEb)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Gibson is a registered Trademark.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Meddon" rel="stylesheet">
</head>
<body>
<header>
<h1>Les Paul</h1>
</header>
<section>
<article>
<div id="main">
<h2 id="title"><strong>A tribute to Les Paul</strong></h2>
<div id="img-div">
<img id="image" img width="512" alt="Les Paul, ca. Jan. 1947 (William P. Gottlieb 07001)" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Les_Paul%2C_ca._Jan._1947_%28William_P._Gottlieb_07001%29.jpg/512px-Les_Paul%2C_ca._Jan._1947_%28William_P._Gottlieb_07001%29.jpg" alt="Picture of Les Paul, ca. January 1947 Photograph by William P. Gottlieb">
<div id="img-caption">
<p1>A great picture of Les Paul smiling for the camera.</p>
<div id="tribute-info">
<p2>Let's Take A Look At Les Paul.</p2><br><br>
<p3>Les Paul was born Lester William Polsfuss on June 9, 1915 in Waukesha, Wisconsin. He died on December 12, 2009 in White Plains, New York at 94 years young. Early on in life, around the age of eight, Les made a decision that would impact his, and many other lives forever. He taught himself to play the guitar. He became so proficient on the instrument that he was awarded one of only a few stand alone exhibits in the Rock and Roll Hall of Fame. Les Paul sold millions of records throughout his career with his wife on vocals, as well as being an A List Jazz Performer however, his story doesn't end there. Les Paul also made his way into the National Inventors Hall of Fame. The man developed his first invention at around eight years old too! He created many recording techniques during his time, but something that Les is also well known for is his contribution to his name sake, the magical sounding <a href="https://en.wikipedia.org/wiki/Gibson_Les_Paul" alt="A link to the Gibson Les Paul Wiki">Gibson Les Paul</a> Guitar which is known worldwide not only for it's looks, but it's amazing sound, playability, and craftsmanship.</p3><br>
<div id="tribute-link">
<p4>If you are interested in learning more about Les Paul's career or inventions the wiki can be found <a href="https://en.wikipedia.org/wiki/Les_Paul" target="_blank">here</a>.
</div>
</div>
</div>
</div>
</div>
</article>
</section>
<footer>
<p><a href="https:freecodecamp.org" target="_blank">Learn how to code at freeCodeCamp</a> | Var D'ovoli 2019</p>
</footer>
</body>
</html>
CSS
<style>
{
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
}
header {
font-family: 'Meddon', cursive;
height: 115px;
background-color: #C0C0C0;
padding: 0px;
text-align: center;
font-size: 29px;
color: #505050;
}
section {
display: flex;
}
article {
flex: 3;
background-color: #f1f1f1;
font-size: 18px;
padding: 10px;
}
div {
width: auto;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
p1 {
text-align: center;
}
footer {
background-color: #C8C8C8;
padding: 10px;
text-align: center;
color: #505050;
}
@media (max-width: 600px) {
section {
flex-direction: column;
}
</style>
Test reports
- I should see an <a> element with a corresponding id=“tribute-link”, which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to “_blank” in order for your link to open in a new tab (i.e. target="_blank").
<a> element with id=“tribute-link” must contain an href attribute
Try using the “max-width” style property : expected ‘none’ to not equal ‘none’
My page does these this however, it may not be doing it how it wants. I’m stumped. Any advice is welcome and appreciated.