So I have a couple in regards to one of the hints:
The hint: " You should see an a element with a corresponding id="tribute-link", which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab"
to link to an external source with more infos on your topic of choice
where you want
what is the external source to show more info about the tribute page
whatever you want, it can be an article from somewhere, a wikipedia page, an imdb page… it depends on what topic you have chosen
So I’ve stuck on this problem for a while: With my tribute page I am keeping most of the page within the border. But when I try inserting an image within the border I can’t change dimensions as it only shows the background. I’ve tried just inputting the same background colour/transparent so the image blends in. However, it does not solve the ultimate problem
What do I do so I can only alter my images etc without the background changing.
My code:
<div id="sza-journey">
<br><br><h2>A Tribute to the Artistic Journey of Solána Imani Rowe (SZA)</h2>
<br> <p id="tribute-info">Welcome to this tribute page dedicated to my favorite artist, SZA. Known for her soulful voice, powerful lyrics, and unique style, SZA has carved her own path in the music industry, redefining modern R&B and connecting with listeners on a deeply personal level. Here, I celebrate her inspiring journey—from her early beginnings to her transformation into one of the most talented and influential voices of our time. This page highlights her artistry, resilience, and the authenticity that has made her a beloved figure to fans around the world.
</p>
<div id="child-img">
<img src="https://www.thelist.com/img/gallery/the-stunning-transformation-of-sza/she-was-raised-in-an-interfaith-household-1707249339.webp" alt="SZA as a child" width="300" height:"300" ></div>
h2{
font-family: 'Lora', sans-serif;
font-size: 40px;
text-align: center;
margin-top: 0px;
background-color: #0091D5;
}
body{
font-family: 'Montserrat', sans-serif;
}
#tribute-info{
font-family: "Lato", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 20px;
word-spacing: 2px;
line-height: 1.6;
margin: 0 10px ;
max-width: 1080px;
background-color: #0091D5;
}
#sza-journey{
border: 5px solid #0091D5;
border-radius: 10px;
background-color: #0091D5;
padding: 20px;
max-width: 1200px;
margin: 10px auto;
box-sizing: border-box;
}
#child-img{
}
your img is in a div, did you set a background color for divs ? Also please share all your code, it’s necessary for proper debugging
here’s the rest of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>My Web Page</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Playfair+Display&family=Raleway&family=Poppins&family=Cinzel&family=Lora&family=Bodoni+Moda&display=swap" rel="stylesheet">
<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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div id="main"></div>
<h1 id="title">SZA</h1><br>
<p id="sza-quote"><strong>"Control is not real, and I'm really understanding that every day. It's about the acceptance of relinquishing control that makes it powerful for you."</p></strong><br><br>
<figure id="image">
<img src="https://hyfin.org/wp-content/uploads/2024/04/sza-sos-new-album-stream-1200x675-1.webp" width="960" height="540" "alt="SZA's SOS album cover">
<figcaption id="figcaption-main"><strong>A landscape version of SZA's SOS cover art</figcaption></strong><br><br>
</figure>
<div id="sza-journey">
<br><br><h2>A Tribute to the Artistic Journey of Solána Imani Rowe (SZA)</h2>
<br> <p id="tribute-info">Welcome to this tribute page dedicated to my favorite artist, SZA. Known for her soulful voice, powerful lyrics, and unique style, SZA has carved her own path in the music industry, redefining modern R&B and connecting with listeners on a deeply personal level. Here, I celebrate her inspiring journey—from her early beginnings to her transformation into one of the most talented and influential voices of our time. This page highlights her artistry, resilience, and the authenticity that has made her a beloved figure to fans around the world.
</p>
<div id="child-img">
<img src="https://www.thelist.com/img/gallery/the-stunning-transformation-of-sza/she-was-raised-in-an-interfaith-household-1707249339.webp" alt="SZA as a child" width="300" height:"300" ></div>
</div>
</body>
This is the result after I put the img outside the div. Which isn’t the result I wanted because the border didn’t extend for the img.
and your css too please
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #2A558C;
color: #F5F5F5;
}
h1{
font-family: 'Lora', sans-serif;
font-size: 100px;
text-align: center;
}
#sza-quote{
text-align: center;
margin-top: 25px;
font-family: "Lato", sans-serif;
font-weight: 300;
font-style: italic;
word-spacing: 5px;
}
#image{
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
#figcaption-main{
position: absolute;
bottom: -80px;
left: 305px;
padding: 5px;
font-size: 0.875em;
font-family: "Lato", sans-serif;
font-weight: 300;
font-style: normal;
}
h2{
font-family: 'Lora', sans-serif;
font-size: 40px;
text-align: center;
margin-top: 0px;
background-color: #0091D5;
}
body{
font-family: 'Montserrat', sans-serif;
}
#tribute-info{
font-family: "Lato", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 20px;
word-spacing: 2px;
line-height: 1.6;
margin: 0 10px ;
max-width: 1080px;
background-color: #0091D5;
}
#sza-journey{
border: 5px solid #0091D5;
border-radius: 10px;
background-color: #0091D5;
padding: 20px;
max-width: 1200px;
margin: 10px auto;
box-sizing: border-box;
}
#child-img{
margin-top: -150px;
margin-bottom: 200px;
margin-left: 1080px;
margin-right: auto;
border-radius: 20px;
}
and what is the result that you want to obtain?
Hi there!
You have created that div #main in your html but it’s useless.
The attribute heigth in the img element is not properly assigned to value. it’s have a semicolon, instead of an equal sign.
I made changes to the 2nd problem but where would I put the div because one of clues says: " 1. You should have a main element with an id of main"
main element is a html element, it is not a div. You need to add main opening and closing tags around your whole tribute page’s main content. It’s starting tag should goes after body opening tag and it’s closing tag should be before body closing tag.
@zaydaaziz17
