HTML/CSS - 🎉😃 It Is SoloLearn's 4th Birthday 😃🎉 Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>SoloLearn's Birthday</title>
<!-- * * * * * * * * * * * * * * *
     *                           *
     *    By Hasan Amr Soliman   *
     *                           *
     * * * * * * * * * * * * * * * -->
     
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
     <script>
      window.onload=function() {
    swal({   
    title: "<small>Happy Birthday</small><br>❤SoloLearn❤",   
    text: "Don't Forget to press the link at the bottom of the card to leave a comment saying how SL helped you 😃",
    html: true 
    });}   
     </script>
    </head>
    <body>
    
    <div><img src="https://lh3.googleusercontent.com/_Kj4iKeoQh8GsIYqO7t5TGnbnHcTgM1LbmW47XY9q5LNhpGkVq3cLM6Fnyw6JVLlboQ=w300-rw"/>
</div>
    
    <div id="main">

css

body {
    background-color:  #FAEFD9;
    font-family: Caflisch Script Pro, cursive;
}
img {
    width : 95px;
    height : 95px;
    animation : spin 2s linear infinite;
}
@keyframes spin { 100% { transform : rotate(360deg); } }
#main {
    background-color:  #C1C8FE;
    height: 274px;
    border-radius: 25px 25px 25px 25px;
    box-shadow: 7px 8px 4px 0px  #888888;
}
#d {
    position:absolute; 
    bottom:0; 
    right:0;
}
p {
    text-align: center;

BROWSER

Console