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

All comments

  • Magda 235

    @magdaszsz

    Posted

    The reviews part doesn't look very good on desktop. How about trying implementing a library like swiper JS to make it work better.

    Marked as helpful

    0
  • Magda 235

    @magdaszsz

    Posted

    The github link to your code gives 404 error.

    I like your layout for tablet. Very nice. Also, when you change from daily/weekly/monthly, the text at the bottom of the card also should change to 'last day/last week/last month'. For you it stays the same, only the number of hours change.

    1
  • @pierre-pellegrino

    Submitted

    It's been a long time since I made the last challenge from FrontEndMentor. It was fun to make.

    Still I could not figure out how to use my json file with fetch and I tried many ways but nothing worked, so I cheated a bit and just created an object containing data.json

    Magda 235

    @magdaszsz

    Posted

    You fetch it like you fetch from an API. fetch('data.json') .then(res => res.json()) .then(data => console.log(data))

    with this snippet you'll see that you're logging the data.

    0
  • Magda 235

    @magdaszsz

    Posted

    It looks mostly how it's supposed to look, only the text on the white background is very light. It's barely visible, I'd make it darker. You could add a different grid layout for tablets for example, if you want to make it even better. Also, on desktop, you don't need 12 columns, only 4. There's no point in creating more columns than needed. Each would be the width of the least wide elements, the top purple and the bottom dark gray, would take 2 columns.

    Marked as helpful

    1
  • Magda 235

    @magdaszsz

    Posted

    There is no background on the navigation on mobile and it makes it barely visible. Also, on mobile, "stand out to the right audience" part isn't all visible.

    0
  • @codeguy9

    Submitted

    How I can center the div vertically? I don't know why there are so much errors on my solutions. I really can't understand them. There are too much rules to obey, you actually forget the delight of coding.

    Magda 235

    @magdaszsz

    Posted

    To center the card, you can add an additional container around the main div and give it those styles

    .container {
      height: 100vh;
      display: grid;
      place-content: center;
    }
    

    also, it would be great if you could make it responsive for mobile screens.

    1
  • Luis Colina 1,043

    @Comet466

    Submitted

    i was gonna take a break but as soon as i watch his layout i had to do it, a love the color palette and i always enjoy doing grid layouts, can somebody tell me a proper way to change the color of SVG elements? i try my best with the filter property but didnt quite match the color of the footer logo, happy coding

    Magda 235

    @magdaszsz

    Posted

    For inline svgs I usually do svg path { fill: color}

    1
  • Magda 235

    @magdaszsz

    Posted

    It's not responsive at all. You should at least make it work on small mobile screens.

    0
  • Fraser Watt 1,790

    @fraserwat

    Submitted

    This was a fun one!! Trickiest part was working with images sizes, definitely the thing in front end I find hardest.

    Still not 100% pleased with the "Graphic Design" / "Photography" section and how that changes at different page widths, so any pointers on how to approach this so the image responds more smoothly (and I don't have to rely on background colours at some points) v much appreciated! 😎

    Magda 235

    @magdaszsz

    Posted

    Looks pretty good :) I also struggle with images. I'm still doing my version and I think I switched between putting the images as backgrounds and inline elements several times.

    0
  • haquanq 425

    @haquanq

    Submitted

    Hi guys, it's me again.

    This is my solution for this page, everything is responsive to your device, all interactive element is animated as it should be! This time i've tried to write more semantic HTML markups, SCSS is kind of messy because i have deleted and rebuilded many times. Spice with some DOM Manipulation, this is it. It's done!

    The grid layout i choosed at first was hard to keep maintaining and fixing, wonder if you can solve this with a better idea.

    Any feedback would be really appreciated!

    Magda 235

    @magdaszsz

    Posted

    Looks fantastic! The animations on the slider are great! For me, this one was so far the harderst challenge. I'm done with desktop and mobile, but anything in between is messy. You're right, coming up with a design that will work across many viewport sizes is very difficult.

    0