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 comments

  • @AyushKeshwan

    Submitted

    Here are some parts I find it difficult to code:

    1. To put icon (overlay image) on main image.
    2. To align both etherum and clock icon perfectly with their respective tags.

    All feedbacks are appreciated, Thank you in advance ^^

    Ali Ahmed 680

    @Dany-GitHub

    Posted

    You did well in this challenge but their is a small issue in all images src they don't show their perspective images to solve this issue you just need to add . for all images src or delete the / like this <img src="./images/icon-ethereum.svg" alt=""> or like this <img src="images/icon-ethereum.svg" alt=""> and because / alone refer to the root file, and the image is not there it will not load, also try not to leave alt attribute empty, if you find this image will is not important for accessibilty you can add this attribute aria-hidden="true" to img tag hope this was helpful, Have a great day and happy coding ✌

    0
  • Ali Ahmed 680

    @Dany-GitHub

    Posted

    Well Done doing this challenge 🤩 there is a small issue with the toggle button for dark and light mode I saw js file and figured out where is the problem is coming from you started with mode = 'dark' but the first case the mode is light mode not dark mode I suggest to change the mode variable to light at first then it should work fine. and another issue for mobile screen, there is no gaps between sections in the overview today part I suggest to use flex box to add gap between them. Happy coding and have a great day✌

    0
  • Ali Ahmed 680

    @Dany-GitHub

    Posted

    it's better to remove the height from the main and center all contents in the body, by using flex or gird, like this

    body {
       display: flex;
        justify-content: center;
        align-items: center;
    }
    

    I see you used box-sizing in body to reset its properties, you can choose all elements to reset their properties as well like this

    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    

    the * means assign all those properties to all elements Well done ❤✌, Happy coding

    Marked as helpful

    0
  • Ali Ahmed 680

    @Dany-GitHub

    Posted

    If you mean grid as a property you can check the document MDN if you mean grid as a whole and you can see a tutorial for it you can check this one from Scrimba Grid Scrimba

    0
  • @cnjen

    Submitted

    This is my first challenge here on Frontend Mentor and I am still new to learning HTML and CSS. Some areas that I would like feedback on and want to improve/become more comfortable with are:

    • my use if ID instead of class. There wasn't much repetition in the project, so most elements were unique.
    • an addition to the above issue, I would love some feedback on cleaner code/cutting down on repetition in CSS. Maybe there are some things that could have been put into a class, so that there was less repetition.
    • my use of flexbox. Was this best practice for this challenge, any additional feedback on how I used it.
    • the positioning of the card on the page. Was there a simpler/better way to position it like this?
    • any other feedback on responsiveness, units, better practices, etc.
    Ali Ahmed 680

    @Dany-GitHub

    Posted

    Its better to use classes instead of ID here is article for that may be useful DEV as for positioning you can center it with flex box too but you need to give the body

    height: 100vh;
    display: flex;
     justify-content: center; 
    align-items: center;
    

    since there is no much content on it the height will be auto to cut down the repetition you should use classes for that

    Marked as helpful

    0
  • Ali Ahmed 680

    @Dany-GitHub

    Posted

    For the purple on the image, You can do it with mix-blend-mode like this mix-blend-mode: luminosity; MDN

    1
  • @oc-garcia

    Submitted

    Can someone help me to make my images stay hidden after the card boundaries?

    Ali Ahmed 680

    @Dany-GitHub

    Posted

    You can set the overflow to hidden like that overflow: hidden; for more info you can see the documents MDN

    2
  • @DiegoPasaye

    Submitted

    Hi, this is my try of this SummaryComponent, i can´t fix the background image and the width of the last component "cancel" who have a many idea of the solution?

    Ali Ahmed 680

    @Dany-GitHub

    Posted

    Well Done so far there are some changes you can do

    1. Delete background-image from HTML element in CSS instead you can surround your container dev with <main></main>
    2. You can use background-repeat property to no-repeat for more info you can check the document background-repeat mdn
    3. use background-color for the bottom area
    4. you can give the body height: 100vh then center the main element
    0
  • Ali Ahmed 680

    @Dany-GitHub

    Posted

    I suggest to use css variables and u can expand your knowledge more by learning pre processor as sass or scss u will learn things as mixin , functions, extend, partials and more it will make your CSS short and u dont have to repeat so much stuff over and over, Happy coding ✌😊

    1
  • @Khadijarejjaoui99

    Submitted

    Hello friends, I have done this challenge using HTML & CSS. I am looking forward to hear your feedback. I appreciate your time :) Thank you!

    Ali Ahmed 680

    @Dany-GitHub

    Posted

    Your solution is amazing 😉, i think your forgot to set the opacity for the the left and right bottom testimonials , otherwise everything looks perfect👌🤍

    Marked as helpful

    0
  • Ali Ahmed 680

    @Dany-GitHub

    Posted

    You did great👌😊 Here are some tips to help you u can set body{ height: 100vh;,display: flex; justify-content: center; align-items: center; } to center everything instead of using margin to center the main element, for the button u can add border: none; to remove those border things , add some padding to make it wider , button { padding: 1rem 2rem } , then for hover u can do this button:hover { background color: (use the color depend on the background of the card ); border: 4px solid white; border-radius: 35px; } change the radius to make it half circle happy coding keep going ✌😊

    Marked as helpful

    0
  • Michaella 80

    @michaella23

    Submitted

    I googled up a storm trying to figure out how to pull data from JSON file in vanilla JS. planning to rebuild with React, and I know how to do it there. hopefully code will be DRYer in that version. I'm a little embarrassed of this one!

    Ali Ahmed 680

    @Dany-GitHub

    Posted

    You did an awesome work , just a small tip u can set height: 100vh; to the body to center all the elements , Happy coding

    Marked as helpful

    0