Tell us what’s happening:
I’d just like someone to look this over and see what I need to correct. I believe I’m about 60-70% completed, but I’m still stuck on things like the image resizing. Any input is greatly appreciated.
-brock
Your code so far
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Dr. Norman Borlaug</title>
<style>
#main {
background-color: #c5d4d1;
}
#title{
text-align: center;
font-family: monospace;
background-color: #ebf5f3;
border-style: solid;
height: 100px;
width: 1025px;
margin: 50px 100px 50px 100px;
margin: auto;
}
#image{
height: 500px;
border-style: solid;
border-width: 5px;
margin: auto;
}
#img-caption{
font-size: 14px;
text-align: center;
margin: 0px 50px 20px 50px;
}
#tribute-title{
text-align: center;
padding: 50px;
margin: 10px;
font-family: monospace;
margin: auto;
}
#tribute-info{
padding: 20px 100px 20px 100px;
margin: auto;
border-style: solid;
}
#tribute-link{
text-align: center;
margin: 50px;
}
#bulletpoints{
padding: 20px 250px 20px 250px;
}
#quote{
border-style: solid;
padding: 10px 100px 10px 100px;
margin: 0px 150px 0px 150px;
}
</style>
</head>
<body id="main">
<div id="title">
<h1><strong>Dr. Norman Borlaug</strong></h1>
<h2><em>The man who saved a billion lives.</em></h2>
</div>
<div>
<p style="text-align: center;"><img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Dr. Borlaug and others inspecting wheat in the field"></p>
</div>
<div id="img-caption"><em>
Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</em>
</div>
<div id="tribute-info" style="background-color: #ebf5f3">
<main>
<div id="tribute-title">
<h2>Here's a timeline of Dr. Borlaug's life:</h2>
</div>
<div id="bulletpoints">
<ul>
<li><strong>1914:</strong> Born in Cresco, Iowa</li>
<br>
<li><strong>1933:</strong>Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration" </li>
<br>
<li><strong>1935:</strong> Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me." </li>
<br>
<li><strong>1937:</strong> Finishes university and takes a job in the US Forestry Service
</li>
<br>
<li><strong>1938:</strong> Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants. </li>
<br>
<li><strong>1941:</strong> Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science. </li>
<br>
<li><strong>1942:</strong> Receives a Ph.D. in Genetics and Plant Pathology </li>
<br>
<li><strong>1944:</strong> Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat - including different varieties for each major climate on Earth. </li>
<br>
<li><strong>1945:</strong> Discovers a way to grown wheat twice each season, doubling wheat </li>
<br>
<li><strong>1953:</strong> Crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat. </li>
<br>
<li><strong>1962:</strong> Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population </li>
<br>
<li><strong>1970:</strong> Receives the Nobel Peace Prize</li>
<br>
<li><strong>1983:</strong> Helps seven African countries dramatically increase their maize and sorghum yields </li>
<br>
<li><strong>1984:</strong> Becomes a distinguished professor at Texas A&M University </li>
<br>
<li><strong>2005:</strong> States "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds." </li>
<br>
<li><strong>2009:</strong> Dies at the age of 95.</li>
</ul>
</div>
<div id="quote">
<p><em>"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress."
<br>
<br>
-- Indian Prime Minister Manmohan Singh </em></></p></div>
<div id="tribute-link"><em>
If you have time, you should read more about this incredible human being on <a href="https://en.wikipedia.org/wiki/Norman_Borlaug"> his Wikipedia entry.</em></a>
</div>
</main>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0.
So here would be my initial round of clean up on this. I commented on where I changed things. Will post a even more cleaned up version in a bit (hopefully).
<!doctype html>
<html>
<head>
<title>Dr. Norman Borlaug</title>
<style>
/*This was originally #main, but I assume you actually want to target the tag main, not an element with the id of main*/
main {
background-color: #C5D4D1;
}
/* with this:
margin: 50px 100px 50px 100px;
margin: auto;
the second margin definition competes with the first and would override it. Which one do you actually want?
*/
#title {
background-color: #EBF5F3;
border-style: solid;
font-family: monospace;
height: 100px;
margin: 50px 100px 50px 100px;
margin: auto;
text-align: center;
width: 1025px;
}
#image {
border-style: solid;
border-width: 5px;
height: 500px;
margin: auto;
}
/*The unit of measure px is not needed when the value is 0*/
#img-caption {
font-size: 14px;
margin: 0 50px 20px 50px;
text-align: center;
}
/* again: the second margin definition competes with the first and would override it. Which one do you actually want?*/
#tribute-title {
font-family: monospace;
margin: 10px;
margin: auto;
padding: 50px;
text-align: center;
}
#tribute-info {
border-style: solid;
margin: auto;
padding: 20px 100px 20px 100px;
}
#tribute-link {
margin: 50px;
text-align: center;
}
#bulletpoints {
padding: 20px 250px 20px 250px;
}
/*This rule does not seem to match any elements on the page.
The unit of measure px is not needed when the value is 0.
*/
#quote {
border-style: solid;
margin: 0 150px 0 150px;
padding: 10px 100px 10px 100px;
}
</style>
</head>
<body>
<div id="title">
<h1><strong>Dr. Norman Borlaug</strong></h1>
<h2><em>The man who saved a billion lives.</em></h2>
</div>
<div>
<p style="text-align: center;"><img alt="Dr. Borlaug and others inspecting wheat in the field" id="image"
src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
</p>
</div>
<div id="img-caption"><em>
Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part
of his life-long war on hunger.</em>
</div>
<div id="tribute-info" style="background-color: #EBF5F3">
<main>
<div id="tribute-title">
<h2>Here's a timeline of Dr. Borlaug's life:</h2>
</div>
<!--Removed br tags as they should not be needed-->
<div id="bulletpoints">
<ul>
<li><strong>1914:</strong> Born in Cresco, Iowa</li>
<li><strong>1933:</strong>Leaves his family's farm to attend the University of Minnesota, thanks
to a Depression era program known as the "National Youth Administration"
</li>
<li><strong>1935:</strong> Has to stop school and save up more money. Works in the Civilian
Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All
of this left scars on me."
</li>
<li><strong>1937:</strong> Finishes university and takes a job in the US Forestry Service</li>
</ul>
<div id="tribute-link"><em>
If you have time, you should read more about this incredible human being on
<a href="https://en.wikipedia.org/wiki/Norman_Borlaug"> his Wikipedia entry.
</a>
</em>
</div>
</div>
</main>
</div>
</body>
</html>
Even more cleaned up and not bad for a first shot by the way.
<!doctype html>
<html>
<head>
<title>Dr. Norman Borlaug</title>
<style>
/*This was originally #main, but I assume you actually want to target the tag main, not an element with the id of main*/
main {
background-color: #C5D4D1;
}
/* with this:
margin: 50px 100px 50px 100px;
margin: auto;
the second margin definition competes with the first and would override it. Which one do you actually want?
*/
#title {
background-color: #EBF5F3;
border-style: solid;
font-family: monospace;
height: 100px;
margin: 50px 100px 50px 100px;
margin: auto;
text-align: center;
width: 1025px;
}
#image {
border-style: solid;
border-width: 5px;
height: 500px;
margin: auto;
}
/*The unit of measure px is not needed when the value is 0*/
#img-caption {
font-size: 14px;
margin: 0 50px 20px 50px;
text-align: center;
}
/* again: the second margin definition competes with the first and would override it. Which one do you actually want?*/
#tribute-title {
font-family: monospace;
margin: 10px;
margin: auto;
padding: 50px;
text-align: center;
}
#tribute-info {
background-color: #EBF5F3;
border-style: solid;
margin: auto;
padding: 20px 100px 20px 100px;
}
#tribute-link {
margin: 50px;
text-align: center;
}
#bulletpoints {
padding: 20px 250px 20px 250px;
}
/*This rule does not seem to match any elements on the page.
The unit of measure px is not needed when the value is 0.
*/
#quote {
border-style: solid;
margin: 0 150px 0 150px;
padding: 10px 100px 10px 100px;
}
.strong {
font-weight: bold;
}
.em {
font-style: italic;
}
.centered {
text-align: center;
}
</style>
</head>
<body>
<div id="title">
<!--h tags are usually bold by default anyway and you generally want to avoid using formatting tags like strong and em in favor of using CSS-->
<h1>Dr. Norman Borlaug</h1>
<h2 class="em">The man who saved a billion lives.</h2>
</div>
<!--wrapping div id not needed as no classes or other css were applied to it. the p tag is already a block element.-->
<p class="centered"><img alt="Dr. Borlaug and others inspecting wheat in the field" id="image"
src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
</p>
<div class="em" id="img-caption">
Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part
of his life-long war on hunger.
</div>
<!--Moved in line style to the existing definition you have for this id-->
<div id="tribute-info">
<main>
<div id="tribute-title">
<h2>Here's a timeline of Dr. Borlaug's life:</h2>
</div>
<!--Removed br tags as they should not be needed-->
<!--changed strong tags to use class instead.-->
<div id="bulletpoints">
<ul>
<li><span class="strong">1914:</span> Born in Cresco, Iowa</li>
<li><span class="strong">1933:</span>Leaves his family's farm to attend the University of
Minnesota, thanks
to a Depression era program known as the "National Youth Administration"
</li>
<li><span class="strong">1935:</span> Has to stop school and save up more money. Works in the
Civilian
Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All
of this left scars on me."
</li>
<li><span class="strong">1937:</span> Finishes university and takes a job in the US Forestry
Service
</li>
</ul>
<div class="em" id="tribute-link">
If you have time, you should read more about this incredible human being on
<a href="https://en.wikipedia.org/wiki/Norman_Borlaug"> his Wikipedia entry.
</a>
</div>
</div>
</main>
</div>
</body>
</html>
I would suggest you share a link to your Codepen (or wherever). Make sure you have added the test script to the page as well.
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
Please use the “preformatted text” tool in the editor (</>) to add backticks around text.
You should add the test script to the page. Click the Settings button, go to the JS section and paste in the script link https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
The image and the caption elements both need to be inside the same container element with the id of img-div
The tribute-info id should be on the link element, not the container div.
The link should have a target attribute set to _blank.
The CSS for the image is not correct. Look at the lower part of the error message it should guide you to what properties you need to set on the image.
