svg/header.svg

<svg fill="none" viewBox="0 0 600 300" width="600" height="300" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
    .container {
      border-radius:16px;
      background: linear-gradient(43deg, #4158D0, #C850C0, #FFCC70);
      background-size: 500% 500%;
      width: 600px;
      height: 300px;
      animation: gradient 5s ease infinite;
      -webkit-animation: gradient 5s ease infinite;
      -moz-animation: gradient 5s ease infinite;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }

         
    @keyframes gradient {
      0%{background-position:0% 50%;}
      50%{background-position:100% 50%;}
      100%{background-position:0% 50%;}
    }
   
    @-webkit-keyframes gradient {
      0%{background-position:0% 50%;}
      50%{background-position:100% 50%;}
      100%{background-position:0% 50%;}
    }
    
   @-moz-keyframes gradient {
      0%{background-position:0% 50%;}
      50%{background-position:100% 50%;}
      100%{background-position:0% 50%;}
    }
    
  .blur {
     /* From https://css.glass */
    background: rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(19.5px);
    -webkit-backdrop-filter: blur(19.5px);
    border: 1px solid rgba(255, 255, 255, 0.29);
      
      width: 95%;
      height: 90%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

 .title{
    font-size:60px;
    font-family:'Roboto';
    font-weight:700;
    color:white;
    }

    .subtitle
    {
        font-family:'Roboto';
        font-size:35px;
        color: white;
        font-weight:700;
        margin-left:11px;
    }

    .subtitle-2
    {
        margin-top:40px;
        font-family:'Roboto';
        font-size:20px;
        color: white;
        font-weight:700;
    }

    .subtitle-3
    {
        font-family:'Roboto';
        font-size:18px;
        color: white;
        font-weight:300;
    }
 
      </style>

      <div class="container">
       <div class="blur">
        <div class="title">Hi, I'm Samia👋</div><div class="subtitle">Welcome to my Github Page</div><div class="subtitle-2">Areas of Interest</div><div class="subtitle-3">💊Pharmacy ⚕️Public Health 📊Data Science 💻Software Dev</div>
      </div>
    </div>
  </div>
  </foreignObject>
</svg>