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

Agredeço pelas palavras de incentivo, vou continuar me esforçando! :D

Consolidando Conhecimentos | HTML e CSS: responsividade com mobile-first

html

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AluraBook</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
    />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="reset.css" />
  </head>
  <body>
    <header class="cabeçalho">
      <div class="container">
        <input type="checkbox" id="menu" class="container_botao" />
        <label for="menu">
          <span class="cabeçalho_menu-hamburguer container_imagem"></span>
        </label>
        <ul class="lista_menu">
          <li class="lista_menu-titulo">Caterogias</li>
          <li class="lista_menu-item">
            <a href="#" class="lista_menu-link">Programação</a>
          </li>
          <li class="lista_menu-item">
            <a href="#" class="lista_menu-link">Front-end</a>
          </li>
          <li class="lista_menu-item">
            <a href="#" class="lista_menu-link">Infraestrutura</a>
          </li>
          <li class="lista_menu-item">
            <a href="#" class="lista_menu-link">Business</a>
          </li>
          <li class="lista_menu-item">
            <a href="#" class="lista_menu-link">Design e UX</a>
          </li>
        </ul>
        <img
          src="img/logo.svg"
          alt="logo da alurabooks"
          class="container_imagem"
        />
      </div>

      <div class="container">
        <a href="#"
          ><img src="img/coração.svg" alt="favoritos" class="container_imagem"
        /></a>
        <a href="#"
          ><img src="img/Sacola.svg" alt="compras" class="container_imagem"
        /></a>
        <a href="#"
          ><img src="img/anonimo.svg" alt="meuperfil" class="container_imagem"
        /></a>
      </div>
    </header>

    <section class="banner">
      <h2 class="banner_titulo">Já sabe por onde começar?</h2>
      <p class="banner_texto">
        Encontre em nossa estante o que precisa para seu desenvolvimento!
      </p>
      <input
        type="search"
        class="banner_pesquisa"
        placeholder="Qual será sua próxima leitura?"
      />
    </section>

css

.banner {
  background: var(--azul-degarde);
  color: var(--branco);
  text-align: center;
  padding: 2.5em;
  font-family: var(--fonte-principal);
}

.banner_titulo {
  font-size: 18px;
  font-weight: 700;
}

.banner_texto {
  font-weight: 500;
  margin: 1em 0;
}

.banner_pesquisa {
  background-color: transparent;
  border: 1px solid var(--branco);
  color: var(--branco);
  border-radius: 24px;
  padding: 1em;
  width: 100%;
}

.banner_pesquisa::placeholder {
  font-family: var(--fonte-principal);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: var(--branco);
  background: url("../img/lupa.svg")no-repeat;
}

teste