ricardogj08
/
cursos


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE html>
<html lang="es">
  <head></head>

  <body>
    <h1>App de Gatos</h1>

    <main>
      <section>
        <h2>Imágenes de Gatos:</h2>
        <p>Haz click aquí para ver más <a href="https://freecatphotoapp.com" target="_blank" rel="noopener noreferrer">imágenes de gatos.</a></p>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Un lindo gato naranja recostado sobre su espalda.">
      </section>

      <hr>

      <section>
        <h2>Lista sobre gatos</h2>

        <h3>Cosas que aman los gatos:</h3>
        <ul>
          <li>Menta gatuna</li>
          <li>Apuntadores láser</li>
          <li><s>Lasaña</s></li>
        </ul>

        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="Una porción de lasaña en un plato.">
          <figcaption>Los gatos <em>aman</em> la lasaña.</figcaption>
        </figure>

        <h3>Cosas que odian los gatos:</h3>
        <ol>
          <li>Tratamientos antipulgas</li>
          <li>Truenos</li>
          <li>Otros gatos</li>
        </ol>

        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Cinco gatos mirando alrededor de un campo.">
          <figcaption>Los gatos <strong>odian</strong> a otros gatos.</figcaption>
        </figure>
      </section>

      <hr>

      <section>
        <h2>Formulario</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>¿Tu gato es un gato de interior o de exterior?</legend>

            <label for="interior">
              <input type="radio" id="interior" name="interior-exterior">
              Interior
            </label> 
            <label for="exterior">
              <input type="radio" id="exterior" name="interior-exterior">
              Exterior
            </label>
          </fieldset>

          <!-- Inputs checkbox del mismo grupo -->
          <fieldset>
            <legend>¿Cuál es la personalidad de tu gato?</legend>

            <label for="carinoso">
              <input type="checkbox" id="carinoso" name="personalidad">
              Cariñoso
            </label>
            <label for="perezoso">
              <input type="checkbox" id="perezoso" name="personalidad">
              Perezoso
            </label>
            <label for="energico">
              <input type="checkbox" id="energico" name="personalidad">
              Enérgico
            </label>
          </fieldset>

          <input type="text" name="catphotourl" placeholder="URL de la foto de tu gato" required><br>

          <button type="submit">Enviar</button>
        </form>
      </section>
    </main>
  </body>
</html>