Cat Photo App

A Cat Photo App page made while going through some front end development exercises at freeCodeCamp

Version using Kitty ipsum text

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; }

h2 { font-family: Lobster, Monospace; }

p { font-size: 16px; font-family: Monospace; }

<!-- .iphone-outline { border-color: black; border-width: 50px; width: 337px; height: 667px; } -->

.thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; }

.smaller-image { width: 100px; } </style> <!-- <div class ="iphone-outline"> --> <h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://bit.ly/fcc-relaxing-cat"></a>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> <p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> <!-- </div> -->

---

Cat lists and forms

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; }

h2 { font-family: Lobster, Monospace; }

p { font-size: 16px; font-family: Monospace; }

.thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; }

.smaller-image { width: 100px; }

.gray-background { background-color: gray; }

#cat-photo-form { background-color: green; } </style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://bit.ly/fcc-relaxing-cat"></a>

<div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div>

<form action="/submit-cat-photo" id="cat-photo-form"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form>