Skip to content
OverviewSolutions
7
Comments
7
Amaury Franssen
@ExploryKod

All comments

  • Amaury Franssen•180
    @ExploryKodPosted 11 months ago

    I like it. I think the "learning" badge is better than on the solution as you add some borders and shadow.

    To center a card you can use flexbox on a wrapper tag as main here

    <body><main><div class="your-card"></main></body>

    You can add display: flex and align-items / justify-content both on center on the main, main need to have width: 100%.

    Hope I could helped

    Happy coding.

    0
  • Lucas 👾•104,340
    @correlucasSubmitted over 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution to the Four Card Feature Section.

    😎 I had a lots of fun doing the challenge and doing some custom design improvements.

    This is a solution that I've finished before but I decided to update it, when I saw a solution of guy Yefry Sanchez where he applied an hover effect on the card where the icon flips while hovered, so I tried to apply something similar to mine inspired on what he did. Here's is his profile @y25sanchez . Nice solution bro!

    👻 I added some features 💀

    • 🎨 Text Gradient on main heading.
    • 🥃 Glassmorphism on card hover.
    • 🎨 Custom background.

    Feel free to leave any feedback.

    4 Card Feature Section (Vanilla CSS + Custom Design + Glassmorphism)

    13
    Amaury Franssen•180
    @ExploryKodPosted over 2 years ago

    Great job, I love it: it improve the interaction with the user, the initial design was a little too static whereas these cards are there to call us into action, make us paying attention to them. Glassmorphism is a very good technique, I will remember it. Thanks for sharing this inspiration.

    To improve it even better, why do the pointer stay identical ? May be I am wrong but if these cards contains links to another part of the website, it would be good to create a cursor pointer on the right element. However, I might be wrong and these cards may not be links. 👏🏾👏🏾

    Marked as helpful
    1
  • Dion•80
    @Dion-RSubmitted over 2 years ago

    Hi team, any feedback at all would be greatly appreciated.

    There were two things i struggled with. 1: About 2/3 down the page the background changes colour. I was unsure how to do this. I tried looking for a solution but couldn't find one.

    2: Secondly is how is set up my buttons. I made the <a> tag a block element in css and applied the same dimensions to it that i found in the Figma file. I'm not sure if this is industry practice. The way i used to do it was using padding on the <a> tag to reach the same dimension but i tried something different this time around.

    cheers :))

    landing page with responsive css

    2
    Amaury Franssen•180
    @ExploryKodPosted over 2 years ago

    Hi Dion,

    I like what you have done with this project : responsive is working and you solve the footer problem we see in the screen shot.

    To improve even more I suggest :

    • Footer, container div: Make a flex-direction of column once you reach mobile breakpoints because the footer items keep their flex-row position and they don't have enough place.
    • Paragraph color can be change to the grey the design show (but you may have a different opinion as black may be better for contrast/accessibility (?)).

    For the <a> I don't know if it is a good practice or not to change the height/width but I think the problem would be : from my point of view changing a default display from inline to block need to be the last resort, so in this case I would use padding and have the same dimension than in design through it, I made it numerous time and you can check it in dev tools.

    For the background I don't see where is the problem but I have this useful trick to color a background in two color or more, you can use linear-gradient creating clear stops with % as it is explained by MDN (see the link below) - so it is no longer a gradient but can create "sharp" bi-color backgound: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#gradient_with_multi-position_color_stops

    1
  • GeorgeBryzh•80
    @GeorgeBryzhSubmitted over 2 years ago

    • While i build project i struggled with inline svg circles positioning. I got feedback from Slack that I should make them background. I'm used background-size to change size of circles, and made responsible circles positions. I did know how to center a card component on the center of page keeping body size as browser view size. But I used .body{ height: 100vh; display: flex; align-items: center; justify-content: space-around;} (1 vh = 1% of view field height). There is very important to use justify-content: space-around instead center value, otherwise container will be about center but not in.

    • I would to know how make img hided under border without additional changes on img's border

    Responsive page, flexbox, positioning

    1
    Amaury Franssen•180
    @ExploryKodPosted over 2 years ago

    I love your project and thank you for the good advice you wrote about responsive svg circle. Happy coding !

    Marked as helpful
    0
  • Amaury Franssen•180
    @ExploryKodPosted over 2 years ago

    Hi Cwu, I love what you have done with the image on tablet size where through background-position:center the image is cropped and it is better I think on tablet. I have myself difficulties with positioning the image for every breakpoints: the image will "float" in its container and as a result cannot be properly aligned with the left part: there are too independant from each other, the same problem happen here and in my own design I am trying to fix. I'll tel you if I find the solution and I think I will try to use grid instead of flexbox to solve it.

    Have a happy coding !

    Marked as helpful
    0
  • Amaury Franssen•180
    @ExploryKodPosted over 2 years ago

    Well done. I loved using your website. I liked the well done dark mode. From a UI point of view, I liked the UI except may be the button to reset: it a personal point of view but I though it would have been better to align its size to the other button because both are from the same group and also give it a "sharper" red as color. Otherwise I find your code very interesting for beginner like me as I can learn a lot from it. I find Next js is a very good choice to "empacked" back and front end. It is a very good challenge, I think I'll do it too to try axios as I only use it once until now.

    Happy coding.

    Marked as helpful
    1
  • Amaury Franssen•180
    @ExploryKodPosted over 2 years ago

    @JosZero, Hi Jose,

    I like your code, alignements and spaces, the use of flexbox. I found it is a good choice to place background patterns/forms with background-position and background-image.

    If you wish, you can improve the responsiveness using grid system on the body itself : it helps controlling the position of the card in the center, especially in small mobile phone (as iphone 5s) without the need of changing margins at every breakpoints. The card will scale with part of the grid it is placed.

    I see you have the same accessibility issues that I experienced on this project : I created my "background patterns" outside <main> tag so without enclosing it with "landmarck elements", I enclosed it in <main></main> and the issue disappear. You can do the same with attributions by enclosing it in a <footer></footer> and create a <main></main> (ex: replace your class "container" from a div to a main tag). This will solve the accessibility issue.

    Hope I helped you with these tips. I enjoy reading your code and seeing the result. Happy coding.

    Marked as helpful
    1