Skip to content
OverviewSolutions
38
Comments
13
Ali Ahmed
@Dany-GitHub

All comments

  • Ali Ahmed•680
    @Dany-GitHub

    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 ✌

  • Ali Ahmed•680
    @Dany-GitHub

    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✌

  • Ali Ahmed•680
    @Dany-GitHub

    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
  • Ali Ahmed•680
    @Dany-GitHub

    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

  • Ali Ahmed•680
    @Dany-GitHub

    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
  • Ali Ahmed•680
    @Dany-GitHub

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

  • Ali Ahmed•680
    @Dany-GitHub

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

  • Ali Ahmed•680
    @Dany-GitHub

    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
  • Ali Ahmed•680
    @Dany-GitHub

    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 ✌😊

  • Ali Ahmed•680
    @Dany-GitHub

    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
  • Ali Ahmed•680
    @Dany-GitHub

    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
  • Ali Ahmed•680
    @Dany-GitHub

    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
  • Ali Ahmed•680
    @Dany-GitHub

    I made it that way for the main grid-template-rows: repeat(9, 1fr); for those on sides grid-row: 3 / 7; for the middle top grid-row: 1 / 5; for the middle bottom grid-row: 5 / 9; with gap: 2rem; if there is better solution i would like to know too❤