ORGANIZAÇÃO DE AMBIENTE

1 - Criar uma pasta para guardar os arquivos dela

2 - Criar o index.html do projeto

3 - Baixar os arquivos de imagens que você vai utilizar

4 - Criar o css do projeto ( iremos apenas manipular alguns elementos com esse css, mesmo com o bootstrap e outros framework, o css não é 100% dispensável)

5 - Fazer a instalação do bootstrap no HTML da página

6 - Linkar o favicon e o css na página

7 - Colocar o título da página

PARTE DO HTML

1 - Dar um espaço vertical para o body

<body class="py-5">

2 - Criar o container com um padding horizontal 4 e criar uma classe extra para usar na manipulação

<div class="container px-4 container1">

3 - Fazer a criação do local onde vai ficar a logo

<!-- ===================== -->
<!-- Logo no topo -->
<!-- ===================== -->
<div class="text-center">
     <img src="/imagens/logoOneBitDark.png" class="img-fluid mt-4 mb-3 topLogo" alt="logo da spaceX">
</div>

4 - Fazer a criação do primeiro elemento do formulário

<p class="paragraph">
            1 - Qual o seu nome?
        </p>

        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">Primeiro nome:</span>
            <input type="text" class="form-control" placeholder="Digite aqui" aria-label="Username"
                aria-describedby="basic-addon1">
        </div>

5 - Fazer a criação da segunda área do formulário

<div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">Segundo nome:</span>
            <input type="text" class="form-control" placeholder="Digite aqui" aria-label="Username"
                aria-describedby="basic-addon1">
        </div>