Skip to content

Instantly share code, notes, and snippets.

@J3698

J3698/output-box-prototype.html

Last active June 9, 2019 19:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save J3698/62133baa7cb7e08319df0ccad0dff47f to your computer and use it in GitHub Desktop.
Save J3698/62133baa7cb7e08319df0ccad0dff47f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
output-box-prototype.html
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-family: Arial;
}
.shorten-output {
border: 1px solid black;
width: 380px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
background-color: rgba(0, 0, 0, 0);
border-right: none;
border-left: none;
}
.long-url {
position: absolute;
top: 0px;
left: 0px;
padding-top: 3px;
padding-left: 3px;
color: black;
background-color: white;
overflow-x: hidden;
overflow-y: hidden;
width: 70%;
height: 1em;
font-size: 75%;
white-space: nowrap;
}
.long-url:hover {
height: auto;
width: 380px;
margin-right: 2px;
box-sizing: border-box;
overflow-wrap: break-word;
word-wrap: break-word;
white-space: normal;
background-color: rgb(240, 240, 240);
}
.long-url-cover {
position: absolute;
top: 0px;
left: 0px;
padding-top: 3px;
padding-left: 3px;
padding-bottom: 3px;
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%,
white 100%);
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: 1em;
font-size: 75%;
}
.long-url:hover > .long-url-cover {
display: none;
background-color: black;
}
.site-name {
display: inline-block;
line-height: 100px;
font-size: 110%;
width: 35%;
text-align: right;
}
.short-word {
display: inline-block;
line-height: 100px;
font-size: 220%;
width: 33%;
text-align: left;
}
.copy-button {
display: inline-block;
position: absolute;
right: 23px;
top: 50%;
transform: translateY(-50%);
width: auto;
background-color: rgb(224, 254, 224);
padding: 7px;
border-radius: 3px;
font-size: 120%;
color: rgba(50, 125, 50, 1);
border: 1px solid rgba(50, 125, 50, .4);
}
.copy-button:hover {
background-color: rgb(204, 234, 204);
}
.copy-button:active {
background-color: rgb(194, 224, 194);
}
.copy-button:focus {
outline-color: rgb(0, 255, 0);
}
</style>
</head>
<body>
<div class="shorten-output">
<div class="site-name">urlmem.com/</div><div class="short-word">chaskyho</div>
<button class="copy-button">copy</button>
<div class="long-url">
https://www.amazon.com/Gildan-Ultra-Cotton-T-Shirt-2-Pack/dp/B07612754Q/ref=sr_1_8?crid=1Y7G3Z5W0MGTF&keywords=t-shirts%2Bfor%2Bmen&qid=1555745243&s=gateway&sprefix=t%2Bshirt%2Caps%2C157&sr=8-8&th=1&psc=1
<div class="long-url-cover"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment