NOTETHEME OLD school black and white minimalist base (HTML5)

<--! Please do not use inany commercial use -->
<--! Neroshade &copy; 2017 -->

<--! How to use:
Open NOTEPADE or text EDIT
COPY this
Paste it on Notepad or textedit
save file as extension .html or .htm
save as UTF-8 instead of ANSI
find it in the fileexplorer
click on it,
it should open as a web page on your default browser.
--->

<--! Everything inside the "<--! -->" Is a comment... it will not appear on the browser. It will only appear in the text editor.
Feel free to copy the content after the comments -->
<--! IMPORTANT: Make sure your browser is at the latest version for best results -->

<!doctype html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower" rel="stylesheet">
<title> NOTE THEME </title>
<meta charset="utf-8"/>
<meta name="author" content="Nero"/>
</head>
<body style="margin:0">
<header style="background:black; height: 100px;width:auto;">
<h1 style="display:inline-block;color:white;text-align:center; width: 50%; height: 50%; margin-left:400px;background: lightgray;color:black;line-height:50px;border:5px double black;
outline: 5px solid white;font-family:'Gloria Hallelujah',cursive;">Well Shit, I didn't know. </h1>
</header>
<p style="font-family:'Indie Flower',cursive; text-indent:30px;font-size:30px;padding-left:20px;text-decoration: underline;"> I thought I knew what I was doing and then I found out that I was just typing random text. <br/>
I just know one thing, and it's that I'm weird . I didn't know that at first... I <strong> know </strong> now.</p>
<div style="display:inline-block">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSv18tnm1Ndw8fckFEpJrshvHDZIGqBLMZnR3v4PGX4vMHm9cwudXjJ-w"
height="200px" width="200px" alt="happyface.png"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEiTGPNdLADDaQNvukhfAt8p9h1k6u5KgDxQQgTITw0_d421bV"
height="200px" width="200px" alt="happyface.png"/>
<img src="http://img.freepik.com/iconen-gratis/bezorgd-gezicht-emoticon-overzicht-symbool_318-71465.jpg?size=338&ext=jpg"
height="200px" width="200px" alt="happyface.png"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSN_OB2dsQjcXvlcsG7SoMO8_UAEgcUf_x88aV35j9jDbEMhtb7"
height="200px" width="200px" alt="happyface.png"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4cmEXFbia9mgL1TkIfm-RGLmW_YZv2Cwgw2xmYifIhr3_IjNs"
height="200px" width="200px" alt="happyface.png"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjOFkDOm7nV884xaJuyFhkap9NxVUE2YVC7jh9oaHvi3oye-FL"
height="200px" width="200px " alt="happyface.png"/>
</div>
<p style="font-family:'Indie Flower',cursive; text-indent:30px;font-size:30px;padding-left:20px;text-decoration: underline;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rhoncus elit lorem, eget cursus justo porta in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet ex eget nisi cursus maximus vitae vitae libero. Mauris malesuada tellus rhoncus, congue   </p>
<footer style="background: black; height:150px; width: 100%;margin-top:60px;"> <details style="color:white; font-family:'Gloria Hallelujah',cursive;"> <summary> Your name here &copy; Your company name or organization name. </summary>  <p> More themes at <a href="https://pastebin.com/u/NeroShade" style="color:white; text-decoration:none; font-weight:bold;"> NeroShade's Pastebin </a> </p></details> </footer>
</body>
</html>