Hey there.
i’ve just completed the second certification-project for the “Responsive Web Design” certification. Im 2 weeks into coding and hope to get some feedback. it’s not really something special, what do you think:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tribute to Martin Luther King</title>
<meta charset="UTF-8">
<meta width="width=device width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<main id="main">
<h1 class="title" id="title">Martin Luther King</h1>
<p class="title-description" class="title-description">Learn about the life of MLK</p>
<figure class="image-field" id="img-div">
<img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg">
<div id="img-caption">Some people on the fields</div>
</figure>
<div id="tribute-info" class="tribute-infos">Here you get a short timeline of the life of</div>
<div id="timeline">
<h2 id="title2">
Martin Luther King
</h2>
<ul id="timeline-list">
<li>
<div class="year">1929</div>
<div class="event">Martin Luther King Jr. is born on January 15th in Atlanta, Georgia.
</div>
</li>
<div class="divider"></div>
<li>
<div class="year">1947</div>
<div class="event">King is ordained as a Baptist minister and becomes the pastor of Dexter Avenue Baptist Church in Montgomery, Alabama.</div>
</li>
<div class="divider"></div>
<li>
<div class="year">1955</div>
<div class="event">King leads the Montgomery Bus Boycott after Rosa Parks refuses to give up her seat to a white passenger.</div>
</li>
<div class="divider"></div>
<li>
<div class="year">1963</div>
<div class="event">King delivers his famous "I Have a Dream" speech during the March on Washington for Jobs and Freedom.</div>
</li>
<div class="divider"></div>
<li>
<div class="year">1964</div>
<div class="event">King is awarded the Nobel Peace Prize for his efforts in promoting equality and nonviolent resistance against segregation.</div>
</li>
<div class="divider"></div>
<li>
<div class="year">1965</div>
<div class="event">King helps lead the Selma to Montgomery marches to advocate for voting rights for African Americans.</div>
</li>
<div class="divider"></div>
<li>
<div class="year">1966</div>
<div class="event">King launches the Chicago Freedom Movement to address issues of segregation and discrimination in the northern United States.</div>
</li>
<div class="divider"></div>
<li>
<div class="year">1967</div>
<div class="event">King delivers his speech "Beyond Vietnam: A Time to Break Silence," criticizing the U.S. involvement in the Vietnam War.</div>
</li>
<div class="divider"></div>
<li>
<div class="year">1968</div>
<div class="event">Martin Luther King Jr. is assassinated on April 4th in Memphis, Tennessee.</div>
</li>
<div class="divider"></div>
<li>
<div class="year">1986</div>
<div class="event">Martin Luther King Jr. Day is established as a federal holiday in the United States, commemorating his legacy of civil rights activism.</div>
</li>
<div class="divider"></div>
</ul>
</div>
<div class="footer">
<div id="footer-description" class="footer-description">It's safe to say, Martin Luther King was a legend of a human.</div>
<div id="outside-infos" class="footer">
Read the whole biography <a class="tribute-link" id="tribute-link" target="_blank" href="https://www.geo.de/geolino/mensch/2183-rtkl-weltveraenderer-martin-luther-king">here</a>
</div>
</div>
<main>
</html>
body {
width: 100%;
height: 100vh;
margin: 0;
font-family: Lucida Sans;
font-size: 16px;
text-align: center;
}
.tribute-infos {
margin-top: -5px;
}
h1 {
text-align: center;
margin-top: 50px;
font-weight: bold;
font-size: 40px;
font-family: arial;
text-decoration: underline;
}
h2 {
margin-bottom: 30px;
font-size: 25px;
}
.footer {
display: block;
text-align: center;
padding-bottom: 20px;
}
.footer-description {
margin-bottom: 11px;
margin-top: 60px;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
p {
font-style: italic;
text-align: center;
margin-top: -10px;
font-size: 20px;
}
.year {
font-weight: bold;
text-decoration: underline;
}
.year, .event {
display: inline-block;
vertical-align: top;
margin-bottom: 30px;
}
#timeline-list li {
white-space: wrap;
}
a {
text-decoration: none;
color: black;
font-weight: bold;
}
ul li {
list-style: none;
}
img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.image-field {
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
margin-left: -1px;
}
.divider {
border-bottom: 1px solid #888989;
margin-top: -10px;
margin-bottom: 19px;
width: 80%;
margin-left: 0;
margin-right: auto;
}
