DARK THEME MINIMALIST (HTML)

<--! 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 lang="en-us">
<head>
<title> DARK THEME </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="author" content="NEROSHADE">
<base target="_blank">
  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
  <![endif]-->
<style>
body {
margin:0;
padding:0;
background: url("https://zellox.com/wp-content/uploads/2016/04/black-flowers-%E2%80%AB78629581%E2%80%AC-%E2%80%AB%E2%80%AC.jpg");
background-position:fixed;

}
p.button {
text-align:center;
font-weight:bold;
border-bottom: 1px dotted black;
width: 105px;
margin:auto;
padding:20px;
background:black;
outline: 1px solid white;
color:white;}

.hover {
position: relative;
width: 300px;
margin:auto;
margin-top: 50px;}


.tooltip {
position: absolute;
background: lightgray;
width:105;
left:100px;
margin-top: 5px;
visibilty:hidden;
opacity: 0;
transition: opacity 1s;
overflow-y: scroll;
height: 100px;
}

.content {
padding: 10px;
text-align:center;
}

.tooltip::after {
content:"";
position:absolute;
bottom:100%;
left:48%;
border-width: 5px;
border-style: solid;
border-color: transparent transparent lightgray transparent;
}

.hover:hover .tooltip {
visibility: visible;
opacity: 1;
}

.hover:hover .button {
background: white;
border-left: 5px solid black;
color:black;
cursor:pointer;
}
h1 {
width:200px;
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBCrp2Jyj6kKrQrgrtt6X_1A3INCEVkELQXPscbqt2r8ePudvM");
height: auto;
margin: auto;
padding:20px;
text-align:center;
border:3px double black;
outline: 3px solid white;
font-family:"times new roman";
color:white;
;
}

.aftertext {
width:500px;
margin:auto;
border-left:5px solid darkgray;
margin-top: 120px;
background: white;}

.aftertext p {
padding-left: 10px;
padding:20px;
}

.encase {
background: url("https://68.media.tumblr.com/a649a035f3a977c16d76ab3d0fb3d2d6/tumblr_nrbnxbfIin1tk9gi3o1_500.gif");
height:100px;
}
.links {
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-iqwKiiazGqNGohlNq6NtbojSIhIQJPqgBvA8UsK7zD2QHZL3Dd-3HzTH"
);

}


.links a  {
display:inline-block;
padding: 8px 15px;
text-align:center;
color:white;
text-decoration: none;
border-right: 1px solid white;

}

.links a:last-child {
border-right: none;
}

.links a:hover {
background: black;
border-left: 5px solid black;
font-weight:bold;
}


</style>
</head>
<body>
<div class="encase">
<h1> DARK  </h1>
<div class="links">
<p> <a href="https://pastebin.com/u/NeroShade"> MORE THEMES </a><a href="http://nero-shade.deviantart.com"> DEVIANTART</a><a href="https://ultrapoetryandartstuff.tumblr.com"> TUMBLR </a>
<a href="https://twitter.com/Nero_Shade_" style="float:right; border-left: 1px solid white;"> TWITTER </a></p>
</div>
</div>


<div class="hover">
 <p class="button"> HOVER ME </p>
   <div class="tooltip">
     <p class="content"><strong> What is HTML 5?</strong><br/> Html 5 is markup language to build webpages that are fast and interactive to the user who uses it.  </p>
    </div>
</div>
<div class="aftertext">
<p> Learning HTML is easy. As the hover text suggests, html is one of the most commonly used language. It is very light and easy so it is suggested for beginners who want to write code </p>
</div>
<div class="aftertext">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac ultrices metus, vitae tincidunt augue. Vestibulum accumsan tellus a felis posuere pellentesque. Maecenas id massa id massa cursus vehicula rhoncus ut nulla. Nullam malesuada rhoncus turpis aliquam varius. Morbi ac lacus nec turpis iaculis fermentum. Morbi urna dui, feugiat vel elit vitae, scelerisque dignissim ante. Proin congue justo id posuere pretium. In vel hendrerit dolor, eu rutrum nibh. Pellentesque volutpat quis magna sit amet consectetur. Morbi luctus sed elit ut elementum. Maecenas vestibulum sollicitudin elit, quis fermentum diam volutpat auctor. In sed tempor tellus. Fusce pharetra ultrices </p>
</div>

<footer style="background:black;margin-top:20px;">
<p style="color:white;"> NEROSHADE (c) 2017 </p>
</footer>

</body>
</html>