Personal Portfolio Webpage media query & navbar` element should always be at the top of the viewport

estanciaeduard · May 14, 2022, 8:32pm

i already pass the test in code pen,but when run test here there some error shows that
Your portfolio should use at least one media query.
Your #navbar element should always be at the top of the viewport.

https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpagePreformatted text

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
  integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
  crossorigin="anonymous"
/>
<link
  href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap"
  rel="stylesheet"
/>
<!-- START NAV -->

<nav id="navbar" class="nav">
  <ul class="nav-list">
    <li>
      <a href="#welcome-section">About</a>
    </li>
    
    <li>
      <a href="#projects">Projects</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

<!-- END NAV -->

<!-- START WELCOME SECTION -->

<section id="welcome-section" class="welcome-section">
  <h1>Hey There, I am Eduard</h1>
  <p>a<strong>Developer</strong></p>

</section>

<!-- END WELCOME SECTION -->

<!-- START PROJECTS SECTION -->

<section id="projects" class="projects-section">
  <h2 class="projects-section-header">These are some of my projects</h2>

  <div class="projects-grid">
    <a
      href="https://codepen.io/estancia14/full/zYRvENa"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://api.time.com/wp-content/uploads/2018/11/gettyimages-517200612.jpeg?quality=85&w=800"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Tribute Page
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    
    <a
      href="https://codepen.io/estancia14/full/OJQyOJm"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://filipinotimes.net/wp-content/uploads/2021/11/PH-Elections-drama-filipinotimes.jpg"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Political Survey Form
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    
    <a
      href="https://codepen.io/estancia14/full/VwQvQgY"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://www.digitalassets.starbucks.eu/sites/starbucks-medialibrary/files/assets/28967bf9315bb04b5ef8525e04bc5659.jpg"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        BroEd Coffee Landing Page
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    
    <a
      href="https://codepen.io/estancia14/full/vYdXKpq"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src=""
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Documentation Page
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
  </div>

  <a
    href=""
    class="btn btn-show-all"
    target="_blank"
    >Show all<i class="fas fa-chevron-right"></i
  ></a>
</section>

<!-- END PROJECTS SECTION -->

<!-- START CONTACT SECTION -->

<section id="contact" class="contact-section">
  <div class="contact-section-header">
    <h2>Let's work together...</h2>
    <p>How do you take your coffee?</p>
  </div>
  <div class="contact-links">
    <a
      href="https://facebook.com/ward1914"
      target="_blank"
      class="btn contact-details"
      ><i class="fab fa-facebook-square"></i> Facebook</a
    >
    <a
      id="profile-link"
      href="https://github.com/estancia14"
      target="_blank"
      class="btn contact-details"
      ><i class="fab fa-github"></i> GitHub</a
    >
    <a
      href="https://twitter.com/eduardestancia"
      target="_blank"
      class="btn contact-details"
      ><i class="fab fa-twitter"></i> Twitter</a
    >
    <a href="https://mail.google.com/mail/u/0/#inbox?compose=new" class="btn contact-details"
      ><i class="fas fa-at"></i> Send a mail</a
    >
    <a href="tel:555-555-5555" class="btn contact-details"
      ><i class="fas fa-mobile-alt"></i> Call me</a
    >
  </div>
</section>

<!-- END CONTACT SECTION -->

<!-- START FOOTER SECTION -->

<footer>
  <p>
    Portfolio
  </p>
  <p>
    &copy; Created for
    <a href="estanciaeduard.com" target="_blank"
      >eduard <i class="fab fa-free-code-camp"></i
    ></a>
  </p>
</footer>

<!-- END FOOTER SECTION -->


:root {
  --main-white: #f0f0f0;
  --main-navy-blue: #102039;
  --main-blue: #45567d;
  --main-gray: #303841;
}

/* Base reset */
* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;


  font-size: 62.5%;
  scroll-behavior: smooth;
}

@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}


@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}


@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}

body {
  font-family: Poppins, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1.8rem; /* 18px */
  font-weight: 400;
  line-height: 1.4;
  color: var(--main-white);
}

h1,
h2 {
  font-family: Poppins, "Helvetica Neue", sans-serif;
  font-weight: 700;
  text-align: center;
}

h1 {
  font-size: 6rem;
}

h2 {
  font-size: 4.2rem;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--main-white);
}

img {
  display: block;
  width: 100%;
}

/* nav */

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--main-navy-blue);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
  
}

.nav-list {
  display: flex;
  margin-right: 2rem;
}

@media (max-width: 28.75em) {
  .nav {
    justify-content: center;
  }

  .nav-list {
    margin: 0 1rem;
  }
}

.nav-list a {
  display: block;
  font-size: 2.2rem;
  padding: 2rem;
}

.nav-list a:hover {
  background: var(--main-blue);
}

/* Welcome section */

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

.welcome-section > p {
  font-size: 3rem;
  font-weight: 200;
  font-style: italic;
  color: var(--main-navy-blue);
}

/* 'Project's section */

.projects-section {
  text-align: center;
  padding: 10rem 2rem;
  background: var(--main-blue);
  
}

.projects-section-header {
  max-width: 640px;
  margin: 0 auto 6rem auto;
  border-bottom: 0.2rem solid var(--main-white);
}

@media (max-width: 28.75em) {
  .projects-section-header {
    font-size: 4rem;
  }
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 4rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 6rem;
}

@media (max-width: 30.625em) {
  .projects-section {
    padding: 6rem 1rem;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.project {
  background: var(--main-gray);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.code {
  color: var(--main-gray);
  transition: color 0.3s ease-out;
}

.project:hover .code {
  color: #047CCD;
}

.project-image {
  height: calc(100% - 6.8rem);
  width: 100%;
  object-fit: cover;
  
}

.project-title {
  font-size: 2rem;
  padding: 2rem 0.5rem;
  
}

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 2px;
}

.btn-show-all {
  font-size: 2rem;
  background: var(--main-gray);
  transition: background 0.3s ease-out;
}

.btn-show-all:hover {
  background: var(--main-navy-blue);
}

.btn-show-all:hover > i {
  transform: translateX(2px);
}

.btn-show-all > i {
  margin-left: 10px;
  transform: translateX(0);
  transition: transform 0.3s ease-out;
}

/* Contact section */

.contact-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 80vh;
  padding: 0 2rem;
  background: var(--main-gray);
}

.contact-section-header > h2 {
  font-size: 6rem;
}

@media (max-width: 28.75em) {
  .contact-section-header > h2 {
    font-size: 4rem;
  }
}

.contact-section-header > p {
  font-style: italic;
}

.contact-links {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 980px;
  margin-top: 4rem;
  flex-wrap: wrap;
}

.contact-details {
  font-size: 2.4rem;
  text-shadow: 2px 2px 1px #1f1f1f;
  transition: transform 0.3s ease-out;
}

.contact-details:hover {
  transform: translateY(8px);
}

/* Footer */

footer {
  font-weight: 300;
  display: flex;
  justify-content: space-evenly;
  padding: 2rem;
  background: var(--main-gray);
  border-top: 4px solid var(--main-red);
}

footer > p {
  margin: 2rem;
}

footer i {
  vertical-align: middle;
}

@media (max-width: 28.75em) {
  footer {
    flex-direction: column;
    text-align: center;
  }
}

jwilkins.oboe · May 14, 2022, 10:09pm

Hi @estanciaeduard !

Welcome to the forum!

Did you properly link your CSS file to the html document?

<link rel="stylesheet" href="styles.css">

javanoob · May 14, 2022, 10:16pm

Your css doesn’t contain #navbar. It needs to and the #navbar element’s properties need to have the positioning as the test requires.

See this thread. It’s similar. The replies there might add to the help you need to pass this challenge.

estanciaeduard · May 15, 2022, 11:13am

thank you so much. it worked!

shahwarsk77 · June 30, 2022, 3:40pm

that helped using #navbar and the property fixed.

shahwarsk77 · June 30, 2022, 3:41pm

Silly mistake i made , corrected it. thank you.

abhishekZ911 · August 10, 2022, 3:50pm

did you solved media query issue ? I am not able to do it

lasjorg · August 10, 2022, 4:32pm

Please open your own thread and post your code.

abhishekZ911 · August 10, 2022, 4:41pm

I did that. Can you help ?

system · February 9, 2023, 4:41am

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