hello.svg

<svg fill="none" viewBox="0 0 600 300" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="140%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        @keyframes hi  {
            0% { transform: rotate( 0.0deg) }
           10% { transform: rotate(14.0deg) }
           20% { transform: rotate(-8.0deg) }
           30% { transform: rotate(14.0deg) }
           40% { transform: rotate(-4.0deg) }
           50% { transform: rotate(10.0deg) }
           60% { transform: rotate( 0.0deg) }
          100% { transform: rotate( 0.0deg) }
        }

        @keyframes gradient {
          0% {
            background-position: 0% 50%;
          }
          50% {
            background-position: 100% 50%;
          }
          100% {
            background-position: 0% 50%;
          }
        }

        .container {
          --color-main: #ee7752;
          --color-primary: #e73c7e;
          --color-secondary: #23a6d5;
          --color-tertiary: #23d5ab;
          --color-text: white;
          --color-bar: white;

          background: linear-gradient(-45deg, var(--color-main), var(--color-primary), var(--color-secondary), var(--color-tertiary));
          background-size: 320% 320%;
          animation: gradient 15s ease infinite;

          width: 100%;
          height: 100%;

          display: flex;
          justify-content: space-between;
          align-items: center;
          color: var(--color-text);

          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
          font-size: 0.6em;
          flex-direction: row;
        }

        .hi {
          display: flex;
          align-items: center;
          font-size: 2em;
          padding-bottom: 1%;
          animation: hi 1.5s linear -0.5s infinite;
          transform-origin: 100% 100%;
          margin-left: 8px;
        }

        .vertical-line {
          align-self: stretch;
          width: .5%; 
          background-color: var(--color-bar);
          margin-left: 16px;
          margin-right: 0px;
        }

        .header-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 2%;
          width: 80%;
          height: 100%;
          justify-content: center;
          flex: 1; /* Allow the container to grow as needed */
        }

        .members-container {
          display: flex;
          flex-direction: column;
          align-items: left;
          width: 28%;
          justify-content: space-between;
          height: 90%;
          padding-top: 8px;
        }

        .members-container ul {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 90%;
        }

        .members-container ul li {
          font-size: 1.2em;
        }

        @media (prefers-color-scheme: light) {
          .container {
            --color-bar: lightgray; 
            --color-main: #F15BB5;
            --color-primary: #24b0ef;
            --color-secondary: #4526f6;
            --color-tertiary: #f6f645;
          }
        }

        @media (prefers-color-scheme: dark) {
          .container {
            --color-main: #c13da1;
            --color-primary: #1e8bd9;
            --color-secondary: #391fbd;
            --color-tertiary: #d6d62c;
          }
        }

        @media (prefers-reduced-motion) {
          .container {
            animation: none;
          }
          
          .hi {
            margin-left: 0px;
          }
        }
      </style>

      <div class="container">
        <div class="header-container">
          <h1>Hi Professor, Welcome to our Group Github</h1>
        </div>
        <div class="vertical-line"></div>
        <div class="members-container">
          <ul>
            <h2>Mike Rocchio</h2>
            <h2>Curtis Jensen</h2>
          </ul>
        </div>
      </div>
    </div>
  </foreignObject>
</svg>