Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
I’m having isssue runnning the tests. While I’ve successfully completed the test cases,the test are still showing that I failed to implement.Please help me.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tribute Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main id="main">
        <div class="header">
            <h1 id="title">
                Prithvi Narayan Shah
            </h1>
            <p>The man who united a nation Nepal.</p>
        </div>
        
        <div id="img-div">
            <img id="image" src="pns.png" alt="Prithvi Narayan Shah">
            <div id="img-caption">
                <p>Prithvi Narayan Shah pointing his finger upwards. Through this image, he conveyed that different divided states are united and equal.</p>
            </div>
        </div>

        <div id="tribute-info">
            <p>More about Prithvi Narayan Shah's Life:</p>
            <ul>
                <li><strong>1723</strong> - Born in Gorkha Palace, Gorkha</li>
                <li><strong>1938</strong> - Married to Indrakumri at the age of 14</li>
                <!-- Add more list items here -->
            </ul>
        </div>

        <a id="tribute-link" href="#" target="_blank">Learn more about Prithvi Narayan Shah</a>
    </main>
</body>
</html>


/* file: styles.css */
/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

/* Main container styles */
#main {
    background-color: #ddd;
    margin: 25px 7px;
    padding: 20px;
    border-radius: 5px;
}

/* Header styles */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#title {
    margin-bottom: 20px;
}

.header p {
    font-size: 1.2rem;
    margin-bottom: 12px;
}

/* Image container styles */
#img-div {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 5px;
}

#image {
    margin: 30px;
    display: block;
    max-width: 100%; /* Ensure image doesn't exceed its original size */
    height: auto;
}

#img-caption {
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 12px;
}

/* Tribute info styles */
#tribute-info p {
    text-align: center;
    margin-top: 25px;
    font-weight: 600;
}

/* Tribute link styles */
#tribute-link {
    text-align: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0

Challenge Information:

Tribute Page - Build a Tribute Page

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Check your CSS file name in your link. It’s styles not style

4

You are missing"styles" s within href value.
@dipenbhandaree

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.