If the document is an iframesrcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content, of which no more than one is a title element and no more than one is a base element.
considering that codepen already have those elements in the background you can ignore those errors, but only because you are coding on codepen
for the same reason you should also remove the DOCTYPE tag and the html tag (you have a closing tag at the bottom but not an opening one but I may be missing it
Just so you know for real projects, this is how you do it.
<!-- This is how you add language to your html tag -->
<html lang="en">
</html>
<!-- This is how you add title inside your head -->
<head>
<title>This is my title</title>
</head>
<!DOCTYPE html>
<html>
<head>
<!-- here title and metadata -->
</head>
<body>
<style>
<!-- your css -->
</style>
<!-- your html elements -->
<script>
// your javascript
</script>
</body>
</html>
there are variations, including external files, multiple scripts etc, but that is more or less the basics