Need Personal Portfolio help

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
getting error: " The height of the welcome section should be equal to the height of the viewport." and im not sure why

Your code so far

<header>
  <nav id="navbar">
    <a href="#welcome-section" id="logo-link">
      <h1>Welcome</h1>
    </a>

    <ul class="nav-list">

      <a href="#projects">
        <li>Projects</li>
      </a>
      <a href="#profile">
        <li>Profile</li>
      </a>
      <a href="#contact">
        <li>Contact</li>
      </a>
    </ul>
  </nav>
</header>
<!--BODY-->

<body>
  <section id="welcome-section">
    <div class="header-text">
      <h1><code>Hello World!</code></h1>
      <p>My name is Nick</p>
    </div>
  </section>

#navbar {
  position: fixed;
  top: 0;
  height: 80px;
  width: 100%;
  background-color: #007cc7;
  display: flex;
  justify-content: space-between;
  z-index: 5;
}

.nav-list {
  display: flex;
  margin-right: 20px;
  margin-top: auto;
  margin-bottom: auto;
}

.nav-list a {
  display: block;
  font-size: 1.5rem;
  padding: 10px;
  color: white;
}

.nav-list a:hover {
  color: cyan;
}

#logo-link {
  color: white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 10px;
  font-size: 1.5rem;
}

#welcome-section {
  height: 100vh;
  margin-top: 20px;
  text-align: center;
  background-color: #12232e;
  border-style: solid;
  border-color: #203647;
  border-width: 10px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  display: flex;
}

Your browser information:

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

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

2

I’ve edited your post for readability. When you enter a code block into a forum post, 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 (’).

1 Like
3

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