Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

I have added a media query to my code, and I can’t seem to find the error. I still get the message :

“Your portfolio should use at least one media query”

Please help!

Your code so far

body {
  font-family: 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
  color: #333; 
  font-size: 20pt;
}

#navbar {
  position: fixed;
  top: 0;
  background-color: #8fb19d; 
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

#navbar ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  padding: 20px;
  top: 0;
}

#navbar a {
  text-decoration: none;
  color: #fff; 
  padding: 10px 20px;
  transition: color 0.3s ease-in-out;
  margin-right: 30px;
  font-size: 25pt;
  top: 0;
}

#navbar a:hover {
  color: #cda2db; 
}


#welcome-section {
  background-color: #cda2db; 
  padding: 100px 0;
  top: 20px;
  justify-content: center;
}

#welcome-section .welcome-content {
  max-width: 1600px;
  margin: 0 auto;
  color: white;
  top: 20px;
  justify-content: center;
}

#welcome-section h1 {
  font-size: 4.5rem;
  font-family: 'Playfair Display', serif;
  margin-left: 10px;
  top: 20px;
  justify-content: center;
  left: 20%;

}


.project-tile {
  background-color: #f0e4e4; 
  padding: 20px;
  margin: 20px;
  text-align: center;
  border: 2px solid #8fb19d; 
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.project-tile:hover {
  transform: translateY(-5px);
}

.project-tile a {
  text-decoration: none;
  color: #333; 
}

#profile-stuff {
  background-color: #f0e4e4; 
  text-align: center;
  padding: 100px 0;
  justify-content: center;
}

#profile-stuff .profile-content {
  max-width: 800px;
  margin: 0 auto;
  color: #333; 
  justify-content: center;
}

#profile-stuff h2 {
  font-size: 28px;
  font-family: 'Playfair Display', serif;
  justify-content: center;
}

#profile-stuff a {
  display: inline-block;
  margin: 10px;
  padding: 10px 20px;
  text-decoration: none;
  color: white;
  background-color: #8fb19d; 
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
  font-weight: bold;
  justify-content: center;
}

#profile-stuff a:hover {
  background-color: #cda2db; 
}

#portfolio{
  justify-content: center;
}
footer {
  text-align: center;
  padding: 20px;
  background-color: #f0e4e4;
  color: #333; 
  font-size: 14px;
  justify-content: center;
}

.image-container {
  position: relative;
  overflow: hidden;
  margin: auto;
  justify-content: center;

}

.enlarge-on-hover {
  width: 700px;
  height: auto;
  margin: 10px;
  border-radius: 20px;

}

.enlarge-on-hover:hover {
  transform: scale(1.5);
}

.flexcon{
display: flex;
flex-wrap: wrap;
}

.floating-image {
  animation: floatAnimation 5s infinite;
  justify-content: center;
}

@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.textcon{
display: flex;
justify-content: center;

}

article {

margin:20px;
padding: 50px;
 text-align: justify;

}


@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);
}
}

I thank you in advance :slight_smile:

2

Welcome to the forum @priscila.a.v.sousa

Here is an example of an @media rule:

@media only screen and (max-width: 600px) {

They need some key words before the break point.

Happy coding

3

Hi! I tried it, but it still shows the message error. I really don’t know what to do. :frowning:

4

Please post your update code.

6 
body {
    font-family: 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    color: #333; 
    font-size: 20pt;
  }
  
  #navbar {
    position: fixed;
    top: 0;
    background-color: #8fb19d; 
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 999;
  }
  
  #navbar ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    padding: 20px;
    top: 0;
  }
  
  #navbar a {
    text-decoration: none;
    color: #fff; 
    padding: 10px 20px;
    transition: color 0.3s ease-in-out;
    margin-right: 30px;
    font-size: 25pt;
    top: 0;
  }
  
  #navbar a:hover {
    color: #cda2db; 
  }
  
  
  #welcome-section {
    background-color: #cda2db; 
    padding: 100px 0;
    top: 20px;
    justify-content: center;
  }
  
  #welcome-section .welcome-content {
    max-width: 1600px;
    margin: 0 auto;
    color: white;
    top: 20px;
    justify-content: center;
  }
  
  #welcome-section h1 {
    font-size: 4.5rem;
    font-family: 'Playfair Display', serif;
    margin-left: 10px;
    top: 20px;
    justify-content: center;
    left: 20%;
  
  }
  
  
  .project-tile {
    background-color: #f0e4e4; 
    padding: 20px;
    margin: 20px;
    text-align: center;
    border: 2px solid #8fb19d; 
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
  }
  
  .project-tile:hover {
    transform: translateY(-5px);
  }
  
  .project-tile a {
    text-decoration: none;
    color: #333; 
  }
  
  #profile-stuff {
    background-color: #f0e4e4; 
    text-align: center;
    padding: 100px 0;
    justify-content: center;
  }
  
  #profile-stuff .profile-content {
    max-width: 800px;
    margin: 0 auto;
    color: #333; 
    justify-content: center;
  }
  
  #profile-stuff h2 {
    font-size: 28px;
    font-family: 'Playfair Display', serif;
    justify-content: center;
  }
  
  #profile-stuff a {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    background-color: #8fb19d; 
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
    font-weight: bold;
    justify-content: center;
  }
  
  #profile-stuff a:hover {
    background-color: #cda2db; 
  }
  
  .portfolio{
    justify-content: center;
  }
  footer {
    text-align: center;
    padding: 20px;
    background-color: #f0e4e4;
    color: #333; 
    font-size: 14px;
    justify-content: center;
  }
  
  .image-container {
    position: relative;
    overflow: hidden;
    margin: auto;
    justify-content: center;
  
  }
  
  .enlarge-on-hover {
    width: 700px;
    height: auto;
    margin: 10px;
    border-radius: 20px;
  
  }
  
  .enlarge-on-hover:hover {
    transform: scale(1.5);
  }
  
  .flexcon{
  display: flex;
  flex-wrap: wrap;
  }
  
  .floating-image {
    animation: floatAnimation 5s infinite;
    justify-content: center;
  }
  
  @keyframes floatAnimation {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  
  .textcon{
  display: flex;
  justify-content: center;
  
  }
  
  article {
  
  margin:20px;
  padding: 50px;
   text-align: justify;
  
  }
  
  
  @media only screen and (max-width: 600px) {
    #portfolio {
      color: rebeccapurple;
    }
  }
7

Also need to see your html

Use the following method to post code to the forum:

  1. On a separate line type three back ticks.
  2. On a separate line paste your code.
  3. On the last line type three back ticks. Here is a single back tick `
8

OK, here it is. I added random pics because Im not going to actually post it right now.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>My Portfolio</title>
</head>
<body>
  <nav id="navbar">
    <ul>
      <li>
        <a href="#welcome-section">HOME</a>
      </li>
      <li>
        <a href="#projects">INFO</a>
      </li>
      <li>
        <a href="#profile-link">CONTACT</a>
      </li>
    </ul>
  </nav>
  <link rel="stylesheet" href="styles.css">

<body>
  <!-- PAGE ABOUT -->
  <header id="about">
    <nav id="navbar">
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <div id="welcome-section" class="container">
      <h1 id="title">I am Priscila Sousa</h1>
      <p class="lead"><em>a programming student!</em></p>
    </div>
  </header>

  <!-- PROJECT SECTION -->
  <section id="projects">
    <div class="project-tile">
      <h1 id="caption">"These are some of my projects!!!"</h1><br>
      <div id="bottom-line"></div>
      <div class="projects portfolio">
        <div class="box">
          <a target="_blank" href="https://survey-form.freecodecamp.rocks/">
            <img src="https://getshogun.com/wp-content/uploads/2022/08/62c33cd2af3c682c6db514bd_z8iuKXKJZuPm8sgJdxLexH6oXdxl-sf7BC1u9T-uw6d3VbN9l4_70e7179xBQsbrqjDp5TwSgrh5XtXCqV2JuFHrZV91dnFGtI9SfifoWgfRnV8sMz7YBHy8ycupxw-4qMheIRb3-D4DdP_wdzU.jpg" class="project-img portfolio">
            <p>
              <span class="code portfolio">&lt;</span>
              Tribute Page
              <span class="code">/&gt;</span>
            </p>
          </a>
        </div>

        <div class="box portfolio">
          <a target="_blank" href="https://tribute-page.freecodecamp.rocks/" alt="project-img" class="project-img">
            <img src="https://getshogun.com/wp-content/uploads/2022/08/62c33cd2af3c682c6db514bd_z8iuKXKJZuPm8sgJdxLexH6oXdxl-sf7BC1u9T-uw6d3VbN9l4_70e7179xBQsbrqjDp5TwSgrh5XtXCqV2JuFHrZV91dnFGtI9SfifoWgfRnV8sMz7YBHy8ycupxw-4qMheIRb3-D4DdP_wdzU.jpg" class="project-img portfolio">
            <p>
            <p>
              <span class="code">&lt;</span>
              Documentation Page
              <span class="code">/&gt;</span>
            </p>
          </a>
        </div>

        <div target="_blank" class="box">
          <a href="https://product-landing-page.freecodecamp.rocks/">
            <img src="https://getshogun.com/wp-content/uploads/2022/08/62c33cd2af3c682c6db514bd_z8iuKXKJZuPm8sgJdxLexH6oXdxl-sf7BC1u9T-uw6d3VbN9l4_70e7179xBQsbrqjDp5TwSgrh5XtXCqV2JuFHrZV91dnFGtI9SfifoWgfRnV8sMz7YBHy8ycupxw-4qMheIRb3-D4DdP_wdzU.jpg">
            <p>
              <span class="code">&lt;</span>
              Portfolio
              <span class="code">/&gt;</span>
            </p>
          </a>
        </div>

        <div target="_blank" class="box">
          <a href="https://personal-portfolio.freecodecamp.rocks/">
            <img src="https://www.hostinger.com.br/tutoriais/wp-content/uploads/sites/12/2022/04/portfolio-1-scaled.webp" alt="project-img" class="project-img">
            <p>
              <span class="code">&lt;</span>
              Personal Site
              <span class="code">/&gt;</span>
            </p>
          </a>
        </div>

        <div target="_blank" class="box">
          <a href="https://freecodecamp-solutions.github.io/Build-a-Survey-Form/">
            <img src="img/project-6.JPG" alt="project-img" class="project-img">
            <p>
              <span class="code">&lt;</span>
              Survey Form
              <span class="code">/&gt;</span>
            </p>
          </a>
        </div>
      </div>
      <a href="https://github.com/FreeCodeCamp-Solutions" class="btn">Show More</a>
    </div>
  </section>

  <!-- CONTACT SECTION -->
  <section id="contact">
    <div class="container">
      <h1>I'm still learning, but if you'd like to work with me,...</h1>
      <p>this is how we should get in touch.</p>
      <div class="social">
        <div>
          <a target="_blank" href="https://www.facebook.com">
            <i class="fab fa-facebook fa-1x"></i>
            Facebook
          </a>
          <a id="profile-link" target="_blank" href="https://github.com/prissilly">
            <i class="fab fa-github fa-1x"></i>
            Github
          </a>
          <a target="_blank" href="https://twitter.com">
            <i class="fab fa-twitter fa-1x"></i>
            Twitter
          </a>
          <a href="#">
            <i class="fas fa-envelope-open-text fa-1x"></i>
            Mail
          </a>
          <a href="#">
            <i class="fas fa-phone fa-1x"></i>
            Call Me
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- FOOTER SECTION -->
  <footer id="main-footer">
    <div class="container">
      <p>&copy; Copyright Free</p>
      <p id="creator">This site recreated by <a href="https://github.com/FreeCodeCamp-Solutions/">FreeCodeCamp-Solutions</a></p>
    </div>
  </footer>
</html>
10

Remove the second stylesheet link and only keep the one in your head element.

11

Great suggestion by @lasjorg

This will pass the tests, however you do not have an element with an id of portfolio, so it will have no effect.

You have elements with a class of portfolio

Happy coding

12

Thanks everyone! It worked!

2 Likes
13

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