Hello.
I’ve started a project of Tribute page and tried several ways to link my image to make it visible in a preview with no success.
Please, explane me, how I should proceed: create a progect in another editor and paste it in here or there is a way to do it directly in freeCodeCamp.
I’m completely confused, sorry.
Hi there! Welcome to the community.
Can you please share your code here to help others troubleshoot what might be going on?
Found the way, thank you)))
Thank you very much.
Hello,
you can code directly within freeCodeCamp lessons
Thank you for your answer. After I inputted a link correctly - I saw it alive)))
There is another problem appeared: Your #image should be centered within its parent.
Cannot understand where it comes from:
did you put id of image for <img> ? as it is requested in step 4
notice that you put <img> in your styles.css but to pass this project you need to use the id of <img>
Thanks a lot for your reply. I’ve checked html and my CSS fits the requirements.
Anyhow, I have found a solution with “one shot in the dark”, pity that I still do not understand that 100%.
can you post your whole code here? HTML and CSS?
copy all your code and put it in between the </> icon when you are writing a message in freeCodeCamp forum
it is important to understand every coding concept so you can in the future use them when needed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="freeCodeCamp Tribute Page practice project">
<title>Unusual hobbies of famous persons</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="main">
<h1 id="title">Unusual hobbies of famous persons</h1>
<figure id="img-div">
<img id="image" src="https://cdn.lifehacker.ru/wp-content/uploads/2015/04/800px-Tesla_circa_1890_1636747157-640x320.jpg">
<figcaption id="img-caption">Nikola Tesla - Serbian origin scientist. Engineer.
Inventor in the field of electrical and radio engineering.</figcaprion>
<section id="tribute-info">
<h2>Nikola Tesla</h2>
<p>The inventor of radio, robotics and an AC generator, a man who, according to contemporaries, "invented the XX century", loved pigeons very much.</p>
<p>He fed wild pigeons during his walks. When he was ill and could not do it himself anymore, he hired a person dedicated to feed the birds.</p>
</section>
<section id="tribute-info">
<h2>Walt Disney</h2>
<p>Walt Disney loved trains. To such an extent that none Disneyland is built without a toy railroad.
<p>He had a steam locomotive model installed in his office and a replica railway with a bridge, forks and trains moving around the Disney house where the owner was happy to ride his guests.</p>
</section>
<section id="tribute-info">
<h2>Thomas Edison</h2>
<p>There's no technical achievement complete in the XXth century without the inventions and patents of this brilliant man. Edison invented, improved or implemented such things as the telegraph, telephone, movie camera, phonograph. This was him who suggested saying "hello" into the phone at the beginning of the conversation.</p>
<p>Well, in his spare time from inventions, he studied various diets and their effect on the human body. In 1930, a year before Edison's death, his wife said in an interview that "proper nutrition is one of his greatest hobbies."</p>
</section>
<section id="tribute-info">
<h2>Bill Gates</h2>
<p>The founder of Microsoft in an interview confessed his love for tennis and bridge. But his most important passion since his young years until now is reading.</p>
<p>Gates hired a person who replenishes his library with rare books and in 1994 laid out 30.8 million dollars for a manuscript of the XV century with scientific notes of Leonardo da Vinci.</p>
</section>
<section id="tribute-info">
<h2>Warren Buffett</h2>
<p>Few people know that one of the richest peersons in the world is a fan of playing the ukulele ukulele.</p>
<p>He is not only a collector of these instruments, but also plays well himself and is not hesitated to perform in public.</p>
</section>
<section id="tribute-info">
<h2>Elon Musk</h2>
<p>This famous engineer, entrepreneur, inventor and investor is known to us primarily as the founder of SpaceX, Tesla Motors and PayPal.</p>
<p>However, among collectors, he is famous as the owner of a large number of items related to James Bond.</p>
<p>For example, Elon Musk owns one of the cars of this movie hero — the Lotus Esprit from the 1977 film, which easily turned into a submarine on the screen.</p>
</section>
<footer>
<p>Copyright Dmitry Gorchakov</p>
<a id="tribute-link" target="_blank" href="https://lifehacker.ru/strange-hobby/">Source article</a>
<p>Translated by LK</p>
</footer>
</figure>
</main>
</body>
</html>
body {
font-family: 'Roboto', sans-serif;
background: #ffffe6;
margin: 10px 0;
}
main, footer {
text-align: center;
}
h1 {
text-transform: uppercase;
padding: 30px;
}
figure {
display: block;
margin: 0;
padding: 5px;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
footer {
background: #00004d;
color: #ffffe6;
margin-top: 30px;
padding: 10px;
}
footer a {
color: #ffffe6;
}
what solution did you apply eventually?
to achieve what?
so I can help you understand it
I have achieved that [quote=“supra.ricarica, post:7, topic:622092”]
#image should be centered within its parent
[/quote]
you added, relating to img in your styles.css:
padding: 5px;
The result is 5px of space within img that is:
5 px for padding-top
5px for padding -right
5 px for padding-bottom
and 5px for padding-left
This here is CSS box model and explains the padding property of an element and the difference with margin property
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
