Building a personal portfolio

HTML-CSS
1

help me how to set the navbar element to always be at the top of the viewport

<section id="welcome-section">
  <h1>Hey i am Mimic</h1>
</section>
<a href="https://freecodecamp.org.javascript calculator.com"></a>
<section class="project-title" id="projects"> 
  <a id="profile-link" target="_blank" href="#https://freecodecamp.org.javascriptcalculator.com"></a>
    <title class="project-tile"></title>
</section>
<section id="navbar" >
  <a href="#https://freecodecamp.org.javascriptcalculator.com"></a>
</section>
<link rel="stylesheet" href="styles.css"></link>
<div class="navbar">
  <a href="#project"></a>
  </div>
````@media only screen and(orientation: landscape)
.navbar{
  overflow:hidden;
  position:fixed;}`
3

i still not got it after placing this as it is

4

Please share your CSS code (your original code before implementing that advice please)

6

Is this live somewhere, like codepen?

7 
<section id="welcome-section">
  <h1>Hey i am Mimic</h1>
</section>
<a href="https://freecodecamp.org.javascript calculator.com"></a>
<section class="project-title" id="projects"> 
  <a id="profile-link" target="_blank" href="#https://freecodecamp.org.javascriptcalculator.com"></a>
    <title class="project-tile"></title>
</section>
<section id="navbar" >
  <a href="#https://freecodecamp.org.javascriptcalculator.com"></a>
</section>
<link rel="stylesheet" href="styles.css"></link>
<div class="navbar">
  <a href="#project"></a>
  </div>
````@media only screen and(orientation: landscape)
.navbar{
  overflow:hidden;
  position:fixed;}`
8

Link element doesn’t need the closing tag.

And the css code should goes within the css file. Also you didn’t have required css code for the challenge project.

9

And the link to the CSS file
<link rel="stylesheet" href="styles.css">
should go inside the head tag .

10

i’ve tried the above listed but i still not got it

11

Please share your updated code.

12 
<head>
  <link rel="stylesheet" href="styles.css">
  </head>
<section id="welcome-section">
  <h1>Hey i am Mimic</h1>
</section>
<a href="https://freecodecamp.org.javascript calculator.com"></a>
<section class="project-title" id="projects"> 
  <a id="profile-link" target="_blank" href="#https://freecodecamp.org.javascriptcalculator.com"></a>
    <title class="project-tile"></title>
</section>
<section id="navbar" >
  <a href="#https://freecodecamp.org.javascriptcalculator.com"></a>
</section>
<div class="navbar">
  <a href="#project"></a>
  </div>

@media only screen and(orientation: landscape)
.navbar{ 
  position: fixed;
  overflow: hidden;
}
13

the media query needs {} graph brackets to surround its content

14

still not working for the test

15

Your code is missing a lot of the essential elements. See the following article and compare your code against it. Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project.

Does this help?

Keep up the great work.

16

you need {} brackets and aslo you need id # slector. currently you have .class slector for navbar

17

acctully, @shamah is only fullfil the user stories for the landing page project of FCC curriculum.

18

Do you get an error message or hint?

19 
<!DOCTYPE html>
<html>
  <head><link rel="stylesheet" href="styles.css">
  <title>personal portfolio</title>
    </head>
    <body>
<section id="welcome-section">
  <h1>Hey i am Mimic</h1>
</section>
<a href="https://freecodecamp.org.javascript calculator.com"></a>
<section class="project-title" id="projects"> 
  <a id="profile-link" target="_blank" href="#https://freecodecamp.org.javascriptcalculator.com"></a>
    <title class="project-tile"></title>
</section>
<section id="navbar" >
  <a href="#https://freecodecamp.org.javascriptcalculator.com"></a>
</section>

<div class="navbar">
  <a href="#project"></a>
  </div>
  </body>
  </html>

@media only screen and #navbar 
{ orientation: landscape;
  overflow:hidden;
  position:fixed;
  }

this is how my updated code looks like any directives further?

20

not valid media, the @media rule contains selectors , doesn’t have them in the rule

21

example of @media query:

@media (feature: value) {
selector {
// your css styling for slector goes here
}
}
22

-I can see that your HTML code contains two titles tags can you remove or change the second one.
-Create a nav tag or a section tag and put the anchor tags (a ) inside it.

<nav id="navbar">
        
          <a href= # ></a>
      
          <a href= # ></a>
        
          <a href= # ></a>
        
    </nav>

-And making the position fixed in the CSS I think you will be good to go.