SVG HyperTerm Icon

HTML
<html> <head> <meta charset="utf-8"/> <title>HyperTerm</title> <link href="style.css" rel="stylesheet"> </head> <body> <div class="term"> <div class="screen"> <div class="lightning-symbol"> <svg id="lightning" width="14px" height="24px" viewBox="0 0 14 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>lightning-symbol</title> <defs></defs> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Icon-Copy" transform="translate(-477.000000, -480.000000)" fill="#FFFFFF"> <g id="Group-2" transform="translate(468.000000, 471.000000)"> <g id="Group" transform="translate(8.977578, 9.402314)"> <g id="lightning-symbol"> <g id="Capa_1"> <polygon id="Shape" points="13.1622036 12.6501356 7.72726309 9.77512572 11.6702713 0 0.0222466857 10.4984316 5.13945035 13.9608702 1.5141789 23.1495601"></polygon> </g> </g> </g> </g> </g> </g> </svg> </div> <div class="caret-symbol"> <svg id="caret" width="14px" height="4px" viewBox="0 0 14 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Caret</title> <defs></defs> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Icon-Copy" transform="translate(-494.000000, -499.000000)" fill="#FFFFFF"> <g id="Group-2" transform="translate(468.000000, 471.000000)"> <g id="Group" transform="translate(8.977578, 9.402314)"> <rect id="Rectangle-2" x="17.1986836" y="19.3275318" width="13.2297566" height="2.57700424"></rect> </g> </g> </g> </g> </svg> </div> </div> </div> <div class="logo"> <div class="title"><b>Hyper</b>Term <span style="font-size: 12px; display: block; margin-top: 6px; color: #999">JS/HTML/CSS Terminal</span></div> </div> </body>
CSS
@keyframes blinking { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes animatedBackground { 0% { background-position: -200px -200px; } 100% { background-position: 200px 200px; } } html, body { background: #000; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .term { padding: 3px; width: 88px; height: 76px; border-radius: 5px; background: #ff1bb4; background: -moz-linear-gradient(top, #ff1bb4 0%, #ffb300 100%); background: -webkit-linear-gradient(top, #ff1bb4 0%,#ffb300 100%); background: linear-gradient(to bottom, #ff1bb4 0%,#ffb300 100%); } .screen{ height: 100%; background-color: #000; border-radius: 3px; background-image:url('https://dl.dropboxusercontent.com/u/11287988/Zeit/HyperTerm/static/reflection.svg'); background-repeat: no-repeat; animation: animatedBackground 4s ease infinite; } .lightning-symbol{ float: left; margin: 5px 0 0 5px; } .caret-symbol{ float: left; margin: 15px 0 5px 0; animation: blinking 1s ease infinite; animation-delay: .5s; } .logo{ margin-top: 25px; text-align: center; } .logo .title b { font-weight: 500; } .title { color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }
JAVASCRIPT
Expand for more options Login