Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

html, css and javascript

Robert 60

@efyzhi

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I couldn't get the horizontal image line to show, suggestions on how to go about would be appreciated.

Community feedback

@xenovialara

Posted

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!!!!

Marked as helpful

0

Robert 60

@efyzhi

Posted

@xenovialara thanks abunch

1

@Enmanuel-Otero-Montano

Posted

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!

0

Robert 60

@efyzhi

Posted

@Enmanuel-Otero-Montano Thanks I will try this out and give you feedback.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord