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;
}
1 Response