Can't figure out what I'm missing from the Tribute Page

1

Hi guys,
I finished the Tribute Page more or less - some styling needed - and it more or less does what it’s supposed to I think. I ran it through the FCC test with the CDN link and it gives me 8/10. I’ve been trying to figure out what I’m missing for over an hour and am stuck.
Would really be much appreciated if someone could help me out. The code is below:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet"><!--my font-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='index.css'>
    <title>Tribute Page for Star Trek: Deep Space 9</title>
</head>
<body id='main'><!--BODY-->

 <div class='container'> 

<div id='Star-Trek'> 
<h1>Star Trek: Deep Space 9 Tribute</h1>
<h2>The darker side of utopia</h2>
</div>

<div id='img-div'>
    <img src='images/ds9st.jpg' id='image' alt='picture of the space station'>
    <h3 id='space-station'>DS9</h3>
</div>

<!--infor on the series goes here-->
    <div id='tribute-info'>
        <p>
        Star Trek is one of the most important and beloved sci-fi franchises in history. 
        I and maany others greq up on it and have our opinions on which series we like best. For me, 
        it would probably have to be <a href='https://memory-alpha.fandom.com/wiki/Star_Trek:_Deep_Space_Nine' id='tribute-link' target='_blank'>Deep Space 9</a>.
        While still kind of dorky and very tame in comparison to the carnage in many movies and series, 
        it's undoubtedly a much grittier and more realistic version of the Star Trek universe 
        originally dreamed up by Gene Roddenberry. Even the setting, a lone space station near a planet ravaged by war
        is a stark departure from its gaalaxy exploring, space ship dwelling cousins. 
        </p>

        <p>
        What makes DS9 depart from the other series in the franchise is also what makes it better in my opinion; 
        it shines a more grey cast on morality, the characters and the Federation itself. It deals
        with questions of war, religion, terrorism, ethnic conflict and morality. 
        One of the shows best episodes, "In the pale moonlight" showcases this perfectly by showing how
        far Captain Sisko is willing to go to ensure victory when the situation calls for it. This is 
        a stark contrast to what other starfleet captains would be willing to do and gives the sotry and thee character depth.
        The same can be said for most if not all of the cast members; Dr Basheer - a brilliant doctor with 
        a dark secret, Elim Garak - a former Cardassian spy and Nog - the starfleet turned Ferengi to name a few. 
        </p>

<p>
        Even though its old, if you haven't seen it yet I highly recommend giving DS 9 a shot.
        </p>
    </div>

    <!--links to cast sites start-->
    <div id='cast-links' class='container cast'>

<div class='cast-images'><a href='https://memory-alpha.fandom.com/wiki/Benjamin_Sisko' id='tribute-link' target='_blank'><img src='images/bensisko.jfif' alt='picture of Captain benjamin Sisko'></a>
<h3 id='image caption'>Benjamin Sisko</h3></div>

<div class='cast-images'><a href='https://memory-alpha.fandom.com/wiki/Jake_Sisko' id='tribute-link' target='_blank'><img src='images/jake.jfif' alt='picture of Jake Sisko'></a>
<h3 id='image-caption'>Jake Sisko</h3></div>

<div><a href='https://memory-alpha.fandom.com/wiki/Jadzia_Dax' id='tribute-link' target='_blank'><img src='images/jadzia.jpg' alt='picture of Lieutenent Jadzia Dax'></a>
<h3 id='image-caption'>Jadzia Dax</h3></div>

<div><a href='https://memory-alpha.fandom.com/wiki/Worf' id='tribute-link' target='_blank'><img src='images/worf.jfif' alt='picture of Lieutenant Commander Worf'></a>
<h3 id='image-caption'>Worf</h3></div>

<div><a href='https://memory-alpha.fandom.com/wiki/Kira_Nerys' id='tribute-link' target='_blank'><img src='images/kiranerys.jpg' alt='picture of Major Kira Nerys'></a>
<h3 id='image-caption'>Kira Nerys</h3></div>

<div><a href='https://memory-alpha.fandom.com/wiki/Odo' id='tribute-link' target='_blank'><img src='images/odods9.jpeg' alt='picture of Security Chief Odo'></a>
<h3 id='image-caption'>Odo</h3></div>

<div><a href='https://memory-alpha.fandom.com/wiki/Julian_Bashir' id='tribute-link' target='_blank'><img src='images/julianb.jpg' alt='picture of Dr Julian Bashir'></a>
<h3 id='image-caption'>Julian Bashir</h3></div>

<div><a href='https://memory-alpha.fandom.com/wiki/Leeta' id='tribute-link' target='_blank'><img src='images/leeta.jpg' alt='picture of Leeta'></a>
<h3 id='image-caption'>Leeta</h3></div>

<div><a href='https://memory-alpha.fandom.com/wiki/Nog' id='tribute-link' target='_blank'><img src='images/nogfleet.jpg' alt='picture of Ensign Nog'></a>
<h3 id='image-caption'>Nog</h3></div>

<div><a href='https://memory-alpha.fandom.com/wiki/Rom' id='tribute-link' target='_blank'><img src='images/rom.jpg' alt='picture of Rom'></a>
<h3 id='image-caption'>Rom</h3></div>

<div><a href='https://memory-alpha.fandom.com/wiki/Quark' id='tribute-link' target='_blank'><img src='images/quark.jpg' alt='picture of Quark'></a>
<h3 id='image-caption'>Quark</h3></div>

<div><a href='https://memory-alpha.fandom.com/wiki/Dukat' id='tribute-link' target='_blank'><img src='images/dukat.jpg' alt='picture of Gul Dukat'></a>
<h3 id='image-caption'>Dukat</h3></div>

<div><a href='https://memory-alpha.fandom.com/wiki/Elim_Garak' id='tribute-link' target='_blank'><img src='images/elimgarak.jpg' alt='picture of Elim Garak'></a>
<h3 id='image-caption'>Garak</h3></div>

<div><a href='https://memory-alpha.fandom.com/wiki/Miles_O%27Brien' id='tribute-link' target='_blank'><img src='images/miles.jpg' alt='picture of Chief MIles Obrien'></a>
<h3 id='image-captioon'>Miles O'Brien</h3></div>
</div>


<div class='footer'>
<h4>Made by Alexa Barta</h4>
</div>
</div>

<script src='https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js'></script>

</body>
</html>``
1 Like
2 
body {
    background-color: black;
    color: #6E6658;
    font-family: 'Orbitron', sans-serif;
    text-align: center;

}

.container {
width: 80%;
margin: auto;
}


/*links*/
a {
    color: #86B3D1;
}

a:hover {
    color: #F79E02;
}

a:visited {
    color: #6E6658;
}





/*text*/
h1 {

}


h2 {

}


h3 {

}


p {
    text-align: justify;
}


/*pictures*/
img {
    display: block;
    max-width: 100%;
       height: auto;
   }


.cast {
    max-width: 100%;
    height: auto;
    display: grid;
    grid-gap: 1rem;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /*eliminates madiea queries in this case*/
}   





/*media for text*/
@media (min-width: 320px) {
    h1 {
        font-size: 20px;
    }
}

@media (min-width: 768px) {
    h1 {
        font-size: 26px;
    }
}

@media (min-width: 1200px) {
    h1 {
    font-size: 38px;
    }
}



@media (min-width: 320px) {
    h2 {
        font-size: 16px;
    }
}

@media (min-width: 768px) {
    h2 {
        font-size: 22px;
    }
}

@media (min-width: 1200px) {
    h2 {
        font-size: 30px;
    }
}



@media (min-width: 320px) {
    h3 {
        font-size: 10px;
    }
}

@media (min-width: 768px) {
    h3 {
        font-size: 12px;
    }
}

@media (min-width: 1200px) {
    h3 {
        font-size: 14px;
    }
}



@media (min-width: 320px) {
    p {
font-size: 12px;
    }
}

@media (min-width: 768px) {
    p {
font-size: 14px;
    }
}

@media (min-width: 1200px) {
    p {
font-size: 16px
    }
}
3

Do you have a CodePen link? What do the failing tests say?

4

You need to provide a link to your project. Preferably a platform where one can easily edit or play around with the code like codepen, codesandbox, scrimba e.t.c

5

@alex.mbarta, you can click on the red button when tests fail. That will show you which tests are failing and give an explanation of why.

6

That helped, got it fixed in under a couple mins once I found out what exactly the issues were lol

1 Like
7

where would the red button be? I know this is an old thread but I need some help. I submitted my project yesterday (tribute page) and I am unsure if I need to be patient to find out if it “passed” or not.

8

you need to use the test suite given in the project description page, submitting your project doesn’t test it

9

so the solution is to put the web url where I did the project in order to have it “accepted”? I have been putting the url from the code pn website for my work and it doesnt seem to be accepting it, if that makes sense. I finished the project yesterday, and also made my profile public, not sure what else to do. Am I just being impatient?

10

what you submit is not tested. To test your project you need to add the test suite in your project, the test suite is given below the user stories

11

Have your questions been answered @jenporter25?

If you look at the OP’s code you’ll see a script at the bottom. That’s what enables the tests that you should run.
That script should be included, with all tests passing, when you submit your project.

If you fork the pen the test script will be included.
If you work on the project on your computer and then port it to codepen you can get the CDN link from the project instructions.

What should be included in codepen, in the HTML section is the following;
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

1 Like
12

Hi Roma:

I had to take a break. Just got back on here. I will try what you have suggested. Thank you for your help. I’m ready to quit for real.

13

It makes total sense now. I can see what I need to fix. Once all tests are passed, then what do I do with the url of the complete, correct project. I really appreciate your continued help. I was getting anxiety for real.

Jen

14

You submit the URL of the pen for that project in the “Solution Link” box and click “I’ve completed this challenge”

15

Ok. Thank you for your help. I understand what is necessary. I appreciate your help.