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="./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=Dosis:wght@200;300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <script src="./script/script.js"></script>

    <title>Calculadora de álcool e gasolina</title>

</head>

<body>
    <main class="container">
        <img class="logo" src="./img/logo.png" alt="Logo da calculadora">
        <h1 class="title">Qual a melhor opção?</h1>

        <form onsubmit="calcular(event)" class="form">
            <label>Álcool (Preço por litro): </label>
            <input id="alcool" class="input" type="number" placeholder="4.90" min="1" step="0.01" required>

            <label>Gasolina (Preço por litro): </label>
            <input id="gasolina" class="input" type="number" placeholder="6.50" min="1" step="0.01" required>

            <input class="button" type="submit" value="Calcular">

            <section id="content-result" class="result hide">
                <span id="text-result"></span>

                <span id="alcool-result"></span>
                <span id="gasolina-result"></span>
            </section>

        </form>
    </main>
    <div class="info">
        <span class="tooltip">Veja como é feito o calculo</span>
        <a href="calculo.html">
            <img class="info-img" src="./img/info.png" alt="Vejo como é feito o calculo">
        </a>
    </div>

</body>

</html>