Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

Please help me my css is not responding at all, nothing on the css is working

Console output:
11. Your portfolio should use at least one media query.
12. Your #navbar element should always be at the top of the viewport.

Your code so far

<!-- file: index.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>My Portfolio</title>
        <link rel="stylesheet" href="style.css" > 
    </head>
        <body>
            <header class="header">
                <a href="#" class="logo">My Portfolio</a>
                <nav id="navbar">
                     <a href="#" >Home</a>
                     <a href="#" >About</a>
                     <a href="#" >Skill</a>
                     <a href="#" id="profile-link" target="_blank">
                         Portfolio</a>
                     <a href="#" >Contact</a>
                </nav>
            </header>
            <section class="Home">
                <div id="welcome-section">
                   <h3>Hi, It's me</h3>
                   <h1>FULL NAME</h1>
                   <h3>And I'm a</h3>
                   <p>Description or short introduction</p>
            <section id="projects">
            <div id="projects">
            </div>
            <a href="#">
                <div class="project-tile">
            </div>
            </a>
            <div class="project-tile">
            </div><div class="project-tile">
            </div>
            </section>
                   <div class="home-sci"></div>
                   <a href="#">Linkedin</a>
                </div>
            </section>
        </body>
</html>


/* file: styles.css */
 @media (max-width: 600px) {
  #navbar {
    background-color: red;
  }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif;

}

body {
    color: #ededed;
    background: pink;  
}


#navbar {
    position: fixed;
    top: 0;
    left: 0;
    /* width: 100%; */
    display: inline-block;
    font-size: 25px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    margin-left: 35px;
    transition: .3s;
}

#navbar a:hover {
    color: #0ef;

}

.header {
    padding: 20px 10%;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.logo {
    position: relative;
    font-size: 25px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

Hey there,

Did you remember to link he css file?

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

I have updated the message.

4

double check you are writing the right thing

1 Like
5

Thank you, it’s always the little things