Skip to content

Instantly share code, notes, and snippets.

@cadetCoder

cadetCoder/html-and-css-exercise.markdown

Created September 5, 2019 21:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cadetCoder/e68ccab1f1c3a84f7c629c0c7d4b605d to your computer and use it in GitHub Desktop.
Save cadetCoder/e68ccab1f1c3a84f7c629c0c7d4b605d to your computer and use it in GitHub Desktop.
Download ZIP
HTML and CSS exercise
Raw
index.html
<!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>
Raw
style.css
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