YTSFlix_Go/static/nav.html

88 lines
2.1 KiB
HTML
Raw Normal View History

2018-11-04 14:58:15 +00:00
{{define "navigation"}}
<header>
<style>
header {
padding: 0;
margin: 0;
background: #171618;
color: #ecf0f1;
font-family: 'Open Sans', sans-serif;
width: 100%;
height: 70px;
position: fixed;
top: 0;
2018-11-04 18:00:15 +00:00
z-index: 10;
2018-11-04 14:58:15 +00:00
}
a:link,
a:hover,
a:active,
a:visited {
transition: color 150ms;
color: #95a5a6;
text-decoration: none;
}
a:hover {
color: #7f8c8d;
text-decoration: underline;
}
ul {
list-style-type: none;
}
li {
font-size: medium;
display: inline-block;
vertical-align: middle;
padding: 0 16px;
}
.nav {
margin: 0;
padding: 0;
width: 100%;
display: block;
line-height: 70px;
background: black;
}
.logo {
font-size: 2em;
font-weight: bold;
}
.top-space {
margin-top: 70px;
padding-top: 15px;
}
.search {
border-radius:25px;
background-color: #171618;
border-color: #a6a6a6;
padding: 10px;
color: white;
font-size: medium;
}
</style>
<ul class="nav">
<li class="logo">YTSFlix</li>
<li><a href="/">Home</a></li>
<li style="float: right">
<form id="search-form" action="javascript:search()">
<script type="text/javascript">
function search() {
var search = document.getElementById('search').value;
window.location = "/movies/" + search;
}
</script>
2018-11-04 16:16:50 +00:00
<input id="search" type="text" name="search" class="search" placeholder="Search" value=""/>
2018-11-04 14:58:15 +00:00
</form>
</li>
</ul>
</header>
<div class="top-space">
</div>
{{end}}