Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Hello, I’m sure I’m correct in my answer, however the website won’t accept my answer after multiple attempts and variations to achieve the desired results.

The problem is with the last requirement for the Tribute Page Certification Project to align an image within the parent element. I’ve tried aligning the child element directly, and the parent element it is nested in however none of my attempts are being accepted.

Your code so far
After many different attempts this is the final code I have tried.

HTML

albums "I like to see good people win"
- Mac Miller

CSS
#img-div {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

The #img-div is the parent element containing the #image element and a figcaption. I’ve tried this flexbox technique, using the margin: auto; technique, the text-align: center; technique, and using different selector styles to see if maybe I had a wrong selection, but nothing is being accepted.

Am I using the wrong selectors or centering technique? Please, I could really use some help. Google has only given me results for the things I’ve already tried.

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

In order to paste your HTML and CSS in here properly so that we can read the actual code you’ll need to use the following method.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

2 Likes
3

My apologies!

<div id="img-div">
  <img src="https://i.redd.it/hzcpj2kv7z2a1.jpg" alt="albums" class="discography" id="image">
  <figcaption id="img-caption"> "I like to see good people win"
    <br>
- Mac Miller    
  </figcaption>
  </div>

This is the missing html code.

1 Like
4

Are you sure this is all of your HTML? Seems like it is missing quite a bit to me.

Paste ALL of your HTML in here, not just the image.

1 Like
5 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Remembering Mac Miller" />
    <link rel="stylesheet" href="styles.css">
    <title>Mac Miller Tribute</title>
  </head>
  <body>
    <header>    
      <img src="https://vectorseek.com/wp-content/uploads/2023/08/Mac-Miller-Logo-Vector.svg-.png" alt="swimming" id="image">  
      <h1>The Life of a Mac</h1>   
      <nav>   
        <ul>
          <li><a href="#top-of-page">Home</a></li>
          <li><a href="#bio">Bio</a></li>
          <li><a href="#top-of-page">About</a></li>
        </ul>
      </nav>
    </header>
    <main id="main">
      <div class="hero">
      </div>
<figcaption id="img-caption">"They say you waste time sleeping, but I'm just trying to dream"  - Mac Miller</figcaption>  
      <h2 id="title">The life of Mac Miller</h2>
      </div>
      <div id="tribute-info">
     <section class="early-life"> 
      <h3>Early Life</h3>
        <p>Mac Miller, real name Malcolm James McCormick, was always destined for music. Even young in life he was always ryhming and showing his talent. Life had not always been easy as he struggled in schooling, eventually deciding to end his schooling early. However, nothing was going to hold him back from his true passion. </p>
      </section>
      <section class="mid-life">
      <h3>Jumping on the Scene</h3>
        <p>Mac Miller first came onto the scene under the alias <em>"Easy Mac"</em>, coming out with his first self released mixtape <em>'But My Mackin' Ain't Easy'</em>. A few years later he would begin releasing music under Mac Miller and released some of his more popular mixtapes like <em>'K.I.D.S', 'Best Day Ever',</em> and <em>'Macadelic'</em>.</p>
<br>
        <p>Mac's first studio album title <em>'Blue Slide Park'</em> garnered enough attention to land him on the Billboard 200, and his achievements would only rise from there. He would go on to release several notable albums like <em>'GO:OD AM', 'The Divine Feminine'</em>, and his last album before his untimely end <em>'Swimming'</em>.</p>
<br>
        <p>After his unfortunate death at the age of on 26 years old, Mac left one last gift for his fans with his posthumous album <em>'Circles'</em>. The unknowning second part of his <em>'Swimming'</em> album. Mac left his mark on his fans and the music industry which will last forever.</p>
      </section>
      <section class="end-life">
      <h3>Legacy</h3>
        <p>For all Mac's fans, he will forever be a part of their lives. Even outside of the music Mac only spread messages of positivity, love, and passion. Truly, he was one-of-a-kind and an inspiration.</p>
        </section>
        <section>
  </div>
  <div id="img-div">
  <img src="https://i.redd.it/hzcpj2kv7z2a1.jpg" alt="albums" class="discography" id="image">
  <figcaption id="img-caption"> "I like to see good people win"
    <br>
- Mac Miller    
  </figcaption>
  </div>        <h3>Discography</h3>
        <h4>Mixtapes</h4>
        <ul>
          <li>But My Mackin' Ain't Easy</li>
          <li>How High</li>
          <li>The Jukebox: Prelude to Class Clown</li>
          <li>The High Life</li>
          <li>K.I.D.S.</li>
          <li>Best Day Ever</li>
          <li>I Love Life, Thank You</li>
          <li>Macadelic</li>
          <li>Run-On Sentences: Vol. 1</li>
          <li>Stolen Youth</li>
          <li>Delusional Thomas</li>
          <li>Faces</li>
          <li>Run-On Sentences: Vol. 2</li>
        </ul>
        <h4>Studio Releases</h4>
        <ul>
          <li>Blue Slide Park</li>
          <li>Watching Movies with the Sound Off</li>
          <li>GO:OD AM</li>
          <li>The Divine Feminine</li>
          <li>Swimming</li>
          <li>Circles</li>
        </ul>
        </section>
        <p class="reference">All information used can be found on Mac Miller's Wikipedia. If you would like to learn more <a href="https://en.wikipedia.org/wiki/Mac_Miller" id="tribute-link" target="_blank">click here</a></p>

  
    </main>
    <footer>
      
      <p class="shoutout">This page was made in honor of Mac Miller. You will be missed.
        </p>
    </footer>
  </body>
<html>

header {
  width: 100%;
  height: 60px;
  background-color: #2C5BF7;
  color: #FCFCF7;
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

body {
  background-color: #FCFCF7;
  margin: 0;
}

img[alt="swimming"] {
  width: 40px;
  height: 40px;
  border-radius: 30px;
}

h1 {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}

nav {
  width: 40%;
  height: 60px;
  font-family: sans-serif;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;
  list-style: none;
}

nav > ul a {
  text-decoration: none;
  color: #FCFCF7;
}

nav > ul a:hover {
  color: #FFF428;
  background-color: #041F76;
  padding:20px 10px; 
}

main {
  margin-top: 80px;
  margin-left: 10px;
  margin-right: 10px;
  font-family: sans-serif;
}

.hero {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 200px;
  background-image: linear-gradient(110deg, rgba(255, 0, 0, .4), rgba(0,0,255, .3)), url("https://i.pinimg.com/1200x/80/2e/52/802e52685e04e426b5cd8767da2ed9bd.jpg");
  background-size: cover;
  background-position: center;
}

figcaption {
  text-align: center;
  margin: 1em 0 3em;
}

h2 {
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  margin: 10px;
  text-transform: uppercase;
  font-weight: 800;
  border: 2px solid;
}

.quote {
  text-align: center;
  font-style: italic;
  font-family: serif;
}

.mac {
  text-align: center;
  margin-top: -10px;
}

footer {
  width: 100%;
  height: 100px;
  background-color: #FFF428;
}

.shoutout, .reference {
  padding: 5px;
  padding-top: 10px;
  text-align: center;
  color: rgb(15, 15, 15);
  font-family: sans-serif;
  font-size: 14px;
}

.shoutout {
  position: relative;
  top: 25px;
}

section {
  line-height: 2em;
  margin-top: 4em;
}

h3, h4 {
  text-indent: 50px;
  text-transform: uppercase;
}

ul {
  margin-left: 50px;
  line-height: 2em;
}

#image {
  display: block;  
  max-width: 100%;
  height: auto;
}

#img-div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
6

facing same problem right now

7

You have two img’s using the value image for their id. That is technically invalid HTML and it is definitely causing you to fail this test. Only one img can have the id of image.

1 Like
8

Thank you for your help, didn’t even think to check that. That worked!

1 Like
9

For future projects, you can run your HTML through a validator and it will help you catch errors like this.

1 Like