Ah, sorry! Also, I can’t seem to edit my original post because I’ve only just registered for the forum.
Code is below:
<!DOCTYPE html>
<html lang="en">
<body>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<div class="Main-header" role="banner">
<img class="rings" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/One_Ring_Blender_Render.png/1280px-One_Ring_Blender_Render.png" alt="The one ring"/>
<h1 id="title">A tribute to Boromir</h1>
<img class="rings" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/One_Ring_Blender_Render.png/1280px-One_Ring_Blender_Render.png" alt="The two ring" />
</div>
<main id="main" role="main">
<figure id="img-div">
<img id="image" src="https://wallpapercave.com/wp/wp3930724.jpg" alt="From left to right, Boromir (opacity: 0.5; width: 150%;) and Boromir (opacity: 1; width: 100%;)"><figcaption id="img-caption" />From left to right, Boromir (opacity: 0.5; width: 150%;) and Boromir (opacity: 1; width: 100%;)</figcaption>
</figure>
<div></div>
<section id="tribute-info" role="region" aria-labelledby="tribute-title">
<h2>Boromir, the brave and noble son of Denethor II in The Lord of the Rings trilogy, is one of the most complex and heroic characters in Tolkien's legendarium. Though flawed, his courage, loyalty, and humanity shine throughout the story. Here’s a tribute to his greatest accomplishments:</h2>
<div></div>
<div class="flexbox-container">
<article>
<ul>
<li><h3>Warrior of Gondor</h3>
<p>Boromir was a valiant defender of Gondor, dedicating his life to protecting his homeland from the encroaching forces of Mordor. His martial prowess was unmatched, and his leadership on the battlefield was instrumental in Gondor's continued resistance against the forces of Sauron.</p>
<p>Hero of the Battle of Osgiliath: Boromir led the defense of Osgiliath, a vital stronghold on the Anduin River, during an intense attack by Sauron’s forces. Though the city ultimately fell, his bravery and tactical skill delayed the enemy's advance and safeguarded the retreat of Gondor’s forces.</p>
</li>
</ul>
</article>
<article>
<ul>
<li><h3>Answering the Call of the Council of Elrond</h3>
<p>Recognizing the growing threat of Sauron, Boromir undertook a perilous journey from Minas Tirith to Rivendell, a feat that underscored his determination and endurance. His intent was to seek counsel on how to save his people and secure the future of Gondor.</p>
<p>The Riddle of the Broken Sword: His journey was spurred by a prophetic dream shared with his brother, Faramir, guiding him to the council. His arrival at Rivendell marked him as one of the few individuals with the strength to represent the will of men.</p>
</li>
</ul>
</article>
<article>
<ul>
<li><h3>Member of the Fellowship of the Ring</h3>
<p>Boromir pledged himself to the Fellowship, proving his commitment to the cause of defeating Sauron, even though he harbored reservations about the plan to destroy the One Ring.</p>
<p>Guarding Frodo: Boromir fought valiantly to protect Frodo and the Ring during the Fellowship's treacherous journey, particularly in the harsh conditions of Caradhras and the mines of Moria.</p>
<p>Mentorship to Merry and Pippin: His guidance and friendship with the hobbits, particularly Merry and Pippin, showed his compassionate and protective nature.</p>
</li>
</ul>
</article>
<article>
<ul>
<li><h3>Redemption Through Sacrifice</h3>
<p>Boromir’s most defining moment came in his final act of bravery and sacrifice. Though momentarily overcome by the Ring’s corrupting influence, Boromir redeemed himself by defending Merry and Pippin against an overwhelming force of Uruk-hai.</p>
<p>The Last Stand: Outnumbered and mortally wounded, Boromir fought with unmatched ferocity, slaying many Uruk-hai in a desperate bid to save the hobbits. His heroic stand gave Aragorn, Legolas, and Gimli crucial time to regroup and ultimately continue the quest.</p>
<p>His Acknowledgment of Aragorn: In his final moments, Boromir recognized Aragorn as his true king, expressing faith in his leadership and the hope of Gondor’s salvation.</p>
</li>
</ul>
</article>
<article>
<ul>
<li><h3>Symbol of Human Struggle and Hope</h3>
<p>Boromir’s internal conflict and ultimate sacrifice underscore the complexities of humanity in Tolkien's narrative. He represents the potential for both failure and redemption, making him one of the most relatable and inspiring characters in Middle-earth.</p>
<p>A Beacon of Courage: Despite his flaws, Boromir’s love for his people and his willingness to fight for their survival remain a testament to his unwavering bravery and honor.</p>
</li>
</ul>
</article>
</div>
<h4>Boromir’s legacy lived on in the actions of the Fellowship and the survival of Gondor. His brother Faramir and the people of Minas Tirith were inspired by his memory. As Aragorn said, “Few have gained such a victory. Be at peace! Minas Tirith shall not fall!”
His spirit reminds us that even the most human among us can achieve greatness through courage, loyalty, and redemption.
<br></br>
Rest in peace, Captain of Gondor.
To read more about this amazing character, please go to his <a id="tribute-link" href="https://lotr.fandom.com/wiki/Boromir" target="_blank">Wikipedia page</a>
</h4>
</section>
</main>
</body>
</html>
body {
margin: 0;
}
/*Everything*/
html {
font-family: Papyrus, arial;
text-align: center;
color: black;
background-image: url("https://wallpapercave.com/wp/wp2097032.jpg");
background-color: black;
background-position: center top;
background-size: 100vw;
}
/*Background for main header*/
.Main-header {
max-width: 100vw;
min-width: 1090px;
height: 150px;
background-image: url("https://img.freepik.com/free-photo/wooden-floor-background_53876-88628.jpg?t=st=1733942446~exp=1733946046~hmac=0103475370076f6806133bac3375f88119a8fd754c2f823e7748c14ab9840c5a&w=1800");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 3rem auto;
padding-bottom: 1rem;
text-decoration: underline;
text-decoration-thickness: 3px;
box-shadow: 20px 20px 15px black;
font-size-adjust: 0.6;
}
/*Rings*/
.rings {
display: inline;
width: 5rem;
padding: 1rem 2rem 1.5rem 1.5rem;
transform: translate(0rem, 2rem);
border: 0;
}
/*Title*/
h1 {
display: inline;
font-size: 3.5rem;
}
/*Boromir and rings*/
img {
display: block;
max-width: 100%;
height: auto;
margin: auto;
border: ridge 0.7rem #e7b80d;
}
#img-div {
margin: auto;
}
/*Boromir image*/
#image {
box-shadow: 0px 40px 15px black;
}
#img-caption {
color: #e7b80d;
margin-bottom: 50px;
}
/*Introductory text and footer*/
h2, h4 {
font-size: 2rem;
padding: 1rem 5rem;
background-image: url("https://img.freepik.com/free-photo/wooden-floor-background_53876-88628.jpg?t=st=1733942446~exp=1733946046~hmac=0103475370076f6806133bac3375f88119a8fd754c2f823e7748c14ab9840c5a&w=1800");
background-size: cover;
background-position: center center;
color: black;
text-shadow: none;
box-shadow: 20px 20px 15px black;
}
/*Flexbox container*/
.flexbox-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
/*Flexbox items*/
article {
width: 32rem;
height: 47rem;
margin: 4rem 1rem;
background-image: url("https://img.freepik.com/free-photo/gold-texture-wallpaper_53876-47133.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 250%;
background-color: #e7b80d;
border: ridge 0.7rem #e7b80d;
box-shadow: 10px 10px 5px;
padding: 30px;
color: black;
text-shadow: 0.03rem 0 black, 0 0.03rem black, -0.03rem 0 black, 0 -0.03rem black;
}
/*List titles*/
h3 {
font-size: 2.2rem;
margin-top: 0rem;
text-decoration: underline;
}
/*List content*/
p {
font-size: 1.5rem;
}
/*List container*/
ul {
list-style-type: none;
padding: 0px;
margin-top: 0px;
align-self: center;
}
/*Tribute link*/
#tribute-link {
text-decoration: underline;
font-weight: bold;
color: #e7b80d;
text-shadow: 1px 1px 3px black, -1px -1px 3px black;
}
