<!DOCTYPE html>
<html>
<head>
<style>
p {color: blue; background: yellow; height: 200px; width: 500px;}
h1{ color: red; background-color: lightblue; height:100px; width: 300p;}
div { height: 200px; width: 200px; background-image: radial-gradient(blue, purple);}
.gradient1 { height: 200px; width: 200px; background-image: linear-gradient(blue, purple);}
.gradient2 { height: 200px; width: 200px; background-image: conic-gradient(blue, purple);}
</style>
</head>
<body>
<h1>Elsa</h1>
<p>I am the Snow Queen, the oldest child and the first-born daughter of King Agnarr and Queen Iduna of Arendelle. I am the older sister of Anna. I have had the ability to conjure up ice from birth.</p>
<img src="https://static.tvtropes.org/pmwiki/pub/images/elsa_transparent.png">
<h2 style="color:magenta">Favorite Fruit</h2>
<ol>
<li>Banana</li>
<li>Blueberry</li>
<li>Cherry</li>
<li>Apple</li>
</ol>
<h2>Favorite Food</h2>
<ol>
<li>Chicken nuggets</li>
<li>Cheese pizza</li>
<li>Big Mac</li>
</ol>
<h2>Best Friends</h2>
<ul>
<li>Anna</li>
<li>Olaf</li>
<li>Kristoff</li>
<li>Belle</li>
</ul>
<h2>Best Games</h2>
<ul>
<li><a href="https://www.minecraft.net">Minecraft<a></li>
<li><a href="https://www.roblox.com">Roblox</a></li>
</ul>
<br>
<p class="gradient1">Here is the example</p>
<br>
<p class="gradient2">Here is another example</p>
<div></div>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/L0MK7qz13bU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>