<!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
* {
    box-sizing: border-box;
    font-family: "Quicksand", sans-serif;
}

html,
body {
    padding: 0;
    margin: 0;
}

body {
    background: #141414;
    min-height: 100vh;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container .card {
	background: #fff0;
	width: 10rem;
	height: 10rem;
	padding: 1rem;
	position: relative;
	margin: 1rem;
	color: #fff;
	overflow: hidden;
}

.container .card .border {
	width: 100%;
	height: 0.25rem;
	top: 0;
	left: -100%;
	position: absolute;
	background: linear-gradient(to right, transparent 50%, #fff);
}

.container .card .border.to-left {
	animation: left 1s linear infinite;
}

.container .card .border.to-bottom {
	width: 0.25rem;
	height: 100%;
	right: 0;
	top: -100%;
	left: initial;
	background: linear-gradient(180deg, transparent 50%, #fff);
	animation: bottom 1s linear infinite;
	animation-delay: 0.5s;
}

.container .card .border.to-right {
	width: 100%;
	height: 0.25rem;
	bottom: 0;
	top: initial;
	right: 0;
	background: linear-gradient(90deg, #fff 50%, transparent);
	animation: right 1s linear infinite;
	animation-delay: 1s;
}

.container .card .border.to-top {
	width: 0.25rem;
	height: 100%;
	bottom: -100%;
	top: initial;
	right: initial;
	left: 0;
	background: linear-gradient(0, transparent 50%, #fff);
	animation: top 1s linear infinite;
	animation-delay: 1.5s;
}

@keyframes left {
    0% {
        transform: translatex(0);
    }

    100% {
        transform: translatex(200%);
    }
}

@keyframes bottom {
    0% {
        transform: translatey(0);
    }

    100% {
        transform: translatey(200%);
    }
}

@keyframes right {
    0% {
        transform: translatex(200%);
    }

    100% {
        transform: translatex(0%);
    }
}

@keyframes top {
    0% {
        transform: translatey(0%);
    }

    100% {
        transform: translatey(-200%);
    }
}

@keyframes color {
    0% {
        filter: rotate-hue(0deg);
    }

    100% {
        filter: rotate-hue(360deg);
    }
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap" rel="stylesheet">

<div class="container">
  <div class="card">
    <div class="border to-left"></div>
        <div class="border to-bottom"></div>
    <div class="border to-right"></div>
    <div class="border to-top"></div>
   Html Free Code
  </div>

</div>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>