``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <tit

[Projeto] Desafio: crie uma página currículo/My Skills | HTML e CSS: cabeçalho, footer e variáveis CSS

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MySkill</title>
    <link rel="stylesheet" href="./styles/style.css" />
  </head>

  <body>
    <header class="header">
      <nav class="header-menu">
        <a class="header-menu-link" href="index.html">Home</a>
        <a
          class="header-menu-link"
          href="about.html"
          target="_blank"
          rel="noopener noreferrer"
          >Sobre mim</a
        >
        <a
          class="header-menu-link"
          href="myskill.html"
          target="_blank"
          rel="noopener noreferrer"
          >My Skills</a
        >
      </nav>
    </header>

    <main class="container">
      <section class="presentation-content">
        <h1 class="presentation-content-title">Conheça minhas habilidades:</h1>
        <p class="presentation-content-text">
          <span class="presentation-content-text-name">Habilidades:</span>
        </p>
        <ul class="presentation-content-text">
          <li>Html</li>
          <li>Css</li>
          <li>Javascript</li>
        </ul>

        <p class="presentation-content-text">
          <span class="presentation-content-text-name"
            >Curso e certificados:</span
          >
        </p>
        <ul class="presentation-content-text skills">
        
          <li class="skills-list">
            <a
              class="skills-content"
              href="https://cursos.alura.com.br/user/raianebatistasc/course/logica-programacao-mergulhe-programacao-javascript/certificate"
              target="_blank"
              rel="noopener noreferrer"
              >Lógica de programação: mergulhe em programação com JavaScript</a
            >
          </li>
          <li class="skills-list">
            <a
              class="skills-content"
              href="https://cursos.alura.com.br/user/raianebatistasc/course/logica-programacao-funcoes-listas/certificate"
              target="_blank"
              rel="noopener noreferrer"
              >Lógica de programação: explore funções e listas</a
            >
          </li>
          <li class="skills-list">
            <a
              class="skills-content"
              href="https://cursos.alura.com.br/user/raianebatistasc/course/git-github-compartilhando-colaborando-projetos/certificate"
              target="_blank"
              rel="noopener noreferrer"
              >Git e GitHub: compartilhando e colaborando em projetos</a
            >
          </li>
         
          </li>
        </ul>
      </section>

      <img
        src="./assets/images/Imagem.png"
        alt="f"
      />
    </main>

    <footer class="footer">Desenvolvido por Raiane Batista </footer>
  </body>
</html>



* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000;
  /* height: 100vh; */
  box-sizing: border-box;
  color: #f6f6f6;
}

.header {
  padding: 2% 0% 0% 15%;
}

.header-menu {
  display: flex;
  gap: 80px;
}
.header-menu-link {
  font-size: 1.5rem;
  font-family: "Montserrat", serif;
  font-weight: 600;
  color: #22d4df;
  text-decoration: none;
}
.header-menu-link:hover {
    color: #f6f6f6;
}

.container {
  /* margin: 10% 15%; */
  padding: 5% 15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.presentation-content {
  width: 615px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.featured-title {
  color: #22d4df;
}
.presentation-content-title {
  font-size: 2.25rem;
  font-family: "Krona One", serif;
}

.presentation-content-text {
  font-size: 1.5rem;
  font-family: "Montserrat", serif;
   list-style: none; 
}

.presentation-links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.presentation-links-subtitle {
  font-family: "Krona One", serif;
  font-weight: 400;
  font-size: 1.5rem;
}

.

.footer {
  padding: 24px;
  color: #000;
  background-color: #22d4df;
  text-align: center;
  font-size: 1.5rem;
  font-family: "Montserrat", serif;
  font-weight: 400;
}
.skills-content {
  font-size: 1.2rem;
  font-family: "Montserrat", serif;
   color: #f6f6f6;
  text-decoration: none;
}

.skills {
 list-style: none; 
}

.skills-list {
  display: flex;
  align-items: center; /* Alinha os itens no início do eixo transversal */
  justify-content: flex-start; /* Alinha os itens no início do eixo principal */

}
.skills-content {
  margin-bottom: 16px; /* Adiciona espaçamento abaixo de cada link */
}

.skills-content:hover {
  color:#22d4df;
}

.skills-subtitle {
    font-size: 1.2rem;
  font-family: "Montserrat", serif;
   color: #22d4df;
  text-decoration: none;
}