Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
17
Comments
16
Cornflakes
@CornflakesPlus

All comments

  • PhoenixDev22•16,830
    @PhoenixDev22
    Submitted over 3 years ago

    Sunnyside agency landing page HTML CSS JS

    1
    Cornflakes•290
    @CornflakesPlus
    Posted about 2 years ago

    Great Solution! Loved the social media icons animation. Keep them solutions coming.

  • P
    visualdennis•8,375
    @visualdenniss
    Submitted over 2 years ago

    Animated Rating Component in React

    #motion#animation
    3
    Cornflakes•290
    @CornflakesPlus
    Posted about 2 years ago

    Unique design, clean code, smooth render, "Alive" component, and overall amazing display. I'll have to implement some styles from here. Loved the gradient effect on the card, it feels like sunlight coming from the moving curtain. :D

    May I ask, how long have you been a web developer (years of experience)? and could you recommend any online tools or courses to learn about web development?

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq
    Submitted about 2 years ago

    INTERACTIVE RATING COMP 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 - ES6 ]

    #accessibility#bem#lighthouse
    3
    Cornflakes•290
    @CornflakesPlus
    Posted about 2 years ago

    Great job! Abdul Khaliq.

    Nice and clean code, nice Read Me structure as well. For the Screen Reader Only file (sr_only), the CSS you used is a general copy-paste? Also, how did you get the badges in the Read Me file?

  • PhoenixDev22•16,830
    @PhoenixDev22
    Submitted almost 3 years ago

    Rating component HTML CSS Js Mobile-flow first

    #accessibility#sass/scss#lighthouse
    2
    Cornflakes•290
    @CornflakesPlus
    Posted about 2 years ago

    Amazing design! Smooth transitions, ripple effect on click, card transition, everything as it should be.

    You coded 800 lines in CSS for such a small project. That's crazy! (In a good way :D)

    You must have like 10+ years of experience being a Web developer.

    23 likes.... JUST ? Bro, you need to change your profile pic into a cute pretty girl and pick a name like Rebecca Chambers. 300+ likes easily.

    I've seen people here swarming likes on the worst designs, just because the submission was by a pretty girl. LOL. Simps everywhere.

  • Cornflakes•290
    @CornflakesPlus
    Submitted about 2 years ago

    Interactive Rating Component | HTML/CSS | JAVASCRIPT

    3
    Cornflakes•290
    @CornflakesPlus
    Posted about 2 years ago

    I'm having issues with the label tag here, can anyone suggest a fix to this?

  • PhoenixDev22•16,830
    @PhoenixDev22
    Submitted over 3 years ago

    Four-card-feature-section HTML & CSS

    3
    Cornflakes•290
    @CornflakesPlus
    Posted over 2 years ago

    Nice solution Man! I loved what you did with the border-color and your handling of SVG images inside CSS. The SVG images were purely for presentation and it makes sense not to use them inside HTML. Oh and the attribution tag centered with text-align was pretty cool as well.

    I completed the challenge just about 2 days ago and wanted to check out your solution for improvements, and I learned ALOT! Keep up the good work dude!

  • Cornflakes•290
    @CornflakesPlus
    Submitted over 2 years ago

    Huddle Landing Page | Responsive

    #accessibility
    1
    Cornflakes•290
    @CornflakesPlus
    Posted over 2 years ago

    I don't understand why the link text error. I've used the aria-hidden property inside the img tag not the anchor tag, strange. Can anyone point out the issue or a workaround?

  • Vanza Setia•27,715
    @vanzasetia
    Submitted about 4 years ago

    Social Proof Section HMTL5 CSS3 Sass

    #bem#sass/scss
    2
    Cornflakes•290
    @CornflakesPlus
    Posted over 2 years ago

    Hey Vanza! Nice and clean solution.

    What's more impressive is your "Read Me" documentation. It's honestly really detailed. It seems like you spend more time on making documentation than coding 😄. Where did you learn to document in such detail?

  • Cornflakes•290
    @CornflakesPlus
    Submitted over 2 years ago

    Social Proof Section ~ FlexBox | Responsive Design

    #accessibility
    3
    Cornflakes•290
    @CornflakesPlus
    Posted over 2 years ago

    I would appreciate it if someone can give some feedback on my HTML Semantics as well, like the use of <section> tags, <div> tags, and the use of HTML for testimonials. I used <blockquote> tags with headers.

  • PhoenixDev22•16,830
    @PhoenixDev22
    Submitted over 3 years ago

    Frontend-Mentor-Profile-card-component HTML and CSS

    3
    Cornflakes•290
    @CornflakesPlus
    Posted almost 3 years ago

    Excellent way of using VH and VW as background positioning. Elegant and as always. 👍💯

  • Azka•480
    @Azkanorouzi
    Submitted almost 3 years ago

    3D Card hover effect

    4
    Cornflakes•290
    @CornflakesPlus
    Posted almost 3 years ago

    Amazing and unique. Nice, Azka! 👍✨

    When viewing your webpage on device-landscape orientation, the text is not as it should be or is it like that?

    Marked as helpful
  • PhoenixDev22•16,830
    @PhoenixDev22
    Submitted over 3 years ago

    QR code component HTML CSS JS

    4
    Cornflakes•290
    @CornflakesPlus
    Posted almost 3 years ago

    Awesome flip, Phoniex! Although, I got a little scared looking at all that <svg> tags in the index.html file. Is it that hard to make an SVG? How long did it take you? I'm intimidated I tell you. 😆

  • P
    Miran Legin•740
    @miranlegin
    Submitted almost 3 years ago

    Simple QR code card

    #grunt#sass/scss
    2
    Cornflakes•290
    @CornflakesPlus
    Posted almost 3 years ago

    Almost Pixeled Perfect solution. Well done Man! 👍✨

  • PhoenixDev22•16,830
    @PhoenixDev22
    Submitted over 3 years ago

    3-column-preview-card-component HTML &CSS

    3
    Cornflakes•290
    @CornflakesPlus
    Posted almost 3 years ago

    Hey Phoenix! How ya doing?

    You gave some incredible and well detailed feedback on my 3-column-preview-card-component. I wanted to check your solution as well for some best practices. Very nicely done, man!

    It seems like you had a little trouble with FlexBox items, me too. I know you probably figured it out because it's 7 months old LOL ;D. But anyways, by setting the FlexBox items to align-self: stretch; it worked for me.

    Another thing I noticed is that you set the min-height: 100vh but why is your card not aligned the same as the original design?

    Marked as helpful
  • Cornflakes•290
    @CornflakesPlus
    Submitted almost 3 years ago

    Mobile-First responsive 3-column preview card component

    #accessibility
    4
    Cornflakes•290
    @CornflakesPlus
    Posted almost 3 years ago

    Hmmm.. I've check my solution on VScode offline, and the card is centered perfectly but when I posted this solution, the centering does not match the original design. Can anyone point out the problem?

  • Tarık•330
    @developertarik
    Submitted about 3 years ago

    Stats-preview-card-with-css-flex

    2
    Cornflakes•290
    @CornflakesPlus
    Posted about 3 years ago

    Hi Tarik.

    For the image color, I've used the Filter property.

    filter: opacity(0.6) drop-shadow(0 0 0 rgb(165, 3, 206));
    

    You can search up the use of Filter property on CSS-TRICKS and MDN to learn more about them.

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub