Página de portfólio pessoal - Criar uma página de portfólio pessoal

pah-barreto · December 17, 2024, 11:24pm

Conte-nos o que está acontecendo:

Criando um portifolio:
O Navbar ja esta na parte superior, porem nas instruçoes nao considera e nao consigo finalizar.
12. O elemento #navbardeve estar sempre na parte superior

Seu código até o momento

<!-- file: index.html -->

/* file: styles.css */

Informações do seu navegador:

Agente de usuário: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Informações do desafio:

Página de portfólio pessoal - Criar uma página de portfólio pessoal

pah-barreto · December 17, 2024, 11:27pm

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  color: #4a4a4a;
  background-color: #fdf6fb; 
  line-height: 1.6;
  padding-top: 100px; 
}

h1, h2, h3, p {
  margin: 0;
  padding: 1em 0; 
}


header {
  background-color: #f8e1f4; 
  padding: 1.5em 0; 
  text-align: center;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

#navbar {
  display: flex;
  justify-content: center;
}


.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2em; 
}

.nav-list li a {
  text-decoration: none;
  font-size: 1.5em; 
  color: #913a6c; 
  font-weight: bold;
  transition: color 0.3s;
}

.nav-list li a:hover {
  color: #e354a7; 
}

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  color: #4a4a4a;
  background-color: #fdf6fb; 
  line-height: 1.6;
  padding-top: 100px; 
}


.welcome-section {
  text-align: center;
  padding: 3em 1em; 
  background-color: #f9f1fb; 
}

.welcome-section h1 {
  font-size: 3em; 
  color: #913a6c; 
}

.welcome-section p {
  font-size: 1.5em; 
  color: #4a4a4a;
}


.projects-section {
  padding: 3em 1em; 
  background-color: #fff;
  text-align: center;
}

.projects-section-header {
  font-size: 2.5em; 
  color: #913a6c; 
  margin-bottom: 1.5em; 
}

.projects-grid {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 2em; 
}

.project-tile {
  flex: 1 1 calc(30% - 2em); 
  max-width: 350px; 
  text-align: center;
  background-color: #fde6f4; 
  border: 2px solid #e354a7;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.project-tile:hover {
  transform: scale(1.1); 
}

.project-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-bottom: 2px solid #e354a7; /
}

.project-title {
  padding: 1.5em;
  font-size: 1.3em; 
  color: #913a6c;
}


.btn-show-all {
  margin-top: 2.5em; 
  padding: 1em 2em; 
  background-color: #e354a7; 
  color: #fff;
  font-size: 1.2em; 
  text-decoration: none;
  border-radius: 20px;
  transition: background-color 0.3s;
}

.btn-show-all:hover {
  background-color: #913a6c; 
}


.contact-section {
  padding: 3em 1em; 
  background-color: #f8e1f4; 
  text-align: center;
}

.contact-section-header h2 {
  color: #913a6c;
  font-size: 2.5em; 
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5em; 
  margin-top: 2em; 
}

.btn.contact-details {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background-color: #e354a7; 
  padding: 1em 1.5em; 
  border-radius: 20px;
  font-size: 1.2em; 
  transition: background-color 0.3s;
}

.btn.contact-details:hover {
  background-color: #913a6c; 
}


a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


@media (max-width: 768px) {
  .projects-grid {
    flex-direction: column; 
  }

  .project-tile {
    width: 90%; 
    margin: 0 auto;
  }

  .nav-list {
    flex-direction: column; 
    gap: 0.8em; 
  }

  .nav-list li a {
    font-size: 1.3em; 
  }

  header {
    padding: 1.5em; 
  }
}

ILM · December 18, 2024, 2:47pm

please share the html too

ILM · December 18, 2024, 8:36pm

please share your code not a screenshot

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.

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

pah-barreto · December 18, 2024, 9:20pm

<!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>Paola's Portfolio</title>
  </head>
  <body>
    <header>
      <nav id="navbar" class="#navbar">
        <ul class="nav-list">
          <li><a href="#welcome-section">About</a></li>
          <li><a href="#projects">Work</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <section id="welcome-section" class="welcome-section">
      <h1>Welcome to Paola's Portfolio</h1>
      <p>Exploring the world of web development, one line of code at a time!</p>
    </section>

    <section id="projects" class="projects-section">
      <h2 class="projects-section-header">These are some of my projects</h2>
      <div class="projects-grid">
        
        <div class="project-tile">
          <a
            href="https://codepen.io/Paola-Bruzon-Barreto/pen/VYZPMzg"
            target="_blank"
          >
            <img
              class="project-image"
              src="https://i.imgur.com/T1YcSKA.jpeg"
              alt="Formulário de Pesquisa"
            />
            <p class="project-title">&lt; Search Form /&gt;</p>
          </a>
        </div>
        
        <div class="project-tile">
          <a
            href="https://codepen.io/Paola-Bruzon-Barreto/pen/VYZPMyR?editors=1100"
            target="_blank"
          >
            <img
              class="project-image"
              src="https://s.ebiografia.com/img/an/ne/anne_frank_e_seu_dia_rio.jpg?auto_optimize=low&width=655"
              alt="Página de Tributo"
            />
            <p class="project-title">&lt;Tribute Page /&gt;</p>
          </a>
        </div>
        
        <div class="project-tile">
          <a
            href="https://codepen.io/Paola-Bruzon-Barreto/pen/WbeRZzo"
            target="_blank"
          >
            <img
              class="project-image"
              src="https://i.imgur.com/GHA8F8Q.png"
              alt="Página de Documentação Técnica"
            />
            <p class="project-title">&lt;Technical Documentation Page /&gt;</p>
          </a>
        </div>
        
        <div class="project-tile">
          <a
            href="https://codepen.io/Paola-Bruzon-Barreto/pen/EaYZwLR"
            target="_blank"
          >
            <img
              class="project-image"
              src="https://i.imgur.com/Sc2qeWO.png"
              alt="Landing Page de Produto"
            />
            <p class="project-title">&lt;Product Landing Page /&gt;</p>
          </a>
        </div>
      </div>
    </section>

    <section id="contact" class="contact-section">
      <div class="contact-section-header">
        <h2>Together we will work better...</h2>
        <p>Do you prefer coffee or tea?</p>
      </div>
      <div class="contact-links">
        <a
          id="profile-link"
          href=""
          target="_blank"
          class="btn contact-details"
          >GitHub</a
        >
        <a href="tel:+351 926 *** ***" class="btn contact-details">Call me</a>
      </div>
    </section>
  </body>
</html>

ILM · December 19, 2024, 2:24pm

the tests want that the parent of nav is body, do not put nav inside header

pah-barreto · December 24, 2024, 8:36pm

retirei o header deixando o body, mesmo assim nao deu

pah-barreto · December 24, 2024, 8:36pm

<!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>Paola's Portfolio</title>
  </head>
  <body>   
      <nav id="navbar" class="#navbar">
        <ul class="nav-list">
          <li><a href="#welcome-section">About</a></li>
          <li><a href="#projects">Work</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    <section id="welcome-section" class="welcome-section">
      <h1>Welcome to Paola's Portfolio</h1>
      <p>Exploring the world of web development, one line of code at a time!</p>
    </section>

    <section id="projects" class="projects-section">
      <h2 class="projects-section-header">These are some of my projects</h2>
      <div class="projects-grid">
        
        <div class="project-tile">
          <a
            href="https://codepen.io/Paola-Bruzon-Barreto/pen/VYZPMzg"
            target="_blank"
          >
            <img
              class="project-image"
              src="https://i.imgur.com/T1YcSKA.jpeg"
              alt="Formulário de Pesquisa"
            />
            <p class="project-title">&lt; Search Form /&gt;</p>
          </a>
        </div>
        
        <div class="project-tile">
          <a
            href="https://codepen.io/Paola-Bruzon-Barreto/pen/VYZPMyR?editors=1100"
            target="_blank"
          >
            <img
              class="project-image"
              src="https://s.ebiografia.com/img/an/ne/anne_frank_e_seu_dia_rio.jpg?auto_optimize=low&width=655"
              alt="Página de Tributo"
            />
            <p class="project-title">&lt;Tribute Page /&gt;</p>
          </a>
        </div>
        
        <div class="project-tile">
          <a
            href="https://codepen.io/Paola-Bruzon-Barreto/pen/WbeRZzo"
            target="_blank"
          >
            <img
              class="project-image"
              src="https://i.imgur.com/GHA8F8Q.png"
              alt="Página de Documentação Técnica"
            />
            <p class="project-title">&lt;Technical Documentation Page /&gt;</p>
          </a>
        </div>
        
        <div class="project-tile">
          <a
            href="https://codepen.io/Paola-Bruzon-Barreto/pen/EaYZwLR"
            target="_blank"
          >
            <img
              class="project-image"
              src="https://i.imgur.com/Sc2qeWO.png"
              alt="Landing Page de Produto"
            />
            <p class="project-title">&lt;Product Landing Page /&gt;</p>
          </a>
        </div>
      </div>
    </section>

    <section id="contact" class="contact-section">
      <div class="contact-section-header">
        <h2>Together we will work better...</h2>
        <p>Do you prefer coffee or tea?</p>
      </div>
      <div class="contact-links">
        <a
          id="profile-link"
          href="https://github.com/PaolaBarreto90"
          target="_blank"
          class="btn contact-details"
          >GitHub</a
        >
        <a href="tel:+351 926 *** ***" class="btn contact-details">Call me</a>
      </div>
    </section>
  </body>
</html>

pah-barreto · December 24, 2024, 8:40pm

Agora simmm, alterei o css, muito obrigadaaa e feliz natal

Topic		Replies	Views
Página de portfólio pessoal - Criar uma página de portfólio pessoal HTML-CSS	2	1152	January 7, 2025
Projetos do design responsivo para a web - Criar uma página de portfólio pessoal HTML-CSS	2	313	January 7, 2025
Página de documentação técnica - Criar uma página de documentação técnica HTML-CSS	2	265	January 7, 2025
Aprenda sobre CSS Grid criando uma revista - Passo 10 HTML-CSS	2	424	January 7, 2025
Aprenda cores em CSS criando um conjunto de marcadores coloridos - Passo 86 HTML-CSS	1	14	October 22, 2024

Página de portfólio pessoal - Criar uma página de portfólio pessoal

Conte-nos o que está acontecendo:

Seu código até o momento

Informações do seu navegador:

Informações do desafio:

Related topics