Cover letter

Prince - Sep 11 -

HTML CODE

<body> <div class="cover"> <img src="./peacock1.jpeg" class="img" alt=""> <h1>Prince</h1> <p>"Hare krishna Hare Rama"</p> <h3>Follow: webstreet_code</h3> </div> </body>

CSS CODE

`
.cover{
position: relative;
cursor: pointer;
height: 40vh;
width: 95vw;
background-color: white;
border-radius: 6px;
border: 2px solid black;
box-shadow: 0 0 5px red,
0 0 10px orange,
0 0 15px yellow,
0 0 20px green,
0 0 25px blue,
0 0 30px indigo,
0 0 35px violet;
}
.img{
position: absolute;
right: 0px;
top: 0px;
height: 150px;
width: 150px;
filter: brightness(90%) contrast(200%);
transition: all 0.8s ease; /* Smooth transition */
}

    /* Keyframes for the image movement */
    @keyframes moveImage {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(-20px, 20px); /* Move to left-bottom */
        }

        100% {
            transform: translate(0, 0); /* Return to original position */
        }
    }

    /* Hover effect on the cover div */
    .cover:hover .img {
        animation: moveImage 2s ease-in-out; /* Trigger animation on hover */
    }

    h1{
        font-size: xx-large;
        margin: 30px;
    }
    p{
        margin: 30px;
        font-size: medium;
    }
    h3{
        margin: 30px;
    }