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
OverviewSolutions51Comments25

All comments

  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    You need just an overflow-x-hidden on the body otherwise you did a geat job .

    0
  • LeandroJr730• 50

    @LeandroJr730

    Submitted

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

    I am proud of doing "the buttons" using lists because I didn't know how to use lists properly, so it took a long time but it worked. Next time I will try to focus more on selecting the right classes to change the style atributtes, because this is why I took a long time to do the buttons.

    What challenges did you encounter, and how did you overcome them?

    I had to search a lot about lists and inline-blocks because none of these approaches were working the way I wanted. But after some hard time trying different things it finally worked.

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

    My code is probably longer than needed and it could be more organized. Some tips would be gratifying. I also need some help with the @media. When I zoom in my "buttons" don't work properly, but I don't know how to fix it.

    Social Links Profile using "lists as buttons"

    1

    P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    Hi, first of all, congratulations on completing this challenge, I saw your code source and noticed some notes :

    • Instead of fixing body height, you can use max-height
    • For naming classes, try to use kebab syntax instead of camel case [kebab-syntax]
    • For the mainBox use padding to prevent using translateX for items in the list
    • Also for the mainBox you can try flex and just give it row-gap for more precise results

    Marked as helpful

    1
  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    One of perfect solutions out there .

    0
  • P
    Marc Francis• 90

    @marcfranciss

    Submitted

    **What did you find difficult while building the project? I find it difficult to set the cellphone between two divs. Also, setting up the twirly background images.

    **Which areas of your code are you unsure of? I'm unsure of the approach to make the correct placement of the cellphone and the twirly background patterns.

    **Do you have any questions about best practices? Definitely. Please advise on the correct approach on the said cellphone and twirly background patterns. Thank you!

    workit landing page

    1

    P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    Hi there , I like your solution , but there are some notes :

    • For the filled button you could initialize it with a border , then i then hover state just change the bg-color to transparent .
    • The curved sections in the bottom not that close to the design file , you can check my solution for that .

    Marked as helpful

    1
  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    Hi , your solution looks great , one thing I've noticed it's a little bit broken for tablet target , otherwise , you did a great job .

    Marked as helpful

    1
  • P
    p-tam• 170

    @p-tam

    Submitted

    The challenge was fun and pretty straight forward.

    I would say the most challenging part would be getting the hero section's sizing just right. Otherwise, the colour overlay over the footer image was a neat trick to learn as well.

    If you have any feedback regarding sizing and making the hero section responsive - let me know!

    Meet Landing Page w/ vanilla CSS

    1

    P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    Great solution for this challenge, although I noticed remarks you can improve:

    • Use footer tag instead of div with class footer.
    • The footer is not like the design for desktop version (I guess you just forgot it).

    But I liked the way you combine media-queries and images for the hero section, really good idea.

    Have a great journey.

    0
  • Rina• 100

    @dodrin

    Submitted

    Hello, I'm a Junior Full Stack Web Developer with a passion for design and front-end development. I used React and Tailwind CSS to get better at them. I appreciate your feedback!

    Loopstudios challenge React, TailwindCSS

    #react#tailwind-css

    1

    P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    Hi, nice result for this challenge, although I have some points you can improve:

    • Don't give a max-width to the body, this solution is not great for larger screens, instead you can create a container class and give it max-width and paddings (left and right only).
    • To make the text overlap the image you can use position absolute for the text.
    • For see all button, you can use an anchor tag or a button and give it the style.
    • Instead using two sections for the grid, you can use one section and put the images in a picture tag (this going to help a lot in term of responsiveness).

    Marked as helpful

    0
  • P
    Fluffy Kas• 7,735

    @FluffyKas

    Submitted

    Hey guys,

    Seemingly a simple newbie challenge but along the way I found a lot of little details that proved to be a bit tricky, like the image placement in the hero area or the decorative numbers. It was a lovely design that I really enjoyed working on.

    If you see anything out of place or anything I could improve on, don't hesitate to point out (:

    Have a great day!

    Meet Landing Page

    #accessibility#vite#sass/scss

    2

    P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    Hi, first of all your solution is great, one thing I've noticed, in larger screens the hero section has a too much space between images and text, otherwise your solution is great, especially with the transition effect on scroll down. You can check my solution and give me your feedback, that would be nice from you.

    0
  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    The most satisfying result, almost perfect.

    1
  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    For the calculate button you need to add a z-index to apply the hover effect all over the button , right now its only applying the top half of the button , otherwise the result is great .

    Marked as helpful

    1
  • Roan Macmillan• 820

    @RoanMacmillan

    Submitted

    Hey 👋

    My first guru project, let me know what you think.

    Still feel like there is quite a bit to improve on, especially refactoring the checkout component as it became a bit too long, but for now happy with it as I spent quite a bit longer on this than anticipated.

    Any feedback is appreciated!

    Audiophile Ecommerce Site

    #react#react-router#vite

    1

    P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    Hi there , i didn't see your code , but the result is pixel perfect , i have nothing to add .

    1
  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    Just wow , the result is so magnificent and pixel prefect .

    1
  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    This is simply perfect .

    Marked as helpful

    0
  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    I like your solution , the presentation , the styling , it's almost pixel perfect , you have just to take a look in the html issues , otherwise you did a great job .

    0
  • dAnIeL sWiFt• 440

    @danielswift10

    Submitted

    Learning new things each time I take up a Project on Landing Page. Here's the Responsive Fylo Landing Page using HTML & CSS Flexbox. Kindly do well to check through my design, codes, and most importantly its responsiveness on all screen widths.

    One more thing I'll like to say, please when comparing the design, kindly click on the live URL to preview the site as to get the full picture about the project.

    Lastly, Feedback on this project will be highly welcomed. Thanks.

    Happy Coding!

    Responsive Fylo Landing Page using HTML & CSS Flexbox

    #accessibility

    1

    P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    I like the solution you came up with , but i have some notes :

    • for the social media links , look for aria-label for a tag .
    • try to mimic the design as possible as you can ( i know its hard if you dont design files ) otherwise you did a good job , and good luck in you journey .
    0
  • Daniel Alejandro Contreras Martinez• 180

    @SevroAuBarca

    Submitted

    Me costo bastante, no salio como quería sinceramente, tuve muchos problemas con la imagen en versión desktop, simplemente los estilos no le afectaban, cualquier feedback se lo agradeceria porque tuve bastantes problemas con este xc

    Responsive using Sass and BEM

    #sass/scss#bem

    1

    P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    I like your solution a lot , i have one thing to add , in mobile version when the sidebar is showen add overflow : hidden to the body , to prevent scrolling down , otherwise you did a good job .

    1
  • DekiDex• 290

    @DekiDex

    Submitted

    Any feedback is appreciated.

    HTML, CSS

    2

    P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    I did not know how to make an img fully white , thankk you so much for the solution , today i learned something new and thanks to you . Beside that , you need just a liitle of enhancements (sizes , accessibilty and html issues , desktop full with , btns sytle, ....)

    Marked as helpful

    1
  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    I like your solution , is almost pixel-prefect , I suggest you fix the accessibility and html issues , i guess thay are quit basic , but i repeat your solution is great . Happy coding .

    1
  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    wow i like your solution , you did a great job , keep coding.

    1
  • Saleh• 390

    @Honko-o

    Submitted

    1. I find it hard to put a stable size for the container is there a way to better do it.
    2. I saw people put like min-width and min-height on the body then specifying fixed size on the element container I find it hard to get the purpose of all of this.
    3. When designing of Mobile I added alot of padding so that the SVG doesn't go out of the body half invisible but that screwed the centering part and the fixed width made the Box SVG half seen is there a solution for this type of problems I tried searching but I got nothing.
    4. Github Doesn't shows the SVG if it was used as background-image is there a fix for that (please don't say embed it as inline it looks messy).

    FAQ Challenge (SVG Doesn't load when used as Background image)

    #sass/scss#accessibility

    2

    P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    Hi there , check my solution you might get a little help , even i am not a super star in css , but i hope it helps a little bit . (https://www.frontendmentor.io/solutions/accordion-card-component-SyQxOIwS5)

    Marked as helpful

    1
  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    I like the way you used the transitions and animations , you could use the same thing to fade out the rating component , but in general you did a great job , i really like it . Happy coding .

    1
  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    Your solution is very nice , but something that i noticed :

    • the page contains the both of scroll bars
    • the card content need to go dow a little bit with a -2px for an example for fully cover the parent element . But i repeat your solution is good .
    0
  • P
    Mohammed BAHNINI• 1,010

    @mohammedbahnini

    Posted

    First of all , i really like your solution , however there are somethings need somme correction :

    • the cards content in the mobile view seems a little bit going down , which leaves more space in the top of it .
    • the title in the card content for the mobile is little bit bold . Otherwise this is good and happy coding .
    1