<!DOCTYPE html>
<html lang=en>
<head>
<title>Short: the simple url shortener</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
body {
background: #D3DEEA;
}
form{
position:fixed;
top:32%;
left:35%;
width:500px;
font-family:georgia,garamond,serif;
font-size:16px;
}
.bottom {
position:fixed;
top:30%;
left:35%;
width:500px;
}
p {
text-align: center;
font-family: 'Lato', sans-serif;
color: #585959;
font-size: .6em;
margin-top: -20px;
text-transform: uppercase;
}
.search {
text-align: center;
}
.search-bar {
border: 1px solid #BFC0C0;
padding: 5px;
height: 20px;
margin-left: -30px;
width: 200px;
outline: none;
&:focus {
border: 1px solid #D3DEEA;
}
}
.search-btn {
position: absolute;
width: 30px;
height: 32px;
border: 1px solid #BFC0C0;
background: #BFC0C0;
text-align: center;
color: #EDEDED;
cursor: pointer;
font-size: 1em;
outline: none;
&:hover {
background: #EDEDED;
border: 1px solid #EDEDED;
color: #BFC0C0;
transition: all .2s ease;
}
}
</style>
</head>
<body>
<div class="bottom">
<p>Welcome to Short, the simple URL shortener,
<br>
Type an URL below to shorten it</p>
<form class="search" action="/" method="POST">
<input type="text" id="url" name="url" class="search-bar" placeholder="http://something :)">
<button type="submit" value="Submit" name="Submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</form>
</div>
</body>
</html>