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

First solution using HTML & css flexbox

#accessibility#backbone#materialize-css#styled-components#contentful

@dipeanthonia

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. I could not add the accent color to my image, does the accent property work with images and if does not how do I change the color of my image?
  2. I also could not use the given fonts, I made use of the default fonts, please how do I import fonts to my code using links?
  3. I made use of the overflow property to make my image sit in the div, is there a better approach I could have used. Thanks.

Community feedback

P

@12Kentos

Posted

Hey @dipeanthonia,

It looks like your code wasn't uploaded to github, but rather just a picture of your project. It's really hard for people to give advice on what to change, when we don't have access to your code. I would suggest uploading the code, and hosting it as a live site either directly through github, or you can use Netlify. (There are others of course, but these are the two most commonly used here.) If you need any help with that just let me know. :)

0

@dipeanthonia

Posted

Thanks @12Kentos, I've tried creating a live site using github but to no avail, I've been at it for hours now but it keeps on bringing this 404 error, please can you help me with it.

0
P

@12Kentos

Posted

@dipeanthonia

Try the following.

Upload your files directly to Github, all of them including the html, css files and the folder containing the images. Make sure all of them are in there outside of the original folder you downloaded them in.

Here's how my repository looks..

Repository

Once you have done this, go to settings (this is for your current repository and should be on the top bar), then go to pages. (this is on the left hand side bar) There should now be a section called "Source" with the following. "GitHub Pages is currently disabled. Select a source below to enable GitHub Pages for this repository."

There should be a button below this that currently says none. Click on it and change it to main. Click save, this will create a url where your new site is hosted. It will take a couple of minutes for Github to properly host it, but after a couple of minutes when you visit the new url it gave you, you should be able to see your project.

Let me know if this works for you!

0

@dipeanthonia

Posted

@12Kentos Thanks, I followed your instructions and it worked, my codes got uploaded and I got a live site url but my CSS is not reflecting in it, just my HTML.

0
P

@12Kentos

Posted

@dipeanthonia Glad it's live now!

I looked at your html and it's because your link to your stylesheet is not pointing to the right place anymore. Currently this is where it's pointing.

<link rel="stylesheet" href="css/style.css">

If you change it to the following, the styles should start taking affect.

<link rel="stylesheet" href="style.css" />

Also because the images are no longer in their old folder the path to them will have to change as well. Or if you want you can put those back in their folder (As I've never had an issue with the images being in a folder.)

Let me know if that works! :)

Marked as helpful

0

@dipeanthonia

Posted

@12Kentos thank you very very, my solution has been uploaded and the live URL is working. I really appreciate your help.

0
P

@12Kentos

Posted

@dipeanthonia glad it's working!

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