Skip to content
OverviewSolutions
0
Comments
3
Louis 🪷
@louisdtb

All comments

  • Louis 🪷•0
    @louisdtbPosted over 1 year ago

    It seems the logo is being clipped off the top of the screen and that you're using the <main> element to control positioning and layout.

    To fix this clipping issue, I suggest reorganizing your layout such that rather than having three sections within main like this:

    <main>
  <header/>
  <{content}/>
  <{picture}/>
</main>

    That you instead split your page into two layout divs, placing all content in the first and the photo decoration in the second. Like this:

    <main>
  <{content with header}/>
  <{picture}/>
</main>

    This will allow you to put a simple display: flex on <main>, to create a two-column structure.

    Flexbox will make organizing much cleaner.

    Good luck!

    1
  • metrikspacex•300
    @metrikspacexSubmitted over 1 year ago

    A lot of ideas were expressed in the code. Somewhat created a tailwindcss like utility in scss. Only problem was that I didn’t know how to express some-utility:desktop like media queries so this was abandoned. Also had a simple script that scaled the ui. Using font size of 10px on the body and writing everything in rem, you can use slope formula to scale your ui linearly. Could also use multiple regression in a similar way.

    Any feedback on how to design this better. The image switching out to absolute positioning made this harder than it should be. The margins and padding are off I’m sure. This isn’t a perfect solution as this project made me quite frustrated. Didn’t feel like this was ‘newbie’.

    skilled-elearning-landing-page

    1
    Louis 🪷•0
    @louisdtbPosted over 1 year ago

    Your submission matches many of the original features.

    Some details to look for. The original has a defined page padding, allowing all content to line up nicely. If you are consistent in your padding, your nav and footer will line up with the body content.

    There are some differences in font-size and spacing. Designers will notice if their design does not match the result. These same designers will love you for using Figma or Sketch to check that the spacing is the same. This is true for the spacing between grid items and between text elements.

    Frontend Mentor also seems to have something where the colors provided sometimes don't match the ones in the screenshots. The dark blue in the original is lighter than in your design. There is also a vertical gradient in the original page background.

    0
  • Louis 🪷•0
    @louisdtbPosted over 1 year ago

    This is a great submission. You have many details matched and it looks close to the original.

    The original seems to have a bit more padding in each column. The screen width also seems to be different, which will make your result look smaller than the original.

    If you take care to match your screenshot to the original in Figma, you will reach pixel-perfect accuracy.

    1