Hey, everyone! I just finally finished the Tribute Page project that is part of the Responsive Web Design certificate. My edited version is a tribute page of Eren Jaegar from Attack on Titan. Please, can you provide some feedback on my code as well as version of the project.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tribue Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<h1 id="title">Eren Jaeger</h1>
<p id="first-para">The man who killed almost the whole world for the freedom of his friends & nation.</p>
<div id="img-div">
<img src="assets/survey-corps.jpg" alt="A picture which has the members of the 104th Cadet Corps" id="image">
<div id="img-caption">
<p>The 104th Cadet Corps from the left to right; Historia Reiss, Ymir Fritz, Sasha Braus, Anne Leonhart, Mikasa Ackermann, Conny Springer, Eren Jaeger, Armin Arleit, Marco Bodt, Jean Kirschtein, Reiner Braun, Bertholdt Hoover.</p>
</div>
</div>
<div id="tribute-info">
<h2>Here's a time line of Eren Yeager's life:</h2>
<ul>
<li><span class="bold">839</span>: Eren Yeager is born to Grisha and Carla Yeager in the Shiganshina District of Wall Maria.</li>
<li><span class="bold">845</span>: The Colossal Titan and Armored Titan breach the walls of Shiganshina, leading to the fall of Wall Maria and the deaths of Eren's mother and many other citizens.</li>
<li><span class="bold">850</span>: Eren joins the 104th Training Corps, determined to become a soldier and avenge his mother by killing all Titans.</li>
<li><span class="bold">854</span>: Eren graduates from the 104th Training Corps and is assigned to the Survey Corps, the most elite military branch responsible for fighting Titans beyond the walls.</li>
<li><span class="bold">854</span>: Eren and his fellow Survey Corps members embark on their first expedition outside the walls. However, the expedition is disastrous, and Eren is nearly killed by a Titan.</li>
<li><span class="bold">854</span>: Eren discovers that he is a Titan Shifter, meaning that he can transform into a Titan at will</li>
<li><span class="bold">854</span>: Eren uses his Titan powers to help the Survey Corps defeat the Titans and retake Shiganshina.</li>
<li><span class="bold">854</span>: Eren learns that his father, Grisha, was a Marleyan spy who infiltrated the Eldians on Paradis Island.</li>
<li><span class="bold">855</span>: Eren and the Survey Corps launch a final assault on Marley, the nation that created the Titans and has been at war with Eldia for centuries.</li>
<li><span class="bold">855</span>: Eren activates the Rumbling, a cataclysmic event that causes all of the Wall Titans to march across the world and destroy everything in their path.</li>
<blockquote cite="https://mangareader.to/read/attack-on-titan-37/en/chapter-97">
<p>"I... I've been thinking every day since coming here. How did thngs turn out this way? Ruined minds and bodies.. People with no freedom left... People who have even lost themselves... What kind of person woul want to go to war if they knew they were going to end up like this? But... There was someting there, all along... pushing us right into hell. For most of us, that something is not our wn free will. We're forced to by others, or by our environment. That's why the people who push themselves into hell see a different hell from the rest of us. They also see something beyond that hell. Maybe it's hope. Maybe it's yet another hell. I don't know which it is. The only people who do know... are the ones who keep moving forward."</p>
<footer>
-- Eren Yeager, <cite>Attack on Titan</cite>
</footer>
</blockquote>
</ul>
</div>
<p class="bold" id="last-para">If you have time, you should read more about this incredible human being on his <a id="tribute-link" href="https://attackontitan.fandom.com/wiki/Eren_Jaeger_(Anime)" target="_blank">Fandom wiki</a> entry.</p>
</main>
</body>
</html>
/* A minimal css default */
html {
box-sizing: border-box;
font-size: 15px;
}
body {
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* The main part starts here */
#main {
background-color: #cccccc;
margin: 30px 8px;
padding: 15px;
}
#title, h2 {
text-align: center;
}
#title {
font-size: 2.5em;
}
#first-para, #last-para {
text-align: center;
}
#img-div {
background-color: #ffffff;
width: 100%;
}
#image {
width: 60%;
/* margin-top: 50px; */
margin: auto;
padding-top: 20px;
}
#img-caption {
width: 60%;
margin-left: 20%;
padding-bottom: 1px;
}
#tribute-info {
width: 50%;
margin-left: 25%;
padding: 0;
}
#tribute-link {
color: #477ca7;
}
.bold {
font-weight: bold;
}
li {
padding: 9px;
}
blockquote {
padding: 15px;
margin: 0;
}
footer {
padding: 10px;
}
h2 {
padding: 20px;
}
The Final Project
I’m sorry but I can only upload one picture since I’m new, I will upload the rest in the comments
!!!