Get in Touch
I’m eagerly looking forward to working with you! If you are interested in collaborating or have any questions, please contact me through the form beside. I will contact you as soon as possible. I gladly welcome any suggestions, ideas, or requests for collaboration, and am ready to offer you the best services.
“Let’s build successful and unique projects together!”
Cat Photo App
August 26, 2024
No Comments
course (learn html by building a cat photo app) on the freeCodeCamp website
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CatPhotoApp</title>
</head>
<body>
<main>
<h1>CatPhotoApp</h1>
<section>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>See more <a target="_blank" href="https://freecatphotoapp.com" rel="noopener">cat photos</a> in our gallery.</p>
<a href="https://freecatphotoapp.com" target="_blank" rel="noopener"><img decoding="async" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back." title="Cat Photo App 2"/></a>
</section>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<figure>
<img decoding="async" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate." title="Cat Photo App 3"/>
<figcaption>Cats <em>love</em> lasagna.</figcaption>
</figure>
<h3>Top 3 things cats hate:</h3>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<figure>
<img decoding="async" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field." title="Cat Photo App 4"/>
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
</figure>
</section>
<section>
<h2>Cat Form</h2>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<fieldset>
<legend>Is your cat an indoor or outdoor cat?</legend>
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked/> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"/> Outdoor</label>
</fieldset>
<fieldset>
<legend>What's your cat's personality?</legend>
<input id="loving" type="checkbox" name="personality" value="loving" checked/> <label for="loving">Loving</label>
<input id="lazy" type="checkbox" name="personality" value="lazy"/> <label for="lazy">Lazy</label>
<input id="energetic" type="checkbox" name="personality" value="energetic"/> <label for="energetic">Energetic</label>
</fieldset>
<input type="text" name="catphotourl" placeholder="cat photo URL" required/>
<button type="submit">Submit</button>
</form>
</section>
</main>
<footer>
<p>
No Copyright - <a href="https://www.freecodecamp.org" target="_blank" rel="noopener">freeCodeCamp.org</a>
</p>
</footer>
</body>
</html>