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

All solutions

  • Submitted


    What are you most proud of, and what would you do differently next time?

    👾 Hello, Frontend Mentor community. This is my solution for the Base Apparel Coming Soon Page

    I'm back! This is my second challenge using Javascript!

    If you can add something or give me some tip. I'll be happy to hear any feedback and advice!

    What specific areas of your project would you like help with?

    JavaScript!

  • Submitted


    👾 Hello, Frontend Mentor community. This is my solution for the FAQ Accordion Card community

    My first challenge using SASS and second one using JavaScript. Ehhh I still don't feel confident with JS, I tried to apply the effect to the Accordion where everything closes when one tab is open, but I did fail (need to study it more). I'll keep trying! =)

    My friend @AdrianoEscarabote explained and show me the code to apply the code to collapse the accordion tabs, but even if I saw the code I did not understood 😂 Thank you anyway bro!

    I've used the solution @ApplePieGiraffe for this challenge as a reference to apply the animation on the illustration cube. His solution for this challenge is amazing as all the other challenges he did. A great profile to follow. 🦒

    If you can add something or give me some tip. I'll be happy to hear any feedback and advice!

  • Submitted


    👾 Hello, Frontend Mentor community. This is my solution for the Interactive Rating Component

    This challenge was quite hard, was my first real Javascript challenge ever. I took a lots of time trying to find out how to make the rating buttons connect to the submit button to display the output popup showing the selected number. I had look several tutorial videos to understand the JS structure so I follow a video from this channel in youtube TsbSankara - JavaScript - Interactive Rating Component. Once I did the basic challenge I created a modal screen to request the user to select a button before submit, for the second step I had to ask a friend @AdrianoEscarabote for help and after a lots of his patience and some explanations I get it.

    🎨 I added some custom features:

    • 👨‍🔬 Custom UI Design + Animations.
    • 🧚‍♀️ Custom Modal Popup

    If you can add something or give me some tip. I'll be happy to hear any feedback and advice!

  • Submitted


    👾 Hello, Frontend Mentor community. This is my solution for the Typemaster Pre-Launch Landing Page

    I finally finished all HTML/CSS only challenges (25/25). Now I feel ready to start to study Javascript and CSS frameworks. I had a really great time learning a lots about Vanilla CSS and html structure, flex and grid layouts.

    A great challenge to sharp the Grid Layout skills and also work the layout around devices. The two aspects I spent more time was the hero section grid and the decorative pseudo-elements out of the container. Indeed to finish the pseudo-elements I had to ask help to my friend @AdrianoEscarabote that give me a lesson about the overflow property and parent/child elements.

    If you can add something or give me some tip. I'll be happy to hear any feedback and advice!

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the News Homepage

    An amazing challenge to practice grid. I didn't know any JS yet, so I created the burger menu 🍔 using only CSS.

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

    Ill be happy to hear any feedback and advice!

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the Art Gallery Website

    When I started my journey in Frontend Mentor this was my dream challenge that I always wanted to complete. Now, after 7 months (I know it took to long, but I am a noob 💁‍♂️) its done! Challenge accepted and completed.

    The challenge was really challenging, the main struggle I had building this html structure/css was with the header and the image gallery. I had some fun trying to figure out how to make the grid-template-area and after some tutorials I get how to use this tool (was my first time with grid-area).

    🎨 I added some custom features:

    • 👽 Hover Effects
    • 🧚‍♀️ CSS Animations

    🧐 Special thanks to:

    • @AdrianoEscarabote - AdrianoEscarabote Profile that helped me with the Leaflet Map (I have zero knowledge with JS so I had no idea how to include the map).
    • @VanzaSetia VanzaSetia Profile to explaining me how to make the h1 heading effect in the header with mix-blend-mode: difference.
    • @elaineleung ElaineLeung Profile To have explained me how to add CSS Animations. Now I am really happy adding motion everywhere hahaha. She is of the FEM greatest mentors.

    Tutorials used to learn grid-template-area:

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

    Ill be happy to hear any feedback and advice!

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the Suite Landing Page

    I struggled a lot positioning the hero image and the heading decoration on this challenge, was really challenging place both elements between the mobile and tablet sizes. There's a lot of aspects to improve in my CSS writing, but I am happy with the result in this challenge.

    🎨 I added some custom features:

    • 👨‍🔬 Custom UI Design + Logo.
    • 🧚‍♀️ CSS Animations

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

    Ill be happy to hear any feedback and advice!

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the Fylo Data Storage Component.

    This challenge was really challenging, was really tricky to create the pop up and position some elements. Was really fun to create the logo and customize the design, I am happy with the design output but not with the code, once I finish the remaining HTML/CSS challenges I'll focus on it!

    🎨 I added some custom features:

    • 👨‍🔬 Custom UI Design + Logo.
    • 🧚‍♀️ CSS Animations

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

    Ill be happy to hear any feedback and advice!

  • 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!

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the Clipboard Landing Page challenge.

    A quick challenge with some customization.

    I added some custom features:

    • 👨‍🔬 Custom colored footer and scroll bar**
    • 👻 Easter Egg
    • 🎨 Intro animations

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

    Ill be happy to hear any feedback and advice!

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the Fylo Landing Page With Two Column Layout challenge.

    This was a quick challenge and I did not customize it. I'm in my journey to finish all HTML and CSS only challenges now I miss only 6. I'll customize only the last 3 one that are really amazing premium solutions!

    🍚Follow me in my journey! Gotta Catch ’Em All

    PS: I'm aware of the accessibility errors but this time I'll skip it and go to the next challenge. 🥱

    Happy to hear any feedback and advice!

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the Huddle Landing Page With Curved Sections.

    I added some features:

    • 😎 I recreated the logo as a SVG (this way I could animate it).
    • 👻 I added an animation on the logo (chat-box icon flip and turn).
    • 👨‍🔬 Some custom design improvements.

    Happy to hear any feedback and advice!

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the Skilled e-Learning Landing Page!

    🤯 The main struggle I had with this challenge was positioning the hero-image overlapping the container. It took 2 days until I get help from Ahmed Bayoumi https://www.frontendmentor.io/profile/Bayoumi-dev that explained me how to create a better html structure and the overflow:hidden; property. I'm really grateful for that!

    I added some hover features:

    • 👨‍🔬 Custom hover state on the gradient card using the ~ general sibling combinator .
    • 👻 Custom hover state on card icons.
    • 🎨 custom design improvements: I fixed some box-shadows that were cropped from Figma, If you take a look in the design you'll see that the left shadow from the tablet/mobile image are cropped. I fixed it changing the shadow position on Figma.

    🕵 Happy to hear any feedback or advice!

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the Equalizer Landing Page.

    I added some features:

    • 👻 h1 span: spinning color animation;
    • 👾 Phone image on hover;
    • 🥰 2 more breaking points;

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

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the Huddle Landing Page With Alternating Sections.

    I added some features:

    • 😎 I recreated the logo as a SVG (this way I could animate it).
    • 👻 I added an animation on the logo (chat-box icon flip and turn).
    • 👨‍🔬 Some custom design improvements.

    Happy to hear any feedback and advice!

  • 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!

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the NFT Profile Card Component.

    👻This the last of my old solution that I've cleaned the HTML code and CSS(even if is not the cleanest possible yet). Since now I'll submit only new challenges. I've changed a little bit the design and add some custom hover effect inside all elements card elements.

    • 🎨 Custom Gradient Design
    • 🥃 Color Spinning hover on text
    • 🎨 Custom Icon Hover effect

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

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the Meet Landing Page.

    Another Challenge update for a challenge I've done a month ago. This challenge was important because was doing it that I've learned how to use better the container to keep the column width consistent and even more important because I've learned to use order to manipulate the elements on hover using the general sibling selector (hover on the meet and then in the iconto see what happen to the speed it turns), the logo was created with two different svgs.

    I did some personal design improvements:

    • 👨‍🔬 Logo animation with rotation and blur.
    • 👨‍💻 Hero Section with hover changing profile images
    • 🎨 Image grid zoom on hover + grayscale

    Custom card colors and quote icon.

    I'm looking forward for feedback!

    Thanks!

  • Submitted


    👾 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.

  • Submitted


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

    Last month I learned a lots stuff giving feedback and fixing my old solution. You guys don't have idea how much code I've cleaned just by deleting unnecessary divs, fixing responsivity issues cause by elements with fixed width and many other stuff like that, more I study more I realize how noob I am with CSS/HTML. But was really good to see how bad was the old solution and how I was able to fix it with the knowledge I get by giving feedback and looking the others code.

    I had to update this challenge because my friend @Adriano Escarabote told that my older solution wasn't not good enough and that was not responsive on his Nokia 3310 and also in his Apple Watch. So I paid a lots of attention in order to fix the responsiveness issues and now the solution seems a little little little better. Thank you Adriano!

    🎨 I've added some custom features:

    • 👨‍🎨 Custom Gradients
    • 🎨 Highlighted Text Animation
    • 👾 Gradient Overlay Effect

    😎 I saw multiple solutions with the exact some custom design and animations details I've add, this doesn't bother and I don't want the credits or attribution.

    😲 My advice is that instead of just copy and paste it, improve it, you can use these lines of code and improve your solution by customizing it, opening Figma and playing with your design, you'll learn a lots of stuff and possible even better results than mine, just paste and copying some lines of codes will not teach you nothing unless you try to customize it by yourself. So don't limit yourself by using a poor code and design, improve it.

    ❤️ For those who just copy the code/design and claimed that were an original solution, its fine, this shows that both of us have a good taste for design and like to customize out solutions.

    And please, feel free to leave any feedback and help me to improve my solution!

  • Submitted


    👾 Hello, Frontend Mentor coding community. This is my solution for the QR Code Component.

    Making this challenge again was something really amazing for me, first because going back through my past challenges I was able to fix some issues and clean my code and then because was my first time using JS (yes I'm a newbie) 😂

    I added some features:

    • 🎨 Dark and Light mode button
    • 👾 Custom QR Code image
    • 🧚‍♂️ A little bit of color customization
    • 👨‍💻 Custom image hover state

    I'll be happy to hear any feedback and advice!