A Pen by Darrel Toledo on CodePen.
Created
September 5, 2019 21:00
-
-
Save dt23aaq/e68ccab1f1c3a84f7c629c0c7d4b605d to your computer and use it in GitHub Desktop.
HTML and CSS exercise
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <meta charset="utf-8"> | |
| <title>Favourites</title> | |
| </head> | |
| <body> | |
| <section> | |
| <header> | |
| <h1> My Favourites</h1> | |
| </header> | |
| <div id="Movies"> | |
| <hr /> | |
| <p><em>This is a page about my favourite movies, foods, and more.<em></p> | |
| <hr /> | |
| <h2> 🎥 Movies</h2> | |
| <ul> | |
| <li><a href="https://www.imdb.com/title/tt6139732" target="_blank">Aladin</a></li> | |
| <li><a href="https://www.imdb.com/title/tt0437086" target="_blank">Alita the battle angel</a></li> | |
| <li><a href="https://www.imdb.com/title/tt4154796" target="_blank">Avengers: Endgame</a></li> | |
| <li><a href="https://www.imdb.com/title/tt1517451" target="_blank">A star is born</a></li> | |
| <li><a href="https://www.imdb.com/title/tt4257926" target="_blank">Miracles from heaven</a></li> | |
| </ul> | |
| </div> | |
| <div id="Top songs"> | |
| <h2> ♫ Top Songs</h2> | |
| <ol> | |
| <li><a href="https://open.spotify.com/track/6v3KW9xbzN5yKLt9YKDYA2" target="_blank">"Senorita"</a> by Shawn Mendes, Camille Cabello</li> | |
| <li><a href="https://open.spotify.com/track/4L2K7JKseFCBoHMZEAszW0" target="_blank">"Jealous"</a> by Labrinth</li> | |
| <li><a href="https://open.spotify.com/track/5lK18Pt33xNudq4qYDxIm8" target="_blank">"Shallow"</a> by Lady Gaga, Bradley Cooper</li> | |
| <li><a href="Edward Sharpe & The Magnetic Zeros" target="_blank">"home"</a> By Edward Sharpe & The Magnetic Zeros</li> | |
| <li><a href="https://open.spotify.com/track/2tHx1HtXmW1JfzFMTlSCUd" target="_blank">"Try to remember"</a> by The brothers four</li> | |
| </ol> | |
| </div> | |
| <div id="Foods"> | |
| <h2> 🍜 Foods</h2> | |
| <ul> | |
| <li>Lobsters</li> | |
| <li>Sushi</li> | |
| <li>Caesar Salad</li> | |
| <li>Tonkotsu Ramen</li> | |
| <li>Beef and Brocolli</li> | |
| </ul> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container"> | |
| <p id="one"> This is the footer.</p> | |
| </div ="container"> | |
| </footer> | |
| </body> | |
| </html> |
This file contains 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
| body { | |
| background-color: lightblue; | |
| } | |
| h1 { | |
| color: white; | |
| text-align: center; | |
| } | |
| h2 { | |
| color: Green; | |
| text-transform: uppercase; | |
| text-decoration: underline; | |
| } | |
| ul,ol { | |
| color: red; | |
| } | |
| p { | |
| font-family: verdana; | |
| font-size: 20px; | |
| } | |
| .container{ | |
| border: 5px solid yellow; | |
| padding: 5px; | |
| text-align: center; | |
| width: 500px; | |
| border-radius: 3px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment