Tribute Page - Build a Tribute Page

Tell us what’s happening:
My web version project page looks correct but the page on freeCodeCamp challenge shows wrongly formatted stylings.
Here is my github page of Tribute Page project: Dr. S. Ramanujan
Please check and compare the results of FCC page and my github page.

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

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dr. S. Ramanujan</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main id="main">
        <div class="header">
            <h1 id="title">Dr. Srinivasa Ramanujan</h1>
            <p>The man who taught infinity</p>
        </div>
        <div id="img-div">
            <img id="image" src="https://images.theconversation.com/files/119682/original/image-20160421-26983-1bcf1xs.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=926&fit=clip">
            <figcaption id="img-caption">Dr. Srinivasa Ramanujan, in the middle, with fellow Scientists, his contributions were to the fields of mathematical analysis, number theory, infinite series, and continued fractions.</figcaption>
        </div>
        <div id="tribute-info">
            <h3>Here's a timeline of Dr. Srinivasa Ramanujan's life:</h3>
            <div>
                <ul>
                    <li><span>1887</span> - Born in Erode, Mysore, India</li>
                    <li><span>1889</span> - Moved to Kanchipuram, Chennai due to smallpox outbreak.</li>
                    <li><span>1892</span> - enrolled in local school, his family enlisted a local constable to make sure he attended school.</li>
                    <li><span>1897</span> - passed his primary examinations in English, Tamil, geography, and arithmetic with the best scores in the district. That year, Ramanujan entered Town Higher Secondary School, where he encountered formal mathematics for the first time.</li>
                    <li><span>1904</span> - independently developed and investigated the Bernoulli numbers and calculated the Euler–Mascheroni constant up to 15 decimal places, graduated from Town Higher Secondary School, was awarded the K. Ranganatha Rao prize for mathematics by the school's headmaster, Krishnaswami Iyer.</li>
                    <li><span>1906</span> - Ramanujan failed his Fellow of Arts exam in December 1906 and again a year later. Without an FA degree, he left college and continued to pursue independent research in mathematics, living in extreme poverty and often on the brink of starvation.</li>
                    <li><span>1910</span> - after a meeting between the 23-year-old Ramanujan and the founder of the Indian Mathematical Society, V. Ramaswamy Aiyer, Ramanujan began to get recognition in Madras's mathematical circles, leading to his inclusion as a researcher at the University of Madras.</li>
                    <li><span>1911</span> - In his 17-page paper "Some Properties of Bernoulli's Numbers", Ramanujan gave three proofs, two corollaries and three conjectures.</li>
                    <li><span>1913</span> - Received a letter from Hardy expressing interest in his work, adding that it was "essential that I should see proofs of some of your assertions". He refused to leave his country to "go to a foreign land".</li>
                    <li><span>1914</span> - Traveled to England by ship, leaving his wife to stay with his parents in India. Hardy had already received 120 theorems from Ramanujan in the first two letters, but there were many more results and theorems in the notebooks. Hardy saw that some were wrong, others had already been discovered, and the rest were new breakthroughs. Ramanujan left a deep impression on Hardy and Littlewood. Littlewood commented, "I can believe that he's at least a Jacobi", while Hardy said he "can compare him only with Euler or Jacobi."</li>
                    <li><span>1916</span> - was awarded a Bachelor of Arts by Research degree(the predecessor of the PhD degree) for his work on highly composite numbers, sections of the first part of which had been published the preceding year in the Proceedings of the London Mathematical Society. The paper was more than 50 pages long and proved various properties of such numbers. Hardy disliked this topic area but remarked that though it engaged with what he called the 'backwater of mathematics', in it Ramanujan displayed 'extraordinary mastery over the algebra of inequalities'.</li>
                    <li><span>1917</span> - was elected to the London Mathematical Society.</li>
                    <li><span>1918</span> - was elected a Fellow of the Royal Society, the second Indian admitted, after Ardaseer Cursetjee in 1841. At age 31, Ramanujan was one of the youngest Fellows in the Royal Society's history. He was elected "for his investigation in elliptic functions and the Theory of Numbers." On 13 October 1918, he was the first Indian to be elected a Fellow of Trinity College, Cambridge.</li>
                    <li><span>1919</span> - was diagnosed with tuberculosis and a severe vitamin deficiency, and confined to a sanatorium. He returned to Kumbakonam, Madras Presidency</li>
                    <li><span>1920</span> - died at the age of 32. After his death, his brother Tirunarayanan compiled Ramanujan's remaining handwritten notes, consisting of formulae on singular moduli, hypergeometric series and continued fractions.</li>
                </ul>
            </div>
            <q>An equation means nothing to me unless it expresses a thought of God.</q>
            <p>-- Dr. Srinivas Ramanujan</p>
            <footer>
                <h3>If you have time, you should read more about this incredible human being on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Srinivasa_Ramanujan" target="_blank">Wikipedia entry</a>.</h3>
            </footer>
        </div>
    </main>
    
</body>
</html>

CSS:

* {
    font-family: Helvetica, sans-serif;
}

main {
    background-color: rgb(245, 245, 245);
    margin: 30px 5px;
}

#title {
    margin-top: 50px;
    font-size: 40px;
}

.header {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}

#img-div {
    width: 95%;
    margin: 5px auto;
    background-color: white;
}

#img-div > #image {
    display: block;
    margin: 20px auto;
    width: 60%;
    max-width: 100%;
    height: auto;
}

#img-div > #img-caption {
    width: 59%;
    margin: 5px auto;
    padding-bottom: 20px;
}

#tribute-info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#tribute-info > h3 {
    margin: 50px 0 20px 0;
}

span{
    font-weight: bold;
}

#tribute-info > div > ul > li {
    width: 45%;
    margin: 20px auto;
    line-height: 30px;
}

q {
    margin: 20px 0 0 0;
}

footer {
    margin: 20px 0;
}

a {
    cursor: pointer;
    color: rgb(108, 137, 223);
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

1 Like

you are importing the wrong style file, double check the name of the file in the fcc editor

1 Like

Please ignore that href, it was system version code.
FYI, All the code i have given with CSS, obviously with href=“styles.css” passed on freecodecamp but does not look the way it should look. The problem is webpage should look the same, but its not, example, Heading shows in the middle of th


e page, texts are written over image, enlarged div elements. Kindly check the attached image.

I’m a bit unsure why this line is here. Something happened with the copy to the forum?

nm: i see what you were tying to label

Pease ignore that, I have completed Tribute page project, attached the github page for the reference. My problem is stylings does not look the same in my webage and fcc preview page(messed up, check the image attached).

can you post your github repo link?

I have called for more help to understand what’s going on… I still don’t know, but if you remove these it will render correctly

probably because in the freeCodeCamp preview it is embedded in an iframe which has its own height

Thanks, it helped. Maybe height attribute was not required at both places.