Skip to content
OverviewSolutions
17
Comments
18
Mesut Çifci
@mesutcifci

All comments

  • Mesut Çifci•485
    @mesutcifci

    Hi Grady Congrats!

    Everything looks good.

    • you can add cursor : pointer property to social media icons.

    • may be you can reduce font-size in mobile view.

    • you should give meaningful class names to html elements. c1 and c2 are not good.

    • if you use it the right way html5 semantic tags are good. I think you used the footer element in the wrong place.

    • instead of placing it under the body, if you want you can place script tag to head section with ```defer```` attribute. If you dont know what is defer just google it.

    • nesting css selectors like this .container .c2 .shift is not best practice. You should avoid this beacuse such use makes it difficult to read code and causes performance problems.

  • Mesut Çifci•485
    @mesutcifci

    Hi Yusuf.

    Background images don't loading because the path is wrong. Change path with this url("../images/bg-desktop.svg") and background will show.

    Also you should remove overflow:hidden property from container element.

  • Mesut Çifci•485
    @mesutcifci

    Hi Mehmet, Congrats!

    Here is some advises to you:

    -Check color, font-weight, font-size of texts. There are different from the original.

    -When i shrink the page , i saw only Supervisor and Calculator cards shrink, maybe you can find better solutions. For idea check my solution click

  • Mesut Çifci•485
    @mesutcifci

    Hey Adjevise Congrats.

    We have three elements tagged as Fullstack, but when I click on the Fullstack tag I see only two jobs are listed.

  • Mesut Çifci•485
    @mesutcifci

    Hi mea-cuIpa congrats,

    We have three elements tagged as fullstack, but when I click on the Fullstack tag I see only two jobs are listed.

  • Mesut Çifci•485
    @mesutcifci

    Hey Kate,

    I realized something, click respectively Front-end, HTML and Senior then remove HTML. Normally there is only one job with the senior tag but you will see two job listed.

  • Mesut Çifci•485
    @mesutcifci

    Hi Alex Congrats.

    I think you should check width, height and position of background images on mobile view.

  • Mesut Çifci•485
    @mesutcifci

    Hi Dilan Congrats!

    Here is some advice for you from me:

    -you should check: font-size, border-radius

    -your phone design looks bigger than original design you should make smaller

    -to fixed broken design of input and button elements write this line of code border 0px or if you want, you can add custom border.

    -open responsive design mode on your browser and look ```1018px`` you will see your images overflow.

    -look 2000px on responsive mode. You will see the phone is stretch. To prevent this you can add max-width property.

    -also if you check mobile design you will see the phone don't shrink

    I know implemented these changes could be hard but if you work hard i think you can develop yourself and design.

  • Mesut Çifci•485
    @mesutcifci

    Hi Jibby congrats.

    right: -18% Your layout is overflow beacuse of this line ofcode. To prevent overflow you can add ``` overflow-x: hidden`` to html element. Also maybe you can think another approach of positioning background images.

  • Mesut Çifci•485
    @mesutcifci

    Hi Emre congrats!

    -I think you should check background images on desktop version design. It is overlapping each others.

    -If you get stuck to keep position of background images you can create another elements and you can set position of elements to absolute. Then you can set background image to these elements. Finally if you set width and height of these element with relative unit e.g percentage, vh, vw the background images keeps their positions and If you shrink the screen, the background images will also shrink.

  • Mesut Çifci•485
    @mesutcifci

    Hey, Raj

    Can you examine my solution? I think you will find answer there.

    If you don't understand the solution, please ping me. I explain.

  • Mesut Çifci•485
    @mesutcifci

    Hey Thanh, Congrats!

    I have some advices to you:

    -Could you check bg-pattern-desktop is too big than original design

    -I realize when i click arrow the illustrations also moved maybe you can prevent this

    -When i shrink screen, question section overlap on illustraions maybe you can check responsive design again(for see overlaping you can look 1010px wide)

    -on mobile design maybe you can change border-radius

  • Mesut Çifci•485
    @mesutcifci

    Hey frankie,

    Could you send screen shot before and after? Also if there are could you disable your browser exensions?

  • Mesut Çifci•485
    @mesutcifci

    Hi aaronpaulgz well done! Some components looks differents from original design.

    -header logo big from original -you should review email input element border-color, height and width

    Except these everything looks like fine to me.

  • Mesut Çifci•485
    @mesutcifci

    Hi. Well done! Your buttons looks on my device like this. click for screenshot

    Also the error message disappears after a while but error logo appears.

  • Mesut Çifci•485
    @mesutcifci

    Hello, Görkem. Well done! I realized that you are only creating desktop and mobile view. I think you can configure this layout for tablet view. Also may be some transition effect will be good. Happy coding.

  • Mesut Çifci•485
    @mesutcifci

    Hi. Congratulations.

    I'm trying to do this challenge too. I trouble with background images position 😄 Your solution is perfect.

    I want to use this in my code but i don't want just copy paste. Also i want to understand what's the idea on this solution.

    Could you explain me how your code(background-position) works.

    Thanks.

  • Mesut Çifci•485
    @mesutcifci

    Hi. Congratulations. I realize your cards have same picture. I think you should change them :).