Web app, default project for beginners in freecodecamp
Last active
February 21, 2019 16:47
-
-
Save sarajoha/4f493aa2fc27fc28dff2a4fbf1bf07f8 to your computer and use it in GitHub Desktop.
CatPhotoApp
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet"> | |
| <!DOCTYPE html> | |
| <h2 class="orange-text">CatPhotoApp</h2> | |
| <main> | |
| <p>Click here to view more <a href="#">cat photos</a>.</p> | |
| <a href="#"><img src="http://placekitten.com/200/200" | |
| alt="Placeholder kitty(ies), changes constantly." class="smaller-image thin-black-border"></a> | |
| <div> | |
| <p>Things cats love:</p> | |
| <ul> | |
| <li>Eating</li> | |
| <li>Laser pointers</li> | |
| <li>Sleeping</li> | |
| </ul> | |
| <p>Top 3 things cats hate:</p> | |
| <ol> | |
| <li>The vet</li> | |
| <li>Baths</li> | |
| <li>Other cats</li> | |
| </ol> | |
| </div> | |
| <form id="cat-photo-form" action="/submit-cat-photo"> | |
| <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> | |
| <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> | |
| <label><input type="checkbox" name="personality" checked> Loving</label> | |
| <label><input type="checkbox" name="personality"> Lazy</label> | |
| <label><input type="checkbox" name="personality"> Playful</label><br> | |
| <input type="text" placeholder="cat photo URL" required> | |
| <button type="submit">Submit</button> | |
| </form> | |
| </main> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .orange-text { | |
| color: orange;} | |
| p, form, li { | |
| font-size: 16px; | |
| font-family: Lato;} | |
| h2 { | |
| font-family: Righteous;} | |
| .smaller-image { | |
| width: 100px;} | |
| .thin-black-border { | |
| border-color: black; | |
| border-width: 2px; | |
| border-style: solid; | |
| border-radius: 5px; | |
| } | |
| #cat-photo-form { | |
| background-color: rgba(185, 193, 206, 0.5); | |
| padding: 3px; | |
| margin: 20px; | |
| } | |
| [type="checkbox"] { | |
| margin: 5px 0px 5px 0px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment