<!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="/css/style.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=Bebas+Neue&display=swap" rel="stylesheet">
    <title>
        CADASTRO
    </title>
</head>

<body id="new">
    <nav id="C">
        <a href="./"><input type="button" value="HOME" id="nav"></button></a>
        <a href="./catalogo"><input type="button" value="LISTA" id="nav"></button></a>
    </nav>
    <header>
        <article id="tit">
            CADASTRO
        </article>
    </header>
    <main id="cad">
        <section id="form">
            <form id="dadosC" action="./catalogo" method="POST">
                <section id="form1">
                    <article>
                        <label for="image" id="labelIm">Imagem</label>
                        <input type="url" id="image" name="image" placeholder="Url">
                    </article>
                    <article>
                        <label for="hab" id="labelH">Habilidade</label>
                        <input type="number" id="hab" name="hab" min=0
                            max=10 required>
                    </article>
                    <article>
                        <label for="forca" id="labelF">Força</label>
                        <input type="number" id="forca" name="forca" min=0 max=10 required>
                    </article>
                    <article>
                        <label for="vel" id="labelV">Velocidade</label>
                        <input type="number" id="vel" name="vel" min=0
                            max=10 required>
                    </article>
                </section>
                <section id="form2">
                    <article>
                        <label for="nome" id="labelN">Nome</label>
                        <input type="text" id="nome" name="nome" required>
                    </article>
                    <article>
                        <label for="equip" id="labelE">Equipamento</label>
                        <input type="number" id="equip" name="equip" min=0
                            max=10 required>
                    </article>
                    <article>
                        <label for="int" id="labelI">Inteligência</label>
                        <input type="number" id="int" name="int" min=0
                            max=10 required>
                    </article>
                    <article>
                        <label for="poder" id="labelP">Poder</label>
                        <input type="number" id="poder" name="poder" min=0 max=10 required>
                    </article>
                </section>
                <section>
                    <button type="submit" id="nav2">Enviar</button>
                </section>

            </form>
        </section>
        <h4>Lembre-se, as informações de níveis devem ser entre 1 e 10.</h4>
    </main>
</body>

</html>