Tell us what’s happening:
Is this a bug in tribute page? because I try searching other projects but cannot solve it
is there any problem of my code?
Failed:
Your img element should have a display of block.
Your #image should have a max-width of 100%.
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ada Lovelace Tribute Page</title>
<link rel="Stylesheet" href="style.css">
<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=Anton&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
</head>
<body>
<main id="main">
<h1 id="title">Ada Lovelace</h1>
<p><i>the first programmer</i></p>
<figure id="img-div">
<img src="Picture/ada-lovelace.jpg" id="image" alt="Ada Lovelace, by Mark Palmer and Midjourney">
<figcaption id="img-caption">
Ada Lovelace, by Mark Palmer and Midjourney
</figcaption>
</figure>
<section id="tribute-info">
<h3 id="headline">Ada Lovelace's timeline and legacy</h3>
<ul>
<li id="list">
Born in <b>December 10, 1815</b> at <strong>London, England.</strong>
</li>
<li id="list">
Died <strong>November 27, 1852</strong> at <b>Marylebone, London.</b>
</li>
<li id="list">
When she was eighteen, her mathematical talents led her to a long working relationship
and friendship with fellow British mathematician <strong>Charles Babbage</strong>, who is known as <strong><i>"the father of computers".</i></strong>
She was in particular interested in Babbage's work on the <b>Analytical Engine.</b> Lovelace first met him on <b>June 5, 1833</b>,
when she and her mother attended one of Charles Babbage's Saturday night soirées with their mutual friend, and Ada's private tutor, Mary Somerville.
</li>
<li id="list">
From 1832, when she was seventeen, her mathematical abilities began to emerge,
and her interest in mathematics dominated the majority of her adult life.
Her mother's obsession with rooting out any of the insanity of which she accused Byron was one of the reasons that
Ada was taught mathematics from an early age. She was privately educated in mathematics and science by William Frend,
William King, and Mary Somerville, the noted <b><i>19th-century</i></b> researcher and scientific author.
</li>
<li class="list">
Throughout her life, Lovelace was strongly interested in scientific developments and fads of the day, including <b>phrenology</b> and <b>mesmerism.</b>
After her work with Babbage, Lovelace continued to work on other projects. <b>In 1844</b>, she commented to a friend <b>Woronzow Greig</b> about her
desire to create a <strong>mathematical model</strong> for how the brain gives rise to thoughts and nerves to feelings ("a calculus of the nervous system").
</li>
</ul>
<p class="quotes">
<b><i>“The more I study, the more insatiable do I feel my genius for it to be.”</i></b>
</p>
<p class="quotes">
<i>“Your best and wisest refuge from all troubles is in your science.”</i>
</p>
<p class="quotes">
<i>-Ada Lovelace</i>
</p>
<p> Source from: <a id="tribute-link" href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank">Wikipedia</a></p>
</section>
</main>
</body>
</html>
*{
font-family: "Ubuntu", sans-serif;
}
h1, h3{
font-family: "Ubuntu", sans-serif;
font-weight: 700;
}
body{
background-color: aqua;
padding: 50px;
}
main{
margin: 0px auto 0px auto;
padding: 20px 20px 20px 20px;
width: 50%;
display: block;
background-color: chocolate;
unicode-bidi: isolate;
height: auto;
font-weight: 350;
}
figure{
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
}
figcaption{
margin-block-start: 1em;
text-align: center;
}
.quotes{
font-weight: 700;
text-align: center;
padding: auto;
}
img{
align-items: center;
display:block;
max-width: 100%;
}
#image{
align-items: center;
height: auto;
max-width: 100%;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Tribute Page - Build a Tribute Page