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

Responsive bookmark page

@BarbarosTeoman

Desktop design screenshot for the Bookmark landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I used the svgs in an img tag, I could see them on localhost, but after deployment, the svgs weren't there. If you know the solution for this I would really appreciate it.

The page is fully responsive between 320px and 1440px.

Community feedback

@JAleXDesigN

Posted

Hello, to solve the image issue you can import the image in this way

Import the image using the path relative to the component where you use it in this case the Description component is inside the components folder, therefore to go to the assets folder we leave the components folder with "../" and enter the assets folder "../assets" and choose the image in this case "../assets/illustration-hero.svg"

import illustrationHero from "../assets/illustration-hero.svg";

export default function Description() {
return (
<div className="description">
<div className="descriptionLeft">{/**Content */}</div>
<div className="descriptionRight">
<img
src={illustrationHero} //And you make use of the imported image via 
the src prop of the img tag
alt=""
/>
<div className="elipse" />
</div>
</div>
);
}

Another way would be to place the images inside the public folder of your project, and the way to use them in the image tag would be: If you have for example an image in the public folder with the name illustration-hero.svg

<img
src="/illustration-hero.svg" //You access the public folder starting with "/" 
followed by the name of the image
alt=""
/>

In this way, when making the production build the images will also be included, since they are not currently being included in the build. I hope my answer helps you, and if you have any questions I am here to help you.

Marked as helpful

1

@BarbarosTeoman

Posted

@JAleXDesigN I really appreciate your return, I changed my code. Everything works fine.

1

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