Create and Translate - HTML

 <html>

<head><title>Jane Austen Generator</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <script type="text/javascript" src="js.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="navbar-fixed">
    <nav>
      <div class="nav-wrapper blue-grey darken-1">
        <a class="brand-logo center ">Austenland</a>
      </div>
    </nav>
  </div>

  <div class="container principal">
    <div class="row">
      <div class="center"><h1>What If... Jane Austen Wrote</h1></div>
    </div>

    <div class="row">
      <div class="col m6 s8">
        <div class="card blue-grey darken-1 card2">
          <div class="card-content white-text">
              <span class="card-title">Story</span>
              <div class="row"><div class="col">
                <input type="checkbox" id="checkbox_genero" class=" filled-in"/>
                <label for="checkbox_genero" class="white-text">Gender:</label></div>
                <div class="col"><p id="genero" class="amber-text text-darken-1"> </p></div>
              </div>
              <div class="row"><div class="col">
                <input type="checkbox" id="checkbox_local" class="filled-in"/>
                <label for="checkbox_local" class="white-text">Local:</label></div>
                <div class="col"><p id="local" class="amber-text text-darken-1"> </p></div>
              </div>
              <div class="row"><div class="col">
                <input type="checkbox" id="checkbox_momento" class="filled-in"/>
                <label for="checkbox_momento" class="white-text">Period of the Day:</label></div>
                <div class="col"><p id="momento" class="amber-text text-darken-1"> </p></div>
              </div>
              <div class="row"><div class="col">
                <input type="checkbox" id="checkbox_acao" class="filled-in"/>
                <label for="checkbox_acao" class="white-text">Action:</label></div>
                <div class="col"><p id="acao" class="amber-text text-darken-1"> </p></div>
              </div>
              <div class="row"><div class="col">
                <input type="checkbox" id="checkbox_plotTwist" class="filled-in"/>
                <label for="checkbox_plotTwist" class="white-text">Plot Twist:</label></div>
                <div><p id="plotTwist" class="amber-text text-darken-1"> </p></div>
              </div>
              <div class="row"><div class="col">
                <input type="checkbox" id="checkbox_objeto" class="filled-in"/>
                <label for="checkbox_objeto" class="white-text">Objeto:</label></div>
                <div><p id="objeto" class="amber-text text-darken-1"> </p></div>
              </div>
            </div>
        </div>
      </div>

      <div class="col m6 s8">
        <div class="card blue-grey darken-1 card2">
          <div class="card-content white-text">
              <span class="card-title">Personagem</span>
              <div class="row"><div class="col">
                <input type="checkbox" id="checkbox_faixaEtaria" class="filled-in"/>
                <label for="checkbox_faixaEtaria" class="white-text">Faixa Etária:</label></div>
                <div class="col"><p id="faixaEtaria" class="amber-text text-darken-1"> </p></div>
              </div>
            <div class="row"><div class="col">
              <input type="checkbox" id="checkbox_raca" class="filled-in"/>
              <label for="checkbox_raca" class="white-text">Raça:</label></div>
              <div class="col"><p id="raca" class="amber-text text-darken-1"> </p></div>
            </div>
            <div class="row"><div class="col">
              <input type="checkbox" id="checkbox_profissao" class="filled-in"/>
              <label for="checkbox_profissao" class="white-text">Profisão:</label></div>
              <div class="col"><p id="profissao" class="amber-text text-darken-1"> </p></div>
            </div>
            <div class="row"><div class="col">
              <input type="checkbox" id="checkbox_habilidade" class="filled-in"/>
              <label for="checkbox_habilidade" class="white-text">Habilidade:</label></div>
              <div class="col"><p id="habilidade" class="amber-text text-darken-1"> </p></div>
            </div>
            <div class="row"><div class="col">
              <input type="checkbox" id="checkbox_caracteristica" class="filled-in"/>
              <label for="checkbox_caracteristica" class="white-text">Característica:</label></div>
              <div class="col"><p id="caracteristica" class="amber-text text-darken-1"> </p></div>
            </div>
            <div class="row"><div class="col">
              <input type="checkbox" id="checkbox_motivacao" class="filled-in"/>
              <label for="checkbox_motivacao" class="white-text">Motivação:</label></div>
              <div class="col"><p id="motivacao" class="amber-text text-darken-1"> </p></div>
            </div>
        </div>
      </div>
    </div>
  </div>
    <div>
    <p class="center">Disclaimer: Evite usar vários ao mesmo tempo, você poderá obter resultados um tanto quanto absurdos</p>
  </div>
    <div id="botao_botao" class="center">
      <button class="btn waves-effect waves-light" type="submit" name="action" onclick="novaIdeia()">Gerar
        <i class="material-icons right">send</i>
      </button>
    </div>


</div>
<footer class="page-footer">
      <div class="footer-copyright blue-grey darken-1">
       <div class="container">
        © 2022 Beta Version - Made by Halisi
    </div>
  </div>
</footer>
</body>
</html>

Comentários