Test Webpage Design
Turned out pretty well... It works best if viewed in full screen view.
by Nathanael Endemann
HTML
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'/> </head>
<body>
<div id="navbar">
<div class="navbarButton">
<p class="nbarText">Home</p>
</div>
<div class="navbarButton">
<p class="nbarText"> Images</p>
</div>
<div class="navbarButton">
<p class="nbarText"> Extras</p>
</div>
<div class="navbarButton">
<p class="nbarText"> Video</p>
</div>
<div class="navbarButton">
<p class="nbarText"> Contact</p>
</div>
<div class="navbarButton">
<p class="nbarText"> About</p>
</div>
</div>
<p> <img src="http://store.storeimages.cdn-apple.com/8748/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphonese/select/iphonese-select-2016?wid=1200&hei=630&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=9xwkJ2"/> </p>
</body>
CSS
img{
border-radius:100%;
}
body{
background-color:#e74c3c;
margin: 0;
padding: 0;
text-align: center;
}
#navbar{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color:#34495e;
opacity:0.6;
width:50%;
border-radius:20px;
margin-left:auto;
margin-right:auto;
min-width:650px;
min-height:130px;
}
.navbarButton{
background-color:#95a5a6;
border:3px solid #7f8c8d;
border-radius:100%;
height:85px; width:85px;
display:inline-block;
margin-top:21px;
margin-bottom:21px;
margin-left:5px;
margin-right:5px;
}
.navbarButton:active{
background-color:#bdc3c7;
}
.navbarButton:hover{
cursor:pointer;
}
.nbarText{
display:inherit;
position:absolu;
font-family: 'Ubuntu Mono', sans-serif;
font-size:22px;
color:#2c3e50;
}