-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (64 loc) · 3.15 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<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">
<title>CatPhotoApp</title>
</head>
<body>
<html>
<body>
<h1>CatPhotoApp</h1>
<main> <!--Para poner la parte mas importante de tu pagina-->
<section>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos --> <!-- target _blank para que el link abra otra pestaña en el navegador-->
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</section>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>cat nip</li>
<li>laser pointer</li>
<li>lasagna</li>
</ul>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
<figcaption>Cats love lasagna</figcaption> <!--agrega suptitulos a la imagen-->
</figure>
<h3>Top 3 things cats hate:</h3>
<ol>
<li>flea trearment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
<figcaption>Cats <strong>hate</strong> other cats</figcaption><!--texto debajo de ina imagen-->
</figure>
</section>
<h2>Cat Form</h2><!--Seccion de formulario-->
<form action="https://freecatphotoapp.com/submit-cat-photo"></form> <!--indica donde los datos deberan de ser enviados-->
<fieldset><!--para agrupar entradas y etiquetas relacionadas en un formuladio web-->
<legend>Is your cat an indoor or outdoor cat?</legend> <!--Un titulo para el contenido del elemento fieldset-->
<label for=""><input type="radio" id="indoor" name="indoor-outdoor" value="indoor" checked>Indoor</label> <!--el atributo checked maraca el elemento por defecto-->
<label for=""><input type="radio" id="outdoor" name="indoor-outdoor" value="outdoor">Outdoor</label>
</fieldset>
<fieldset>
<legend>What´s your cat´s personality?</legend>
<input type="checkbox" name="personality" id="loving" value="loving"><label for="loving">Loving</label> <!--es una etiqueta que puede asocia el texto de un elemento con el input -->
<input type="checkbox" name="personality" id="lazy" value="lazy"><label for="lazy">Loving</label>
<input type="checkbox" name="personality" id="energetic" value="energetic"><label for="energetic">Energetic</label>
</fieldset>
<input type="text" name="catphototourl" placeholder="cat photo URL" required>
<section>
</section>
</main>
<footer>
<p>No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a></p>
</footer>
</body>
</html>