<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Learning to code by doing">
  <defs>
    <linearGradient id="cbg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#e9eef4"/>
      <stop offset="1" stop-color="#d3dbe6"/>
    </linearGradient>
  </defs>
  <rect width="1200" height="630" fill="url(#cbg)"/>
  <!-- editor window -->
  <rect x="220" y="120" width="760" height="390" rx="18" fill="#0f2233"/>
  <rect x="220" y="120" width="760" height="50" rx="18" fill="#1c3a52"/>
  <circle cx="252" cy="145" r="9" fill="#ff5f57"/>
  <circle cx="284" cy="145" r="9" fill="#febc2e"/>
  <circle cx="316" cy="145" r="9" fill="#28c840"/>
  <!-- code lines -->
  <g font-family="'Courier New', monospace" font-size="26">
    <text x="260" y="225" fill="#7fd1ff">def</text>
    <text x="320" y="225" fill="#ffd479">solve</text>
    <text x="408" y="225" fill="#e6edf3">(n):</text>
    <text x="300" y="270" fill="#9aa7b4">total = 0</text>
    <text x="300" y="315" fill="#7fd1ff">for</text>
    <text x="352" y="315" fill="#e6edf3">i in range(n):</text>
    <text x="340" y="360" fill="#e6edf3">total += i</text>
    <text x="300" y="405" fill="#7fd1ff">return</text>
    <text x="406" y="405" fill="#9aa7b4">total</text>
  </g>
  <!-- blinking cursor block -->
  <rect x="497" y="385" width="16" height="28" fill="#28c840"/>
  <!-- typing hands hint: simple keyboard -->
  <rect x="360" y="540" width="480" height="58" rx="10" fill="#33475b"/>
  <g fill="#5b748c">
    <rect x="378" y="556" width="34" height="26" rx="4"/>
    <rect x="420" y="556" width="34" height="26" rx="4"/>
    <rect x="462" y="556" width="34" height="26" rx="4"/>
    <rect x="504" y="556" width="34" height="26" rx="4"/>
    <rect x="546" y="556" width="34" height="26" rx="4"/>
    <rect x="588" y="556" width="120" height="26" rx="4"/>
    <rect x="716" y="556" width="34" height="26" rx="4"/>
    <rect x="758" y="556" width="34" height="26" rx="4"/>
  </g>
</svg>
