<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : MS_stretchy.html |
| Author : Marie-Sophie Seifert |
| |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stretchy</title>
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body {
font-family: Konsole;
font-size: 6vh;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.class-1 {
/* sets border width, style and color for the top part */
border-top: 2px solid black;
/* sets border width, style and color for the bottom part*/
border-bottom: 2px solid black;
/* set values for the thickness of the padding area */
padding: 10px;
/* set values for the thickness of the margin area */
margin: 0;
/* combines animation properties into a single property */
animation: letter-spacing-animation 2s ease-in-out infinite alternate;
/* specifies the behavior of the width and height properties */
box-sizing: border-box;}
@keyframes letter-spacing-animation {
/* defines spacing between the single letters at a certain point in the animation */
from {
letter-spacing: 0px;
}
to {
letter-spacing: 35px;
}
}
</style>
</head>
<body>
<p class="class-1">Stretchy</p>
</body>
</html>
