Tell us what’s happening:
I cannot seem to get my code to pass steps 16 & 17.
Here are the error messages:
Can you satisfy the following instructions with the code below?
- Your img element should have a display of block.
- Your #image should have a max-width of 100%.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tribute to the city of Montreal</title>
</head>
<body>
<main id="main">
<div id="heading" class="center">
<h1 id="title" class="center">Montreal</h1>
<p><i>The city of dreams</i></p>
</div>
<div id="img-div">
<img class="image" id="image" src="https://github.com/iAmNotKev/freeCodeCampRepo/blob/332016811202662b991383bf31a17a1641202e76/freeCodeCampProjects/HTML%20&%20CSS/Tribute%20Page/Tribute%20Page.img" alt="Iconic Farine Five Roses building in Montreal">
<figcaption id="img-caption" class="center">
Iconic Farine Five Roses building in Montreal
</figcaption>
</div>
</div>
<div id="tribute-info" class="center">
<h2>Here's are some of the most memorable sights in the city:</h2>
<ul>
<br>
<li><b>Montreal Museum of Fine Arts</b> - The Montreal Museum of Fine Arts (MMFA) is an art museum in Montreal, Quebec, Canada. It is the largest art museum in Canada by gallery space. The museum is located on the historic Golden Square Mile stretch of Sherbrooke Street west.</li>
<br>
<li><b>Notre-Dame Basilica of Montreal</b> - Notre-Dame Basilica of Montreal (French: Basilique Notre-Dame de Montréal) is a minor basilica of the Catholic Church in the historic Old Montreal district of Montreal in Quebec, Canada. It is located at 110 Notre-Dame Street West, at the corner of Saint Sulpice Street.</li>
<br>
<li><b>The Montreal Biodome</b> - The Montreal Biodome (French: Biodôme de Montréal) is a museum of enclosed ecosystems located at Olympic Park in the Mercier–Hochelaga-Maisonneuve borough of Montreal, Quebec, Canada, that allows visitors to walk through replicas of four ecosystems found in the Americas.</li>
<br>
<li><b>Mount Royal Park</b> - Mount Royal Park is a magnificent urban green space in Montreal. It was designed by Frederick Law Olmsted, the same person behind New York's Central Park. The park features over 200 hectares of astonishing biodiversity and natural beauty, and is home to a wide range of flora and fauna.</li>
<br>
<li><b>The Jacques Cartier Bridge</b> - The Jacques Cartier Bridge (French: pont Jacques-Cartier) is a steel truss cantilever bridge crossing the Saint Lawrence River from Montreal Island, Montreal, Quebec, to the south shore at Longueuil, Quebec, Canada. The bridge crosses Saint Helen's Island in the centre of the river, where offramps allow access to the Parc Jean-Drapeau and La Ronde amusement park.</li>
<br>
<li><b>Vieux Port (Old Port of Montreal)</b> - The Old Port of Montreal (French: Vieux-Port de Montréal) is the historic port of Montreal, Quebec, Canada. Located adjacent to Old Montreal, it stretches for over 2 km (1.2 mi) along the Saint Lawrence River. It was used as early as 1611, when French fur traders used it as a trading post.</li>
<br>
<li><b>The St. Patrick's Basilica</b> - The church is known for its historic links to the Irish Canadian community. St. Patrick's celebrated its 150th anniversary in 1997. French-speaking Catholics first assembled in Montreal at the Notre-Dame-de-Bon-Secours church in Old Montreal.</li>
<br>
</ul>
</div>
<div class="center">
<p><i>Montreal is the largest city in the province of Quebec, the second-largest in Canada, and the ninth-largest in North America. It was founded in 1642 as Ville-Marie, or "City of Mary", and is now named after Mount Royal, the triple-peaked mountain around which the early settlement was built.</p>
<br>
<h3>You can learn more about this incredible city via
<a href="https://en.wikipedia.org/wiki/Montreal" id="tribute-link" target="_blank">
Wikipedia.</a>
</h3>
</div>
</main>
</body>
</html>
/* file: styles.css */
#title {
font-size: 400%;
width: 60vmax;
}
.center {
margin: auto;
padding: auto;
text-align: center;
}
#image {
max-width: 100%;
height: auto;
display: block;
}
@media only screen and (min-width:480px)
{
}
@media only screen and (min-width:767px)
{
}
@media only screen and (min-width:991px)
{
}
@media(orientation: landscape)
{
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0
Challenge Information:
Tribute Page - Build a Tribute Page
