Dreamer
<html>
<head>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0,0,0,0.5);
-webkit-backdrop-filter:
blur(3px);
position: fixed;
top: 0;
width: 100%;
text-align:center;
}
li {
display:inline;
}
li a {
display: inline-block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
div {
height:auto;
-webkit-backdrop-filter:
blur(3px) saturate(150%);
display: block;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div>
<img src="https://www.imageupload.co.uk/images/2018/02/06/C33EA6A8-F2F8-4FB8-BFAD-C02815ABD146.png" alt="Ambientation Logo" width="300px" max-height="100px"">
</div>
<ul>
<li><a href="http://www.google.com/" target="_top">Home</a></li>
<li><a href="#news"target="_blank">News</a></li>
<li><a href="#contact"target="_blank">Contact</a></li>
<li><a href="#about"target="_blank">About</a></li>
</ul>
</body>
</html>