index.html

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.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=Roboto:wght@300;400;700;900&display=swap"
      rel="stylesheet"
    />

    <!-- Font Awesome -->

    <script
      src="https://kit.fontawesome.com/324dce4e36.js"
      crossorigin="anonymous"
    ></script>

    <title>Checkpoint I</title>
  </head>

  <body>
    <header>
      <div id="container">
        <h2>Cadastro</h2>
      </div>
      <div class="div-form">
        <form>
          <input type="url" id="banner" placeholder="Url para o banner"/>
          <input type="url" id="github" placeholder="Seu usuário Github"/>
          <input type="text" id="nome" placeholder="Seu nome"/>
          <input type="text" id="ocupacao" placeholder="Sua ocupação"/>
          <input type="tel" id="telefone" placeholder="Seu telefone" maxlength="11"/>
          <input type="email" id="email" placeholder="Seu melhor e-mail"/>
          <input type="url" id="portifolio" placeholder="Seu site/portifólio"/>
          <input type="text" id="cidade" placeholder="Cidade natal"/>
          <input type="url" id="instagram" placeholder="Url Instagram"/>
          <input type="url" id="linkedin" placeholder="Url Linkedin"/>
  
          
          <div class="button-form">
            <button id="novaPostagem">Cadastrar</button>
          </div>
        </form>
      </div>
    </header>

    <section class="cards">
      
    </section>

    <script src="main.js"></script>
  </body>
</html>