Skip to content

Instantly share code, notes, and snippets.

@J3698

J3698/input-prototype.html

Last active June 9, 2019 19:07
Show Gist options
  • Save J3698/c4da1ed920979bf9b5f8f7131493a32d to your computer and use it in GitHub Desktop.
Save J3698/c4da1ed920979bf9b5f8f7131493a32d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
input-prototype.html
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-family: Arial;
}
.shorten-options {
position: absolute;
top: 160px;
left: 650px;
width: 680px;
}
input[type="text"], .shorten-button {
border: 1px solid black;
}
.url-input, .custom-input {
font-size: 45px;
margin-bottom: 4px;
padding-left: .2em;
padding-right: .2em;
}
.url-input, .shorten-button, .custom-input {
box-sizing: border-box;
}
.url-input {
height: 60px;
width: 100%;
padding-right: 125px;
}
.shorten-button {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 120px;
padding: 1px 5px 1px 5px;
font-size: 200%;
box-shadow: none;
background-color: rgb(100, 200, 100);
color: white;
-webkit-appearance: none;
}
.shorten-button:focus {
outline-color: rgb(0, 255, 0);
}
.shorten-button:hover {
background-color: rgb(90, 190, 90);
color: rgb(240, 240, 240);
}
.shorten-button:active {
background-color: rgb(85, 180, 85);
color: rgb(220, 220, 220);
}
.custom-input {
height: 35px;
width: 100%;
font-size: 30px;
}
.custom-input-span {
display: table-cell;
width: 100%;
}
.site-name {
font-size: 30px;
display: table-cell;
padding-right: 5px;
}
</style>
</head>
<body>
<div class="shorten-options">
<input type="text" placeholder="url to shorten" class="url-input" tabindex="1">
<button class="shorten-button" tabindex="3">shorten</button>
<br>
<span class="site-name">urlmem.com/</span>
<span class="custom-input-span">
<input type="text" placeholder="optional custom url" class="custom-input" tabindex="2">
</span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment