Skip to content
OverviewSolutions
4
Comments
10
Emin Muratoglu
@scorpion61

All comments

  • Emin Muratoglu•190
    @scorpion61Posted over 3 years ago

    Hi, good work. Liked it. Small issue i saw was: You applied border-radius to all three containers. You can just apply it to the whole box. Rounded corners have original corners behind them visible. You can avoid that by using overflow: hidden

    0
  • Emin Muratoglu•190
    @scorpion61Posted about 4 years ago

    Hello @hammercait, Very nice one. I also completed the same challenge couple days ago. Looks beautiful 😉 My suggestion is to make it responsive with media queries. To be able to use media queries easier, my humble suggestion would be to use flexbox and/or CSS Grid for each section of the page. Good job again 👍

    0
  • Emin Muratoglu•190
    @scorpion61Posted about 4 years ago

    Hi Merna, Liked it, nicely designed. The only issue though, is around 1100px viewport width (and less), words and right part picture start to overlap the phone design.

    0
  • Emin Muratoglu•190
    @scorpion61Posted about 4 years ago

    Hi Natalie, very nice job. Works well. That's the main point. After this point, what you need to do is to achieve your designs in a more reccommended way. To clarify,

    1. Using responsive units like em, rem, vw, vh, %.
    2. Using flexbox and / or CSS Grid instead of absolute positiong for especially layouts (doesn't mean you should not use abs. positioning at all) will make it much easier to achieve same design and will be a lot more maintainable. Again good job on completing it.
    1
  • Emin Muratoglu•190
    @scorpion61Posted about 4 years ago

    Really loved the animation. Problem is, though, yes as @bashiroglu said above, right box is getting smashed while resizing to tab viewport. It may be solved by a min-width property.

    2
  • Robert McGovern•1,095
    @tarasisSubmitted about 4 years ago

    First attempt at anything like this.

    Spent far too long using diffchecker to compare the design image and an output grab from chrome. You can see mob-img-diff-1.png & img-diff-2-desktop-near-enough.png in the work-through directory in the repo to see how close I ended up (there is some mild diff because of the image quality, the illustration mockup has slight diff colors in it, likewise the background)

    With positioning like this, is it better to use %, rem, or px?

    I tried using 700 weight for the header "Build the ...." but it never looked right. Nor does 400 but it's close enough. What should have it been?

    How best to get the fontbook-awesome images more central in the circles?

    How close should I be looking to get?

    Huddle Single, CSS and HTML (Desktop first, Mob second)

    3
    Emin Muratoglu•190
    @scorpion61Posted about 4 years ago

    Hi Robert, good job on completing this. It looks very nice and works well with mobile. A small suggestion I d give you is it is not that important to make everything 100% exact same as mockup. I mean it should look same mark up, but a bit up / down slightly bigger / smaller doesn't matter. That's why you ended up with playing with margins a lot and waste too much time. Just my opinion. Great job again. Thanks.

    2
  • Emin Muratoglu•190
    @scorpion61Posted about 4 years ago

    Hi Carlos, nice job on completing this task. The small issue I saw, though, was after 600ish viewport width (and less), there is no margin between heading and text.

    0
  • Juliane Gaudencio•215
    @julianegaudencioSubmitted about 4 years ago

    I still have difficulty in the responsive part so it only applies the difference less than 890px, I'm starting the challenges now so some things I needed to research because it went blank, please leave your opinions.

    responsive website with pure css

    2
    Emin Muratoglu•190
    @scorpion61Posted about 4 years ago

    Hi Juliane, Very nice job. One small issue is, on tablet/phone layout, background picture repeats itself. It can be solved by changing background-size to cover I believe.

    0
  • Emin Muratoglu•190
    @scorpion61Posted about 4 years ago

    Hi MKSAWIC, You can use a hide class on share popup box which you will declare display: none on css, then activate it with JS. You can make a click event on popup, if event.target equals to window object, then add class of hide to the popup. I hope i was able to explain the logic :D

    0
  • Emin Muratoglu•190
    @scorpion61Posted about 4 years ago

    Hi Maria, Great job on completing this challenge. I loved the animation on status bar. Just footer text color can be a lighter one as it is hard to see.

    0