Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions12Comments9

All comments

  • Lucas 👾• 104,540

    @correlucas

    Submitted

    👾 Hello, Frontend Mentor coding community. This is my solution for the ChatApp CSS Illustration.

    This challenge was really challenging! The hardest thing was the background svg images, I tried to create these gradient elements inside the css with content: ' ' and after/before but for a reason that I don't know a huge gap was created in the bottom. So I took the shortcut to finish the solution and I've exported the svg elements from Figma ❤ and placed it in the body as background-image. Then I add some animations and changed a bit the design.

    🍚Follow me in my journey to finish all HTML/CSS only challenges (Only 4 missing)! Gotta Catch ’Em All

    Ill be happy to hear any feedback and advice!

    ChatApp CSS Illustration (Vanilla CSS)

    7

    HinaSejaru124• 310

    @HinaSejaru124

    Posted

    @correlucas when seen on a phone the phone itself seems a little bit distorted e.g the speaker is left aligned the messages overflow I think for that you needed to define a fixed width for such elements so that it should be more ... Anyway I saw the improvements ... Passed from superb to exceptional

    Marked as helpful

    0
  • Lucas 👾• 104,540

    @correlucas

    Submitted

    👾 Hello, Frontend Mentor coding community. This is my solution for the ChatApp CSS Illustration.

    This challenge was really challenging! The hardest thing was the background svg images, I tried to create these gradient elements inside the css with content: ' ' and after/before but for a reason that I don't know a huge gap was created in the bottom. So I took the shortcut to finish the solution and I've exported the svg elements from Figma ❤ and placed it in the body as background-image. Then I add some animations and changed a bit the design.

    🍚Follow me in my journey to finish all HTML/CSS only challenges (Only 4 missing)! Gotta Catch ’Em All

    Ill be happy to hear any feedback and advice!

    ChatApp CSS Illustration (Vanilla CSS)

    7

    HinaSejaru124• 310

    @HinaSejaru124

    Posted

    Actually, the 2 background objects don't fit well for large screens. In your CSS positioning, instead of using a fixed distance, I propose you to fix the distances according to percentages so as to make it a relatively absolute position according to big PC screens

    Marked as helpful

    1
  • Adriano• 33,980

    @AdrianoEscarabote

    Submitted

    👨‍💻 Hello guys.

    This is my solution to this challenge. It was a lot of fun and certainly the most challenging to do so far, I had some issues with the background elements, but I think I did a good job. My css codes are getting too big, I tried to avoid it but I couldn't hauahuahua I think it's time to start doing these challenges with some framework.

    I added some details:

    • 👨‍💻 Dark mode and light mode button
    • 🎨 Animation in the background div
    • 👨‍🎨 custom colors

    Feel free to leave feedback on how I can improve my code. 😊

    Thanks!

    👨‍💻 Chat app illustration with (HTML + CSS + JS / Dark-Light Theme)

    #accessibility

    3

    HinaSejaru124• 310

    @HinaSejaru124

    Posted

    I think it will have been better if you used body { min-height: 100vh ... } Nice job and Happy Coding

    0
  • Lucas 👾• 104,540

    @correlucas

    Submitted

    👾 Hello, Frontend Mentor coding community. This is my solution for the challenge Product Preview Card.

    🎨This is an old old old solution and the first one that I've applied some customization. I did some improvement in the code but there are many things to improve, but I was just lazy to change the html structure to use the proper tags like the picture for the image, because I was afraid to have to write again the grayscale effect on it. 🤭

    • 👨‍🔬 Custom Images + Grayscale/Saturation Hover Effect
    • 🧚‍♀️ Intro Zoom Out Animation (I need to study it more to make smooth transitions).
    • 🎨 Gradient

    Feel free to leave any feedback about my design chances and help me improve my solution or make the code clean!

    Product Preview Card (Vanilla CSS and Custom Hover State on Hero)

    10

    HinaSejaru124• 310

    @HinaSejaru124

    Posted

    You're a front-end god, but you forgot to strikethrough the other price

    Marked as helpful

    1
  • Aiyegbajeje Yusuf• 100

    @devsilvar

    Submitted

    i Struggle to refator my javascript. i dont know how to select one of the buttons in the div box while making it turn orange.

    EG i have 5 button the users can hover above. BUt when they select one it tuns orange ... now if they decide to select another button without clicking submit. it doesn't turn orange again.

    just like a review stuff, that one can change from 2 to 5 start without refresigng the page

    interactive rating componenet

    #accessibility

    2

    HinaSejaru124• 310

    @HinaSejaru124

    Posted

    Hello if you could remove the <eb> tag and add HTML Lang="en" and avoid using inline styling it would be perfect, when added to what you have already done

    0
  • PVI• 210

    @PVIdubs

    Submitted

    After so much time reviewing my css file I could not find why if I set a value to width in the illustration on the left it always renders it with a smaller value in the desktop design (The illustration is a flex element along with the texts container on the right side)

    Huddle landing page with a single introductory section w/ HTML & CSS

    #bem

    2

    HinaSejaru124• 310

    @HinaSejaru124

    Posted

    Hello, PVI. All <a> tags must have a closing tag and discernible text.INFO The type attribute for the style element is not needed and should be omitted.

    Context:

    Context: ext/css`>:host,:root ERROR CSS: Unknown pseudo-element or pseudo-class :host

    Context: }svg:not(:host).svg- ERROR CSS: transform: too few values for the property transform.

    Context: e-height,-.5em))}50%{-webkit-t ERROR CSS: transform: too few values for the property transform.

    Context: ebound,-.125em))}64%{-webkit-t ERROR CSS: transform: too few values for the property transform.

    Context: -angle,-180deg))}}@-webkit-key ERROR CSS: transform: too few values for the property transform.

    Context: ate-angle,none))}.fa-stack{dis

    Marked as helpful

    1
  • HinaSejaru124• 310

    @HinaSejaru124

    Posted

    The align attribute on the p element is obsolete. Use CSS instead. Also, use display: flex and align-items: center to your body to make your card centralised vertically

    0
  • HinaSejaru124• 310

    @HinaSejaru124

    Posted

    Your code is superb but for accessibility issues, try replacing your <h2> with <h1>

    Marked as helpful

    0
  • HinaSejaru124• 310

    @HinaSejaru124

    Posted

    Thanks for wanting to follow me up

    0