<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breathing Light Title</title>
</head>
<style>
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
@keyframes breathe {
0% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 0.5;
transform: scale(1);
}
}
.Box{
width: 100%;
height: 600px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.title {
font-size: 20px;
font-weight: 600;
animation: breathe 3s infinite;
}
</style>
<body>
<div class="Box">
<div class="title">Welcome to Our Website</div>
<div><img src="https://p26-passport.byteacctimg.com/img/user-avatar/35c5f1e45b9837645389693e68b84ef7~40x40.awebp" alt="Example Image" class="title" style="width:200px;height: auto;"></div>
</div>
</body>
</html>
