Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

in my code i have already added a media query and i dont know where the error is everything else is fine

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>Your Portfolio</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        @media screen and (max-width: 768px) {
            body {
                font-size: 14px;
            }

            #welcome-section {
                padding: 50px 0;
            }

            #projects {
                padding: 30px 0;
            }

            .project-tile {
                padding: 10px;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <nav id="navbar">
        <ul>
            <li><a href="#welcome-section">Welcome</a></li>
            <li><a href="#projects">Projects</a></li>
            
        </ul>
    </nav>

    <section id="welcome-section">
        <h1>Welcome to My Portfolio</h1>
    </section>

    <section id="projects">
        <div class="project-tile">
            <h2>Project 1</h2>
            <p>Description of Project 1</p>
            <a href="#">Project 1 Link</a>
        </div>
    </section>

    <footer>
        <a id="profile-link" href="https://github.com/yourusername" target="_blank">My GitHub Profile</a>
    </footer>
</body>
</html>


/* file: styles.css */
body{
    font-family: 'poppins', sans-serif;
    margin: 0;
    padding: 0;
}

#navbar{
    background-color: #be3144;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

#nav-list{
    display: flex;
    flex-direction: row;
}

li{
    list-style: none;   
}

a{
    color: white;
    text-decoration: none;
    font-size: 1.5em;
    padding: 1rem 2rem;
}

a:hover{
    background-color: #45567d;
}

#welcome-section{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #000;
    background-image: linear-gradient(
        62deg,
        #3a3d40 0%,
        #181719 100%
    );
}

h1{
    color: white;
    font-size: 4rem;
    font-weight: 700;
}

#welcome-section > p{
    color: #be3144;
    font-size: 2rem;
    font-style: italic;
    font-weight: 100;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 OPR/108.0.0.0 (Edition 360-1)

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

Hello :wave:
Welcome to the Forums

The tests passed for me when I shifted the media query to the styles.css.
The tests are probably looking for the media query in the css file.

You will have to shift the media query to the css file.

3

thank you sooo much this one step alone made me stuck on this program for a very long time

1 Like
4

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