html, css and javascript

Community feedback

• 

  xenovialara•80

  @xenovialara

  Posted almost 3 years ago

  I had the same problem and checked some videos to the point where people were drawing the lines manually with their code but then I realized on my own that the image was just blending into the background color. Change your .advice-container background color. It should work and also kudos to you to for writing this code ON YOUR PHONE!!!!

  01

  Marked as helpful
• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-Montano

  Posted almost 3 years ago

  Hello Robert!

  Insert a div tag in the place where you want to put the image and in CSS with the background property you insert the image. The div will have to have some width and height for the image to display.

  Another way to do it would be to insert the two svg in the HTML and show one or the other depending on the device where it is being viewed, since there are two images, one for mobile design and the other for desktop. It can look like this 👇 more or less.

  <main class="main">
      <p class="advice-number">ADVICE #<span class="number"></span></p>
      <p class="advice"></p>
      <svg class="mobile" width="295" height="16"><g fill="none" fill-rule="evenodd"><path fill="#4F5D74" d="M0 8h122v1H0zM173 8h122v1H173z"/><g transform="translate(138)" fill="#CEE3E9"><rect width="6" height="16" rx="3"/><rect x="14" width="6" height="16" rx="3"/></g></g></svg>
      <svg class="desktop" width="430" height="16"><g fill="none" fill-rule="evenodd"><path fill="#4F5D74" d="M0 8h196v1H0zM248 8h196v1H248z"/><g transform="translate(212)" fill="#CEE3E9"><rect width="6" height="16" rx="3"/><rect x="14" width="6" height="16" rx="3"/></g></g></svg>
      <button class="btn"><svg width="24" height="24"><path d="M20 0H4a4.005 4.005 0 0 0-4 4v16a4.005 4.005 0 0 0 4 4h16a4.005 4.005 0 0 0 4-4V4a4.005 4.005 0 0 0-4-4ZM7.5 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z" fill="#202733"/></svg></button>
  </main>
  

  That's an example. Implement yours based on your classes and design.

  If you have doubts, you can consult.

  Cheers!

  01