Faça como eu fiz: Preparando e estilizando a página.

Index .Html

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
    <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=Sigmar&display=swap" rel="stylesheet">
    <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@400;500&display=swap" rel="stylesheet">
    <title>Petpark</title>
  </head>

Cabeçalho. Css

@import url("./css/cabecalho.css");
.cabecalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-bottom: 2rem;
  }
  
  .alinhamento-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--padding-l);
  
  }
  
  .label-busca {
    display: flex;
    flex-grow: 0.5;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--cor-neutra-dark);
    padding: var(--padding-s) var(--padding-m);
    border-radius: 2rem;
  }
  
  .label-busca input {
    border: none;
    outline: none;
  }
  
  .botao-login {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .navegacao {
    align-content: center;
  }  
  
  .menu-lista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
    list-style: none;
  }
  
  .menu-link {
    text-decoration: none;
    color: #444444;
    position: relative;
    padding-bottom: 0.25rem;  
  
    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background-color: #444444;
      transition: width 0.3s ease;
    }
  }
  
  .menu-link:hover::after,
  .menu-link:focus::after {
    width: 100%;
  }

Destaque. Css

@import url("./css/destaque.css");
.destaque {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4.75rem 0;
    background-color: #fff5eb;
  } 
  
  .banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .destaque-titulo {
    font-size: 4.5rem;
    color: #a2b72b;
  } 
  
  .destaque-titulo > span {
    color: #ee6451;
  }

Mergulhe em IA generativa do zero com Alura e Google

5 aulas gratuitas | com certificado